Senin, 31 Desember 2012

Cara Membuat Label Dengan Thumbnail Otomatis Berdasar Kategori Tertentu

Keinginan para blogger pasti salah satunya adalah blognya tampil menarik dimata para pengunjungnya karena jika tampilanya menarik akan membuat betah pengunjung berlama-lama melihat blog anda dan membuatnya sering kembali mengunjungi blog anda ,nah berikut saya akan share sebuah artikel untuk mempercantik blog kamu semoga bermanfaat ya buat kamu . Berawal dari keinginan saya supaya blog saya kelihatan menarik seperti situs-situs berita besar yang tampilannya memiliki gambar kecil disertai potongan artikel yang dikelompokkan berdasar label tertentu ,akhirnya saya temukan cara  di situs kucoba.com yaitu cara membuat label dengan thumbnail otomatis yang dilengkapi dengan    potongan artikelnya .

Berikut adalah cara dan langkah-langkah untuk membuatnya :


  • Login Blogger > Rancangan / Layout > Edit HTML > Centang "Expend Widget"
  • Silakan copy kode dibawah ini dan letakkan tepat di atas </head>
<!-- Label With Thumbnail -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(w){document.write('<ul class="label_with_thumbs">');for(var v=0;v<numposts;v++){var f=w.feed.entry[v];var g=f.title.$t;var z;if(v==w.feed.entry.length){break}for(var r=0;r<f.link.length;r++){if(f.link[r].rel=="replies"&&f.link[r].type=="text/html"){var n=f.link[r].title;var o=f.link[r].href}if(f.link[r].rel=="alternate"){z=f.link[r].href;break}}var j;try{j=f.media$thumbnail.url}catch(q){s=f.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!="")){j=d}else{j="http://3.bp.blogspot.com/-DiSuxig0X9k/TZYzqpks56I/AAAAAAAAAWM/sN1GbkQvDUI/s1600/no_image.jpg"}}var x=f.published.$t;var m=x.substring(0,4);var l=x.substring(5,7);var t=x.substring(8,10);var h=new Array();h[1]="Jan";h[2]="Feb";h[3]="Mar";h[4]="Apr";h[5]="May";h[6]="Jun";h[7]="Jul";h[8]="Aug";h[9]="Sep";h[10]="Oct";h[11]="Nov";h[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true){document.write('<a href="'+z+'" target ="_top"><img class="label_thumb" src="'+j+'"/></a>')}document.write('<strong><a href="'+z+'" target ="_top">'+g+"</a></strong><br>");if("content" in f){var y=f.content.$t}else{if("summary" in f){var y=f.summary.$t}else{var y=""}}var p=/<\S[^>]*>/g;y=y.replace(p,"");if(showpostsummary==true){if(y.length<numchars){document.write("");document.write(y);document.write("")}else{document.write("");y=y.substring(0,numchars);var e=y.lastIndexOf(" ");y=y.substring(0,e);document.write(y+"...");document.write("")}}var A="";var u=0;document.write("<br>");if(showpostdate==true){A=A+h[parseInt(l,10)]+"-"+t+" - "+m;u=1}if(showcommentnum==true){if(u==1){A=A+" | "}if(n=="1 Comments"){n="1 Comment"}if(n=="0 Comments"){n="No Comments"}n='<a href="'+o+'" target ="_top">'+n+"</a>";A=A+n;u=1}if(displaymore==true){if(u==1){A=A+" | "}A=A+'<a href="'+z+'" class="url" target ="_top">More »</a>';u=1}document.write(A);document.write("</li>");if(displayseparator==true){if(v!=(numposts-1)){document.write("")}}}document.write("</ul>")};
//]]>
</script>
  • Setelah selesai, kemudian cari kode kata sidebar content setelah ketemu letakan kode berikut tepat di bawahnya:
/* Idblogmaker2 Content */.Idblogmaker2 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(http://3.bp.blogspot.com/-vLzIYI99Z_M/Tqi-lUCPC5I/AAAAAAAAB2Y/39BRBaXgkGI/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker2 {font:normal 12px Arial; color:#555;line-height: 1.4em;} .Idblogmaker2 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker2 li {margin:0;padding:0 auto;text-indent:0px;line-height:1.4em;} .Idblogmaker2 .widget {background:url() repeat-x bottom left;margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker2 a:link, .Idblogmaker2 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker2 a:hover {color:#000;text-decoration:underline;} .Idblogmaker2 .widget-content {margin:0 auto;padding:6px 10px;} /* IDB Featured Categories */ img.label_thumb{float:left;padding:0 auto;border:none;background:none;margin:0 10px 5px 0;height:72px;width:72px;} img.label_thumb:hover{background:none;}.label_with_thumbs {float:left;margin:0;padding:0} ul.label_with_thumbs li {margin:0 0 5px;clear:both;}.label_with_thumbs a {} .label_with_thumbs strong {} /* Idblogmaker3 Content */ .Idblogmaker3 h2 {font:bold 13px Arial;text-transform:none;margin:0 auto;color:#000;line-height: 1.2em;letter-spacing:.01em;background:url(http://3.bp.blogspot.com/-vLzIYI99Z_M/Tqi-lUCPC5I/AAAAAAAAB2Y/39BRBaXgkGI/s1600/Idblogmaker.com+ku.png) repeat-x bottom left;border:1px solid #ccc;border-width:0 0 1px 0;padding:5px 10px;} .Idblogmaker3 {font:normal 12px Arial; color:#555;line-height: 1.3em;} .Idblogmaker3 ul {list-style:none;margin:0 0 0;padding:0 0 0;} .Idblogmaker3 li {margin:0;padding:2px 0;text-indent:0px;line-height:1.4em;} .Idblogmaker3 .widget {margin:0 0 8px 0;padding:0 auto;border:1px solid #ccc;} .Idblogmaker3 .widget-content {margin:0 auto;padding:6px 10px;}.Idblogmaker3 a:link, .Idblogmaker3 a:visited {font:bold 13px Arial;color:#16387c;text-decoration:none;} .Idblogmaker3 a:hover {color:#000;text-decoration:underline;}
  • Simpan template
  • Selanjutnya kamu silakan buka Rancangan > Add Widget > Pilih HTML/Javascript 
  • Copy paste kode di bawah ini lau simpan di HTML/Javascript tadi:
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script> <script type="text/javascript" src="/feeds/posts/default/-/BLACKBERRY?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan :
  • Angka 4 yang di tebalkan di atas adalah jumlah dari sub label katagori yang di munculkan di label thumbnail ini.
  • Tulisan BLACBERRY yang di tebalkan adalah nama label yang di ingin di munculkan di label thumb. Jika label tersebut memiliki lebih dari satu kata, tambahkan %20 contohnya Tutorial%20Blogger.
Label dengan thumbnail ini masih bisa anda modifikasi sesuai dengan selera kamu seperti backgroundnya warna tulisan dan jumlah postingnya ,saya ucapkan selamat berkreasi dan semoga berhasil ,jangan lupa share artikel ini jika menurut anda bermanfaat ya ,,,,,,

cara memasang widget translator di blog


  Widget translator atau penerjemah banyak sekali fungsinya untuk blog anda ,misalnya saja jika ada pengunjung dari negara lain  yang masuk ke blog anda dan tidak tahu bahasa  blog kita maka mereka bisa menggunakan widget ini untuk mengubah bahasa blog kita sperti yang mereka inginkan, tapi tentu kamu harus memasang widget ini dulu di blog kamu .
  Gimana ingin membuatnya ? gampang kok caranya ,berikut ini caranya :

  • masuk ke blog kamu trus pilih menu 'Layout' atau 'Tata letak'
  • kemudian klik pada 'Add Gadget' atau 'Tambah Gadget'
  • lalu pilih 'HTML/java script'
  • lalu kamu copy dan masukkan kode berikut :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>


 kemudian simpan .jika berhasil maka hasilnya widget translator akan seperti gambar ini;


Gadgets powered by Google
selamat mencoba yah ...

cara membuat widget twitter join conversation

 Anda termasuk blogger yang suka main twitter. Berikut tutorial Membuat Widget Twitter Conversation untuk mempercantik tampilan situs anda....



Masuk ke akun twitter Anda
lalu, pilih My Website
Kemudian pilih profil widget
Nah, sekarang sesuaikan kostumisasinya
Jika sudah, klik pada Finish & Grab Code
pada bagian bawah
Terakhir, copy kodenya
Demikian tutorial singkat tentang Cara Membuat Widget Twitter Conversation. Semoga bermanfaat

Widget animasi twitter follow untuk blog

mau berbagi cara membuat animasi twitter yang keren untuk blog kamu .Tarik perhatian pengunjung blogmu dengan animasi twitter yang bisa bergerak untuk menarik pengunjung blog mu.

Berikut ini cranya pilih sesuai selera kamu ya sobat :



Scriptnya ini :

 <object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="200" height="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=inspirasiku-iq"></param><a href="http://www.dreambingo.co.uk/" title="http://www.dreambingo.co.uk/">http://www.dreambingo.co.uk/</a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=inspirasiku-iq"></embed></object>





Scripnya ini:

<object data="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie"
value="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" />
<param name="allowscriptaccess" value="always"/><param name="menu" value="false"/><param name="wmode" value="transparent"/>
<param name="flashvars" value="username=inspirasiku-iq"/><a href="http://www.gamblinginsider.ca" title="gambling">gambling</a><embed src="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=inspirasiku-iq"></embed></object>

Untuk cara memasang widget animasi twitter di blog kamu ,berikut ini caranya:

  1. Masuk ke dashboard blog kamu=>design/rancangan=>HTML/java script.
  2. Copy salah satu script diatas ,Ganti inspirasiku-iq dengan nama account twitter kamu .
  3. Pastekan di kotak HTML/Java script tadi,simpan .
lihat hasilnya.selamat berkreasi kawan ...

Cara Update Otomatis Postingan Ke Facebook

Fitur ini berguna untuk mempromosikan situs anda ke pengguna facebook ,awalnya ,Facebook masih bisa melakukan import notes dari sebuah rss feed .

namun fitur ini mulai ditinggalkan ,sehingga bermunculan aplikasi pihak ketiga untuk mengimport artikel dari situs ke facebook .Beberapa aplikasi alternatif antara lain aplikasi RSS Grafiti dan Networked blogs.



Nah kali ini saya mau share cara menggunakan salah satu aplikasi tersebut yaitu RSS Grafiti


  1. Login ke Facebook dan like Rss Grafiti di http://www.facebook.com/RSS.Graffiti.
  2. Klik GO to App untuk masuk ke aplikasi.
  3. Klik tombol Add Feed untuk menambahkan alamat situs anda .
  4. Isikan feed url kamu dan alamat situs anda .Feed url bisa kamu dapat dengan mengetikan situs kamu di http://feedvalidator.org/.
Jika sudah berhasil maka otomatis setiap kamu posting di situs kamu akan ter publish di facebook kamu berupa garis besar isi artikel dan bila di klik oleh pengunjung akan langsung menuju halaman situs kamu .selamat mencoba .......

Cara Membuat Dan Memasang Kotak Komentar Facebook di Blog

Cara Membuat Kotak Komentar Facebook di Blog - Cara memasang/menambah kotak komentar facebook di blog atau cara agar bisa berkomentar dengan facebook di blog. Setelah kemarin selesai update posting mengenai cara membuat akun facebook, kini Blogaul akan update artikel berjudul cara membuat kotak komentar facebook di blog - Teman blogger yang lagi semangat kalau mau ada komentar di blognya dan bisa di share di facebook teman bisa baca artikel ini bagaimana cara memasang kotak komentar facebook di blog blogspot, cara membuatnya sangat mudah. ikuti saja petunjuk yang saya share di sini oke. :-)

Cara Memasang Komentar facebook di Blog WordPress Cara Memasang Komentar facebook di Blog Wordpress

1. Seperti biasa anda masuk dulu ke Account Blogger.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Setelah terbuka kotak Edit HTML cari kode berikut <b:includable id='status-message'> dan diatas kode tersebut sobat akan menemukan kode ini </b:includable> (agar lebih cepat mendapatkan kode yang saya maksud diatas tekan tombol F3).
4. Copy paste kode ini <b:includable id='status-message'> kedalam kotak pencarian. Tahap selanjutnya Copy paste Kode dibawah ini dan letakan diatas kode  </b:includable>

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
Langkah Terakhir Save Template sobat dan selesai sehingga hasilnya akan terlihat saat membuka salah satu postingan blog. Semoga bermanfaat.