 |
| Membuat Widget Feature Post Slider Otomatis Di Blogger |
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'/></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> ]]></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></body>.<script src='https://cdn.statically.io/gh/Aslori/file/master/OwlCarousel2.js' type='text/javascript'/>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.
0 Comments
Posting Komentar