Tutorial Cara Membuat Widget Recent Post Berdasarkan Label

Tutorial cara membuat, memasang dan menampilkan Recent Post atau Latest Post atau juga Posting Terbaru yang berdasarkan label atau kategori. Widget recent post ini tanpa menggunakan javascript dalam pemasangannya dan contohnya bisa dilihat ada pada bagian footer blog ini.

Recent post bisa dibilang penting fungsinya pada sebuah blog. Dengan adanya widget recent post pada blog dapat memudahkan pengunjung untuk melihat lihat artikel-artikel terbaru apa saja yang dipublikasikan pada blog. 

Oke langsung saja cara pemasangan widget recent post bisa dilakukan sebagai berikut :

• seperti biasa log in dulu ke akun blogger
• pada dashboard klik tata letak kemudian klik tambahkan gadget (bisa di sidebar atau footer untuk penempatannya)
• scroll ke bawah dan klik feed
• copy link di bawah dan paste kan pada kolom url feed

http://www.URL_BLOG_ANDA.com/feeds/posts/default/-/Ganteng

• klik lanjutkan
• atur tampilan sesuai keinginan
• klik simpan dan lihat hasilnya

keterangan

1. ganti http://www.URL_BLOG_ANDA.com dengan url blog
2. ganti Ganteng dengan nama label atau kategori yang ingin ditampilkan
3. apabila nama label terdiri dari dua kata, misal nama label Ganteng Banget sisipkan kode %20 diantara kedua kata tersebut. contoh penulisannya jadi Ganteng%20Banget
4. satu lagi yang tidak kalah penting penulisan huruf besar/kecil dari nama label tersebut sangat berpengaruh

Nah cukup mudah kan cara membuat widget recent post berdasarkan per label atau per kategori, good luck dan semoga bermanfaat.

Read more »

Tutorial Cara Membuat Widget Recent Post Pada Blog

Tutorial Cara Membuat Widget Recent Post Pada Blog. Biasanya setiap pengunjung blog yang datang ke blog tidak selalu ingin membaca artikel kita. Para pengunjung yang menemukan artikel kita lewat hasil penelusuran search engine sangat mungkin ingin mendapatkan suatu bahan bacaan yang lengkap dan relevan yang sesuai dengan apa yang mereka inginkan.

Maka untuk jenis pengunjung blog yang seperti hal tersebut diatas, artikel kita tentu saja akan dibaca atau bahkan dijadikan suatu bahan referensi. 

Akan tetapi jika pengunjung yang datang ke blog kita hanya untuk blogwalking dan melihat lihat blog yang kita kelola atau sekadar meningkatkan trafik sangat mungkin pengunjung seperti ini tidak membaca artikel artikel yang ada pada blog melainkan hanya melihat lihat judul artikelnya saja.

Jadi atas dasar hal tersebut kita bisa menyediakan widget recent post sehingga bagi pengunjung yang cuma blogwalking biasa bisa tertarik untuk membaca artikel artikel yang kita punya pada blog.

baca juga : Cara Membuat Arsip Blog dengan Scroll

   

Blog yang kita punya dan kita kelola biasanya didalamnya tidak terdapat fitur widget recent post pada templatenya. selain itu, pihak bloggernya pun tidak menyediakan fitur recent post. Sehingga untuk yang ingin mempunyai fitur recent post pada blognya kita hasrus memasangnya sendiri.

Bagi yang belum mengetahui pengertian widget recent post adalah merupakan widget yang berisi dan menampilkan postingan postingan atau artikel artikel terbaru yang dipublikasikan di blog. 

Fungsi widget recent post ini untuk mempermudah pengunjung dalam memberi informasi tentang artikel artikel terbaru yang ada pada blog. Bentuknya ada yang memakai thumbnail dan ada yang bentuknya berupa judul artikelnya saja.

Posisi widget ini bisa kita letakan sesuai keinginan. Bisa diletakan di sidebar atau bisa juga diletakan pada footer. Atur tata letaknya sehingga bisa terlihat rapi oleh pengunjung yang mengunjungi blog kita.

Baiklah cukup perkenalannya dengan apa yang dinamakan dengan widget recent post selanjutnya kita langsung ke tahap membuat dan memasang widget recent post pada blog yang sumbernya saya ambil dari blog arlinadzgn . Bentuk bentuk dan langkah langkahnya adalah sebagai berikut :

• widget recent post sederhana

Widget recent post sederhana ini hanya menampilkan judul artikelnya saja (contohnya seperti recent post pada blog ini lihat bagian bawah pada footer). Untuk membuat dan memasangnya langkahnya sebagai berikut :

• log in ke akun blogger
• klik pada tata letak atau layout
• kemudian add gadget (terserah mau diletakan di sidebar atau footer)
• klik HTML/javascript
• copy dan pastekan kode dibawah ini di kolom HTML/javascript tadi

kode:

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.URL_BLOG_ANDA.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

• ganti tulisan url yang saya tandai dengan warna merah dengan url blog anda dan ganti angka "5" dengan jumlah artikel yang ingin anda tampilkan sebagai recent post
• save dan silahkan lihat hasilnya

Dan blog anda pun kini sudah mempunyai recent post. Simple dan cukup mudah bukan. Nah berikutnya kita akan membuat dan memasang recent post dengan model navigasi.

• widget recent post dengan navigasi

Bentuk recent post dengan navigasi berikut ini seperti namanya mempunyai navigasi seperti next untuk ke post post selanjutnya dan previous untuk ke post post sebelumnya. Mengenai contoh bentuknya anda bisa klik dan lihat disini 

Langsung saja langkah untuk membuat dan memasangnya sebagai berikut :

• seperti biasa anda log in ke akun blogger
• pilih tata letak atau layout
• add gadget (letakan di sidebar atau di footer bebas terserah anda)
• klik pada HTML/javascript
• kemudian copy dan pastekan kode dibawah pada kolom HTML/javascript tadi

kode:

<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#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/AVvXsEgo6W3uS6Lsx3H_NIQpNUPV1m5hoERSSqE00tko3OZ_99K5UFkBiNdyhiJ-Ny72b4Wwvfc2Pg36qpneUfzRdpuCsOwyNZnXEfPP6H1rcw2JKSU7DTqRJSn7fXI8EINNaGuV1-xzf6IV2Mzm/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!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>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://URL anda.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(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/AVvXsEjTjjkfdLXwQZd3IYuam1ToIA97f6yyxv_OKGId-ieslX9Ni9WcaJ5nmoDbalRB3-nedRir8YFS4JlodznTWhjOJrSNPnhflx5K387LbdSfdUTvUElLQYqeOaN4KPrgRbGcI4bFgmHoBkTK/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>"+arlinafeed(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","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

• ganti yang saya kasih BOLD sesuai dengan keinginan anda. 

1. var numfeed = jumlah artikel postingan yang ingin anda tampilkan
2. var urlblog = ganti dengan url blog anda
3. var charac = atur jumlah maksimal summary post yang ingin ditampilkan

• save dan silahkan cek hasilnya

Nah, begitulah cara membuat dan memasang bentuk recent post dengan navigasi pada blog. Silahkan anda pasang mana yang sesuai dengan keinginan anda.

Sekian tutorial cara membuat widget recent post pada blog, semoga membantu dan untuk kurang lebihnya saya mohon maaf serta tidak lupa semoga bermanfaat.

Read more »

Cara Membuat Arsip/ Archive Blog Dengan Scroll

Cara membuat arsip atau archive blog dengan scroll. Arsip atau archive blog merupakan daftar urutan posting atau artikel blog yang disusun berdasarkan sesuai dengan tanggal, bulan dan tahun artikel yang telah kita posting di blog, dalam hal ini biasanya arsip blog kita taruh di sidebar blog atau ada juga yang menaruhnya pada footer blog.

Arsip blog ini sangat berfungsi untuk memudahkan para pengunjung blog untuk melihat-lihat dan mencari artikel-artikel yang ingin pengunjung baca. Arsip blog juga bisa dibilang merupakan sitemap atau daftar isi yang ada pada blog.

Halaman arsip blog bisa mengganggu dalam hal penampilannya karena apabila semakin banyaknya artikel yang kita posting maka tampilan arsip blog akan memanjang kebawah sehingga kesannya tidak rapi, maka dari itu disini kita akan membuat tampilan arsip blog menjadi rapi dengan mengubahnya dengan tampilan menambahkan scroll sehingga tampilan arsip blog rapi dan tidak memanjang ke bawah.

Contoh arsip blog yang memakai scroll ada pada widget sebelah kanan pada blog ini atau lebih jelasnya seperti gambar dibawah ini

Menambahkan scroll tersebut bisa kita atur dan sesuaikan tinggi atau panjang scrollnya seperti yang kita inginkan, tujuannya agar tidak memakan banyak space yang ada pada sidebar dan membuat tampilan blog lebih rapi dan enak diliahat.

Langkah-langkah membuat arsip blog dengan scroll

• Pasang dulu arsip blog anda dengan cara masuk ke dashbord blog anda dan klik tata letak terus klik tambahkan gadget setelah itu klik Arsip Blog
• Langkah ke dua klik Template lalu anda klik Edit HTML
• Cari kode "Archivelist" (tanpa tanda petik), biar cepat gunakan ctrl+F
• Setelah kode "archivelist" ketemu, selanjutnya silahkan anda kopi kode ini

<div style='overflow:auto; width:ancho; height:250px;'>

• Paste kan tepat diatas kode Archivelist tadi. (250px merupakan ukuran tinggi atau panjang arsip bisa anda atur sesuai keinginan)
• Setelah itu anda geser ke bawah sedikit atau cari kode <b:include name='quickedit'/> dan apabila sudah ketemu tambahkan kode </div> diatas kode tadi
• Save dan anda bisa lihat hasilnya.

Cukup mudah bukan dan sekarang arsip blog anda tidak lagi memanjang dan tidak menggangu tampilan pada blog anda lagi.

Itulah langkah-langkah membuat arsip blog dengan scroll sehingga arsip blog kita bisa lebih rapi dan tidak memakan banyak space pada sidebar blog, kurang lebihnya saya mohon maaf dan semoga bermanfaat.

Read more »