Cara Membuat Share Jquery Untuk Blog

Khairul Abdal- Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini saya akan membawa postingan terbaru dan terhangat.

Untuk Pasang Tombol Share Jquery untuk Blogger cukup ikuti langkah-langkah berikut.

1. login ke blogger >> Tata Letak >> Edit HTML
2. setelah itu cari kode </head> lalu tambahkan kode di bawah ini (kalau kode di bawah ini sudah ada di template sobat tidak usah menambahkannya lagi)
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
3. Setelah itu tambahkan kode di bawah ini tepat di bawah kode yang baru di tambahkan
   
   
   <script type='text/javascript'>
   (function($){
   $.fn.sharebox = function(){
   var element = this;
   
   $(element).find(&quot;li&quot;).each(function(i){
   $(this).css(&quot;z-index&quot;, 10- i);
   if (i&gt;0)
   $(this).css(&quot;left&quot;, i * 24 + 100);
   });
   
   }
   })(jQuery);
   </script>
   <script type='text/javascript'>
   $(document).ready(function(){
   $(&quot;#sharebox&quot;).sharebox();
   });
   </script>
4. Selanjutnya tambahkan lagi kode di bawah ini tepat di atas kode ]]></b:skin>
   
   
   /* SosialBookmark Jquery*/
   
   #sharebox{
   height:48px;
   width:400px;
   margin:0;
   padding:5px 0;
   }
   
   ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
   ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
   ul.sharebox li a { margin:0 0 0 -24px; display:block;}
   ul.sharebox li a:hover { margin:0 0 0 -8px; }
   ul.sharebox li img { border:none;}
5. Nah lagi-lagi kita tambahkan kode di bawah ini tepat di bawah atau sesudah kode <data:post.body/>
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <ul class='sharebox' id='sharebox'>
   
   <li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>
   
   <li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>
   
   <li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>
   
   <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>
   
   <li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>
   
   <li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>
   
   </ul>
   </b:if>
   
6. Simpan
7. Selesai dan lihat hasilnya

 Senang telah berbagi informasi dan ilmu kepada kawan dan semuanya... Terima kasih telah berkunjung hari ini,untuk membaca sebuah Artikel yang tiada artinya Wassalamualaikum....

Share :

Tweet

More

Related Post