Membuat Slide Share dengan jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar Blog's | Membuat Slide Share dengan jQuery | Membuat Floating Slide Share dengan jQuery | Alhamdulillah sekarang saya masih bisa memposting di blog saya dan artikel sekarang adalah tentang tips blogging dan berkaitan dengan jQuery karena menggunakan jQuery widget yang rasanya monoton menjadi lebih bergaya, hehehe,,,

Pada waktu sebelumnya saya telah memposting tentang Cara Membuat SlideBox di Blogger menggunakan jQuery, jika sobat blogger belum membacanya silahkan saja sobat membaca dulu siapa tahu sobat blogger ingin membuat widget tersebut.

Bila sobat ingin mengetahui bagaimana widget slide share ini, silahkan saja sobat melihat - lihat dulu demonya di bawah ini. Dan jika sobat ingin membuatnya, silahkan saja sobat mengikuti langkah - langkah yang saya buat berikut ini.

Membuat Slide Share dengan jQueryKlik disini untuk melihat demo Membuat Slide Share dengan jQuery

Meletakkan CSS dan Javascript di template blog

1. Masuk ke akun blogger sobat
2. Setelah masuk ke akun, silahkan sobat masuk ke Rancangan, kemudian masuk ke Edit HTML
3. Jangan Lupa centang Expand Template Widget
Expand Template Widget
4. Kemudian coba sobat cari kode di bawah ini dengan menekan tombol CTRL + F

]]></b:skin>

5. Setelah ketemu copy kode di bawah ini

.slideshare {
background: url("http://i766.photobucket.com/albums/xx310/Ikhfar/tab_left_vertical.png") no-repeat scroll right top transparent !important;
display: block;
float: left;
height: auto;
padding: 0 40px 0 5px;
width: 65px;
z-index: 99999;
position: fixed;
left: -70px;
top: 100px;
}
.slideshare div {
border: none;
position: relative;
display: block;
}
#floatingbuttons {
background: #fff;
border-radius: 5px 5px 5px 5px;
border: 1px solid #CCCCCC;
float: left;
padding: 0 0 3px 0;
bottom: 15%;
z-index: 399;
}
#floatingbuttons .floatbutton {
float: left;
clear: both;
margin: 5px 4px 0 4px;
}
.addbuttons {
clear: both;
text-align: center;
padding-top: 5px;
}
.addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
color: #000;
background: none;
font-family: arial, sans-serif;
display: block;
font-size: 9px;
font-weight: bold;
text-decoration: none;
line-height: 11px;
}
.addbuttons a: hover span {
color: #fff;
background: none;
text-decoration: underline;
}

6. Dan paste sebelum kode

]]></b:skin>

7. Tambahkan framework jQuery.
   INGAT, jika pada template sobat sudah terdapat framework jQuery, maka code di bawah ini TIDAK PERLU di tambahkan.
   Jika template sobat belum terdapat framework jQuery, maka copy code di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan sebelum code

</head>

atau sesudah code

</b:skin>

8. Selanjutnya silahkan sobat copy script yang ada di bawah ini

<script type='text/javascript'>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".slideshare").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>

9. Dan paste sebelum code

</head>

10. Simpan template sobat

Meletakkan kode HTML

1. Silahkan sobat masuk ke Rancangan, kemudian Elemen Laman
2. Kemudian tambah gadget
3. Lalu sobat pilih HTML / Javascript
4. Untuk judulnya silahkan sobat kosongi saja
5. Kemudian copy code di bawah ini

<div class="slideshare" style="">
<div>
   <div id='floatingbuttons' title="Share this post!">
      <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
      <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script>
      <!-- Medium Button -->
      <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
         <div class='floatbutton' id='facebook'>
            <fb:like layout="box_count" show_faces="false" font=""></fb:like>
         </div>
         <div class='floatbutton' id='google+1'>
            <g:plusone size="tall"></g:plusone>
         </div>
         <div class='floatbutton' id='stumbleupon'>
            <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
         </div>
         <div class='floatbutton' id='digg'>
            <a class="DiggThisButton DiggMedium"></a>
         </div>
         <div class='floatbutton' id='twitter'>
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
         </div>
   </div>
</div>
</div>

6. Kemudian paste code di kotak konten
7. Klik simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait