 |
| Membuat Widget Feature Post Slider Otomatis Di Blogger |
GoSEO.id - Seperti yang kamu ketahui bahwa widget dapat memberikan informasi kepada pengunjung fitur penting yang tersedia pada blog, seperti label, postingan terbaru dan lainnya. Pada kesempatan kali ini, GoSEO akan memberikan tutorial "
Membuat Widget Feature Post Slider Otomatis Di Blogger" yang mana fitur ini menggunakan
Owl Carousel yang pastinya membuat blog kamu semakin keren.
Nah kita langsung saja masuk ke tahapan tutorialnya. Yuk disimak dan dicoba pemaktrekannya :
Membuat Widget Feature Post Slider Otomatis Di Blogger
1. Pertama sekali silahkan login ke blogger.com menggunakan akunmu.
2. Setelah itu masuk ke menu
TEMA ⇨ lalu klik tombol
Edit HTML.
3. Kemudian
COPY kode javascript
jquery.min.js dibawah ini dan letakkan di atas kode
</head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
4. Selanjutnya
COPY lagi kode dibawah ini dan letakkan juga tepat diatas kode
</head>.
<script type='text/javascript'>
//<![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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
5. Tahapan selanjutnya cari kode
]]></b:skin> atau
</style> dan letakkan kode dibawah ini diatas kode tersebut.
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style id='owl-carousel' type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto}
#featured-slider h2.title,#featured_slider .widget h2.title{display:none}
#featured_slider{margin:0 0 30px}
.slider-wrappper{max-width:970px;margin:0 auto;padding:0}
.owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
.slider-item{position:relative;height:100%}
.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:.7;z-index:1;background-image:linear-gradient(to bottom,transparent,rgb(0, 0, 0));transition:opacity 0.25s ease;}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
@media screen and (max-width: 800px){
.thumb.overlay{height:280px;}
}
.post-descript{position:absolute;bottom:20px;left:-5%;right:8%;z-index:99;padding:25px;border-radius:6px;transition:all .3s}
.slider-item:hover .post-descript{}
.slider-wrapp .post-inner{padding:0 40px;margin:auto}
.slider-item h2.post-title{font-size:24px;margin:0;padding:0;}
@media screen and (max-width: 480px){
.slider-item h2.post-title a{
font-size:16px!important;
}
}
.slider-item h2.post-title a{color:#fff;transition:all .3s;font-size:24px;}
.slider-item h2.post-title a:hover{color:#fff}
.slider-item .post-date{display:inline-block;color:#ddd;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#0081ff;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.slider-item .post-tag a:hover{background:#000;color:#fff}
.feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff}
.featured-posts{display:inline-block;width:100%}
.feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0}
.feature-item:last-child{margin:0}
.feature-item .thumb.overlay{height:150px;width:100%;position:static}
.feature-item .thumb.overlay a.slider-image{}
.feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s}
.feature-item .post-descript:before{content:'';position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden}
.feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)}
.feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400}
.feature-item h2.post-title a{color:#000}
.feature-item:hover h2.post-title a{color:#aaa}
.feature-item .post-meta{margin:0}
.feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.feature-item .post-tag a:hover{background:#000;color:#fff}
.feat-home{height:320px;margin:0 0 50px;position:relative}
.feat-home:before,.slider-item:before{content:"";right:0}
.feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0);overflow:hidden;border-radius:8px;}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:3px;width:60px;padding:3px;background:#e2e2e2;border:none;border-radius:7px;outline:none;}button.owl-dot.active{background:#1a73e8;padding:3px;border:none;border-radius:7px;outline:none;}
@media screen and (max-width: 480px){
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{
}
.owl-dots{
bottom:0px!important;
}
}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#1a73e8;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
.owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s;outline:none;}
.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
#HTML33 .widget-content{overflow:visible}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@media screen and (max-width: 768px){
.feature-item{width:50%;margin:0 auto 15px auto}}
@media screen and (max-width: 640px){
.owl-prev,.owl-next{top:18%}
.owl-carousel .owl-item{height:auto}
.post-descript{padding:15px 10px;left:-2%;right:5%;bottom:10%;}
.slider-wrapp .post-inner{padding:0 10px}
.slider-item h2.post-title{font-size:16px;padding:0;display:flex;}
.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
@media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
.content-wrapper{overflow:hidden;max-width:1000px;margin:0 auto;margin-top:60px;margin-bottom:-85px;}
.owl-dots{
position:absolute;
bottom:0;
width:100%;
margin:0 auto;
padding:20px 0 15px 0;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
flex-direction:row;
text-align:center;
}
@media screen and (max-width: 480px){
.slider-wrappper{
padding:15px;
}
.content-wrapper{margin-top: 35px;}
}
@media screen and (max-width: 800px){
.content-wrapper{margin-top: 35px;}
.slider-wrappper{
padding:15px;
}
}
.owl-dots .owl-dot{
width:50px;
}
</style>
</b:if>
6. Kemudian masukkan kode javascript
OwlCarousel2.js dibawah ini dan letakkan kode tersebut dibagian atas
</body>.
<script src='https://cdn.statically.io/gh/Aslori/file/master/OwlCarousel2.js' type='text/javascript'/>
7. Jika telah selesai klik tombol
Simpan dan sekarang pindah atau masuk ke menu
TATA LETAK.
8. Pada tahap ini silahkan klik
Tambahkan Gadget ⇨ lalu klik/pilih
HTML/Javascript.
9. Setelah itu akan tampil Form Pop Up Widget dan masukkan kode dibawah ini pada Form tersebut.
<script>
document.write("<script src=\"/feeds/posts/default/-/TUTORIAL?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");
</script>
Silahkan ganti tulisan yang saya tandai dengan Label yang ingin kamu tampilkan pada blog.
10. Terakhir klik tombol
Simpan dan
Selesai.
Saya rasa cukup mudah dimengerti dan dipraktekan bukan? Beginilah tutorial "
Membuat Widget Feature Post Slider Otomatis Di Blogger". Yang mana semoga artikel ini bermanfaat dan berguna.
Silahkan tinggalkan komentar jika ada hal atau bagian yang tidak kamu mengerti.
Jangan lupa pula untuk share dan subscribe kami pada kolom
Newsletter agar tidak ketinggalan informasi atau update-an terbaru
GoSEO.id. Terima kasih telah hadir dan membaca artikel ini.
