Widget Popular Post Style V7 di Blogger! Ubah Tampilan Blogmu Menjadi Lebih Keren

Widget Popular Post Style V7 di Blogger! Ubah Tampilan Blogmu Menjadi Lebih Keren

By Ndo Andre At Jumat, Oktober 30, 2026

Pastinya sobat sudah tahu kan apa itu Widget Popular post? Yah, Widget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi atau dibaca oleh pengunjung menurut perhitungan Google Analytic. Widget ini sudah disediakan oleh Blogger tinggal kita saja yang menentukan ingin memasangnya, kemudian memodifikasinya 😁 .

Setelah kemarin admin telah membagikan cara membuat widget recent post dengan navigasi, maka pada kesempatan ini akan membagikan widget popular post versi 7.

Widget Popular Post V.7

Widget popular post sangat berguna bagi blog karena dapat menambah jumlah pageviews dan mempermudah pengunjung dalam mengexplorasi blog kamu.

LIHAT DEMO

Cara memasang widget popular post V7 di Blogger

1. Di Blogger 😀
2. Pilih menu Layout / Tata letak ➔  Add a Gadget/ Tambahkan Gadget ➔ Popular Post

Add Widget Popular Post

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.

.sidebar .popular-posts ul { counter-reset:popcount; margin:0; padding:0; }
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li { font-family:"Oswald",sans-serif; height:130px; font-weight:bold; list-style:none !important; overflow:hidden; padding:0 !important; position:relative; margin:2px; border:0; width:100%; float:left; }
.sidebar .PopularPosts .item-thumbnail { margin:0; width:100%; }
.sidebar .PopularPosts ul li img{display:block; float:left; padding:0; width:100%; height:130px; -webkit-transition-duration:1.0s; /*Webkit:Animation duration*/
  -moz-transition-duration:1.0s; /*Mozilla Animation duration*/
  -o-transition-duration:1.0s; /*Opera Animation duration*/
  transition:1.0s}
.sidebar .PopularPosts ul li img:hover{-webkit-transform:scale(1.06); /*Webkit:0.5 times the original Image size*/
  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
  transform:scale(1.06); overflow:hidden}
.sidebar .PopularPosts .item-title { bottom:0; left:0; right:0; padding-bottom:0; position:absolute; z-index:999; }
.sidebar .PopularPosts .item-title a { background:rgba(32,32,32,0.77); color:#FFFFFF; display:block; font-size:16px; font-weight:bold; line-height:normal; font-family:"Oswald",sans-serif; padding:10px 0 5px 10px; text-transform:capitalize; transition:all .4s ease-in-out; }
.sidebar .popular-posts ul li:hover .item-title a { color:rgba(255,255,255,1); background:rgba(231,76,60,0.88); text-decoration:none; }
.sidebar .popular-posts ul li:before { background:rgba(255,252,8,1); color:#000; content:counter(popcount,decimal); counter-increment:popcount; float:left; font-size:14px; line-height:20px; list-style-type:none; padding:0 8px 1px 1px; border-radius:0 0 10px 0; position:absolute; top:0; z-index:4; border:solid #FFF; border-width:0 2px 2px 0; }

5. Letakan script dibawah ini diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  var tbn = 150;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
    image.attr('width',tbn);
    image.attr('height',tbn);
  });
});
//]]></script>

6. Save template.

Jika tampilan widget popular post di blog kamu terasa kurang menarik, kamu dapat mengubahnya menjadi lebih menarik, misalnya dengan mencoba mengubahnya menjadi seperti widget popular post V6 yang pernah admin bagikan sebelumnya.

Cara Mengubah Tampilan Widget Popular Post Menjadi Lebih Menarik di Blogger

Cara Mengubah Tampilan Widget Popular Post Menjadi Lebih Menarik di Blogger

By Ndo Andre At Kamis, Oktober 29, 2026

Kamu pasti sudah tahu apa itu Widget Popular post. Widget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi, dilihat atau dibaca oleh pengunjung berdasarkan hari, minggu, bulan, tahun atau setiap saat menurut perhitungan Google Analytic.

Widget seperti ini sudah disediakan oleh Blogger, namun tentu saja mengikuti versi template yang digunakan. Apakah kamu ingin mengubah tampilannya? tentu saja bisa, kamu bisa memodifikasinya sesuai keinginanmu. Berikut ini admin akan membagikan widget popular post versi kedua. 

Widget Popular Post V.2

Widget popular post lumayan berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog kamu. 

LIHAT DEMO

Cara memasang widget popular post ini di Blogger

1. Di Blogger 😀
2. Pilih menu Layout / Tata letak ➔  Add a Gadget/ Tambahkan Gadget ➔ Popular Post

Add Widget Popular Post v.2

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.2

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.

.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { width:100%; list-style:none !important; padding:0 !important; margin-bottom:20px; position:relative; border:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; height:120px; }
.sidebar .PopularPosts .item-thumbnail { width:100%; position:relative; margin-bottom:15px; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0) none repeat scroll 0 0; border-bottom:29px solid #fff; border-left:29px solid transparent; border-right:29px solid transparent; bottom:0; content:&quot; &quot; ; height:0; width:0; left:0; right:0; margin-left:auto; margin-right:auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail:after { color:#000; content:counter(popularcount,decimal); counter-increment:popularcount; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; list-style-type:none; position:absolute; bottom:0; text-align:center; margin:0 auto; left:0; right:0; z-index:4; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; width:100%; height:120px; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; text-align:center; margin:0 auto; padding-bottom:10px; border-bottom:1px solid #000; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { padding:10px 15px; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; }

5. Letakan script dibawah ini diatas </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

6. Save template.

Jika ini versi dua, pastilah ada versi lain, cari saja di blog ini. Sekian, salam Bloggers.

Cara Membuat Widget Random Post Bergerak Dengan Tampilan Sederhana di Blogger

Cara Membuat Widget Random Post Bergerak Dengan Tampilan Sederhana di Blogger

By Ndo Andre At Rabu, Oktober 28, 2026

Pada kesempatan ini admin akan membagikan widget untuk kamu pengguna Blogspot, yaitu widget Random Post bergerak, iya sob, bergerak!, yah dari pada bergerak mungkin lebih cocok berganti-ganti, atau apalah yang cocok bisa kamu cek saja pada demonya nanti.

Widget random post ini menampilkan postingan blog kamu secara random, jadi postingan kamu yang sudah lama di posting bisa saja tampil kembali di widget ini.

Widget Random Post Bergerak

Cara memasang Widget Random Post Bergerak di Blogger

1. Di Blog Blogger
2. Pilih Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

Tata Letak → Tambah Gadget → HTML / Javascript

3. Masukan kode di bawah ini:

<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://www.haisob.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
  <!-- /end -->

 Keterangan :

• Angka yang bewarna merah adalah kecepatan berpindahnya post.
• Angka yang bewarna Biru adalah waktu berhentinya setiap post sebelum berpindah lagi.
• Angka yang bewarna Hijau adalah jumlah post yang akan ditampilkan.
• Kode berwarna kuning diatas ganti sesuai dengan url/link blog kamu.

4. Save dan Selesai.

DEMO SHOW

UPDATE!

Untuk menjawap pertanyaan yang menayakan bagaimana cara mengganti gambar "no image" di widget Random Post bergerak ini?

Komentar

Lihat kode berwarnah biru dibawah ini, nah itu adalah gambar "no image".  Copy code dibawah ini dan ganti kode berwarna biru dibawah dengan url link gambar yang kamu inginkan:

<script type="text/javascript">
function rpthumbnt(json) {
 document.write('<ul class="rp_plus_img">');
 for (var i = 0; i < numposts; i++) {
  var entry = json.feed.entry[i];
  var posttitle = entry.title.$t;
  var posturl;
  if (i == json.feed.entry.length) break;
  for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break
   }
  }
  var thumburl;
  try {
   thumburl = entry.media$thumbnail.url
  } catch(error) {
   s = entry.content.$t;
   a = s.indexOf("<img");
   b = s.indexOf("src=\"", a);
   c = s.indexOf("\"", b + 5);
   d = s.substr(b + 5, c - b - 5);
   if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
    thumburl = d
   } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0lKsiTMDILxx2K7htuY7onQ-eKXV0NIiXEc7J4IHQWlFMBxoLIeItsnZMYISLHnuNN3RhvwzOk5YN7cIp6fpn171Rv2A3h7e20j8GZFriwTE4vVEwPS0RShZZsal_VPf46I5uyhGrAhU/d/noimagethumb.gif'
  }
  document.write('<li class="news-title clearfix">');
  document.write('<a href="http://www.haisob.com/" target="_blank"><img src="' + thumburl + '"/></a>');
  document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
  if ("content" in entry) {
   var postcontent = entry.content.$t
  } else if ("summary" in entry) {
   var postcontent = entry.summary.$t
  } else var postcontent = "";
  var re = /<\S[^>]*>/g;
  postcontent = postcontent.replace(re, "");
  if (postcontent.length < numchars) {
   document.write('<span class="news-text">');
   document.write(postcontent);
   document.write('</span>')
  } else {
   document.write('<span class="news-text">');
   postcontent = postcontent.substring(0, numchars);
   var quoteEnd = postcontent.lastIndexOf(" ");
   postcontent = postcontent.substring(0, quoteEnd);
   document.write(postcontent + '');
   document.write('</span>')
  }
  document.write('</li>')
 }
 document.write('</ul>')
}
function rpnewsticker() {
 last = $('ul#rp_plus_img li:last').hide().remove();
 $('ul#rp_plus_img').prepend(last);
 $('ul#rp_plus_img li:first').slideDown("slow")
}
</script>

Sekarang jika sudah diganti gambarnya, kembali pada kode widget yang pertama diatas, kemudian Replace kode :

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>

Dengan kode yang sudah kamu edit tadi.
Terakhir masukan ke widget html dan save.

Cara Mudah Membuat Horisontal Random Post dengan Efek Show Hide di Blogger

Cara Mudah Membuat Horisontal Random Post dengan Efek Show Hide di Blogger

By Ndo Andre At Selasa, Oktober 27, 2026

Pada kesempatan ini admin akan membagikan lagi sebuah widget random post untuk kamu pengguna blog Blogger.  Kalau biasanya kita meletakan widget random post di sidebar/samping blog, Widget yang satu ini akan tampil horisontal di paling atas halaman dan tampil di seluruh halaman blog. 

Secara default random post ini tidak langsung muncul, kamu harus mengarahkan kursor mouse dan klik kearah widget Blogger ini. Jadi, untuk menampilkan postingan random post kamu harus mengklik tandah panah pada widget ini, untuk lebih jelasnya lihat saja demonya di bawah.

Horizontal Random Posts Widget For Blogger

DEMO SHOW

Cara memasang widget Random Posts Horisontal di Blogger

1. Di Blogger dan pilih blog yang ingin di pasangi widget ini
2. Pilih Layout kemudian pilih Add a gadget dimana kamu ingin meletakan widget
3. Muncul pop-up window, kemudian pilh HTML/JavaScript:

Tata Letak → Tambah Gadget → HTML / Javascript

4. Masukan kode di bawah ini pada kotak yang muncul

Kode Widget :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
#toggle-bar{z-index:99999999;background: -webkit-linear-gradient(top, #333, #000); background: -moz-linear-gradient(top, #333, #000); background: -ms-linear-gradient(top, #333, #000); background: -o-linear-gradient(top, #333, #000); background: linear-gradient(to bottom, #333, #000);color: #fafafa;height:50px;width:100%;position:fixed; top:0; left:0;margin-bottom:50px; }
#toggle-bar-inner {line-height:50px;width:310px;margin:auto;text-transform:uppercase;font-size:12px;font-family:Verdana, Geneva, sans-serif;}
#toggle-bar-inner img {float:right; width:50px;cursor:pointer;}
.toggle-posts{width:100%;min-height:200px auto;background:#222;color:#fafafa;box-shadow:0px 3px 4px #ccc;-webkit-box-shadow:0px 3px 4px #ccc;position:absolute;display:none;}
#toggle-posts-inner{width:980px;margin:auto;}
ul#toggle-random li {width:150px;height:auto;list-style:none;float:left;margin:auto;margin-right:5px;}
.title-toggle h5{font-weight:normal;}
ul#toggle-random li img {opacity:0.8;width:100px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; border:3px solid #000;margin-top:5px;}
ul#toggle-random li img:hover {opacity:1;}
body{margin-top:50px;}
.credit img{position:absolute;top:15px;left:10px;width:20px;float:left;}
.arrow-rotate {transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);transition:all ease .5s;-moz-transition:all ease .5s;-webkit-transition:all ease .5s;-o-transition:all ease .5s;-ms-transition:all ease .5s;}
.post-show {display:block;animation: toggle .6s;-webkit-animation: toggle .6s;-webkit-transition:all ease .5s;transition:all ease .5s;}
@keyframes toggle {from {transform:scale(0,0);-moz-transform:scale(0,0)} to {transform:scale(1,1);-moz-transform:scale(1,1)}}
@-webkit-keyframes toggle {from {transform:scale(0,0);-webkit-transform:scale(0,0);} to {transform:scale(1,1);-webkit-transform:scale(1,1)}}
</style>
<script>
$(document).ready(function(){
$("#arrow").click(function(){
$("#arrow").toggleClass("arrow-rotate");
$(".toggle-posts").toggleClass("post-show");
});
});
</script>
<div id="toggle-bar">
<a class="credit" href='https://thesisnew.blogspot.com/' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULwGhNVPOsn8NJbs5JQQL9HToxOPt8dmhICgzn2AjWg7A5Dyphh78nt2jLVndRMiM33oFw__3srdmPuqie3eZLkUa7aKeaccYk3JAnkpsCaTM6HFDi7byWcvvosLRZcWqjSnij4wHXqQ/s1600/getthis.png'/></a>
<div id="toggle-bar-inner"><img id="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasuggJ6gw2YdaETJLTp82cU0QoGdrax3RdKwEDcitoeFtPtilqlhj3whB2yahQfNyvGVb_VO68nPgrqC3CmtjoxsLjegF9rr1QGyZxfmVX9cx1qAualWlmLJEn7qjLCCI9h_zCB0lG9A/s1600/arrow.png" /> sudah lihat yang ini (klik aja)? <i class="fa fa-hand-o-right"></i>
</div><!--Inner-->
<div class="toggle-posts">
<div id="toggle-posts-inner">
<ul id="toggle-random">
<script type="text/javaScript"> var rdp_numposts = 6; var rdp_snippet_length = 0; var rdp_comment = 'Comments';var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="https://thesisnew.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB86LfB9f96AXR-J5TUwFbddN931JuFm2IcK8IF4yw3iyooqb_J0bLcztooOsUFCTFqSAF6L1RZf0b6AfB0KLFwestitN3hvFiE8x_gUiCkFYQ9wH2-69iejm62aExuisFcKr9ZcLhN8PC/s1600/no-image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="title-toggle"><h5>'+m+"</h5>")}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="https://thesisnew.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script>
</ul>
</div>
</div>
</div>

Jika sudah ada kode Jquery versi berapapun (kode warna merah) di blog kamu maka kode ini tidak perlu dipasang lagi. Ganti link blog lain dengan link blog milikmu

5. Save dan selesai. 

Selamat, kini Horisontal Random Posts telah terpasang di blog kamu.

Membuat Resposive Recent Post Slider di Blogger! Postingan Terbaru Atau Label Tertentu

Membuat Resposive Recent Post Slider di Blogger! Postingan Terbaru Atau Label Tertentu

By Ndo Andre At Senin, Oktober 26, 2026

Slider ini akan menampilkan postingan terbaru yang baru kamu publikasikan atau juga bisa kamu atur menampilkan artikel terbaru berdasarkan label tertentu. Kamu dapat memasang slider ini misalnya di homepage blog atau di manapun di tempat yang kamu inginkan, bahkan bisa kamu tampilkan di dalam postingan. Slider ini juga sangat cocok bagi kamu pengguna template responsive karena slider ini sudah responsive.

Recent Post Slider Resposive

Cara Membuatnya di Blogger

Kamu bisa meletakan slider ini ke dalam template atau juga menambahkannya sebagai widget. Berikut adalah jika kamu ingin menambahkannya sebagai widget.

1. Sebelumnya kamu sudah membuat atau sudah memiliki Facebook Page.
2. Di Blog kamu 😄
3. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
4. Kemudian pilih widget HTML/JavaScript

Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

5. Masukan kode dibawah ini

<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.alamatblogkamu.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

4. Ganti http://www.alamatblogkamu.com/ dengan alamat blog/website kamu. Jika kamu ingin menampilkan recent post berdasarkan label tertentu, ganti tagName:false dengan tagName:"LabelKamu", (ganti LabelKamu dengan nama label yang ingin kamu tampilkan).
5. Save.

DEMO SHOW

Kamu bisa menambahkan tag kondisional jika kamu hanya ingin menampilkan widget ini pada halaman tertentu saja, misalnya hanya di homepage. Ok sekian slider yang dapat di bagikan untuk saat ini, semoga bermanfaat.

Begini Cara Mudah Membuat Widget Fixed Recent Post Efek Slide di Blogger

Begini Cara Mudah Membuat Widget Fixed Recent Post Efek Slide di Blogger

By BastianMan At Senin, Oktober 26, 2026

Widget adalah salah satu fitur atau elemen yang menarik dan disediakan untuk bisa ditampilkan di halaman blog yang posisinya dapat dipindah-pindahkan. Di dalam Blogger sendiri, telah disediakan berbagai macam widget yang bisa kamu pilih dan gunakan. Widget recent post adalah widget yang menampilkan artikel terbaru yang baru saja kamu publikasikan di blog kamu. Memilih widget yang tepat dan menarik untuk dipasang di blog, terkadang membuat kita bingung widget mana yang harus digunakan, karena saking banyaknya widget blog yang tersedia.

Fixed recent post ini sudah ditambahkan efek slide dengan css keyframe agar tampilannya lebih keren dan tentu saja untuk menarik perhatian pengunjung lebih di blog kamu. Widget recent post ini bersifat fixed, jadi walaupun halaman discroll letaknya tetap di sudut kanan blog. Ada juga widget Recent Post yang telah dimodifikasi dengan berbagai macam tampilan menarik. Seperti widget recent post ini bisa kamu atur apakah memang ingin menampilkan artikel terbaru atau bisa juga artikel terbaru dari label tertentu.

Fixed Recent Post widget

Cara Membuat Widget Fixed Recent Post Efek Slide di Blogger

1. Di Blogger pilih blog kamu

2. Pilih menu tata letak 👉 Tambahkan widget/Tambahkan gadget 👉 HTML/Javascript

Tata letak HTML / Javascript

3. Masukan kode dibawah ini

<style>

.bw-seocips a:link,.bw-seocips a:visited{color:#222;text-decoration:none}

.bw-seocips a:hover,.bw-seocips a:active{color:#222;text-decoration:none}

.bw-seocips {background:#fff;width:300px;margin:0;padding:0 10px 10px 10px;border:1px solid #ddd;box-shadow:0 2px 2px #ccc;font:13px arial;line-height:1.7em;position:fixed; bottom:1%; right:1%; z-index:9999; box-shadow:0 3px 4px #ddd; border:1px solid #ddd; -moz-animation:seocips-kiri 4s;-webkit-animation:seocips-kiri 4s;animation:seocips-kiri 4s;}

.bw-seocips ul, .bw-seocips li, .bw-seocips ul li {padding:7px 7px ;border-bottom:1px dotted #ddd;list-style:none;}

.bw-seocips a:link, bw-seocips a:visited {color:#222;text-decoration:none}

.bwTitle-seocips {Font:15px arial;border-bottom:1px solid #ddd;margin-bottom:10px;margin-left:-10px;margin-right:-10px;padding:12px;background: repeating-linear-gradient(45deg,transparent 0,transparent 70%,#6aa84f 100px,#6aa84f 1000px);box-shadow:0 2px 2px #ddd;}

.bwcontent-seocips{border:1px solid #ddd;padding: 5px 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}

#rcp2-seocips { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }

#rcp2-seocips:hover {  overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }

#rcp2-seocips ul { list-style-type:none; margin:0; padding:0; }

#rcp2-seocips li { list-style:none; height:80px; padding:10px; border:dotted #ddd 1px; margin:5px; background-color:#FFFFFF; }

#rcp2-seocips li:hover { border:solid #ddd 1px; }

#rcp2-seocips a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }

#rcp2-seocips .news-title { margin-bottom:5px; font-size:12px; color:#990000; }

#rcp2-seocips .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }

#rcp2-seocips img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:4px double #6aa84f; box-shadow:0 0 2px #e06666; }

@-webkit-keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

@keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/XedRcpSeocips.js"></script>

<div class="bw-seocips">

  <div class="bwTitle-seocips">

 <i class="fa fa-plus fa-spin"></i> <b>Recent Post</b>

    </div>

  <div class="bwcontent-seocips">

    <div class="bwcontent-seocips2">

  <!-- start -->

<!-- script start -->

<script type="text/javascript">

var speed = 400;

var pause = 3500;

$(document).ready(function(){

rivaiscript();

interval = setInterval(rivaiscript, pause);

});

</script>

<div >

<ul id="rcp2-seocips">

<script style="text/javascript">

var numposts = 10;

var numchars = 0;

</script>

<script

src="https://www.sepeser.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>

</ul>

</div> <!-- script end -->

  <!-- /end -->

</div></div></div>

Setting Widget:

Kode berwarna merah adalah lebar widget, silahkan ubah nilainya untuk menambah atau mengurangi lebar widget. Ganti kode berwarna biru diatas dengan link blog kamu.Jika kamu ingin menampilkan widget berdasarkan label, ubah kode seperti di bawah ini:

https://thesisnew.blogspot.com/feeds/posts/default/?orderby=published

Menjadi:

https://thesisnew.blogspot.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published

4. Ganti link berwarna biru diatas dengan link blog dan warna hijau dengan nama label blog.

5. Save widget.

Video Tutorial

Di atas adalah video turial cara membuatnya di Blogger, silahkan di lihat bagi kamu yang masih kebingungan dengan letak-letak di menu Blogger.

Penutup

Sebelumnya juga admin sudah berbagi cara menyisipkan link aktif di komentar blog juga tentang cara membuat efek hover pada gambar dan tentang cara membuat efek zoom berputar pada gambar. 

Dengan menambahkan widget recent post dengan efek slide adalah salah satu cara untuk membuat tampilan blog menjadi semakin menarik dan sedap dipandang. Selain bisa mempercantik desain, widget ini juga berfungsi untuk memperkaya fitur website. 

👉 LIVE DEMO 👈

Ada banyak pilihan widget yang bisa dipasang di blog kamu, mulai dari widget artikel populer, label, pencarian, hingga widget ikon media sosial, widgete slider, widget loading, dan masih banyak lagi. Selamat kini di blog kamu telah terpasang widget recent post dengan efek slide.

Cara Mudah Membuat CSS3 Image Slider With Stylized Thumbnails di Blogger

Cara Mudah Membuat CSS3 Image Slider With Stylized Thumbnails di Blogger

By Ndo Andre At Minggu, Oktober 25, 2026

Membuat tampilan blog menjadi lebih menarik tidak selalu harus menggunakan JavaScript yang rumit. Salah satu cara sederhana yang bisa dicoba adalah membuat CSS3 Image Slider With Stylized Thumbnails. Dengan fitur ini, kamu bisa menampilkan beberapa gambar dalam satu area slider, lengkap dengan thumbnail kecil sebagai tombol untuk memilih gambar yang ingin dilihat. 

Tampilan seperti ini cocok digunakan untuk berbagai kebutuhan, misalnya menampilkan foto, screenshot aplikasi, koleksi game, gambar produk, atau ilustrasi artikel. Yang menarik, slider ini dapat dibuat menggunakan CSS3 sehingga tampilannya bisa dibuat lebih ringan. Kamu juga bisa mengatur ukuran gambar, bentuk thumbnail, efek ketika gambar dipilih, serta posisi slider sesuai dengan desain blog. 

CSS3 Image Slider With Stylized Thumbnails

CSS3 Image Slider With Stylized Thumbnails

<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s100/seocips1.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s1600/seocips1.jpg"/>
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s100/seocips2.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s1600/seocips2.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s100/seocips3.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s1600/seocips3.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s100/seocips4.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s1600/seocips4.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s100/seocips5.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s1600/seocips5.jpg"/>
</div>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>
<style>
body {background: #333;}
.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 10px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>

Oh ya, lebar gambar harus sesuai dengan lebar slider dimana diatas lebar slider adalah 640 px. Silahkan di ganti gambar-gambarnya dan edit sesuka kamu.

LIHAT DEMO

 

Dengan menggunakan CSS3 Image Slider With Stylized Thumbnails, tampilan blog bisa menjadi lebih menarik. Slider ini juga cukup fleksibel karena dapat digunakan untuk menampilkan berbagai jenis gambar sesuai kebutuhan. Kamu bisa mengubah ukuran, warna, posisi, maupun bentuk thumbnail agar sesuai dengan desain Blogger yang digunakan. Silakan coba dan sesuaikan tampilannya agar lebih cocok dengan tema blog kamu.

Cara Membuat Slider Accordion Style Modern dengan CSS3 untuk Mempercantik Blog

Cara Membuat Slider Accordion Style Modern dengan CSS3 untuk Mempercantik Blog

By Ndo Andre At Minggu, Oktober 25, 2026

Tampilan blog atau website yang menarik tidak selalu harus menggunakan banyak animasi atau script yang rumit. Salah satu cara sederhana yang bisa digunakan untuk membuat tampilan halaman menjadi lebih modern adalah dengan menambahkan Slider, contohnya Slider Accordion CSS3. Elemen ini dapat menampilkan beberapa gambar atau konten dalam satu area sehingga halaman terlihat interaktif.

Cocok bagi kamu yang sedang belajar CSS dan ingin mencoba membuat efek slider sederhana tanpa harus menggunakan plugin tambahan yang berat. Dengan memanfaatkan kemampuan CSS3, tampilan accordion dapat dibuat lebih menarik dengan efek transisi dan animasi yang cukup halus. Slider Accordion juga bisa dimanfaatkan untuk berbagai kebutuhan, misalnya menampilkan artikel pilihan, gambar, banner, informasi produk, portofolio, atau konten lainnya. Selain membuat tampilan lebih menarik, penggunaan CSS3 juga dapat membantu menjaga kode tetap sederhana dan mudah disesuaikan.

CSS3 Slider Accordian Style

CSS3 Slider Accordian Style

<div class="accordian">
  <ul>
    <li>
      <div class="image_title">
        <a href="https://thesisnew.blogspot.com/" target="_blank">KungFu Panda</a>
      </div>
      <a href="https://thesisnew.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s1600/seocips1.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="https://thesisnew.blogspot.com/" target="_blank">Toy Story 2</a>
      </div>
      <a href="https://thesisnew.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s1600/seocips2.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="https://thesisnew.blogspot.com/" target="_blank">Wall-E</a>
      </div>
      <a href="https://thesisnew.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s1600/seocips3.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="https://thesisnew.blogspot.com/" target="_blank">Up</a>
      </div>
      <a href="https://thesisnew.blogspot.com/">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s1600/seocips4.jpg" />
      </a>
    </li>
    <li>
      <div class="image_title">
        <a href="https://thesisnew.blogspot.com/" target="_blank">Cars 2</a>
      </div>
      <a href="https://thesisnew.blogspot.com/" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s1600/seocips5.jpg" />
      </a>
    </li>
  </ul>
</div>
<style>
/*Now the styles*/
.accordian {
  width: 805px;
  height: 320px;
  overflow: hidden;
  /*Time for some styling*/

  margin: 20px auto;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
  width: 2000px;
  /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}
.accordian li {
  position: relative;
  display: block;
  width: 160px;
  float: left;
  border-left: 1px solid #888;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
  /*Transitions to give animation effect*/

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*If you hover on the images now you should be able to
 see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {
  width: 40px;
}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {
  width: 640px;
}
.accordian li img {
  display: block;
}
/*Image title styles*/
.image_title {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 640px;
}
.image_title a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  font-size: 16px;
}
</style>

Width of image = 640px
Total images = 5
So width of hovered image = 640px
Width of un-hovered image = 40px - you can set this to anything
So total container width = 640 + 40*4 = 800px;
Default width = 800/5 = 160px;

DEMO SHOW

 

Dengan memanfaatkan CSS3, kamu dapat membuat slider yang terlihat modern, ringan, dan responsive tanpa harus menggunakan JavaScript atau plugin tambahan. Kode yang digunakan juga cukup sederhana, baik untuk menampilkan gambar, artikel, banner, maupun konten lainnya. 

Semoga tutorial ini bermanfaat dan membantu kamu menambahkan widget yang menarik pada blog. Selamat mencoba dan jangan ragu untuk bereksperimen dengan warna, ukuran, efek transisi, serta desain lainnya agar sesuai dengan yang kamu inginkan.

Mau Memasang Slider Otomatis Artikel Terbaru di Sidebar Blogger? Begini Caranya

Mau Memasang Slider Otomatis Artikel Terbaru di Sidebar Blogger? Begini Caranya

By Ndo Andre At Minggu, Oktober 25, 2026

Apakah sobat tertarik untuk mempercantik tampilan blog? atau sobat ingin menarik perhatian pengunjung blog agar dapat melihat artikel terbaru sobat? maka salah satu cara adalah memasang slider otomatis di samping postingan blog. Tutorial berikut ini hampir sama dengan turorial sebelumnya mengenai cara memasang slider otomatis di blog, hanya saja letak dari slidernya berbeda.

Sebenarnya ini sudah pernah saya posting diblog saya sebelumnya, tapi karena blognya terhapus karena sudah tidak diperpanjang jadi saya mempostingnya kembali disini.

Widget Slider Otomatis Artikel Terbaru

Widget Slider Otomatis Artikel Terbaru

DEMO SHOW

Cara Memasangnya di Blogger

1. Di Blog kamu 😄
2. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript

Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

4. Masukan kode dibawah ini

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Brando07/haisob/newbe/slider-sidebar-haisob.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.rawgit.com/Brando07/haisob/newbe/sidebar-slide-haisob.js"></script>
<script type="text/javascript">
makeSlider({url: "http://www.haisob.com/"});
</script>

Kode jquery berwarna merah tidak usah dipasang jika ditemplate sobat sudah ada kode yang seperti itu atau jquery versi berpapun. Kode warna hijau ganti dengan alamat blog sobat.
5. Save.

Sekian tutorial cara memasang Slider Otomatis artikel terbaru di Sidebar Blog, semoga bermanfaat.

Cara Membuat Search Box di Blogger Tanpa Dialihkan ke Halaman Search Result

Cara Membuat Search Box di Blogger Tanpa Dialihkan ke Halaman Search Result

By Ndo Andre At Minggu, Oktober 25, 2026

Buat kamu yang sedang mengembangkan blog di Blogger, keberadaan kotak pencarian atau Search Box tentu sangat membantu pengunjung untuk menemukan artikel yang mereka cari. Biasanya, ketika pengunjung mengetik kata kunci pada kotak pencarian, mereka akan langsung diarahkan ke halaman hasil pencarian atau search result. Fitur ini memang berguna, tetapi ada kalanya kita ingin membuat tampilan pencarian yang lebih praktis tanpa harus mengarahkan pengunjung ke halaman hasil pencarian. 

Dengan cara ini, kotak pencarian bisa dibuat lebih sesuai dengan kebutuhan dan tampilan blog yang sedang kamu gunakan. Kamu juga bisa menyesuaikan desainnya agar terlihat lebih rapi, ringan, dan nyaman digunakan. Menariknya lagi, cara membuatnya tidak terlalu sulit. Kamu tidak perlu menjadi ahli coding untuk mencoba tutorial ini. Cukup menggunakan sedikit kode HTML, CSS, dan JavaScript yang nantinya bisa dipasang pada widget Blogger. 

Search Form

Cara membuatnya di Blogger

1. Di Blog Blogger 
2. Pilih menu Template ➔ Edit HTML

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { width:300px; left:100px;padding:5px; }
#ajax-search-form { position:relative; font:normal normal 13px Arial,Sans-Serif; }
#ajax-search-form input { border:1px solid #e3e3e3; background-color:white; font:normal normal 12px/100% Arial,Sans-Serif; color:black; margin:0 0; height:22px; line-height:22px; padding:0 5px; width:140px; }
#ajax-search-form input[type="submit"] { width:auto; background-color:#49afcd; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#49afcd; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:710px; position:absolute; right:6px; top:28px; z-index:99; color:white; border-radius:0 0 3px 3px; box-shadow:0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3); display:none; }
#search-result .close { display:block; position:absolute; top:2px; font-size:20px; right:10px; line-height:normal; color:white; }
#search-result ul { margin:0; overflow:hidden; max-height:405px; border-bottom:1px solid #45A5C2; border-top:1px solid #45A5C2; list-style:none; }
#search-result li { height:68px; overflow:hidden; padding:0 5px; border-top:1px solid #45A5C2; border-bottom:1px solid #45A5C2; position:relative; }
#ajax-search-form a { color:#741F27; text-decoration:none; }
#search-result h4 { display:block; margin:0 0 10px 5px; color:white; }
#search-result p { font-size:10px; color:white; }
#search-result span { width:50px; height:50px; display:block; float:left; padding:2px; margin-right:5px; margin-top:5px; background-color:whitesmoke; }
#search-result img { width:100%; height:100%; display:block; }
#search-result h5 { color:#1E598E; overflow:hidden; font-size:100%; margin-top:2px; height:16px; }
#search-result h5:hover { color:#333; text-decoration:underline; }
}
#search-result mark { color:white; background:#085C0B; padding:0 3px; }
#search-result ul:hover { overflow:auto; }

4. Letakan script di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function (x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d)
    },
    easeInQuad: function (x, t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b
    },
    easeInCubic: function (x, t, b, c, d) {
        return c * (t /= d) * t * t + b
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t + 2) + b
    },
    easeInQuart: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t + b
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b
    },
    easeInQuint: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t == 0) {
            return b
        }
        if (t == d) {
            return b + c
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * Math.pow(2, 10 * (t - 1)) + b
        }
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
        }
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
    },
    easeInElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d / 2) == 2) {
            return b + c
        }
        if (!p) {
            p = d * (0.3 * 1.5)
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
        }
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b
        } else {
            if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
            } else {
                if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
                }
            }
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d / 2) {
            return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * 0.5 + b
        }
        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
    }
});
/* Search*/
var searchFormConfig = {
    summaryPost: true,
    resultThumbnail: true,
    fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNBZiID5XA23HPoUNiBq27a3U9pQsvf-TPoTIeS_31QGBURl3gdJW1zTxkT6lunj6o445aK5QANp2g52Jnp8oHo_BzH4QsM8swhb6S0hHRpIjTQBlr_RiHMMk0RfzxbjDsP48bgxP714/s50-c/Noim.png",
    thumbSize: 50,
    summaryLength: 100
};
(function (c) {
    var a = c("#ajax-search-form"),
        d = a.find(":text");
    config = searchFormConfig;
    a.append('<div id="search-result"></div>');
    var b = c("#search-result");
    a.on("submit", function () {
        var e = d.val();
        b.slideDown(500, "easeOutBounce").html("Loading...");
        c.ajax({
            url: "http://www.haisob.com/feeds/posts/summary?alt=json-in-script&q=" + e + "&max-results=9999",
            type: "get",
            dataType: "jsonp",
            success: function (q) {
                var p = q.feed.entry,
                    m, l, o, n, g = "";
                if (p !== undefined) {
                    g = "<h4>Search results for keyword &quot;" + e + "&quot;</h4>";
                    g += '<a class="close" href="/">&times;</a><ul>';
                    for (var k = 0; k < p.length; k++) {
                        var f = new RegExp(e, "ig"),
                            o = p[k].title.$t.replace(f, "<mark>" + e + "</mark>");
                        for (var h = 0; h < p[k].link.length; h++) {
                            if (p[k].link[h].rel == "alternate") {
                                n = p[k].link[h].href
                            }
                        }
                        if (config.summaryPost === true) {
                            if ("content" in p[k]) {
                                m = p[k].content.$t
                            } else {
                                if ("summary" in p[k]) {
                                    m = p[k].summary.$t
                                } else {
                                    m = ""
                                }
                            }
                        }
                        if (config.resultThumbnail === true) {
                            if ("media$thumbnail" in p[k]) {
                                l = p[k].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c")
                            } else {
                                l = config.fallbackThumb
                            }
                        }
                        m = m.replace(/<\S[^>]*>/g, "");
                        if (m.length > config.summaryLength) {
                            m = m.substring(0, config.summaryLength) + "..."
                        }
                        m = m.replace(f, "<mark>" + e + "</mark>");
                        g += '<li><a href="' + n + '" target="_blank"><span><img src="' + l + '" alt="" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"
                    }
                    g += "</ul>";
                    b.html(g)
                } else {
                    b.html('<a class="close" href="/">&times;</a><strong>No result!</strong>')
                }
            },
            error: function () {
                b.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>')
            }
        });
        return false
    });
    a.on("click", ".close", function () {
        b.slideUp(500, "easeInExpo");
        return false
    })
})(jQuery);
//]]>
</script>

5. Ganti kode berwarna merah diatas dengan alamat Blog kamu. Selanjutnya salin kode dibawah ini dan letakkan dimana kamu ingin memasang search form ini, bisa di menu navigasi atau di sidebar.

<div id="form-search">
    <form action="/search" id="ajax-search-form">
        <input name="q" type="text" />
        <input type="submit" value="Search" />
    </form>
</div>

6. Save Template.

LIHAT DEMO

Dengan menggunakan cara di atas, kamu bisa membuat Search Box di Blogger yang lebih praktis dan sesuai dengan kebutuhan blog. Selain itu, pengunjung bisa menggunakan fitur pencarian dengan lebih nyaman tanpa harus merasa terganggu oleh proses pengalihan yang tidak diperlukan. Jadi, buat kamu yang sedang mencoba mempercantik tampilan blog atau ingin membuat fitur pencarian yang berbeda dari bawaan Blogger, tutorial ini bisa menjadi salah satu pilihan yang menarik untuk dicoba.

Semoga tutorial ini bisa membantu dan bermanfaat. Selamat mencoba, dan jangan takut untuk melakukan sedikit modifikasi agar hasilnya sesuai dengan tampilan blog kamu.