Oke pada postingan sebelumnya saya telah membahas tentang cara membuat post popular dibawah blog header dan sekarang kita akan coba memasangnya di sidebar pada blog.
Pertama-tama copi script dibawah ini dan pastekan tepat di bawah kode </head>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/*<![CDATA[*/
.slick-list,.slick-slider,.slick-track{position:relative;display:block;height:100%}
.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{top:0;left:0}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir=rtl] .slick-slide{float:right}
.slick-slide img{display:block;width:100%;height:100%}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}
.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-loading .slick-list{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gyLjoyMz2WNGnJyMccS61ToUwjwXMzTGFtSnmcnviFXWPee8UAy3g-wd_klfLI2TtGmoD7zXBdcyxHsIdrHYktX0IpRZXS37SkazLPccttIOZ03pumeLKKOQb6qNnmcBapKVPFJann0/s1600/ajax-loader.gif) center center no-repeat #fff}
.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;;height: 34px;width: 34px;border-radius: 2px;background:#000;background: rgba(0,0,0,.5);-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}
.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}
.slick-prev{left:15px;z-index:999}
[dir=rtl] .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'f053';font-family: FontAwesome;}
.slick-next:before,[dir=rtl] .slick-prev:before{content:'f054';font-family: FontAwesome;}
.slick-next{right:13px}
[dir=rtl] .slick-next{right:auto;left:-25px}
[dir=rtl] .slick-next:before{content:'f054';font-family: FontAwesome;}
.slick-dotted.slick-slider{margin-bottom:30px}
.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}
.carousel{margin:0!important}
#PopularPosts2.PopularPosts{background:#fff;padding:10px;margin:0;}
#PopularPosts2.PopularPosts .widget-content{height:180px;overflow:hidden;}
#PopularPosts2.PopularPosts a,#PopularPosts1.PopularPosts .popular_content img{width:100%!important}
#PopularPosts2.PopularPosts h2{position:relative;color:#333;font-weight:700;overflow:hidden;margin:0 2px 10px 5px;text-transform:uppercase;}
#PopularPosts2.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts2.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:2px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkONci64WoVKZKKpp_ztBxzN4DNqpQ_K6qHbu9IGt0LRyfdRq4NdVbDYIaFHnXIrh5xniMgKK8pMRDCFK7KaqHlr_3sKxGU-OKanGhKsnq7UDTuq1ndUkKFJkSsITnPHC-etaTxaCAPBZ0/s1600/repeat-bg.png);opacity:.9;}
#PopularPosts2.PopularPosts a h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.7);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;right:0;}
.popular_content{position:relative;margin:0 5px}
@media screen and (max-width:414px){
#PopularPosts2.PopularPosts .widget-content{height:220px;}
}
@media screen and (max-width:375px){
#PopularPosts2.PopularPosts .widget-content{height:200px;}
}
@media screen and (max-width:360px){
#PopularPosts2.PopularPosts .widget-content{height:190px;}
}
@media screen and (max-width:320px){
#PopularPosts2.PopularPosts .widget-content{height:180px;}
}
/*]]>*/
</style>
</b:if>Langkah kedua kopi kode script dibawah ini dan pastekan di atas kode </body>
<b:if cond='data:blog.pageType != "static_page"'>
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://cdn.rawgit.com/KompiAjaib/font-awesome/master/font-awesome-4.7.0/css/font-awesome.min.css");
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/sidebarpopular-slick.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>Jika HTML blog kamu sudah menggunakan Font Awesome maka hapus kode script yang diberikan markah merah di atas.
Setelah itu kopi kode script dibawah ini dan pastekan di sidebar pada HTML blog kamu.
<b:if cond='data:blog.pageType != "static_page"'>
<b:widget id='PopularPosts2' locked='false' title='Hot On This Blog :' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><div><data:title/></div></h2></b:if>
<div class='widget-content popular-posts'>
<div class='slider slider-nav autoplay'>
<b:loop values='data:posts' var='post'>
<b:if cond='!data:showThumbnails'>
<div><b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<h3><a expr:href='data:post.href'><data:post.title/></a></h3>
<p><data:post.snippet/></p>
</b:if></div>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div class='popular_content'><b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 280) : data:post.thumbnail' var='image'>
<img expr:alt='data:post.title' expr:data-lazy='data:image' height='180' width='280'/>
</b:with><h3><data:post.title/></h3>
</a>
</b:if></div>
</b:if>
</b:loop>
</div>
</div>
</b:includable>
</b:widget>
</b:if>Untuk mempermudah menemukan id sidebar, pada HTML blog kamu gunakan Inspect elemen.
Setelah anda menemukannya scroll lagi kebawah, sampai anda menemukan widget kode html untuk sidebar.
Ini adalah kode html untuk isi sidebar seperti Adsense, Popular posts, dll. Disini kita akan mempastekan kode scriptnya.
Cara mempastekannya yaitu kosongkan ruang dimana anda akan menempatkannya. Contoh pada gambar dibawah, saya akan menempatkan Carousel Popular posts dibawah AdSense pada sidebar jadi saya mengosongkan ruang dibawah Adsense untuk menempatkan kode scriptnya.
Jika terdapat error mengatakan "The widget with id Popular Posts is not within a section (actual parent element is b:if) Every widget should be in a section. " maka hapus kode script yang saya berih markah dan tanda merah seperti gambar dibawah ini.
Hapus juga dibawahnya, setelah itu klik simpan tema dan lihat hasilnya!.
Jika anda merasa artikel ini berguna, jangan lupa di share yaa :)
Share It
No comments:
Post a Comment