Menambahkan Floating Share Button Vertical

Maksud dari Floating Share Button Vertical, kalau dibahasa Indonesiakan adalah tombol berbagi yang melayang. Seperti yang sudah-sudah dibahas di tulisan-tulisan terdahulu, saat ini blog tidak bisa dipisahkan dengan sosial media lain, semisal twitter, facebook dan yang baru google+. Orang menjadi lebih suka berbagi (share) ke teman-temannya dengan menggunakan atau lewat sosial media tersebut.

Untuk itulah, blog sudah selayaknya pula untuk memasang share button atau tombol berbagi ke beberapa sosial media yang populer, seperti twitter dan facebook. Kali ini Belajar Ngeblog di BLOG akan bebagi cara menambahkan atau memasang floating share button, yang dipasang secara vertikal. Button atau tombol yang dipakai adalah like atau sukanya facebook, tweetnya twitter dan +1nya google. Di share button memakai model count, yaitu menampilkan angka sudah berapa kali dibagi (share).

Dengan memasang  Floating Share Button Vertical tentu saja membuat pembaca akan lebih muda untuk berbagi (share) tulisan yang dianggapnya menarik atau bermanfaat. Selain itu button akan selalu mengikuti, karena memang itu dibuat float atau melayang. Sehingga akan lebih menarik untuk pembaca menggunakan button itu.

Cara Menambahkan Floating Share Button Vertical
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="top:150px;left:20px;">
<div class="addthis_toolbox addthis_default_style">
<span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>
<span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span>
<span><a class="addthis_button_tweet" tw:count="vertical"></a></span>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

5. Simpan jika sudah selesai.

Kita dapat mengubah letak melayangnya share button tersebut, 150 itu adalah jarak dari atas dan 20 itu adalah jarak dari samping. Bersiaplah untuk blog kita lebih terintegrasi dengan dengan sosial media, dan memantau sudah berapa kali postingan (tulisan) kita dibagikan ke facebook, twitter atau diberi +1.

Cara Membuat Beautiful Slide Out Navigation di Blog

1. login blog
2. rancangan -> edit HTML
3. cari kode ]]></b:skin>
4. taruh kode dibawah ini diatas kode ]]></b:skin>

    /*----------------     Beautiful Slide Out Navigation     -------------------------------*/     .headerfixed             {                 width:600px;                 height:56px;                 position:absolute;                 top:50%;                 left:10px;                 background:#fff url(title.png) no-repeat top left;             }     ul#navixed {         position: fixed;         margin: 0px;         padding: 0px;         top: 0px;         right: 10px;         list-style: none;         z-index:999999;         width:721px;     }     ul#navixed li {         width: 103px;         display:inline;         float:left;     }     ul#navixed li a {         display: block;         float:left;         margin-top: -2px;         width: 100px;         height: 25px;         background-color:#000;         background-repeat:no-repeat;         background-position:50% 10px;         border:1px solid #BDDCEF;         -moz-border-radius:0px 0px 10px 10px;         -webkit-border-bottom-right-radius: 10px;         -webkit-border-bottom-left-radius: 10px;         -khtml-border-bottom-right-radius: 10px;         -khtml-border-bottom-left-radius: 10px;         text-decoration:none;         text-align:center;         padding-top:80px;         opacity: 0.7;         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);     }     ul#navixed li a:hover{          background-color:#000;     }     ul#navixed li a span{         letter-spacing:2px;         font-size:11px;         color:#FFF;             }     ul#navixed .home a{         background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png); 

5. lalu cari kode </head>
6. taruh kode dibawah ini diatas kode </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>         <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>     <script type='text/javascript'>                 $(function() {                     var d=300;                     $(&#39;#navixed a&#39;).each(function(){                         $(this).stop().animate({                             &#39;marginTop&#39;:&#39;-80px&#39;                         },d+=150);                     });                     $(&#39;#navixed &gt; li&#39;).hover(                     function () {                         $(&#39;a&#39;,$(this)).stop().animate({                             &#39;marginTop&#39;:&#39;-2px&#39;                         },200);                     },                     function () {                         $(&#39;a&#39;,$(this)).stop().animate({                             &#39;marginTop&#39;:&#39;-80px&#39;                         },200);                     }                 );                 });             </script>

7. cari lagi kode yang seperti ini <body>
8. lalu taruh kode dibawah ini tepat diatas kode <body>

<ul id='navixed'>             <li class='home'><a href='#'><span>Home</span></a></li>             <li class='about'><a href='#'><span>About</span></a></li>             <li class='search'><a href='#'><span>Search</span></a></li>             <li class='photos'><a href='#'><span>Photos</span></a></li>             <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>             <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>             <li class='contact'><a href='#'><span>Contact</span></a></li>         </ul>

9. simpan

NB :
ganti # dengan link yang sobat inginkan

selamat mencoba ya sobb.......