Cara Membuat Widget Recommended Post - Apa itu Widget Recommended Post? Box rekomendasi artikel adalah sebuah widget yang berisi related post yang berbentuk thumbnail, seperti random pos yang akan tampil secara acak. Box ini sangat bermanfaat sekali menurut saya, pengunjung akan tertarik dengan artikel yang kita berikan. Dengan menampilkan Widget Recommended Post, blog kita akan tampil lebih profesional dan dengan harapan pengunjung akan betah berkunjung di blog kita, karena Widget Recommended Post ditampilkan secara acak.
Baca Juga :
1. Menampilkan Widget Tertentu Di Halaman Blog
2. Widget Most Commented for Blogger
3. Simple Subscription Widget for Blogger
4. Cara Mengatasi Widget Google Plus Tidak Muncul
5. Cara Buat Widget Random Post Pada Blogger Berdasarkan Label
Sebenarnya Cara Membuat Widget Recommended Post ini sangat mudah dan sederhana. Kita hanya menggunakan HTML/Javascricpt pada layout blog. Anda hanya memerlukan 2 langkah untuk memasang widget ini :
1. Login ke Blogger >> Tata Letak >> Tambah Gadget > Pilih HTML/Javascricpt
2. Selanjutnya Copy Paste Kode dibawah ini di dalam kotak HTML/Javascricpt
<b:if cond='data:blog.pageType == "item"'><div id='bpslidein_place_holder' style='display:none'/></div><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Artikel Pilihan Kami, Tertarik?</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </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("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://tipssahabat.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmxS2F5NMsg1OWNnXcnB_7Gg84kp47ruNB1K7IDdRsBt2G6zuwz-5yV65b6cA1mexdzdmaOR_act86kZq5-4LNcHQnMoT9lrw4PpK_3XEDfGbuItRoBgcC8a8NxFG7WzpakGvSo52Tlw/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a></b:if>
Widget Recommended Post ini bergaya wordpress, namun jika anda adalah blogger tidak ada salah mencoba menggunakannya.
UPDATE
Cara Kedua
1. Cari kode script berikut ]]></b:skin> (gunakan Ctrl + F untuk mempercepat pencarian)
2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script ]]></b:skin>
/* Related Post with Sliding CSS */
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:335px;height:250px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Castellar, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
/* End CCSS Related Post with Sliding */
3. Cari kode script berikut </head> (gunakan Ctrl + F untuk mempercepat pencarian)
4. Copy kode script dibawah ini, lalu paste tepat di Atas kode script </head>
5. Cari kode script berikut <div class='post-footer'><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> <script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() > 400) { $('#kislidingbox').css({'right':'0px'}); } else { $('#kislidingbox').css({'right':'-360px'}); } }); $(document).ready(function(){ var kislidingbox = $('#kislidingbox'); var closed = $('#kislidingbox-close'); var minimize = $('#kislidingbox-minimize'); var maximize = $('#kislidingbox-maximize'); maximize.hide(); closed.click(function(){ kislidingbox.css({'right':'-350px'}); kislidingbox.fadeOut('slow'); }) minimize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); minimize.show(); }) }); </script>
6. Copy kode script dibawah ini, lalu paste tepat dibawah kode <div class='post-footer'> (kodenya yang ke 2)
Catatan :
Jika blog tidak memiliki kode <div class='post-footer'>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
<div class='clear'/>
<!-- Related Post with Sliding --> <b:if cond='data:blog.pageType == "item"'> <div class='show' id='kislidingbox'> <div class='kislidingbox-title kislidingbox-www'> <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span> <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_aGvBi6igi_wHObSZtXoJfNFQP4TbsnRsj-lstUx6BWejY69l9FjKoaEm_8hfDUDdAfdq8wFvorVdhyQE0UqCyzDmXzkfySbp8KLIyhf-gblmsVRnC1dxjidLP9BKwS7E3I2F-dC/s1600/close.png' title='close'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hYK9RmQkfP2-z_SPqIC0bTPKSxnp19EmRBbq4e_x-7DI8np_NELrI8XYwnduboCHR-ZtbyxJ8ZGoY5QKNmuDMcreE9xx1tchDQJlyoHhjDfua6OeiAJrysHHqDcm3IdTyYT3ZOLa/s1600/minimize.png' title='minimize'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksmgdeGZ5SqByPfUPtvVZ0Jol_5PwEdg2WM38__K-4FAk2rmZyjPinOL2BMlLuGFUXrh_3JdLdKUkS-iaV4ZoLBpZK-qzCmdJvZRzxsxYrkplqwxe3fmoDuAqu686ZWp_nfMJACZb/s1600/maximize.png' title='maximize'/></a></span> </div> <div class='kislidingbox-container'> <b:if cond='data:blog.pageType == "item"'> <div class='related-post' id='sliding-tab'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4></h4>", numPosts: 3, summaryLength: 0, titleLength: "auto", thumbnailSize: 45, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "sliding-tab", newTabLink: false, moreText: "", widgetStyle: 2, callBack: function() {} }; </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/> </b:if> </div> </div> </b:if> <!-- Related Post Widget End -->
Bagaimana, cukup mudah bukan? Jika ada pertanyaan, silahkan sampaikan melalui komentar. Demikianlah artikel tentang Cara Membuat Widget Recommended Post kiranya dapat bermanfaat. Terima Kasih..
