Slide Rekomendasi Artikel Dengan Tombol Sharing

Sahabat blogger, Blog Tutorial Campur Aduk akan berbagi tentang cara membuat Slide Rekomendasi Artikel dengan Tombol Sharing Facebook, Twitter dan Google +. Nah mungkin bagi sahabat blogger yang pernah berkunjung ke Blog Tutorial Campur Aduk pernah melihat sebuah Slide di pojok kanan bawah 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, namun tentunya artikel tersebut masih terkait dengan kategori yang sedang dibaca, sebagai rekomendasi untuk minat baca.

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

Untuk contoh demo dari Slide Rekomendasi yang baru ini, silakan sahabat scroll kebawah sampai nanti muncul Slide Rekomendasi Artikel di pojok kanan bawah.
Nah apabila sahabat sedang mencari tahu atau mau upgrade Slide Rekomendasi yang sahabat punya, caranya cukup mudah, yaitu;

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 simpan template.

Setelah tersimpan, kemudian masuk ke halaman 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/AVvXsEgOBJLrgLCnOOcX8PO4YlMAx-ubbFVxzpPrMAiszuLEM6PGhG9tmSIEZciyX3GbdzTE_RQjj4yvwsomZtlLlC0CgsUDQRDnSGyi9GgiLQJdihBUdLhT9QpEokkuimXaWghkP6SwqC94rnM/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.