MEMBUAT WIDGET RECENT COMMENT PLUS AVATAR (PROFILE)

DUNIA BLOG 888 kali ini ingin berbagi tutorial tips-trik tentang membuat Widgett Recent Comment plus avatar (profile komentator) yang dapat dipasangkan pada bagian sidebar atau footer sebuah blog. Widget ini cukup sederhana dan secara umum tidak terlalu membebani proses loading sebuah blog, karena disusun dari kombinasi script yang biasa.

Pada kesempatan ini akan saya tampilkan beberapa metode untuk membuat Widget Recent Comment ini, namun sebelumnya sedikit saya berikan ulasan tentang fungsi atau kegunaan widget ini yaitu, widget ini (sesuai dengan fungsinya) akan menampilkan ringkasan komentar-komentar yang ditinggalkan oleh beberapa pengunjung pada blog yang kita miliki dapat meningkatkan intensitas komunikasi dua arah antara visitor dengan admin blog, disamping hal itu, dengan memasang widget ini akan membantu kita untuk memonitor komentar-komentar pengunjung yang berbau spam sekaligus akan membantu dalam upaya kita untuk membantu pendeteksian broken link yang diakibatkan oleh komentar-komentar pengunjung. Lebih jauh lagi dengan pemakaian widget ini kita harapkan prosentase bounce rate blog kita akan berkurang, karena bilamana ada seorang visitor yang kebetulan tertarik dengan salah satu komentar yang masuk, kemudian ia meng-klik komentar tersebut, maka secara otomatis visitor tersebut akan masuk ke artikel atau postingan kita yang (mungkin) berbeda dengan artikel yang sedang dibacanya.

Berikut ini cara membuat widget recent comment plus avatar tersebut  :

Cara umum : Masuk atau login ke blog anda, pilih Dasboard, pilih Layout, Add Gadget dan pilihlah HTML/Javascript. Selanjutnya masukkan rangkaian kode (script) berikut ini di dalamnya.

POLA PERTAMA 

<style type="text/css">
#recentcomment {
width:98%;
margin-left:5px;
}
img.recentcomment-avatar {
background:#fff;
float:right;
padding:2px;
margin:2px -2px 0px 0px;
height:30px;
width:30px;
border:solid #ddd 1px;
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
font-family: 'trebuchet ms';
font-size:1.00em!important;
color:#2C2929;
text-decoration:none;
}
div.recentcomment-content{
font-size:1.00em!important;
text-decoration:none;
line-height:1.45em;
letter-spacing:0.03em;
background: #fff;
padding:4px;
border:1px solid #ddd;
}
</style><script type="text/javascript">
ava_mode = "all";
var cm_num = 5;
var cm_desc = 13;
var homepage = "http://duniablog888.blogspot.com/";
</script>
</script>
<script src="http://youdhie.googlecode.com/files/Recent%20Comment%20Thumbnail.js " type="text/javascript"></script>  

Keterangan : 

• Angka 5 adalah jumlah comentar yang akan di tampilkan
• Angka 13 adalah jumlah banyaknya kata dalam suatu komentaryang akan ditampilkan
• duniablog888.blogspot.com  ganti dengan nama blog/website anda!

POLA KEDUA

<style type="text/css">
#recentcomment {
width:98%;
margin-left:0px;
}
img.recentcomment-avatar {
background:#009ECE;
float:right;
padding:5px;
margin:0px -2px 0px 0px;
height:30px;
width:30px;
border:solid #009ECE 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 0px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
font-size:1.00em!important;
color:#2C2929;
text-decoration:none;
}
div.recentcomment-content{
font-size:1.00em!important;
text-decoration:none;
line-height:1.45em;
background: #BDE5F8;
padding:4px;
border:1px solid #009ECE;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
</style>
<script src="http://youdhie.googlecode.com/files/ComThumb2.js" type="text/javascript">
</script>

Bilamana rangkaian script di atas tidak dapat berfungsi pada template blog anda, maka saya sarankan anda menggantinya dengan rangkaian script yang saya pergunakan pada blog ini sebagai berikut   :

Kode Script:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 10,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAty7baqkqhQpmqca5WXv5FkC-LNppCOVWvkI5YdnEo9_DZXwogUfd00g5kK8ebrDsTij_gDgq_5Qp97v9ekSJ__ZTxsNChclyc9pWWlki1cKJQ2eIRueyXxBmwk_AU4DVD0QJK1kXBpo/s1600/gravatar.jpg",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Bams Skc';
//]]>
</script>
<script type="text/javascript" src="http://www.geocities.ws/reggy1998/rcomment.js"></script>
<script type="text/javascript" src="http://duniablog888.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Gantilah tulisan yang tercetak tebal dengan alamat url blog anda, semoga berhasil.

MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1

Pada artikel tentang Bounce Rate telah dibahas bahwa salah satu penyebab tingginya prosentase Bounce Rate ini adalah ketiadaan widget related post (artikel terkait) pada akhir tiap-tiap postingan blog. Dengan tanpa pemasangan widget ini para visitor bisa jadi tidak memiliki pilihan untuk membaca artikel-artikel kita yang lainnya, sehingga apa yang terjadi ? Setelah membaca sebuah artikel, dan ia telah mendapatkan apa yang dicari, kontan langsung menutup blog kita dan pergi menuju blog lain yang mungkin artikel-artikelnya lebih variatif.

DUNIA BLOG dalam hal ini mengalami perlakuan yang serupa, terbukti dari catatan Alexa.com, prosentase Bounce Rate blog ini pun masih berkisar di angka 30 % lebih, hal ini membuktikan bahwa para visitor blog kebanyakan hanya sudi untuk membuka satu halaman artikel dan selanjutnya perrgi begitu saja. Admin blog menyadari akan hal ini, karena beberapa waktu yang lalu widget related post (pada bagian akhir masing-masing artikel) tidak dapat berjalan sebagaimana mestinya.

Admin blog menyadari dan langsung merubah kombinasi script related post yang terdahulu, dan ..... akhirnya mulai sekarang telah dapat berjalan sebagaimana mestinya. Bagaimana cara membuatnya ? Berikut ini akan saya paparkan.

1. Log in ke blog anda, masuk ke dashboard blogger.

2. Pilih template kemudian pilihlah menu edit HTML.

3. Sebelum melangkah lebih jauh, ada baiknya anda backup dulu template anda.

4. Langkah selanjutnya, carilah kode </head> dan letakkan rangkaian script berikut di atasnya :

Kode Script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}

#relpost_img_sum:hover {
background: none;
}

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

#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}

#relpost_img_sum li:hover {
background-color: #E6E6E6;
}

#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}

#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}

#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (June 17, 2011)
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

5. Kemudian carilah kode
   

<div class='post-footer-line post-footer-line-3'>
    <!-- Untuk kode artikel terkait -->
    </div>

6. Letakkan rangkaian script berikut pada tempat yang telah disediakan seperti di atas

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
2. <div id='related_posts'>  
3. <h4>Related Posts</h4>  
4. <b:loop values='data:post.labels' var='label'>  
5. <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>  
6. </b:loop>  
7. <a href='http://creatingwebsite-maskolis.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>  
8. <ul id='relpost_img_sum'>  
9. <script type='text/javascript'>artikelterkait();</script>  
10. </ul>  
11. </div>  
12. </b:if> 

7. Kemudian simpan template anda dan lihatlah hasilnya.

Keterangan:

• var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
• var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
• var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
• var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik.

Demikian tadi tutorial singkat cara membuat artikel terkait dengan thumbnail disertai uraian singkat, mungkin agak sedikit membingungkan, jika ada yang mau ditanyakan silahkan isi kolom komentar yanga da dibawah, sekian dan semoga bermanfaat.

Script source by : modification-blog.blogspot.com

DUNIA BLOG : MEMBUAT ANIMASI SLIDE POSTING

DUNIA BLOG kali ini akan berbagi tips-trik tentang membuat animasi slide posting artikel (terbaru) yang bagi DUNIA BLOG berguna untuk memberitahukan kepada pengunjung tentang posting terbaru. Membuat animasi slide posting artikel (terbaru) versi DUNIA BLOG ini dapat diletakkan di bagian mana saja, bisa di bagian header, sidebar maupun bagian footer. Script nya pun tidak terlalu sulit, contoh tampilan statisnya seperti di bawah ini.

Animasi slide posting ini dapat dirubah dan disesuaikan baik ukuran gambarnya maupun warna backgroundnya, yang tentu saja sesuai dengan selera anda masing-masing, dan disesuaikan dengan kondisi web/blog yang anda miliki.

Bagaimana cara membuatnya ? Tenang, sabar dulu, begini  :

Cari script </head> pada HTML template blog anda, berikutnya copy kan rangkaian script di bawah ini tepat di atas script </head> tersebut.

<style type='text/css'>

div.animasislide{margin 2px; padding-top:6px; border: 5px solid #000000; border-style:double; background-color:#00ffff; width:auto; float:left; text-align:center;}

div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #000000; border-style:double; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}

div.animasislide a:hover img{width:200px; height:100px;}

</style>

Selanjutnya simpan template anda, dan bukalah sebuah widget HTML pada blog anda, terserah anda, bisa pada bagian header, sidebar atau footer, kemudian copy kan script di bawah ke dalamnya.

<div id="tooltip">

<div align="center" class="animasislide">

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">

<a href="http://saunmu.blogspot.com/2012/05/f-star-dancer-muda-berprestasi.html"><img title="F-Star Dancer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzcpHlwsdGyVWh4QR371nr-2JAHhnd-pe6xlewQ7gQezf6tKbNgKy-B7jr92SO5kg6GhL6LuigqMy76MupngDeHis6kum-FMuByruhl02oLFWPomxvKCEr2fpCaDnj0v_s7YsUcZ3htE/s1600/F-STAR88.jpg"/></a>

<a href="http://saunmu.blogspot.com/2012/05/campina-concerto-my-music-my-dance.html"><img title="Concerto My Music My Dance" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJH5I4xPWI1witq4NtrR8QA7geLeg_rCNdviYcdVgIGn5lyp71olqHUhyphenhyphen-WrWBEKxdCGvsxuXvfHAyan0ujRtum2uMC9Cgl-84sZ9QGBR_5F58uRNxwxn8Ma-jKjHlYT8jDedWtKnReU/s200/CAMPINA-03.jpg"/></a>

<a href="http://saunmu.blogspot.com/2012/05/spesifikasi-pesawat-sukhoi-superjet-100.html"><img title="Sukhoi Superjet 100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH_y_1_iAwjvi7sQ-6GtVwT-1uaOVrEz7h7qEQn9HEoduEMwpL-D2VHJJb48yx8yu1NYT1OHZ0qhck6Lvq-43Xfg9s7ei7RsroSGPq3fBeIUOVJasdr4XxJ_IObJ4-6qc-9xJyUe97Duc/s1600/sukhoi+superjet+100_2.jpg"/></a>

<a href="http://saunmu.blogspot.com/2012/05/tentang-dan-seputar-kotak-hitam-black.html"><img title="kotak hitam (black box)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH1CikJDlu5ww2Xr_xYMAhFkOthhvyttCWa9AgN0jXO6Lmh3eNWAAysk5o-rR0g7z-WnGnCM9S4TZo6zGmKLtxMMSzyUi1was4_AuWACiHxHfooZlhGsLcp0kxW2I-QapEFAoZ_Fjd8zo/s1600/120512cblack-box.jpg"/></a>

<a href="http://saunmu.blogspot.com/2012/04/satu-untuk-semua-optimasi-blog.html"><img title="optimasi blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNm6v-ezLaTSZO-32T_EFLXFpw1u2C7xMDmKgN9jXFnHQ7uLxLS3fBGnoSWs3MQY4oMQcgM5v4-XU_yGiFKcTY5_WWSLrVj1I2WgQRUvgC4G3kLuX-YoXbxhN9TtOBsUlyHKm9YKN_te4/s200/optimasi-3.jpeg"/></a>

<a href="http://saunmu.blogspot.com/2012/03/cara-membuat-navigasi-permalink.html"><img title="Navigasi Permalink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yTGWs4qq8s1U3yfcqzN6y0JVmjojomOirmu9UubaNbKQ8P0_eYlE2Qacha2USc5jfuOKJWnSGQWsOJC7sfB_Rs64Z5oD8CrWw1kqsEEcm1aoZ4GKRg-Wr8JTtI4f0RDDXU-Mc9ouwCA/s320/PERMALINK.jpg"/></a>

</marquee></div>

</div>

Ganti dan sesuaikan script yang berwarna merah dengan postingan-postingan yang ingin anda tampilan, simpan dan lihat hasilnya. Silahkan anda berkreasi sendiri untuk membuat tampilan animasi slide posting ini menjadi lebih bagus.

Selamat mencoba, semoga bermanfaat.

DUNIA BLOG : MEMBUAT RECENT POST PER LABEL

DUNIA BLOG. Membuat Recent Post per Label - Jika kita mempunyai suatu blog semacam DUNIA BLOG  ini, tentu akan terlihat lebih professional jika pada blog kita mempunyai Recent Post per Label yang tertata rapi.  Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dengan ada thumbnail pada gambar yang ada pada postingan terbaru kita. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa anda pilih sendiri label mana yang akan ditampilkan.

Dengan menyajikan lebih banyak menu dan pilihan menu bisa jadi pembaca akan banyak mengklik postingan-postingan terbaru yang tertata rapi sesuai dengan labelnya. Nah bagi anda yang tertarik untuk mempraktekkannya, silahkan ikuti langkah berikut ini.

Cara Membuat Recent Post Per Label With Thumbnail

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas

<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>

6. Simpan Template jika sudah selesai.

Langkah-langkah di atas adalah untuk mengkostumisasi template. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu :

7. Pilih Tata Letak lalu Tambah Gadget >> HTML/Javascript
8. Kemudian masukan kode berikut ini:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks NAMALABEL dengan nama label yang akan ditampilkan.

10. Simpan jika sudah selesai.

Selamat mencoba, semoga berhasil dan juga semoga dapat memberikan manfaat.

DUNIA BLOG : MEMBUAT POPULAR POST BERGERAK

DUNIA BLOG kali ini akan membahas tips-trik membuat Popular Post bergerak, dalam artian tidak statis. Popular Post bergerak versi DUNIA BLOG ini akan lebih meningkatkan profesionalitas blog/web yang kita miliki. Anda dapat melihat contohnya pada bagian bawah blog ini.

Cara pembuatannya cukup bahkan tergolong sederhana, karena hanya menambahkan script marque saja. Berikut ini adalah cara pembuatannya  :

Log in ke blog/web anda :

• Ke design template
• Ke edit HTML
• Centang pada expand template widget

cari kode seperti dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

Perhatikan baik-baik, tulisan yang berwarna hijau adalah kode yang harus kita temukan, tulisan yang berwarna merah adalah script yang harus kita tambahkan, sedangkan tulisan yang berwarna biru adalah kode asli template yang ada.

Informasi tambahan :

Kode direction='up' ini menunjukkan arah gerak widget, keatas atau ke bawah, dan bila anda ingin widget bergerak ke bawah, ganti 'up' dengan 'down'.

Kode height='140' menunjukkan panjang kolom, anda dapat merubahnya sesuai keingingan anda.

Kode  scrollamount='3' menunjukkan kecepatan scrolling, semakin kecil angkanya, maka akan semakin cepat gerakannya.

Sekian, terima kasih, semoga bermanfaat.

TENTANG CARA MEMBUAT WIDGET BREAKING NEWS

DUNIA BLOG kali ini akan berbagi tips-trik tentang Cara Membuat Widget Breaking News yang biasanya terletak persis di bagian bawah menu horizontal drop-down. Widget Breaking News versi DUNIA BLOG ini cukup mudah untuk membuatnya, serta berfungsi salah-satunya untuk menambah penampilan blog menjadi lebih profesional.

Berikut ini cara membuatnya  :

Log in ke blog anda, pilih rancangan-edit HTML, centang expand template widget, kemudian carilah script </head>, berikutnya copykan script di bawah ini dan letakkan tepat di atasnya.

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>
<style type='text/css'>.titlefield{ /*CSS for RSS title link in general*/text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/color:#eee;font:normal 13px Arial;}
#example1{ /*Demo 1 main container*/
width: 800px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 13px Arial;

text-transform:none;text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #000;}
#example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>
  

Selanjutnya carilah kode script menu horizontal yang telah terpasang pada template anda, atau bisa juga script berikut ini <div id='outer-wrapper'><div id='wrap2'>, selanjutnya copykan script berikut ini tepat di atasnya  :

<div class='newspic'>

<div class='news'>

<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>

News Update :

</div>

<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;Bams&quot;, &quot;http://duniablog888.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed

cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields

cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag

cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div><div style='clear:both;'/>

</div>

</div>

Selanjutnya, ganti kode yang berwarna merah, sesuaikan dengan blog anda, simpan template anda, kemudian lihat hasilnya.