Cara Membuat Slide Rekomendasi Artikel Dengan Tombol Sharing

Halo sobat Finest Info. Kali ini saya posting artikel tentang Cara Membuat Slide Rekomendasi Artikel Dengan Tombol Sharing. Nah sobat, pernahkan anda seketika berkunjung ke blog lain. Anda pernah melihat sebuah slide di pojok kanan bawah blog yang menampilkan sebuah rekomendasi artikel secara acak atau random, yang fungsinya untuk memperkenalkan artikel-artikel yang ada di blog. Hal ini untuk mempermudah pengunjung menemukan artikel yang tanpa sengaja tampil di Slide tersebut.


Seperti apa sih tampilan Slide Rekomendasi Artikel dengan Tombol Sharing tersebut, bisa sahabat lihat contoh gambar dibawah ini.

Tertarik dengan Slide Rekomendasi Artikel Dengan Tombol Sharing ??

Yup mending kita langsug praktekin aja cara pembuatanya.

Login ke blogger, di halaman Dashboard pilih Template >> Edit HTML.

1.Cari kode dibawah ini: 

<data:post.body/>

2. Setelah ketemu, copy dan paste kode ini tepat dibawahnya.

<b:if cond='data:blog.pageType == "item"'> <div id='bpslidein_place_holder'></div> </b:if>

3. Kemudian Save Template

Setelah tersimpan, kemudian masuk ke halaman Tata Letak / Page Layout, tempatkan dimana saja sahabat mau, disarankan di sidebar atau footer atau terserah sahabat. Caranya;

Pilih Add a Gadget dan cari plugins HTML/JavaScript. Setelah itu, copy dan paste kode berikut ini.

<style>
#bpslidein{z index:5;
width:400px;
height:125px;
padding:10px;
background-color:#fff;
border-top:2px solid #1f1e1e;
position:fixed;
right:-430px;
bottom:20px;-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:14px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#0433bf;
}
#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>
<div id="bpslidein" style="display:none;">
<div class="help">?</div>
<div class="expand">+</div>
<div class="close">X</div>
 <p>Rekomendasi Artikel</p>
 <div id="bpslidein_image"></div>
 <div  id="bpslidein_title">Tunggu Sebentar...</div>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</a></a></a></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f086bca05bf6861' type='text/javascript'/>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://script-project.googlecode.com/files/rekomendasi-artikel.js",function(){},"bp-out-slide")},"jQueryjs")} </script><a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=40620" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcX17sFSeir__PTbTQ0dqL1Orx10_7_mQM71FNKV6uaQct4hc_jrIjxowAmt1gNl5M_MBfWr4Y9YKj9mIPDjGBAhsPeLozwDviJQfNyIqgbYEg0SQZd6BIKpHYUYlDMDSSyjLRnrgEGs/h78/free_backlink_blog.png" width="80" height="15" alt="Slide Rekomendasi Artike Blogger" />
</a>

Simpan, dan lihat hasilnya

Untuk menentukan munculnya Slide Rekomendasi Artikel, silakan sahabat pindahkan penempatan kode yang berada di tahap ke 2, ditempat yang diinginkan oleh sahabat. Namun secara default, slide tersebut muncul di pojok kanan bawah layar.

Mudah-mudahan bermanfaat dan dapat membantu bagi sahabat yang sedang mencari Cara Membuat Slide Rekomendasi Artikel dengan Tombol Sharing ke Facebook, Twitter dan Google Plus.

Regards,
Facebook
Twitter