Widget Fanspage Facebook Dan Twitter Melayang Di Blog

August 13, 2015
Widget Melayang Di Blog

Hello.. Sobat BagasUnix, ketemu lagi dengan saya :D
Kali ini saya ingin membagikan cara memasang Widget Fanspage Facebook dan Twitter Melayang di Blog. Sering kali saya liat di blog yang lain, mereka kebanyakan memakai Widget Fanspage Facebooknya untuk promosiin Fanspage Blognya tersebut. Selain Widget Fanspage Facebook itu hanya di sidebar ada juga yang melayangnya, kali ini saya akan membagikan cara memasang widget fanspage facebook dan twitter melayang di blog.


Ok langsung saja.
  1. Buka Blogger,
  2. Masuk ke Dasbor Blog,
  3. Kemudian Klik Tata Letak,
  4. Tambahkan Gedget, (Terserah mau sobat taruh mana)
  5. Masukan script dibawah ini,
  6.  <style type='text/css'>
    /* Message Box */
    #box-message {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:16px;
    background:#fff;
    font:normal Dosis, Georgia, Serif;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    #box-message a.close {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:22px;
    cursor:pointer;
    }
    #twitterx {
    background: #EEF9FD;
    padding: 10px;
    text-align:center;
    border: 1px solid #C7DBE2;
    border-top: 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // Animate Top Value When Page Loaded Completed
    $('#box-message').animate({top:"50px"}, 1000);
    // Remove Mailbox When Close Button On Click
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='box-message'>
    <!-- HTML Start -->
    <center><a class="murub">Silahkan dilike untuk update lainnya ^_^</a></center>
    <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BagasUnix?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
    </center>
    <!-- HTML End -->
    <br/>
    <div class="twitter">
    <!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=Aldinopratama04&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
    <div style="text-align: center;">
    <a href="http://bagasunix.blogspot.com/2015/08/widget-fanspage-facebook-dan-twitter-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
    <a class='close' href='#'>&times;</a>
    </div> 
  7. Ganti Tulisan BagasUnix dan Aldinopratama04, ganti dengan fp dan twitter sobat.
  8. Klik Simpan Setelan dan lihat lah di blog sobat ^_^
Jika ada yang tidak sesuai dengan template sobat silahkan di edit / modif sendiri :D

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

4 comments

nah ini nih, yang selama ini aku cari. Ternyata caranya gampang juga, thanks gan tutorialnya, entar dicoba :)

Balas

mantap gan, bisa dicoba :D

Balas

Mohon berkomentar yang relavan dan tidak menaruh link hidup yah ^_^