Cara Membuat Widget Recent Post Sederhana

Blogger widget

Cara Membuat Widget Recent Post Sederhana

Cara Membuat Widget Recent Post Sederhana

TipsIM.com - Cara membuat widget recent post sederhana. Widget recent post adalah suatu widget yang menampilkan beberapa postingan artikel terbaru atau artikel yang baru saja di posting. Hal ini memudahkan pengunjung untuk mengetahui dimana bisa menemukan artikel terbaru.

Baca juga: Cara Memasang Widget Breaking News

Recent post memiliki dua macam, recent post thumbnail yang menggunakan gambar dan recent post no thumbnail yang tidak menggunakan gambar atau biasa disebut dengan recent post sederhana atau simpel. Nah, kali ini, saya akan mencoba berbagi tutorial bagaimana cara membuat recent post tanpa tumbnail atau recent post sederhana agar terkesan lebih simpel dan enak dilihat.

Cara membuatnya sebenarnya tidak sulit. Tanpa basa-basi lagi, simak langkah-langkahnya dibawah ini.

Cara membuat recent post

1. Buka blogger anda
2. klik tata letak

Widget Recent Post Sederhana

3. Lalu klik add gadget atau tambah gadget

Widget Recent Post Sederhana

4. Kemudian pilih HTML/JavaScript

Widget Recent Post Sederhana

5. Setelah itu, lalu anda masukkan kode script berikut ini didalam HTML/JavaScript tadi

<div id="hlrpsb">
<script style="text/javascript" src="https://googledrive.com/host/0B4jA2kVEcSlvWENnOW9LZF9kbzg"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://pintukom.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>JavaScript is not enabled</noscript>
<style type=text/css>
#hlrpsb a {color: #333333; font-size: 13px;}
#rpdr, #rpdr a {color:#333333;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Keterangan: Tulisan yang berwarna biru adalah jumlah postingan yang akan ditampilkan, bisa anda ganti sesuka hati Tulisan yang berwarna merah adalah URL blog. Silahkan ganti dengan URL blog anda

6. Bila sudah, simpan dan lihat hasilnya. Mudah kan?

Sekian tutorial tentang cara membuat widget recent post sederhana. Teruslah mencoba dan jangan takut gagal. Semoga tutorial ini bermanfaat untuk anda. Terimakasih telah berkunjung dan membaca sob.

Cara Mudah Memasang Widget Breaking News di Blog

Blogger widget

Cara Mudah Memasang Widget Breaking News di Blog

Cara Mudah Memasang Widget Breaking News di Blog

TipsIM.com - Cara memasang widget breaking news. Kali ini TipsIM.com akan berbagi tutorial mengenai bagaimana cara memasang widget breaking news di blog. Mungkin di blog atau website sebelah sudah banyak yang memasang widget breaking news. Namun breaking news yang kali ini berbeda dengan yang lainnya dan lebih stylish.

Widget breaking news itu sendiri adalah suatu widget yang menampilkan beberapa judul berita atau artikel terbaru yang telah anda posting atau publish. Nah, bagaimana tampilannya? Apakah widget ini berefek memperberat loading blog atau web? Anda tidak perlu khawatir, widget breaking news ini dibuat dengan tampilan sederhana dan ringan. Jadi tidak perlu takut blog anda akan lemot atau lambat ketika diakses.

Bersumber dari Arlina Design. Widget ini memiliki tampilan thumbnail judul artikel yang disertai gambar dengan efek slide yang lebih halus serta kecepatan yang telah disesuaikan. Jadi, anda tidak perlu ribet mengatur kembali kecepatan yang ada ada widget breaking news ini. Daripada penasaran, silahkan anda ikuti langkah-langkahnya dibawah ini.

Cara Memasang Widget Breaking News

1. Silahkan anda buka blogger anda dan masuk pada tampilan dashboard

2. Pilih Template lalu klik Edit HTML

3. Silahkan anda cari kode ]]></b:skin> atau </style> dengan menekan ctrl+f dalam kolom HTML tersebut.

4. Kemudian anda masukan kode berikut ini tepat diatas kode ]]></b:skin> atau </style> 

/* CSS News Ticker */

.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #0888b6}

.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}

.ticker-wrap>span>a{color:#222;text-decoration:none}

#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}

#ticker ul{padding:0;margin:0;list-style:none}

#ticker ul li{height:45px;white-space:nowrap}

#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}

#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}

#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}

#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Keterangan: Anda bisa merubah warna serta ukurannya sesuai keinginan anda Kode yang berwarna merah adalah warna background Kode berwarna biru adalah warna border pinggir kanan  Bila anda ingin mencari kode warna HTML, anda bisa buka disini Kode Warna HTML Lengkap

5. Setelah itu, anda cari kode </body>, dan letakkan kode script berikut ini tepat diatas </body>

<script type='text/javascript'>

//<![CDATA[

// Breaking News ticker by http://www.arlinadzgn.com

function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});

//]]>

</script>

6. Jika sudah, silahkan anda pasang markup dibawah ini bebas dimanapun ingin anda pasang. Kode ini adalah kode markup letak widget breaking news. Misal: Jika anda letakkan di bawah menu, maka posisinya akan dibawah menu, jika di atas judul maka akan terletak di atas judul. Letakkan diantara <body> dan </body>

 

<div class='ticker-wrap' data-domain='TipsIM.com'>

<div id='ticker'>

</div>

</div>

Keterangan: Silahkan anda ganti kode yang di block biru dengan alamat blog atau web anda.

7. Setelah dirasa selesai semua, silahkan anda klik simpan atau save. Jika anda kurang mantab, anda bisa klik pertinjauan terlebih dahulu untuk melihat hasil sementara. Kalau sudah sesuai baru anda klik simpan.

Baca juga: Cara Memasang SEO Smart Link

Demikian tutorial tentang cara mudah memasang widget breaking news di blog. Selamat mencoba dan semoga berhasil. Jangan menyerah sebelum anda bisa. Karena blogger sejati tak akan pernah mengenal kata lelah. Semoga bermanfaat dan terimakasih.

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

Blogger widget

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

 
Cara membuat widget profil ala mas cholis di blog. Sore sob. Maaf lama gak posting. Biasa anak kuliah tugasnya numpuk. Hehe. Di postingan artikel kali ini saya akan mencoba membahas bagaimana cara membuat widget profil (Admin blog) ala mas cholis.

Alasan pertama saya menulis artikel cara membuat widget ini adalah karena ada yang bertanya kepada saya lewat emal.

"Bagaimana sih gan cara membuat widget about me (admin blog) seperti di blog agan?"

Nah, alasan yang kedua adalah untuk berbagi. Jadi, bukan hanya saya atau yang bertanya saja yang tahu caranya. Agar semua pengguna internet yang membaca artikel ini bisa tahu bagaimana cara membuat wiget profil tersebut.

Sebelum berlanjut ke cara pembuatannya, saya sedikit mau menjelaskan tentang widget ini sob. Sebenarnya saya membuat profil tersebut secara manual menggunakan corel draw. Jadi, gambar atau foto tersebut murni penggabungannya dari corel draw, lalu kemudian ditempelkan menjadi widget.

Daripada penasaran, langsung saja simak langkah-langkahnya berikut ini sob:

1. Buat foto dan backgroundnya terlebih dahulu

Di langkah pertama ini, silahkan anda pilih foto anda yang paling tampan sob. Biar seluruh jagat internet mengenal ketampanan sobat. hehe.

#1. Contoh foto saya seperti ini sob

Sobat bisa pilih foto sesuka hati yang sekiranya cocok.

#2. Kemudian pilih background yang anda inginkan sob. Untuk pilihan backgroundnya anda bisa download disini.

#3. Kemudian buka corelDRAW dan gabungkan antara foto anda dengan background. Dan hasil penggabungan saya seperti gambar dibawah ini sob.

 
#4. Setelah selesai digabung, silahkan anda simpan dengan format .jpg ataupun .png terserah sobat.

2. Pasangkan gabungan foto yang telah dibuat di sidebar

Setelah anda menggabungkan antara foto anda dengan background menggunakan corelDRAW. Sekarang saatnya anda memasanya di widget sidebar blog sobat. 

#1. Silahkan buka blog anda sob.

#2. Pilih tata letak > tambahkan gadget > HTML/JavaScript.

#3. Kemudian copy pastekan kode dibawah ini kedalam HTML/JavaScript.

<div class='widget-mc' style="border:1px solid #ddd">
<div height="auto" width="165" class='head-bg' style='background-image: url()'>
<div class='my-pic'><img title='mascholis' alt='mascholis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsJ2PHrGG2hKW_tDLtNsERDlV2nqYHPboeeSQBpzPCHVMiUNlaVhJIt20soFomyA8N1XvhWB30CFfLy7l1YbXxwcHCIQEFS_XdJO7pzWXCnEkPxnbdG8yjut4b7kb9S2XqDGmmB2Rysk/s1600/akupshoppp.png' width='165' data-align='center' height='auto' /></div>
<div class='my-data'>
<span class='my-name' style='font-weight:bold;font-size:15px'>
<a href='https://plus.google.com/u/0/+KholiselHafidz7' itemprop='url' title='+kholiselHafidz7' target='blank'>
<span itemprop='name'>mascholis</span></a>
</span></div></div>
<div class='my-words'>
<div data-margin="5" class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+KholiselHafidz7" data-rel="author"></div>
</div></div>

Keterangan:

• Kode yang berwarna BIRU adalah URL gambar. Silahkan ganti dengan URL gambar anda sob.
• Kode yang berwarna Hijau adalah nama yang akan ditampilkan dibawah foto. Silahkan ganti dengan nama anda sob.
• Kode yang berwarna MERAH adalah ID GOOGLE+. Silahkan anda isikan dengan ID Google+ sobat.
• Untuk ukuran maupun posisi bisa anda atur sendiri sesuai keinginan anda sob.

#4. Setelah selesai lalu klik simpan. Dan kemudian lihat hasilnya sob.

Okee, jadi sob. Bagaimana, mudah kan? Semoga tutorial cara membuat widget profil keren di blog ini bisa bermanfaat. Jika ada yang ingin ditanyakan silahkan tulis di komentar. Terimakasih telah membaca sob. Selamat mencoba.

Cara Membuat Sticky Widget dengan Mudah

Blogger widget

Cara Membuat Sticky Widget dengan Mudah

Cara membuat sticky widget dengan mudah. Sicky widget adalah dimana widget pada suatu blog bisa melayang atau menempel pada layar. Jadi meskipun di scroll kebawah ataupun keatas akan tetap pada posisinya. Akan kelihatan lebih keren jika blog anda dipasang sticky widget. Blog akan kelihatan lebih professional. Ini memang benar, facebook saja memakai sticky widget, dan saya juga memakainya. hehe..

Cara Membuat Sticky Widget dengan Mudah

"Apakah cuma widget saja yang bisa dipasang sticky?"

Sebenarnya bukan hanya widget saja sob, anda juga bisa memasangnya pada menu navigasi anda atau yang lainya. Jadi pada intinya, apapun yang dipasang kode script sticky ini akan tetap pada posisinya dilayar meskipun dscroll kebawah maupun keatas. Jika menu navigasi yang dipasang sticky, ini akan lebih memudahkan pengunjung untuk langsung memilih kategori pada artikel yang dipasang di menu. Jadi tidak perlu scroll ke atas terlebih dahulu, karena sudah menempel di layar ketika discroll ke bawah,

"Lalu, bagaimana cara memasangnya mas? Sulit apa tidak?"

Tenang sob, cara memasang scticky widget sangatlah mudah bila sudah tahu scriptnya, hehe.. Tapi tenang, anda tidak perlu membuat scriptnya lagi, disini saya sudah menyediakan script untuk langsung dipasang pada blog anda. Untuk cara pemasangannya, anda bisa ikuti langkah-langkahnya dibawah ini.

Baca juga Cara mudah membuat widget recent post dengan efek slider

Cara Membuat Sticky Widget

1. Silahkan anda masuk pada dashboard blog anda sob.

2. Kemdian pilih template lalu edit HTML.

3. Silahkan cari kode </head> dengan menekan ctrl+f, lalu copy pastekan kode dibawah ini dan letakkan tepat diatas atau sebelum kode </head>. (Lihat gambar dibawah kotak script)

<!—sticky widget halus-->

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

    <script type='text/javascript'>

    /*<![CDATA[*/

    // Sticky Widget

    (function($) {

    var defaults = {

    topSpacing: 0,

    bottomSpacing: 0,

    className: 'is-sticky',

    center: false

    },

    $window = $(window),

    $document = $(document),

    sticked = [],

    windowHeight = $window.height(),

    scroller = function() {

    var scrollTop = $window.scrollTop(),

    documentHeight = $document.height(),

    dwh = documentHeight - windowHeight,

    extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

    for (var i = 0; i < sticked.length; i++) {

    var s = sticked[i],

    elementTop = s.stickyWrapper.offset().top,

    etse = elementTop - s.topSpacing - extra;

    if (scrollTop <= etse) {

    if (s.currentTop !== null) {

    s.stickyElement.css('position', '').css('top', '').removeClass(s.className);

    s.currentTop = null;}

    }

    else {

    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;

    if (newTop < 0) {

    newTop = newTop + s.topSpacing;

    } else {

    newTop = s.topSpacing;

    }

    if (s.currentTop != newTop) {

    s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);

    s.currentTop = newTop; }}}

    },

    resizer = function() {

    windowHeight = $window.height();

    };

    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):

    if (window.addEventListener) {

    window.addEventListener('scroll', scroller, false);

    window.addEventListener('resize', resizer, false);

    } else if (window.attachEvent) {

    window.attachEvent('onscroll', scroller);

    window.attachEvent('onresize', resizer);}

    $.fn.sticky = function(options) {

    var o = $.extend(defaults, options);

    return this.each(function() {

    var stickyElement = $(this);

    if (o.center)

    var centerElement = "margin-left:auto;margin-right:auto;";

    stickyId = stickyElement.attr('id');

    stickyElement

    .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')

    .css('width', stickyElement.width());

    var elementHeight = stickyElement.outerHeight(),

    stickyWrapper = stickyElement.parent();

    stickyWrapper

    .css('width', stickyElement.outerWidth())

    .css('height', elementHeight)

    .css('clear', stickyElement.css('clear'));

    sticked.push({

    topSpacing: o.topSpacing,

    bottomSpacing: o.bottomSpacing,

    stickyElement: stickyElement,

    currentTop: null,

    stickyWrapper: stickyWrapper,

    elementHeight: elementHeight,

    className: o.className});

    });

    };

    })(jQuery);

    /*]]>*/

    </script>

    <!—sticky widget halus -->

4. Kemudian carilah kode </body> dengan cara seperti poin 3. Lalu copy pastekan kode dibawah ini tepat diatas kode </body>. (Lihat gambar dibawah kotak script)

    <script type='text/javascript'>

    $(document).ready(function(){

    $(&quot;#popularpost1&quot;).sticky({topSpacing:50});

    });

    </script>

Baca juga Berbagai macam web tools untuk edit blog

Keterangan

• Silahkan ganti tulisan #popularpost yang berwarna biru dengan nama widget yang ingin dijadikan sticky.
• Silahkan ganti topSpacing yang bernilai 50 dan berwarna merah itu dengan sesuka anda. Topspacing adalah jarak widget dari atas dengan satuan pixel.

5. Jika sudah semua, silahkan klik save template. Jika belum yakin, anda bisa klik pertinjauan terlebih dahulu dan lihat hasilnya dalam kolom pertinjauan. Jika sudah berfungsi benar dan tidak eror, silahkan klik save template.

Demikian artikel saya tentang tutorial cara membuat sticky eidget dengan mudah. Jika masih bingung dan ada yang ditanyakan, silahkan tulis komentar dibawah. Semoga artikel ini bermanfaat bagi anda sob. Terimakasih.

Cara Memasang Widget Recent Post dengan Efek Slider

Blogger widget

Cara Memasang Widget Recent Post dengan Efek Slider

Cara Memasang Widget Recent Post dengan Efek Slider

Cara Memasang widget recent post dengan efek slider. Selamat malam sob. Kali ini saya akan berbagi tutorial tentang bagaimana cara memasang widget recent post. Recent yang ini berbeda dengan yang lainnya sob. Mungkin sudah banyak yang memposting artikel tentang widget recent post. Namun sebagian besar recent post-nya terlihat terlalu sederhana. Jadi terlihat kurang menarik.

Widget recent post yang saya postingkan kali ini tidak kalah menarik dengan widget recent post lainnya. Dilansir dari arlinadesign, widget recent post ini memiliki efek slider beserta gambar. Efek slider pada widget ini sudah berjalan secara otomatis dan dengan kecepatan yang telah sesuai. Namun anda juga bsia mengatur kecepatannya sendiri. Bukan hanya kecepatan, anda juga bisa mengatur munculnya artikel dalam recent post berdasarkan label tertentu. Jadi akan terlihat lebih menarik dan pastinya menyejukkan ketika dipandang.

Widget recent post ini bisa anda pasang di sidebar, di homepage, maupun di halaman statis. Ini sesuai keinginan anda sendiri. Namun yang lebih pas adalah dipasang di sidebar, sebab ukurannya sudah pas. Nah, langsung saja simak langkah-langkahnya.

Memasang Widget Recent Post Slider

1. Silahkan buka dashboard (halaman pertama) pada blogger sobat.

2. Pilih Tata Letak > Add New Gadget (Tambahkan Gadget).
Lihat gambar dibawah ini.

3. Pilih HTML/JavaScript. Lalu masukkan kode script berikut ini kedalam kolom tersebut.
Pastikan anda meletakkan kode script sesuai dengan gambar dibawah ini. 

<style scoped="" type="text/css">
ul.rcentside
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside
li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:650px }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:auto}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{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDNnLS43lwc0w89BXWT0qGkat8SVFssh0s2a2p4FGcsrSJvG4-cQ04oAJmhAox-2k-iZufF0v4gphGV78WCz2CRw18DV5yo0SDKe0gSyB3P_vT_ayuQ_5aYxxrSJDuPKDpGn0fPIajxQ/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:0px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}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 type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "http://mascholis7.blogspot.co.id/",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

Keterangan Widget

• Blog URL, Silahkan ganti URL blog http://mascholis7.blogspot.co.id/ dengan URL blog sobat
• MaxPost: 8, adalah jumlah post yang akan ditampilkan bergantian
• ImageSize: 300, adalah ukuran atau dimensi gambar dalam satuan pixel
• Interval: 5000, adalah waktu yang dibutuhkan untuk pergantian slider
• Autoplay: true, adalah pengaturan slider. Jika tidak ingin menggunakan efek slider, anda bisa menggantinya dengan false.
• TagName: Fasle, adalah kategori penayangan recent post. Jika ingin menambahkan artikel berdasarkan label, anda bisa mengganti false dengan nama label tertentu. Misal, anda ingin urut berdasarkan label Blogger, maka anda tinggal isikan TagName: "Blogger".

4. Klik save atau simpan dan lihat hasilnya.

• Demo

Demikian tutorial dari saya tentang Cara membuat widget recent post dengan efek slider. Bila masih ada yang belum dimengerti atau masih bingung, anda isa bertanya dengan menuliskan komentar dibawah. Atau anda bisa menghubungi saya langsung di contact us. Semoga artikel ini bermanfaat dan terimakasih.