Membuat Widget SlideBox di Blogger

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

Junior Iqfar Blog's | Cara Membuat Widget SlideBox di Blogger | Widget Facebook, Twitter, Google+, Youtube | Alhamdulillah pada hari ini saya masih bisa memposting artikel tentang Widget SlideBox dimana widget ini terletak disebelah kanan blog saya. Karena tutorial ini ada yang merequest dari sobat blogger sejak lama, mohon maaf jika tutorialnya baru saya buat karena saya sangat sibuk dengan tugas kampus yang banyak dan jadwal kuliah yang tidak menentu, jadi saya sampai di rumah tinggal capeknya.

Widget ini terdiri dari empat widget sekaligus, yaitu terdapat facebook, twitter, google+, dan youtube. Bila sobat belum mempunyai fans page facebook, silahkan sobat membaca artikel saya tentang membuat fans page di facebook. Kemudian jika sobat belum memiliki widget twitter, silahkan sobat membaca artikel tentang membuat widget twitter.

Sekarang bila sobat tertarik dengan widget slidebox ini silahkan sobat perhatikan tutorial atau langkah - langkah yang saya buat. Untuk itu silahkan menyimak tutorialnya.

Membuat Widget SlideBox di BloggerKlik disini untuk melihat demo Membuat Widget SlideBox di Blogger

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

img, a {
border: 0;
}
#likebox_1 {
    z-index: 10005;
 border: 2px solid #3c95d9;
 background-color: #fff;
 width: 196px;
 height: 363px;
 position: fixed;
 top: 18%;
 right: -200px;
}
#likebox_1_1 {
 width: 196px;
 height: 363px;
 overflow: hidden;
}
#likebox_1 img {
 position: absolute; 
 top: -2px; 
 left: -35px; 
}
#likebox_1 iframe {
 border: 0px solid #3c95d9;
 overflow: hidden; 
 position: static;
 height: 370px;
 left: -2px;
     top: -3px;
}
#polecam_1 {
    z-index: 10004;
 border: 2px solid #6CC5FF;
 background-color: #6CC5FF;
 width: 246px;
 height: 363px;
 position: fixed;
 top: 35%;
 right: -250px;
}
#polecam_1_1 {
 width: 246px;
 height: 363px;
 overflow: hidden;
}
#polecamy_img {
 position: absolute; 
 top: -2px; 
 left: -35px; 
 border: 0;
}
#google_1 {
    z-index: 10003;
 background-color: #006ec9;
 border: 2px solid #006ec9;
 border-top: 2px solid #0056a0;
 border-bottom: 2px solid #0056a0;
 border-right: 2px solid #0056a0;
 border-left: hidden;
 width: 152px;
 height: 97px;
 position: fixed;
 right: -154px;
}
#google_1_1 {
 width: 152px;
 height: 97px;
 overflow: hidden;
}
#google_img {
 position: absolute; 
 top: -2px; 
 left: -33px; 
 border: 0;
}
#youtube_1 {
    z-index: 10003;
 border: 2px solid #303030;
 background-color: #fff;
 width: 300px;
 height: 97px;
 position: fixed;
 right: -303px;
}
#youtube_1_1 {
 width: 300px;
 height: 97px;
 overflow: hidden;
}
#youtube_1 img {
 position: absolute; 
 top: -2px; 
 left: -35px; 
}

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 src='http://dl.dropbox.com/u/22738692/SlideBox/script.js' type='text/javascript'></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 id="likebox_1" />
   <div id="likebox_1_1" />
      <img src="http://i766.photobucket.com/albums/xx310/Ikhfar/Facebook.png" alt="" />
      <iframe src="=== URL FANS PAGE SOBAT ====" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 200px; height: 365px;" allowtransparency="true"></iframe>
   </div>
</div>
<div id="polecam_1" />
   <div id="polecam_1_1" />
      <img id="polecamy_img" src="http://i766.photobucket.com/albums/xx310/Ikhfar/Twitter.png" />
      === MASUKKAN CODE TWITTER SOBAT DISINI ===
   </div>
</div>
<div id="google_1" style="top: 52%;" />
   <div id="google_1_1" />
      <img id="google_img" src="http://i766.photobucket.com/albums/xx310/Ikhfar/Google.png" />
      <script type="text/javascript" src="http://apis.google.com/js/plusone.js">
      {lang: 'en-US'}
      </script>
         <div style="color: #999; padding-top: 15px; padding-left: 40px; margin: 5px; width: 98px; height: 97px;">
            <g:plusone size="tall" href="=== URL BLOG SOBAT ===" count="0"></g:plusone>
         </div>
   </div>
</div>
<div id="youtube_1" style=" top: 69%;" />
   <div id="youtube_1_1" />
      <iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=samsungusatube" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
      <img src="http://i766.photobucket.com/albums/xx310/Ikhfar/YouTube.png" alt="" />
   </div>
</div>

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

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

Artikel Terkait