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.

cara membuat slide rekomendasi artikel dengan tombol sharing di blogger blogspot

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.

Intip Juga

Terima Kasih Sudah Membaca Slide Rekomendasi Artikel Dengan Tombol Sharing

« Previous
« Prev Post
Next »
Next Post »
Blog Tutorial
Blog Tutorial Updated at: Mei 11, 2013

5 komentar:

  1. bang ko di blog saya sharingnya gak horisontal kaya di gambar malah vertikal ..
    mohon pencerahannya

    http://hamahara.blogspot.com/

    BalasHapus
  2. terima kasih gan dah berbagi tips....http://choppie88.blogspot.com

    BalasHapus
  3. terimaksh gan, templatenya sama :)

    visit back gan diakuin.blogspot.com

    BalasHapus
  4. hehehe kirain slide box yg dipojok kiri bawah blog gan... trnyata tmbol sharing.
    bagus artikel2nya mas, brmanfaat...

    BalasHapus

Demi kemajuan Blog Tutorial Campur Aduk, kritik dan saran sangat dibutuhkan.
Bagi yang ingin dikunjungi, silakan gunakan Name/URL ketika berkomentar.
Usahakan nggak menyimpan link hidup atau mati.

Thanks. ^_^