Widget Recent Post with Image Slider untuk Blogger

Baca Juga

Widget Recent Post with Image Slider adalah sidebar widget berupa judul posting terbaru plus gambar slide otomatis.

Widget berupa Featured Post ini cocok untuk blog foto, video, atau toko online (galeri).

Cara Pasang Widget Recent Post with Image Slider

Pastikan di dalam template Anda ada kode jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript" data='cfasync'></script>

1. Add a Gadget > HTML/Javascript
2. Masukkan kode:

<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjURh7svF7r362jrxnzPcAAg7A2MWmSCBCdCSR45vt8c9gTFDy3Cwyv7BgSmmfw0TsoOsFL7OdJlL8nWZHiqT1eFR0YIrWgyI6ZPsGD3y3VfPTGxtCDUGvEx6RELWCexA0TrS_rYBKY7uU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://makingdifferent.github.io/blogger-widgets/featuredpostside.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"https://namablog.blogspot.com/",
 MaxPost:30,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

3. Ganti alamat blog.
4. Save!

KODE LAINNYA / JIKA KODE DI ATAS GAGAL:

<style type="text/css">
ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
ul.drdsr-feat-posts{width:300px;height:450px}
ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
ul.drdsr-feat-posts  .overlayx,ul.drdsr-feat-posts li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000;
color: #fff;
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .2;
text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
ul.drdsr-feat-posts
ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}
ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"Segoe UI",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}
ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}
li:nth-child(2) h4{font-size:120%}
li:nth-child(3) h4{font-size:120%}
ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
.label_text .autname{color:#fff;right:2px;padding:2px;}
ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
li:nth-child(4) .label_text{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:124px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
</style>
<div id="featuredpostside"></div>
<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://namablog.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:200,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

KODE ALTERNATIF (MODIF FONT-SIZE):

<style type="text/css">
ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
ul.drdsr-feat-posts{width:300px;height:450px}
ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
ul.drdsr-feat-posts  .overlayx,ul.drdsr-feat-posts li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000;
color: #fff;
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .2;
text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
ul.drdsr-feat-posts
ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}
ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Arial;font-weight:normal}
ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:125%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
ul.drdsr-feat-posts li:nth-child(4) h4{font-size:130%}
li:nth-child(2) h4{font-size:120%}
li:nth-child(3) h4{font-size:120%}
ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
.label_text .autname{color:#fff;right:2px;padding:2px;}
ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
li:nth-child(4) .label_text{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:124px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
</style>
<div id="featuredpostside"></div>
<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"https://www.contohblog.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:200,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Demikian cara memasang Widget Recent Post with Image Slider untuk Blogger. Happy Blogging! (www.contohblog.com).*