Tujuan menampilkan daftar posting tersebut untuk meningkatkan Pageviews & Traffic. Sejauh ini terbukti sukses. (Lihat: Pageviews CB 27 Ribu).
CB juga memasang Posting Terbaru plus Gambar Thumbnail berdasarkan Kategori di sidebar widget halaman dalam bagian terbawah. CB pilih Label "Template Blog SEO".
Banyak pengunjung yang bertanya cara membuatnya dan kodenya. Sebenarnya sudah banyak di-share blogger lain.
Berikut ini CB share semua cara dan kode-kode untuk memasang widget-widget yang berfungsi sebagai menu navigasi dan internal link blog untuk memudahkan user dan meningkatkan pageview & trafik ini.
Cara Membuat Widget Recent Posts, Recent Comments, Most Commented, dan Random Posts di Sidebar Blog.
Menampilkan Widget Posting Terbaru
1. Layout > Add a Gadget > pilih "Feed"2. Masukkan Alamat Blog Anda
3. Klik "Continue"
4. Ubah judul dengan "Recent Posts" atau apalah apalah... :)
5. Save!
Posting Terbaru plus Gambar Thumbnail Berdasarkan Label
Demonya ada di sidebar paling bawah blog ini.1. Layout > Add a Gadget > HTML/JavaScript
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); 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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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 (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more»»</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');
}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>
4. Save!
Jangan lupa ganti Label dengan Label posting Anda. Jumlah posting 5 juga bisa diubah sesuai dengan selera Anda.
Membuat Widget Komentar Terbaru
Recent Comments dengan menampilkan nama komentato, judul posting, dan kutipan isi komentar. Ini bagus buat SEO. Secara, widget itu diindeks juga lho oleh Google!1. Layout > Add a Gadget > HTML JavaScript
2. Isi judul dengan Komentar Terbaru atau apalah apalah...
3. Isi kolom Content dengan kode berikut ini:
Baca Juga
- Cobalah Pelan-Pelan Ikuti Tutorial Blog Yang Kami Tampilkan
- Gara-gara Blogger, Pria Satu Ini Masuk Nominasi Liputan6 Awards 2015 SCTV
- Top 10 Posting Terbanyak Dibaca di Blog CB
- Cara Membuat Recent Posts, Recent Comments, Most Commented, dan Random Posts
- Cara Memasang Blogger Chat Widget untuk Toko Online
- Algoritma Terbaru Google 2015: MobileGeddon
- Mempercantik Tampilan Numbered List Posting Blog
- Cara Mengubah Warna Judul Blog
- Cara Memunculkan Jumlah Komentar Lebih dari 200 di Posting Blog
- Mengatasi Reply Comment (Balas Komentar) Tidak Berfungsi di Blogger
- Cara Termudah Membuat Tabber Tab di Sidebar Blogger
- Cara Setting SEO Dashboard Blogger ala Contoh Blog
- Cara Membuat Contact Form di Halaman Statis Blog
- Cara Membuat Daftar Isi Blog Berdasarkan Label Pilihan Sendiri
- Dapatkan Uang dari Video yang Anda Upload di Akun Youtube Anda
- Kebijakan Konten Blog yang WAJIB Diketahui Para Blogger
if(o_rc==0){
document.write('</div>');
}
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>“');document.write(l_rc);document.write('”</i></div>');}else{document.write('<i>“');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'…”</i></div>');document.write('');}
}
}
}
</script>
<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>
<script src=/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {
text-transform: capitalize;
}
.rcw-comments {
border-bottom: 1px dotted;
padding-top: 7px!important;
padding-bottom: 7px!important;
}
</style>
4. Save!
Widget Post Terbanyak Dikomentari
1. Layout > Add a Gadget > HTML/JavaScript2. Isi judul dengan "Terbanyak Dikomentari" atau apalah apalah....
3. Isi Content dengan kode berikut ini:
function getYpipePP(feed) {
document.write('<ul style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://contohblognih.blogspot.com/
&ShowHowMany=5
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
4. Save!
Widget Random Posts
Random Post memunculkan daftar judul posting secara acak di widget. Gunanya tentu saja untuk navigasi dan internal link agar user makin lama di blog kita (PageViews).1. Layout > Add a Gadger > HTML JavaScript
2. Isi judul dengan "Random Post", "Posting Acak", atau apalah apalah....
3. Isi Content dengan kode berikut ini:
<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://contohblognih.blogspot.com',
maxResults = 5,
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>
4. Save!
Jangan lupa ganti alamat blognya dengan kepunyaan Anda. Jumlahnya juga bisa ditambah dari 5 menjadi lebih besar.
Kode Lain: Random Post dengan Gambar Thumbnail
Widget RSS Feed dari Blog Lain
CB juga memasang RSS dari Sepakbola Magz, salah satu klien CB, di bagian footer. Anda bisa memasang juga daftar posting terbaru dari blog lain itu di blog Anda. Cara memasangnya:1. Layout > Add a Gadget > Feed
2. Masukkan alamat blog yang akan ditampilkan
3. Klik "Continue"
4. Ubah judulnya jika perlu
5. Centang "Open New Tab"
6. Save!
Jika mau menampilkan widget-widget tersebut hanya di halaman dalam (single page/single post), gunakan kode dalam posting ini: Mengatur Posisi Widget di Blog.
Jika Anda gak mau ribet pasang sendiri, bingung, apalagi gagal, silakan gunakan saja Layanan Premium CB.
Demikian Cara Membuat Recent Posts, Recent Comments, Most Commented, dan Random Posts yang sebetulnya secara sendiri-sendiri sudah lama juga CB share di blog ini. Dikompilasi dalam posting baru agar memudahkan CB, juga Anda, untuk menggunakannya. Good Luck! (http://contohblognih.blogspot.com).*