trans online

Hallo Sobat Blogger!
Kali ini utta Kembali Lagi akan memberikan trik blogger, yaitu Pasang Widget Slide Box Facebook Page Like Keren Di Blogger, dimana pada postingan saya juga sebelumnya pernah membahas :

1. Pasang Widget Popup Facebook Page Like Box With Timer. dan
2. Pasang Widget Popup Facebook Page Box With EaseOutBounce.

Jadi saya sengja untuk membuat tutorial baru ini, karena widget untuk page like box yang lalu dgn dengan tutorial yang akan saya berikan skrang sangat berbeda, dimana widget ini memiliki fungsi slide ketika, kita mengscroll kebawah mka akan kluar widget page likenya, widget ini juga pernah saya psang diblog ini, tp skrg uda gak, karena saya ingin mengurangi widget2 disidebar (sebagian penjung mengtkan blog utta ini berat).hehee.

Baiklah jika sobat ingin memasangnya silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

<!--Slidbox --><script type="text/javascript" src="http://benyocyberprotokol.googlecode.com/files/benyoslidbox.js"></script>
<div style="position:fixed;width:600px;overflow:hidden;bottom:2px;
right:2px;display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh40doaGR8NsyT59wF-J6mcNJnpGy7w4Ft_wsR1RYipNKuJOyMhHohQLl51mLwPfekiqEzaIIoG58DFhuQ_IPvI3WBk3W63Y86Co5pi0an_IBdGsF18dUDosVtlrAzmcwRm8lbqFA_RWXNJ/s0/bo-bg-html.gif)
repeat;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;border:3px solid #111111;" id="fbslidebox">
<div style="width:600px;padding:2px 0; margin:0;overflow:hidden;">
<a href="#" style="float:right;padding:3px 3px;" id="fbcloseslidebox"><img border="0" alt="close" src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" title="Click to Close"/></a>
<span style="font:normal 17px tahoma,sans-serif;color:#cc0000;text-shadow:0 0 3px #cc0000;"><center>Dont forget "LIKE" us on Facebook!!!</center></span><center><iframe style="height:100px;width:600px;" scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/fan.php?id=244205558923961&amp;width=600&amp;height=100&amp;connections=24&amp;stream=false&amp;header=false&amp;logobar=false&amp;css=http://www.weblagu.info/fblike.css"></iframe>
<br/>
<br/>
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/UttaBlogdOtCom&amp;send=false&amp;layout=standard&amp;width=600&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=38" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:38px;" allowtransparency="true"></iframe></center>
</div></div><!--Slidbox end -->

KET:::
- Silahkan sobat rubah teks yang berwarnah MERAH dengan URL Page Halaman masing-masing.!!

5.Terakhir Save, dan Lihat hasilnya.

Baiklah saya langsung saja yah all, soalnya da keburu mlm :D , jadi Related Post (Artikel Terkait) yg akan saya share kali ini, yaitu related post ala template gallery yg dmna dilengkapi thumbnail images overlay. nah berhubung karena saya telah memasang related post pada tempalate yg sy share beberapa hari lalu, jadi sobat bisa melihat contoh secara details dari related post ini.!heheee,..

Oke, biar gampang bisa dilihat seperti gambar di bawah ini :


atau bisa lihat contohnya pada template saya disini,... Gimana?? tertarik untuk memasangnya....
jika begitu sobat tinggal mengikuti langkah-langkah berikut.

1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Carilah kode </head> ,lalu letakkan Kode CSS berikut tepat diatasnya.

<b:if cond=data:blog.pageType == &quot;item&quot;>
<style media=screen type=text/css>
/*----- http://.blogspot.com/ Related Post -----*/
.relatedproduct h1{font:bold 22px arial;color:#5E0001;text-shadow:0 1px 0 #444;}
ul#related-posts{font-size:15px;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:106px;position:relative;width:101px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:100px;line-height:16px;position:absolute;width:95px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_cmaktdJ-P61A6jFOnz7TvgkOAHIhPDxg6dfcUIY2RA3__mQ2jg4SqpHBg_f7liNk2qrhrqJv4eWrBYEoaYbB9zdnqwCA9vjLmc0ms-a_sJ040JsuIUyliyUfvTcKHG63SYd-5LwyQs/s1600/transparant.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
</style>
</b:if>

5. Langkah Selanjutnya kita cari lagi Kode <p><data:post.body/></p> , Setelah ketemu, letakkan kode script berikut tepat dibawahnya. (bisa juga diletakkan diatas kode <div class=post-footer-line post-footer-line-1> )

<!-- Related product  -->
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div class=relatedproduct>
<h1>Related product you might see:</h1>
<script type=text/javascript>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGv3gF88aCpNXbeNYm_SiBPIV41laYd1nohJm8qlT9NPCOWewKo6_CSUHTyIhvJV76XAhDYYuCKeVE92iX4cNXXoiDUiMRt5JitxxDLrTC97GM1KKnD-tFKOS8SM_z22Ccy3oSuZFqsc/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script type=text/javascript>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!==undefined)thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiai89Tgijx0OK9d-N5fb3-9X01BKB9dArZysiYVxingwqa42CvjaGgbidQlrRyb8LJQuA_VGe7qUJ-n4CWfFAz0-Tq0BIxKI6qF6P0GKDRbPZN_iYzHxSmxIOyxxsGZdPBoNmnysDgTgk/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==alternate){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!==undefined)splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write(<ul id="related-posts">);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(<li><a);document.write( href="+relatedUrls[r]+"><span class="overlay" style="display:none;">+relatedTitles[r]+</span><img style="width:101px;height:101px;border:0px;" src="+thumburl[r]+"/></a></li>);i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write(</ul>);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</div>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != &quot;true&quot;>
</b:if>
<script expr:src=&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot; type=text/javascript/>
</b:loop>

<script type=text/javascript>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>
<div style=clear: both;/>
<!-- Related product  -->

6. Priview dulu, jika tidak terjadi masalah pada templatenya, maka baru Klik SIMPAN TEMPLATE.

NB :>> Diatas terdapat tulisan yang berwarna, sobat tinggal merubahnya saja sesuai keinginan.

Lihat Juga Related Post Yang Lainnya :

1. Pasang Related Post (Artikel Terkait) Thumbnails - Marquee (Berjalan). dan
2. Pasang Related Post (Artikel Terkait) With Thumbnail And Summary.
3. Pasang Related Post (Artikel Terkait) Cantik Ala Utta Bag.2