4/14/2013

Cara Menambahkan Widget Recommended Post Slide Out

Widget Recommended Post Slide Out Widget yang sangat populer di dunia blog widget ini digunakan untuk mempermudah pengunjung untuk menemukan post yang ia cari yang ada di blog anda.

Widget ini mempunyai
fitur seperti like facebook, google plus, dan twitter, dengan tombol close, dan tombol tanda tanya. yang mempunyai fungsi masing-masing. widget ini adalah widget yang sama fungsi dari widget You Might Also Like. Widget ini Menggunakan Kode CSS dan Javascript, Dan Ukurannya Tidak Terlalu Besar dan dibuat oleh WidgetGenerator. Berikut Dibawah Adalah Cara Untuk Membuatnya :

  • Silahkan Masuk Ke Blogger Anda.
  • Lalu, Klik Menu Template, --> Terlebih Dahulu Untuk Mencadangan Template, Lalu Klik Tombol Edit HTML.
  • Cari Kode <data:post.body/> dengan menekan CTRL+F.
  • Masukan Kode Berikut Ini Dibawah Kode <data:post.body/> :
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

  • Lalu, Klik Tombol Simpan Template.
  • Setelah Itu, Klik Tombol Tata Letak --> Tambahkan Gadget HTML.
  • Paste Kode Berikut ini :
<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #434343;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#434343;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}
</style>
<script language="javascript">
document.write( unescape( '%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%22%3E%20%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%68%65%6C%70%22%3E%3F%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%65%78%70%61%6E%64%22%3E%2B%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%63%6C%6F%73%65%22%3E%58%3C%2F%64%69%76%3E%0A%20%3C%70%3E%52%65%63%6F%6D%6D%65%6E%64%65%64%20%66%6F%72%20%79%6F%75%3C%2F%70%3E%0A%20%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%69%6D%61%67%65%22%3E%3C%2F%64%69%76%3E%0A%20%3C%64%69%76%20%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%74%69%74%6C%65%22%3E%3C%69%6D%67%20%62%6F%72%64%65%72%3D%22%30%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%6A%43%46%6A%6D%66%59%68%34%54%6F%2F%55%4E%67%59%61%44%66%64%75%66%49%2F%41%41%41%41%41%41%41%41%47%46%59%2F%52%72%4F%64%79%2D%4A%63%6F%69%77%2F%73%31%36%30%30%2F%4D%44%2D%6C%6F%61%64%69%6E%67%2E%67%69%66%22%20%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%74%6F%6F%6C%62%6F%78%20%61%64%64%74%68%69%73%5F%64%65%66%61%75%6C%74%5F%73%74%79%6C%65%20%27%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%66%61%63%65%62%6F%6F%6B%5F%6C%69%6B%65%27%20%66%62%3A%6C%69%6B%65%3A%6C%61%79%6F%75%74%3D%27%62%75%74%74%6F%6E%5F%63%6F%75%6E%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%74%77%65%65%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%67%6F%6F%67%6C%65%5F%70%6C%75%73%6F%6E%65%27%20%67%3A%70%6C%75%73%6F%6E%65%3A%73%69%7A%65%3D%27%6D%65%64%69%75%6D%27%2F%3E%0A%3C%2F%61%3E%3C%2F%61%3E%3C%2F%61%3E%3C%2F%64%69%76%3E%0A%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%37%2E%61%64%64%74%68%69%73%2E%63%6F%6D%2F%6A%73%2F%32%35%30%2F%61%64%64%74%68%69%73%5F%77%69%64%67%65%74%2E%6A%73%23%70%75%62%69%64%3D%78%61%2D%34%66%30%38%36%62%63%61%30%35%62%66%36%38%36%31%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E%0A%3C%73%63%72%69%70%74%3E%0A%21%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%21%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%7B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%70%6C%61%74%66%6F%72%6D%2E%74%77%69%74%74%65%72%2E%63%6F%6D%2F%77%69%64%67%65%74%73%2E%6A%73%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%3B%7D%7D%28%64%6F%63%75%6D%65%6E%74%2C%22%73%63%72%69%70%74%22%2C%22%74%77%69%74%74%65%72%2D%77%6A%73%22%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%2F%64%69%76%3E%20%0A%3C%73%63%72%69%70%74%3E%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%73%70%6C%69%74%28%22%2F%22%29%2E%6C%65%6E%67%74%68%3D%3D%36%26%26%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%69%6E%64%65%78%4F%66%28%22%2E%68%74%6D%6C%22%29%21%3D%2D%31%29%7B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%3D%27%75%6E%64%65%66%69%6E%65%64%27%29%76%61%72%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%5B%5D%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%3D%27%62%6F%6F%6C%65%61%6E%27%29%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%65%6C%73%65%20%76%61%72%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%7B%66%75%6E%63%74%69%6F%6E%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%73%72%63%2C%63%61%6C%6C%62%61%63%6B%2C%69%64%29%7B%76%61%72%20%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%27%73%63%72%69%70%74%27%29%3B%73%63%72%69%70%74%2E%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3B%73%63%72%69%70%74%2E%61%73%79%6E%63%3D%74%72%75%65%3B%73%63%72%69%70%74%2E%73%72%63%3D%73%72%63%3B%73%63%72%69%70%74%2E%69%64%3D%69%64%3B%76%61%72%20%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%6C%6F%61%64%65%64%22%7C%7C%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%63%6F%6D%70%6C%65%74%65%22%29%7B%63%61%6C%6C%62%61%63%6B%28%29%3B%72%65%74%75%72%6E%7D%65%6C%73%65%7B%73%63%72%69%70%74%3D%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%7D%69%66%28%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%21%3D%6E%75%6C%6C%29%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%3D%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%76%61%72%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%26%26%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%29%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%28%29%3B%63%61%6C%6C%62%61%63%6B%28%29%7D%3B%65%6C%73%65%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%63%61%6C%6C%62%61%63%6B%3B%69%66%28%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%29%7B%6E%65%77%63%61%6C%6C%62%61%63%6B%28%29%7D%65%6C%73%65%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%70%75%73%68%28%6E%65%77%63%61%6C%6C%62%61%63%6B%29%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%6E%75%6C%6C%3B%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%6E%75%6C%6C%7D%3B%76%61%72%20%68%65%61%64%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%27%68%65%61%64%27%29%5B%30%5D%3B%69%66%28%21%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%68%65%61%64%2E%61%70%70%65%6E%64%43%68%69%6C%64%28%73%63%72%69%70%74%29%7D%7D%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%66%75%6E%63%74%69%6F%6E%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%63%61%6C%6C%62%61%63%6B%29%7B%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%74%72%75%65%3B%76%61%72%20%6C%65%6E%3D%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%6C%65%6E%67%74%68%3B%66%6F%72%28%76%61%72%20%69%3D%30%3B%69%3C%6C%65%6E%3B%69%2B%2B%29%7B%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%5B%69%5D%28%29%7D%7D%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%29%3B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%3A%2F%2F%61%6A%61%78%2E%67%6F%6F%67%6C%65%61%70%69%73%2E%63%6F%6D%2F%61%6A%61%78%2F%6C%69%62%73%2F%6A%71%75%65%72%79%2F%31%2E%37%2E%31%2F%6A%71%75%65%72%79%2E%6D%69%6E%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%73%3A%2F%2F%64%6C%2E%64%72%6F%70%62%6F%78%2E%63%6F%6D%2F%75%2F%36%33%39%36%38%38%34%32%2F%72%65%63%6F%6D%6D%61%6E%64%65%64%77%69%64%67%65%74%76%32%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%7D%2C%22%62%70%2D%6F%75%74%2D%73%6C%69%64%65%22%29%7D%2C%22%6A%51%75%65%72%79%6A%73%22%29%7D%20%3C%2F%73%63%72%69%70%74%3E%0A%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%69%64%67%65%74%67%65%6E%65%72%61%74%6F%72%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%32%2F%31%32%2F%72%65%63%6F%6D%6D%65%6E%64%65%64%2D%70%6F%73%74%2D%73%6C%69%64%65%2D%6F%75%74%2D%77%69%64%67%65%74%2D%76%32%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%0A%3C%2F%61%3E' ) );
</script> 

Keterangan:
Kode Yang Berwarna Merah Adalah Ketebalan Garis dan Warna Garis Dari Widget Recommended Post Slide Out.


  • Lalu, Klik Tombol Simpan

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG

2 comments:

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar