Cara Membuat Slide Box Rekomendasi Di Blog

Cara Membuat Slide Box Rekomendasi Di Blog - Pada kali ini kita akan membuat slide box rekomendasi atau membuat recommended post slide di blog. Slide box rekomendasi adalah sebuah widget yg berfungsi sama seperti widget related post dimana menampilkan artikel sesuai label. Bedanya, slide box rekomendasi muncul pada bilah kira atau kanan dekstop pada saat halaman di scroll ke bawah. Widget recommended post slide tentu lebih atraktif dibandingkan related post. Bagi yg ingin membuat slide box rekomendasi di blog, simak langkah berikut.

Demo

CSS Slide Box Rekomendasi

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan css berikut diatas ]]></b:skin>.

#recommended-post-box{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:150px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .show{bottom:80px;} .hide{bottom:-132px;} .expand a {padding: 0 5px;color: #fff;} .expand {float: right;padding: 8px;} #recommended-post {padding: 0 10px;} #recommended-post h4 {color: #fff;font-size: 16px;padding: 5px 10px;margin: 0 -10px 0;border-bottom: 1px solid #f3f3f3;background: #1983BC;} #recommended-post h4:before {font-family: FontAwesome;content: "\f087";padding-right: 10px;} #recommended-post li {padding: 5px 0 0;overflow: hidden;list-style: none;} #recommended-post img {width:50px;height:50px;margin: 0 10px 0 0;padding:0;float:left;} #recommended-post .item-title {color :#666666;font-size:14px;text-transform:capitalize;} #recommended-post .item-title:hover{color :#1983BC;text-decoration:none;}

Script Slide Box Rekomendasi

• Login ke blogger.
• Klik menu template.
• Edit html.
• Pastekan script berikut diatas </body>.

<script type='text/javascript'><script type='text/javascript'>//<![CDATA[ $(window).scroll(function(){$(this).scrollTop()>400?$("#recommended-post-box").css({left:"0px"}):$("#recommended-post-box").css({left:"-360px"})}),$(document).ready(function(){var i=$("#recommended-post-box"),o=$("#close"),e=$("#minimize"),s=$("#maximize");s.hide(),o.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),e.click(function(){i.toggleClass("hide"),$(this).hide(),s.show()}),s.click(function(){i.toggleClass("hide"),$(this).hide(),e.show()})}); function RecommendedPostSlide(){var t=document.getElementById("recommended-post");e&&e.insertBefore(t,e.firstChild)}var randomRecommendedIndex,showrecommendedPost;!function(e,t,a){var n={homePage:"/",numPosts:2,widgetTitle:"<h4> Recommended Post</h4> ",titleLength:"auto",thumbnailSize:60,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"recommended-post",callBack:function(){}};for(var l in recommendedPostConfig)n[l]="undefined"==recommendedPostConfig[l]?n[l]:recommendedPostConfig[l];var r=function(e){var n=t.createElement("script");n.type="text/javascript",n.src=e,a.appendChild(n)},o=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},i=function(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e},s="object"==typeof labelArray&&labelArray.length>0?"/-/"+i(labelArray)[0]:"",d=function(e){var t=e.feed.openSearch$totalResults.$t-n.numPosts,a=o(1,t>0?t:1);r(n.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+s+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+n.numPosts+"&callback=showrecommendedPost")},m=function(e){var t,a,l,r,o=document.getElementById(n.containerId),s=i(e.feed.entry),d=n.widgetTitle,m='<span style="display:block;clear:both;"></span>';if(o){for(var u=0;u<n.numPosts&&u!=s.length;u++){a=s[u].title.$t,l="auto"!==n.titleLength&&n.titleLength<a.length?a.substring(0,n.titleLength)+"…":a,r="media$thumbnail"in s[u]&&n.thumbnailSize!==!1?s[u].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+n.thumbnailSize+"-c"):n.noImage;for(var h=0,c=s[u].link.length;c>h;h++)t="alternate"==s[u].link[h].rel?s[u].link[h].href:"#";d+=' <li><a title="'+a+'" href="'+t+'"><img alt="thumbnail" title="'+a+'" src="'+r+'" width="'+n.thumbnailSize+'" height="'+n.thumbnailSize+'" title="'+a+'"/><div class="item-title"> '+l+"</div> </a>"+m+"</li> "}o.innerHTML=d,n.callBack()}};randomRecommendedIndex=d,showrecommendedPost=m,r(n.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+s+"?alt=json-in-script&orderby=updated&max-results=10&callback=randomRecommendedIndex")}(window,document,document.getElementsByTagName("head")[0]);//]]></script>

HTML Slide Box Rekomendasi

• Masuk ke blogger.
• Klik template.
• Pilih edit html.
• Pastekan script berikut dibawah <div class='post-footer'> yang ke 2.

<b:if cond='data:blog.pageType == "item"'><div class='show' id='recommended-post-box'> <div class='expand'> <a href='javascript:void(0);' id='minimize' title='minimize'><i class="fa fa-minus-circle" aria-hidden="true"></i></a><a href='javascript:void(0);' id='maximize' title='maximize'><i class="fa fa-plus-circle" aria-hidden="true"></i></a><a href='javascript:void(0);' id='close' title='close'><i class="fa fa-times" aria-hidden="true"></i></a> </div> <div id='recommended-post'> <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 recommendedPostConfig={callBack:function(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",RecommendedPostSlide,false);window.addEventListener("load",RecommendedPostSlide,false)}else{if(window.attachEvent){window.attachEvent("onload",RecommendedPostSlide)}else{window.onload=RecommendedPostSlide}}}}; </script> </div> </div> </b:if>

Silahkan ganti widgetTitle:"<h4>Recommended Post</h4>", dengan kata-kata sesuai keinginan Anda. Demikianlah penjelasan saya mengenai cara membuat slide box rekomendasi atau cara membuat recommended post slide di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.