Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Navigasi Breadcrumbs dengan Microdata
Widget Posting dan Komentar Terbaru yang Sederhana
Mungkin Anda pernah membaca artikel sebelumnya tentang Trik Blogger | Memasang Posting Terbaru (Recent Posts) & Trik Blogger | Memasang Komentar Terbaru (Recent Comments). Keduanya tidak menggunakan struktur kode daftar urut (unordered list atau ordered list), namun menggunakan horizontal rule (<hr>) sebagai pemisah antar item atau hanya berupa break (<br>).
Membuat Halaman Arsip tanpa JavaScript
Setiap blogger pasti tahu, apa yang dimaksud dengan halaman arsip? Ya, betul sekali. Halaman itu terdiri dari kumpulan posting yang tersusun secara teratur, baik berdasarkan tahun, bulan, tanggal terbit, kategori, label, atau berisi keseluruhan item — yang telah disebutkan sebelumnya — dan sebagainya. Banyak sekali metode yang dapat dimanfaatkan untuk membuat halaman arsip, antara lain: menggunakan JavaScript & widget.
Fitur Blogger Konfigurasi Navbar Off
Tentu narablog telah tahu sebelumnya, tentang cara atau trik blogger untuk menyembunyikan dan/atau menghilangkan navbar Blogger™? Bisa dengan menggunakan CSS — seperti display: none;, visibility:hidden; — atau dengan cara memasukkan HTML <!--<body><div></div>--> di antara <head>…</head> atau sesudahnya.
Trik Membuat Kotak Banner
Posting merupakan tanggapan kami terhadap pertanyaan Saudari Sri Wahyuni dengan menggunakan fasilitas “Kontak” tanggal 14 September 2011. Mungkin mba telah membaca posting sebelumnya yang berjudul “membuat kotak banner”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.
Widget Update via Twitter
Twitter merupakan jejaring sosial yang menawarkan fitur microblog (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim & membaca pesan (tweets). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (#). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (@).
Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs Twitter Resources & dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.
Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.
- Download atau copypaste script blogger.js melalui situs resminya, yang tampak seperti di bawah ini:
Script di atas sudah dikompres melalui Yui Compressor. Anda pun bisa menambah & memodifikasi kode yang berwarna merah, contoh:function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push("<li><span>"+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};<span>menjadi<span style="color:#333333; font-size:1em;">dan sebagainya. - Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: Google Code atau simpan dalam media penyimpanan Anda.
- Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain:
User Timeline
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>Public Timeline
<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&count=5"></script>User Favorite
<script type="text/javascript" src="http://twitter.com/favorites/username.json?callback=twitterCallback2&count=5"></script>User Search
Silakan ganti kode yang berwarna merah dengan username Anda.<script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=username&rpp=5&callback=twitterCallback2"></script> - Misalnya, Anda ingin memasang user timeline maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger:
atau<div id="twitter_div"> <ul id="twitter_update_list"> </ul> <p>@<a href="###" title="Follow me">username</a> on Twitter</p> </div> <script type='text/javascript'> //<![CDATA[ function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}}; //]]> </script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>
Ganti kode yang berwarna merah dengan alamat twitter & username Anda.<div id="twitter_div"> <ul id="twitter_update_list"> </ul> <p>@<a href="###" title="Follow me">username</a> on Twitter</p> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>
- Sekarang bandingkan widget timeline Anda tersebut dengan akun profil timeline Anda di Twitter
Update (30 Oktober 2012) — Kode Widget Twitter Update di atas mungkin tidak dapat digunakan lagi, pihak pengembang Twitter telah menyediakan widget tersebut pada Create and manage your widgets dalam akun tiap pengguna Twitter. Sebagai tambahan, setelah membuat widget tersebut diharapkan tidak menghapusnya. Oleh karena sangat dimungkinkan script yang digunakan juga tidak dapat menampilkan pembaharuan timeline melalui Twitter.
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting widget update.
@Optimasi_Blog on Twitter
Cara Tambahkan Mode Energy Saving Untuk Blog atau Website
Ini adalah layanan gratis dan disediakan oleh http://www.onlineleaf.com/. Fitur ini memberikan cara yang berfungsi penuh dan sederhana untuk membantu website yang Anda jalankan menghasilkan energi lebih sedikit. Ia menyembunyikan animasi berat, serta widget-widget yang banyak.
Ketika pengunjung anda tidak aktif, maka fitur akan menampilkan Standby Screen, dengan teks "Energy saving mode".
Hal ini sangat mudah untuk ditambahkan ke situs Web atau blog dalam beberapa detik.
Masuk ke dashboard Blogger Anda -> Desain -> Edit HTML.
Anda tidak perlu untuk mengklik pada "Expand Template Widget".Gulir ke bawah ke tempat anda melihat tag </head> dari template Anda.
Sekarang salin kode di bawah ini dan paste tepat sebelum tag </head>.
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>Fitur siaga ini menggunakan jQuery Javascript Library, jadi jika Anda menggunakan perpustakaan Javascript atau kode lain, tambahkan kode di bawah dari kode di atas:
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>Waktu tidak aktif
Juga Anda dapat dengan mudah menentukan berapa lama waktu pengunjung Anda harus aktif, untuk mesin untuk membuka layar siaga, dengan menambahkan ?time = X dimana X harus diganti dengan jumlah detik Anda ingin menentukan interval waktu. Contohnya bisa jadi:
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>.. yang akan mengatur waktu tidak aktif sampai 2 menit (120 detik).
Jika Anda menggunakan WordPress, hanya men-download plugin lalu mengaktifkannya dan segala sesuatu siap bekerja langsung.
Admin Bar Widget untuk Blogger
Ketika ingin mengupdate blog kadang-kadang kita mendapatkan beberapa ide posting baru atau untuk melakukan beberapa perubahan dengan blog. Admin bar ini memudahkan untuk menavigasi langsung kepada point-point yang ingin kita rubah secara langsung.
widget ini menciptakan link yang akan membawa langsung ke pilihan blogger. Ada dua jenis dan masing-masing memiliki cara instalasi yang berbeda. Kita akan membahas kedua cara tersebut.
1. Instalasi Custom jenis-jenis ini adalah lebih bergaya, dapat melihat screenshot di bawah ini.
Untuk memasang widget ini, pergi ke PAGE ELEMENT>> ADD A GADGET>> HTML/JavaScript dan salin kode di bawah ini.
Rubah #### dengan id blog Anda. Anda dapat menemukan ID blog anda pada Adress Bar diatas, kemudian jangan lupa disimpan.
Kemudian pergi ke EDIT HTML lalu temukan ]]></b:skin> kemudian salin kode berikut diatasnya:
Kemudian Simpan & Selesai sudah.
Sekarang jika Anda mengalami kesulitan dengan widget diatas, ada cara lain yang lebih sederhana untuk menginstalnya tanpa menggunakan CSS.
2. Instalasi jenis klasik ini lebih sederhana dan mudah. Hanya pergi ke PAGE ELEMENT>> LINK LIST dan tambahkan link berikut di dalamnya.
[ Baca selengkapnya ]
widget ini menciptakan link yang akan membawa langsung ke pilihan blogger. Ada dua jenis dan masing-masing memiliki cara instalasi yang berbeda. Kita akan membahas kedua cara tersebut.
1. Instalasi Custom jenis-jenis ini adalah lebih bergaya, dapat melihat screenshot di bawah ini.
Untuk memasang widget ini, pergi ke PAGE ELEMENT>> ADD A GADGET>> HTML/JavaScript dan salin kode di bawah ini.
<ul class="adminbar"> <li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li> <li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=####" target="_blank">Change Settings</a></li> <li><a class="layout" href="http://www.blogger.com/rearrange?blogID=####" target="_blank">Change layout</a></li> <li><a class="editpost" href="http://www.blogger.com/post.g?blogID=####" target="_blank">Edit posts</a></li> <li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=####" target="_blank">New post</a></li> </ul>
Rubah #### dengan id blog Anda. Anda dapat menemukan ID blog anda pada Adress Bar diatas, kemudian jangan lupa disimpan.
Kemudian pergi ke EDIT HTML lalu temukan ]]></b:skin> kemudian salin kode berikut diatasnya:
ul.adminbar
{background-color:#EEEEEE;
border:1px solid #E6E8E9;
margin-bottom:8px;
padding:5px 5px 0;
}
ul.adminbar li {
background-color:#FAFAFA;
border:1px solid white;
list-style:none outside none;
margin-bottom:6px;
outline:1px solid #DDDDDD;
padding:12px;
}
ul.adminbar li a
{display:block;
color:#888888 !important;
text-shadow:1px 1px 0 #FFFFFF;
text-decoration:none;
font-size:22px;
height:27px;
margin:0 0 0 15px;
}
a.dashboard
{background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;
padding:4px 0 2px 47px;
}
a.settings
{background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;}
a.layout
{background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.editpost
{background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.newpost
{background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}Kemudian Simpan & Selesai sudah.
Sekarang jika Anda mengalami kesulitan dengan widget diatas, ada cara lain yang lebih sederhana untuk menginstalnya tanpa menggunakan CSS.
2. Instalasi jenis klasik ini lebih sederhana dan mudah. Hanya pergi ke PAGE ELEMENT>> LINK LIST dan tambahkan link berikut di dalamnya.
Dashboard : http://www.blogger.com/home Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=#### Change Layout : http://www.blogger.com/rearrange?blogID=#### Edit Posts : http://www.blogger.com/post.g?blogID=#### New Post : http://www.blogger.com/post-create.g?blogID=####
Ganti #### dengan ID blog kamu dan kemudian simpan.
2 Gadget baru untuk Blogger
Setelah meluncurkan fitur statistik blog untuk blogger yang kini telah meluncurkan sebuah widget Blog's Stat bersama dengan widget Popular Post. Ini adalah dua widget baru yang telah ditambahkan blogger di draft.blogger untuk diuji.
Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.
[ Baca selengkapnya ]
Popular Post
widget ini menampilkan semua posting yang populer yang dapat diurutkan berdasarkan tiga cara baik waktu Semua, Terakhir 30 hari, lalu 7 hari. Anda juga dapat memilih untuk menampilkan thumbnail dari posting tersebut. Anda dapat melihat screenshot di bawah ini.
Blog’s stats
widget ini menampilkan total tampilan halaman gadget blog.Tampil dalam berbagai gaya dan juga dilengkapi dengan grafik sparkline opsional. Lihat gambar di bawah.
Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.
Plugin Sosial dari Facebook
Kemudian OB tidak akan menjelaskan secara detail tentang kodenya yang seperti apa, karena kode tersebut otomatis tampil pada saat kamu mengkostumisasi plugin ini di layanan pengembang plugin sosial facebook. Demo salah satu plugin tersebut (Like Button) dapat kamu lihat di kiri bawah (footer) blog ini.
- Arahkan alamat browser kamu ke Facebook Developers.
- Kamu akan di bawa ke halaman kumpulan plugin sosial yang dapat diterapkan dalam blog kamu, seperti ; Like Button, Activity Feed, Recommendations, Like Box, Login Button, Friendpile, Comments, dan Live Stream.
- Contoh Terapan I (Like Button) :
-> Isi form sesuai dengan keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.
Catatan :
URL to Like diisi dengan alamat blog kamu.
-> Setelah selesai klik "Get Code", maka akan muncul kode sesuai dengan isian form tersebut.
-> Copy kode dalam kotak iframe ke blog kamu.
-> Sign-in ke akun blogger kamu.
-> Kemudian klik Design (Rancangan) --> Add Gadget (Tambah Gadget).
-> Dalam jendela pop-up yang tampil, pilih HTML/JavaScript dengan mengklik tanda + di kanannya.
-> Paste kode iframe dari plugin sosial facebook.
-> Selesai.
- Contoh Terapan II (Like Box) :
-> Isi form sesuai keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.
Catatan :
- Facebook Page ID diisi dengan ID halaman facebook kamu.
- Untuk membuat halaman baru di facebook silakan dibuka kembali posting tentang promosi blog dengan facebook.
Catatan :
Langkah dalam mengkostumisasi plugin sosial lainnya lebih kurang sama dengan contoh terapan di atas.
Selamat memajang plugin sosial facebook di blog kamu...
Memasang Widget Google Translate di Tiap Posting
Hmm... dari judul aja udah ketahuan ketinggalan zamannya. Udah banyak OB yang memposting ini. Yah, daripada ngga ada sama sekali, mending di-ada-in. Kata-kata klasik yang muncul hanya sekedar untuk menambah daftar postingan. Widget ini berguna agar yang diterjemahkan adalah halaman yang bersangkutan saja, atau dengan kata lain "tidak seluruh blog". Demonya dapat kamu kunjungi blog utuharies.blogspot.com. Tertarik untuk memasang widget ini, ayo kita ulas trik blogger-nya "tarik mang..." :
Trik Blogger | Widget Kontak Kami dengan EmailMeForm
Tidak jarang pengunjung blog ingin mengajukan saran, masukan, atau pertanyaan diluar konteks posting yang kita buat. Bisa pula ada yang ingin memasang iklan, siapa tau... Tentu mereka ingin mengontak sang pemilik blog. Betul tidak? Tapi bagaimana caranya kalau mereka tidak menemukan fasilitas untuk menghubungi pemilik blog. Buka profil, kemudian lihat alamat email, login ke email dia, masukkan alamat email pemilik blog, dan akhirnya "send". Wah, terlalu rumit, bro. Jarang-jarang ada yang seperti itu... Jadi tidak ada salahnya apabila kita sebagai owner blog menyediakan fasilitas "kontak kami" tersebut dalam blog. Manfaatnya agar pengunjung blog dapat dengan mudah mengontak kita, apalagi jika ditambah dengan embel-embel "secret" atau "important". Nah, trik blogger kali ini kita akan mengulas cara memasang kontak kami dengan menggunakan widget EmailMeForm. Ayo, kita kuliti triknya (kaya pisang atau kacang atau hewan sembelihan aja he.. he..)
Memasang Button Show/Hide (Spoiler)
Spoiler apaan OB? "Oh, asessoris yang biasa digunakan di belakang mobil, sehingga kaya mobil balap". Kalau OB membahas mobil, apa ada hubungannya dengan optimasi blog??? (wkakakakakak). Maksud spoiler di sini adalah menyembunyikan teks, image, dan/atau widget sehingga menghemat ruang suatu blog. Kemudian teks, image, dan/atau widget tersebut dapat ditampilkan kembali dengan menggunakan perintah (baca: bahasa pemprograman) tertentu. Ujung-ujungnya kita menggunakan "button" lagi, "button" memang ngga ada matinya (he..he.. no promotion). Khusus pengguna Wordpress, pluginnya dapat langsung diunduh di felixtriller.de. Sedangkan untuk blogger, mari kita ulas triknya tentang memasang spoiler.
Menambah Sexy Sliding Sidebar di Blogspot
Sexy sliding Sidebar ini adalah alternatif lain pengganti Navigation Menu biasa, nah bila blog anda belum mempunyai Navigation Menu ataupun tidak ingin memakai Navigation Menu karena satu dan lain hal, Sexy sliding sidebar ini bisa menjadi alternatifnya.
[ Baca selengkapnya ]
Gratis: Social Bookmark Widget di bawah setiap Posting Blog
Social Bookmark Widget ini adalah sebuah revolusi baru untuk blogger. Hal ini memungkinkan pengunjung blog Anda dengan cepat berbagi postingan blog Anda ke Situs Social Bookmar populer. Yang paling penting dalam widget ini adalah tampilannya. Widget ini cocok untuk semua jenis blogger template dan 100% kompatibel dengan semua blogspot template dan layout termasuk xml blogger template premium.
Caranya cukup sederhana untuk memasukkan di blog blogspot, jadi mari kita lihat bagaimana melakukannya.
[ Baca selengkapnya ]
Caranya cukup sederhana untuk memasukkan di blog blogspot, jadi mari kita lihat bagaimana melakukannya.
Pasang Navbar Statis ala Apture
Satu lagi navbar pengganti bawaan blogger yang pantas anda pasang pada blog Anda, selain daripada WIBIA. Bagi kamu-kamu yang sudah menghilangkan Navbar dafault dari blogspot bisa memasang Navbar Apture ini.
Revisi Cara Memasang Top Posting
Weleh-weleh met jumpa lagi kawan bersama OB. OB kembali mengudara di channel blogger frekuensi Optimasi-Blog (ha..ha.. kaya penyiar radio aja). Untuk kali pertama ini, OB coba untuk mengulas sekelumit info tentang trik blogger. Sekarang coba teman-teman perhatikan tag cloud dan top posting. Hm... ternyata sudah kadaluarsa alias tidak berlaku lagi. Yang ketinggalan posting top komentator, untung admin Mas Rudy sudah mengisi trik ini. Nah, OB kebagian top posting dan tag cloud, tapi satu-satu yah. OB akan coba untuk mengulas trik blogger top posting terlebih dahulu. Agar lebih terdefinisi trik ini OB dapatkan setelah googling ke blognya "Kang Salman".
Top Komentator Widget
Top Komentator widget ini sebenarnya udah banyak dibahas oleh blog-blog lain yang membahas seputar tutorial blog.
Tapi dikarenakan saya lihat pada blog ini belum ada panduannya jadi tidak ada salahnya juga membuat tutorial Top Komentator di blog ini juga.
Seperti biasa, caranya :
Login dulu ke account blogger kamu.
Note :
Contoh pemakaian Top Komentator ini bisa anda lihat pada blog rudyazhar disini.
[ Baca selengkapnya ]
Tapi dikarenakan saya lihat pada blog ini belum ada panduannya jadi tidak ada salahnya juga membuat tutorial Top Komentator di blog ini juga.
Seperti biasa, caranya :
Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Elemen Halaman.
- Tambah Gadget dalam elemen blog kamu (rekomendasi : Di bawah atau di samping gadget Posting Terbaru)
- Dalam "Tambahkan Gadget", pilih HTML/JavaScript
- Copy dan pastekan kode di bawah ini dan jangan lupa diberi judul (ex : Top Komentator)
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Frudyazhar.blogspot.com&num=15&filter=rudy" type="text/javascript"></script>
Note :
- Ganti kode yang berwarna biru dengan alamat blog kamu.
- Ganti kode yang berwarna merah dengan jumlah komentar yang ingin ditampilkan.
- Kode yang berwarna orange adalah untuk tidak menampilkan nama dari pemilik blog tersebut.
Contoh pemakaian Top Komentator ini bisa anda lihat pada blog rudyazhar disini.
Selamat mencoba...
Recent Comments ala Wordpress versi II
Gimana khabar anda semua, Semangat Luar Biasa untuk mempercantik blog Anda?
Kali ini saya ingin sharing ilmu untuk mempercantik blog di blogspot dengan recent comments ala wordpress Versi II, karena versi pertama udah di bahas OB pada postingan Trik Blogger | Memasang Komentar Terbaru (Recent Comments).
[ Baca selengkapnya ]
Kali ini saya ingin sharing ilmu untuk mempercantik blog di blogspot dengan recent comments ala wordpress Versi II, karena versi pertama udah di bahas OB pada postingan Trik Blogger | Memasang Komentar Terbaru (Recent Comments).
Random Post Dinamis
Dikatakan Random Post dinamis dikarenakan widget random post ini akan menampilkan seluruh postingan blog kita secara acak dengan trik slide show.Ini akan lebih memaksimalkan semua isi postingan tertampil dengan jeda waktu yang dapat kita atur.
Dan satu lagi kelebihan random post ini tidak memakan space yang besar dan sangat simpel.