Cara membuat berbagai macam widget recent post

Blogger

Biljabbaradnan's blog - Kali ini akan membagikan suatu artikel yang terbilang sangat wajib diketahui oleh para blogger, yaitu "Widget Recent Post" dan saya akan membagikan widget recent post dengan beberapa macam. jadi bisa sobat simak langsung artikel berikut ini.

Widget artikel terbaru atau yang biasa disebut recent post adalah sebuah widget yang akan menampilkan semua artikel yang baru kita buat pada setiap halaman blog.

Widget ini berfungsi sebagai :

Memberi tahu pengunjung tentang artikel terbaru kita.
Dapat membantu kita dengan cara membagikan artikel terbaru kepada pengunjung secara otomatis.
Jadi kita tidak harus memberi tahu pengunjung satu-persatu bahwa kita telah menerbitkan suatu artikel.
Bisa dibilang widget ini adalah widget wajib yang harus dimiliki para blogger.

Jadi mari saatnya kita buat bersama widget wajib ini sobat.

Nama widgetnya adalah Recent Post.

1. Tahap Pertama : Memilih Recent Post

Silahkan sobat pilih salah satu widget recent post yang ingin digunakan.

Artikel terbaru 1 : Recent post bergerak

Kodenya silahkan dicopy :



<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 = 10;

var pause = 5000;

$(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://biljabbaradnan.blogspot.co.id//feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

  <!-- /end -->

Artikel Terbaru 2 : Recent post melayang

Kodenya silahkan dicopy :


<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/1.7.2/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 = 5;

var numchars = 0;

</script>

<script

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

</ul>

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

  <!-- /end -->

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

Artikel Terbaru 3 : Recent Post berwarna

Kodenya silahkan di copy :



<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>

<script type='text/javascript'>

//<![CDATA[

    var numfeed = 5;

    var startfeed = 0;

    var urlblog = "http://www.biljabbaradnan.blogspot.com";

    var charac = 40;

    var urlprevious, urlnext;

function seocipsfeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbp4043ocIuhKT_BSf7cP896gh6uaS8vXgc1AHFk5Jjw9W1_OinTjbj2Y_dMP-lgG0_J5hX1XNhSpcqmOJIWfcXuNsvBAN8OwhldRFH634jXHpXelDEVje0Uh5p_6zjKj06wi8dHdrOMJ/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+seocipsfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","seocipslabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("seocipslabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};

//]]>

</script>

<style>

#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}

#recentpostsae{margin:0}

.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px;}

.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;border-radius:5px;}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#000;}

.recentpostel:nth-child(1n+0) {background: #F49A9A;}

.recentpostel:nth-child(2n+0) {background: #FCD092;}

.recentpostel:nth-child(3n+0) {background: #FFF59E;}

.recentpostel:nth-child(4n+0) {background: #E1EFA0;}

.recentpostel:nth-child(5n+0) {background: #B1DAEF;}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKATvgT29by3jQ1rC_3gcs4xsTlvWSk4dk6mpMGtJFBDhaBoxFgezcO7leuYtXhlztcI01FeGWp4pM3HKdI9zngC11zTlwnv6ySuiIpkuM6Zl3WCIy0TU5D_6sYrc2GEdq0CrUoGjk439N/s1600/loader.gif) 50% 50% no-repeat #F49A9A;height:470px;border:1px solid #111}

#recentpostnavfeed{border:2px solid #000;color:#111;background:#F49A9A;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#FCD092;}

#recentpostnavfeed a{color:#111!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}

#recentpostnavfeed span{padding:5px 10px}

#recentpostnavfeed .next{float:right}

#recentpostnavfeed .previous{float:left}

#recentpostnavfeed .home{text-align:center}

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

</style>

Artikel Terbaru 4 : Sederhana

Kodenya silahkan dicopy


<script src="https://sites.google.com/site/seocips/seocips-script/artikel-terbaru-seo.js"></script>

<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 20; </script>

<script src="https:/biljabbaradnan.blogspot.co.id/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">

</script>

Keterangan untuk semua Recent Post

Alamat url Biljabbaradnan.blogspot.co.id
Silahkan diganti dengan alamat url blog sobat
Var numposts
Adalah jumlah/postingan yang akan ditampilkan
Var numchars
Adalah jumlah kata intro pada artikel yang akan ditampilkan

2. Tahap kedua : Memasang Recent Post

Cara untuk memasangnya silahkan sobat ikuti tutorial berikut ini

1. Login dahulu ke akun blogger.com sobat.

2. Masuk ke dashbor => tata letak => tambahkan widget

3. Lalu pilih Gadget HTML

Baca juga : Mengenal 27 widget dasar blogspot beserta fungsinya dengan lengkap

4. dan masukan kodenya yang baru sobat copy tadi.

3. Tahap ketiga : Simpan dan Selesai

Setelah sampai pada tahapan ini recent post sobat sudah berhasil dibuat, Selamat yah :)

Berakhirlah sudah tutorial kali ini, semoga bisa bermanfaat.
dan jangan lupa untuk share artikelnya dan like fanspage apabila kami sudah cukup membantu :)

Oiah sebelum menutup artikel kali ini, pastikan sobat baca artikel referensi berikut ini yang tidak kalah bermanfaatnya.

Sekian dari saya
Semoga bisa bermanfaat
dan Selamat mencoba
Wasalamualaikum.wr.wb

Cara membuat berbagai macam widget recent post

4/ 5

Oleh Bil Jabbar Adnan

Sabtu, Juni 25, 2016 1 Komentar

Sabtu, 25 Juni 2016