Sahabat blogger, sudah lama nih saya tidak posting trik trik nahh kali ini saya akan berbagi trik untuk mempercantik blog kalian dengan slide rekomendasi. slide ini berguna untuk menampilkan salah satu posting yang ada di blog kita supaya lebih gampang untuk di baca dan di cari para pengunjung.
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:
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.
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.
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:
<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>Simpan, dan lihat hasilnya.
#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://yourjavascript.com/132218050313/rekomendasi- artikel.js",function(){},"bp-out-slide")},"jQueryjs")} </script>
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.
Boleh dicoba nih Tutornya . . :))
ReplyDeletemonggo dicoba gan (o)
Deletekeren gan ;) kunjungan pertama nih
ReplyDeleteoke makasih ya :)
Delete