satya22.com - halloo gan kita ketemu lagi di postingan saya yang ini, ngomong-ngomong soal blog saya juga baru mulai ngeblog belakangan ini, coba untuk cari informasi seputar blogging, tutorial blog dan sebagainya.
Banyak ilmu yang mungkin saja belum kita tau, salah satu contoh ialah yang akan saya share dipostingan ini, saya mau berbagi kepada teman-teman bagaimana caranya membuat carousel post seperti kompi ajaib.
Oke langsung saja ke tutorial bagaimana membuat carousel post seperti kompi ajaib
Pertama.
- Login ke blogger http://www.blogger.com
- Masuk ke template / Theme
- Pilih EDIT HTML
Lalu cari kode </body> dan letakan kode dibawah ini tepat diatas kode tersebut :
<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/popular-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>Kedua.
Letakan kode dibawah ini tepat diatas 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/AVvXsEg677bnCbrDaDJS51VVW_Fh_WH4vp5bbzDwK9_fG3Wps42CvPDg6i9Fn9cdr6DaigzuDEaCN21b-bb0DS_JxrF5yR74hGZkf7l5-a1_foM7HC2l9z-_xvF2TVjg5Wck_zc59RM5yAPXoFI/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/AVvXsEjubV4Oal0zM_a40jDyWxpQjdSC_PeW7J5M5lRg6cQWsbadyuZdqwatJBWQujxR1KB_RejuUy2-PfO8g5n0TMkN2G4hTOtuIlP4gMWs02mI7_5AdpCOdA5r1I1qzW3-n5uGX_bzDX9eFfaY/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>
Ketiga.
Jika sudah, lanjut cari kode </footer> atau lainnya terserah dimana kalian ingin meletakannya, kemudian letakan kode dibawah ini tepat diatas kode </footer> :
<b:if cond='data:blog.pageType != "static_page"'>
<b:section class='carousel' id='carousel' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Hot Wallpaper' 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:section>
</b:if>Jika sudah, simpan atau save template kemudian lihat hasilnya.
Itu saja yang bisa saya share kepada kalian, dan saya akan share tutorial lainnya di postingan yang akan datang.
Share This Article :
comment 0 komentar
more_vert