Recent Post Widget No Thumbnail

Tidak sedikit dari blog-blog yang ada di Indonesia memasang Widget Recent Post pada blog mereka. Ada yang pasang Recent Post Widget dengan Thumbnail (Recent Post Widget yang menampilkan gambar) atau Recent Post Widget No Thumbnail (Tanpa gambar). Sebenarnya, mana sih yang lebih bagus antara Recent Post Widget No Thumbnail dan Recent Post Widget dengan Thumbnail? Dua-duanya sama. Tergantung dari yang punya blog, apakah mau yang pake gambar atau tidak. Kalau kemarin saya memberikan tutorial blog tentang Cara Membuat Recent Post Animasi, Cara Membuat Recent Post dengan Thumbnail Widget, sekarang tentang cara membuat Recent Post Widget No Thumbnail.

Cara Buat Recent Post Widget :

• Sign In di http://www.blogger.com
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML/Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<script style="" src="http://jimmyjackbob.googlepages.com/Recent_posts_widget_blogger.js"></script><script style="">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://bloggertutorialblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

• Klik Simpan

Tambahan :

1. Ganti http://bloggertutorialblog.blogspot.com/ dengan URL blog sobat
2. numposts = 10 adalah jumlah Post yang akan di tampilkan, Silahkan sobat blogger sesuaikan

Baca Selengkapnya ...

Membuat Google Translate Bendera Berbayang

Widget Google Translate yang saya tawarkan hari ini adalah widget Google Translate ke empat setelah Widget Google Translate Sederhana, Widget Google Translate Bendera Bergerak, Widget Google Translate Pin Bendera. Widget ini terlihat indah pada blog yang mempunyai background cerah atau terang. Nah... kalau blog sobat mempunyai background cerah, apa yang di tunggu? Langsung pasang widget ini di blog sobat.

Cara buat Widget Google Translate Bendera Berbayang

• Sign In di http://www.blogger.com
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<style>
      .google_translate img {       filter:alpha(opacity=100);       -moz-opacity: 1.0;       opacity: 1.0;       border:0;       }       .google_translate:hover img {       filter:alpha(opacity=30);       -moz-opacity: 0.30;       opacity: 0.30;       border:0;       }       .google_translatextra:hover img {       filter:alpha(opacity=0.30);       -moz-opacity: 0.30;       opacity: 0.30;       border:0;       }    
</style>       <div><a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk166oYrWdnZh72oS1FU-iM7OtWCVi6rB48NcOYbJOJGZg7ENXb6HA8k8hkz-X-Lx6uGftl15S5GqBtZSKtYUC8yudyLxq0KPYRvSV59_MEbJCee6DooY9rIwS536QMVVBWzatpW8-_m8/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNQ6VNTjI3v0Ie8SAbVdruIOkhJ0YgCfM9KDOk8YpyPNnXbRvGwNK5ZvjoyR73CRZVSsQ62Lbh7Vtu-LCxDWFl9i8LGA-uzjt29KyFj7QbYNsPOCTIu_TPt5vCjW9kSDynygAqkIE8QvO/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlZ4FCEuefrEVQyQX3oUZtINYozwwt3_9v9c3wMRc2DUx7KrTbh4DVEsl2O0WfA218DKQf1sST9VG3ZZbhMJmYb0fDPbqNjDkiE_JmLR-a5RhvK-plQbrwsLAMxKTUdWWf3SpPgT8qBPB/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Italian"><img align="absbottom" alt="Italian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1UoE49k0OW7OZL-pHSlOClHYGFoHB4KQ4tvl4Gd2T5x3vEIfGfVSs2x99GueFZJV0ua2sF3e5WrjEnH7DxcYPMmeDIEyL62XD94ez_9H_-jk174ReVWbl5url7mnYSR5RJy8_2Zwr74/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Italian" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Dutch"><img align="absbottom" alt="Dutch" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrS7FLw1abRXPDNPOm0JIc1cVty6YJujIdiCUdUtiHLk1vfRQQoH0gM78hWJWAsSS_DqNtgrpz5yXORPGpkAQDsRG5ldk19OaSNKNaBgk1H3aXPYnWuxuQcL_j6CdhwEH9hMykLCouDIw/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Dutch" width="30"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiqlsjH4kBc_NxbIx2uxOFXIuSEX6XIUy_eKNgIfEMsIkPuRg9Th39eIYtMpXrJKzTgX6ifwRRVCzGlVRgYYg0TXgWpzJST-NazteuyOuFnujung1Jg5quM3Yu_haJhDRKCV_vDTQhQuE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuLt5RFU6jJ1Is66FrjMwcyZigMYLC7Gzi3iEfTDNrllNxA4u0AQGtk7FwEc7XPyQdIDIEPU5sUFyjMliVu2_RlzAtpG1x9n1aFPyKzTPb89nDfrYZ4u2LA6mdVRz3FDDX1uzN3Th_S_l/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Korean"><img align="absbottom" alt="Korean" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIuxE5bbNOjJlegaX1NjlawV_kYnegfHu0ICd1rOk5_quUcXbnT2g28kxuGafPenF5jny7XTVLOISWcVCPewOcgHcf-jqcp6UUoLp-YNOSPulaCRdupIFDOdGB4J5lp7F9jc2G7PUMoc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Korean" width="30"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVD_MsdAtB-9PElUFtMYDY5AlJ6GW_7Zn08nn3aDEWCE2YhVeghpFRd2e1C2TpHVRxXJ7UgnvGrLQhHrFDy53planHG95ccVi_ASLF04XfFFO7hCHvL3tY3yDbtJ2pjw6D-0IxRDulqeo/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="27"></a>
<a class="google_translate" href="http://www.blogger.com/post-edit.g?blogID=1618609168704936088&postID=7645695684025277404#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndCvmp-QpCE8xY5vzhYbSTXGHMnGvcI9wSNXH87rVFLSVVytu74Du9YD6-2sPXh_Do3nX_oMUa-asAVqE6Rbo6cNkl29SY_abV4HvhkiwVQg4TjNGKmsk7pWHVHdLHNU41XDFHXg50dc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="27">

• Klik Simpan

Hasilnya akan terlihat seperti di bawah ini

     

Baca Selengkapnya ...

Cara Membuat Salam Pembuka Blog

Apakah sobat blogger pernah berkunjung ke suatu blog, kemudian muncul sebuah salam pembuka atau ucapan salam dari blog tersebut? Kalau pernah, apakah sobat blogger tertarik untuk memasang fitur seperti itu? Kalau sobat blogger tertarik, berarti kebetulan banget karena itulah tutorial blog yang akan saya berikan buat sobat blogger hari ini, yaitu tentang cara Membuat Salam Pembuka Di Blog. Apa mamfaat dari memasang salam pembuka ini di blog, sepertinya tidak perlu saya sebutkan. So, let's make it.

Cara Membuat Salam Pembuka Di Blog :

• Sobat masuk dulu ke akun Blogger sobat
• Klik Design
• Klik Add a Gadget dan HTML JavaScript
• Copy dan paste kode berikut pada kolom yang tersedia

<script type='text/javascript'>
var name = prompt("Selamat Datang...!! Nama kamu siapa?", "Nama Kamu");
alert("Salam Kenal Ya..."+name)
alert("Selamat menikmati artikel yang kami suguhkan")
</script>

• Klik Save

Tambahan :

Teks prompt yang berwarna merah bisa sobat blogger sesuaikan dengan keinginan sobat blogger. Tapi ingat ya, jangan gunakan bahasa yang kurang sopan, bisa-bisa pengunjung yang akan mencari artikel di blog sobat pada kabur semua.

Baca Selengkapnya ...

Cara Buat Tulisan Berjalan / Effect Marquee di Blog

Efek marquee artinya memberikan atau membuat kesan berjalan/bergerak pada suatu text. Efek Marquee atau tulisan berjalan umumnya di letakkan di bagian atas Header blog atau di bagian Footer Blog dan biasanya Efek marquee berisikan teks ucapan selamat datang. Untuk menampilkan tulisan berjalan pada blog, kita hanya menyisipkan kode HTML SEBELUM dan SESUDAH teks yang akan ditampilkan. Di bawah ini terdapat delapan efek marquee yang saya berikan, silahkan di copy paste di blog sobat.

Tempatkan kode Effect Marquee atau tulisan berjalan pada tempat yang diinginkan (Kolom Postingan atau Kolom HTML Java Script).

Effect Marquee atau Tulisan berjalan lambat

<marquee behavior="scroll" scrollamount="1" scrolldelay="32">Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan berjalan ke atas

<marquee behavior="scroll" direction="up" height="30"> Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan Zig-zag

<marquee behavior="alternate" direction="up" height="50px"><marquee direction="right"> Tulisan sobat disini</marquee></marquee>  

Effect Marquee atau Tulisan berjalan tetapi berhenti kalau dibayangi cursor

<marquee onmouseout="this.start()" onmouseover="this.stop()">Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan berjalan ke kanan

<marquee behavior="scroll" direction="right">Tulisan Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan berjalan dengan gambar

<marquee behavior="scroll"><img height="84" src="Url%20gambar%20yang%20akan%20ditampilkan" width="110">Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan dapat memantul

<marquee behavior="alternate" width="300"> Tulisan sobat disini</marquee>  

Effect Marquee atau Tulisan Bouncing around

<marquee behavior="alternate" direction="up" height="100" width="300"><marquee behavior="alternate" direction="right">Tulisan sobat disini</marquee></marquee>  

Perhatikan Contoh di bawah ini!

Tulisan berjalan lambat
Tulisan sobat disini


Tulisan berjalan ke atas
Tulisan sobat disini


Tulisan Zig-zag

Tulisan sobat disini



Tulisan berjalan tetapi berhenti kalau dibayangi cursor
Tulisan sobat disini


Tulisan berjalan ke kanan
Tulisan Tulisan sobat disini


Tulisan berjalan dengan gambar


Tulisan sobat disini



Tulisan dapat memantul
Tulisan sobat disini


Tulisan Bouncing around

Tulisan sobat disini

Baca Selengkapnya ...

Cara Memasang Facebook Like Badge

Hari ini saya merasa sangat bahagia banget karena dapat menyuguhkan tutorial tentang Cara Pasang Facebook Like Badge pada sobat blogger. Mungkin sobat blogger jarang mendengar istilah Facebook Like Badge, karena di beberapa blog yang tenar itu adalah Facebook Like Button, Tapi menurut saya pribadi jauh lebih bagus memasang Facebook Like Badge ketimbang Facebook Like Button. Kedua fitur facebook ini sangat berbeda, Facebook Like Badge hanya muncul ketika blog kita di buka dan Facebook Like Button hanya muncul di blog post atau area postingan. Dengan memasang Facebook like Badge pada blog, Blog terlihat indah dan keren.

Cara pasang Facebook Like Badge pada blog :

• Sign In di http://www.blogger.com/
• Klik Menu Rancangan, lalu pilih Edit HTML.
• Kasih tanda Centang pada Expand Widget Template
• Cari kode <body>
• Kalau kode <body> tidak ada, cari kode <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
• Copy dan Paste kode di bawah ini SETELAH kode tersebut

<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='Blogger Tutorial Blog'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/BloggerTutorialBlog',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->

• Klik Save

Tambahan :

1. Ganti tulisan "Blogger Tutorial Blog" dengan nama facebook sobat blogger
2. Ganti http://www.facebook.com/BloggerTutorialBlog dengan URL Facebook sobat blogger
3. Ganti angka 15 dengan waktu yang sobat blogger inginkan

Sobat blogger tidak berhasil? Gampang, langsung saja sobat melunjur ke website yang menyediakan fitur ini di http://www.kakiheboh.com/

Baca Selengkapnya ...

Membuat Google Translate Sederhana Untuk Blog

Widget Google Translate adalah Widget Penterjemah yang di buat khusus buat pengguna Internet yang memiliki situs atau blog. Widget Google Translate merupakan widget yang harus di miliki oleh setiap situs atau blog yang target visitornya tidak hanya dari negeri sendiri. Dengan adanya widget ini, visitor yang berasal dari luar negeri dapat mengartikan secara langsung setiap artikel yang mereka baca. Widget google Translate ini memiliki tampilan yang sangat simple atau sederhana. Kalau widget ini di pasang di blog sobat blogger, maka ketika pengunjung blog membuka salah satu halaman blog sobat, di bagian bawah bawah menu bar akan muncul menu bar baru yang menawarkan kita untuk menterjemahkan laman yang di baca.

Cara buat Widget Google Translate Sederhana :

• Sign In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<div id="google_translate_element"></div><script> function googleTranslateElementInit() {   new google.translate.TranslateElement({     pageLanguage: 'id'   }, 'google_translate_element'); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

• Klik Simpan

Tambahan :
id adalah kode Bahasa untuk Bahasa Indonesia, bahasa yang digunakan di blog
Kalau sobat blogger, menginginkan Widget Google Translate yang lain, Silahkan klik link di bawah ini :

1. Widget Google Translate yang menampilkan bendera berbayang
2. Widget Google Translate dengan Icon Bendera yang bergerak

Baca Selengkapnya ...

Kelopak Bunga Berguguran pada Blog

Kalau kita berada pada sebuah taman yang penuh dengan bunga, kemudian kelopak dari bunga-bunga tersebut jatuh berguguran. Waduh... sudah pasti kita bisa membayangkan bagaiman indahnya taman bunga tersebut. Tapi kalau Kelopak Bunga Berguguran pada Blog, gimana ya? Sudah pasti hal itu akan menambah keindahan blog sobat blogger. Jadi, Kelopak Bunga Berguguran pada Blog adalah salah satu cara memperindah blog. Kalau sobat blogger tidak yakin dengan senua ini, silahkan sobat blogger pasang di blog sobat.

Cara Membuat Kelopak Bunga Berguguran pada Blog:

• Log In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script><script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://rinjanilovers.blogspot.com/'}).append(a).appendTo('body')});</script>

• Klik Simpan

Blog yang indah akan membuat visitor betah untuk berlama-lama di blog kita.

Baca Selengkapnya ...

Cara Memasang Burung Twitter Terbang

Memasang burung Twitter terbang di blog sangat mudah. Sobat blogger hanya membutuhkan waktu kurang dari satu menit untuk melakukannya, karena sobat blogger tidak perlu edit template. Kode Twitter Flying Bird atau burung Twitter terbang hanya ditambahkan di area atau di kolom tempat sobat blogger biasa meletakkan kode untuk membuat widget. Dengan menambahkan burung Twitter terbang di blog, tampilan blog sobat pasti akan terlihat tambah indah dan cantik. Talk less do more, kita langsung saja ke prakteknya.

Cara Membuat atau Memasang Widget Burung Twitter di Blog :

• Pertama, Klik Design lalu sobat klik Page Element
• Klik Add Gadget dan HTML Javascript
• Copy dan paste kode di bawah ini pada kolom yang tersedia :

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1giI14G-jWoPvOYBK8YcS4f4g3kGXzXMdl8Dfou4628Tjljyj2Aq1c_YI0Rpf3iH-W9i2MA87yPmCEspW6F84dJTRxxtiqKf-hAGN4ffKweLmMohLyfsxFS7i1DL4YN4iUyDw63yVU5w/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

• Klik Simpan

Tambahan :
Ganti http://twitter.com/Akun Twitter sobat dengan Akun URL Twitter sobat

Apakah sobat blogger mau mengganti warna Burung Twitter tersebut? Gampang, sobat blogger tinggal ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1giI14G-jWoPvOYBK8YcS4f4g3kGXzXMdl8Dfou4628Tjljyj2Aq1c_YI0Rpf3iH-W9i2MA87yPmCEspW6F84dJTRxxtiqKf-hAGN4ffKweLmMohLyfsxFS7i1DL4YN4iUyDw63yVU5w/s1600/burung+twitter+terbang.png dengan salah satu kode di bawah ini :

Burung Twitter Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0QuERkA7jV_MssODUExR-Vz4FyYVJvNj-kEcakdBe-PG8Ek50vx3tJmPJKCzFBhxMT0-JJqgI9AtxV5I7K6YYe3-9yKvKxWZpPy8nrxFa0UyU06l7xDFtK0KpQLzBsKjfyFDtJ9lyyI/s1600/yellow+bird.png

Burung Twitter Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9OphO5S0IOIYBCtIwAdSZYEqMI60HnO7zR0RYLQdNyX6r_nC-AN_NPxppmy3vOAfqnyvsxBMqqsWsIqfxq2sKjA6fpZYA2AYy0gVJXKDEL-EVewHeQNuTjvSubmfJcFRMEk_Mq3Caak/s1600/black+bird.png

Burung Twitter Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6qzuJzCrbRKk8bu4CmcuGIAJS_KCpT1yVdw_k0dQPdNwg0u4-Aslph04XZMCiU6N4rf0-fVDgoD_Im1I2d_-FLW_BKNJsdZzZyWPNU6HSoNpfMtmIQMlY4Oif1QbiOqzrIsBILWAUus/s1600/Blue+bird.png

Burung Twitter Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrp6rVWr66HElnB2zamNfu2qK6IK32Pvo5cuyJn_gHCw97c5C363ko1Dr80T_RM8VNsT0FVP7p-ijxHVFEa4UiLrJGRIRHzB00zIYW0Rm5yD-KaUGDhqLahZucSdQxjJXD7tq5E1Ou6o/s1600/brown+bird.png

Burung Twitter Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd-VeS7dW3SYvvS3b9gFthR3-c7CzaxyyDWL-NH5sYr8-ij-N6WdAe5rhdjrqjqMluXCErC3EHClCVruYNpnG_WSAYMIhva0hfmN3Rb1cZhyphenhyphen31ZvRDJHrKVxVVXxyr8jyo3YrwoHaMLiM/s1600/Green+bird.png

Burung Twitter Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJJYS6EoKxnTvDObwfo73uqVQVrwgET0RABOOCpjclt3toP3shRRIVhmEoRKRZQdv4VEv0pFywrsHjtQGMyjKSK9hR1SjNE6bof6NCTaC7aXBR38V6vo08ZnOyP-0wTVO08AUUnXlAhk/s1600/purple+bird.png

Burung Twitter Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5_hcePegej_ag18ZbRAW3ibaW_13LwajIIF1jCgsbUyX1NRStenQG1PAJVYEiOqfvAjsIYCK6v0qyxGCHFh453AYD02WEpTTOBtUrnIt4XO4J_nagoQND2MuKQPyxR0KtunSU1iCJgQ/s1600/white+bird.png

Burung Twitter Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZsmg4RVq4FIQ-Jhtm68B6vtUE2W8UHeSnw8rOu7r11qDo3wJjgWHnQcKJvOOO4ynubV-XFvOe9ureTSLkgK4jZhSb9Im7Af0Nfe-baxEy8I69CFqlXb3uJcTIgPEwf7tBCd9_g0Ignn4/s1600/red+bird.png

Baca Selengkapnya ...

Cara Buat Widget Berlangganan FeedBurner

Kotak Berlangganan FeedBurner haruslah dibuat seindah atau semenarik mungkin untuk memancing setiap pengunjung blog kita untuk berlanggananan artikel atau postingan terbaru yang kita publikasikan. Semakin banyak yang berlanganan artikel kita, maka itu akan menjadi point tersendiri buat blog kita di mata mbah Google. Widget Berlangganan FeedBurner atau widget FeedBurner Subscription yang saya berikan sekarang memiliki tampilan yang sangat imut dan simple. Lihat saja gambar di atas, itu adalah tampilan atau bentuk kotak berlangganan FeedBurner yang saya berikan. Tertarik untuk memasang widget yang imut ini?

Cara Buat Kotak Berlangganan FeedBurner :

• Seperti biasa, sobat masuk dulu di akun Blogger sobat
• Selanjutnya klik Design dan Page Elements
• Klik Add a Gadget dan pilih HTML JavaScript
• Copy dan Paste kode di bawah ini :

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWm8ZS0nZw39Ecz05g82k3SJdlsZRfgDVAU0KGuE-9wsySJr5R-JnPRayHzAuH4fbdHOS1Rf2-SV_B1ZK5YhGETXkLdGLaTMI2fMVOIzJrHpwYbg_ASiP0snCk3DDMuJwvuGd91vAPmJnB/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

• Klik simpan.

Tambahan :

1. Ganti http://feedburner.google.com/fb/a/mailverify?uri=TntByStc dengan feed link akaun feedburner sobat. Untuk melihat feed link sobat, sudah pasti sobat blogger harus mengunjungi akun FeedBurner sobat.
2. Ganti TntByStc dengan Judul Feed atau nama Feed dari blog sobat.

Baca Selengkapnya ...

Menghitung Jumlah Kata/Karakter Teks

Cara mengetahui berapa karakter kata yang sudah kita tulis atau berapa character yang sudah kita buat, kita bisa menggunakan tools ini. Tools ini disebut dengan nama Word/Character counter.Word/Character counter di buat oleh http://centricle.com. Cara menggunakan tools ini sangat simple, kita tinggal meletakkan text yang sudah kita buat pada kolom yang disediakan kemudian kita klik tombol "How Many?", secara langsung kita akan di bawa ke website http://centricle.com/ lalu jumlah kata dan karakter dari teks kita akan langsung diperlihatkan.

Silahkan tes Tools ini :

String:

Kalau sobat blogger ingin memasang tools ini di blognya tinggal copas (Copy Paste) kode di bawah ini di kolom widget atau di area posting.

<form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank">
<fieldset>
<label for="pad">String:</label>
<textarea cols="60" rows="15" name="pad" id="pad"></textarea>
<input class="submit" type="submit" name="countem" value="How many?" />
</fieldset>
</form>

Baca Selengkapnya ...

Cara Membuat Recent Post Animasi

Kembali lagi saya membahas tentang Widget Recent post. Sobat blogger tentu masih ingat bahwa pada pertemuan sebelumnya, kita membahas tentang Recent Post Widget No Thumbnail dan Recent Post dengan Thumbnail. Widget Recent Post kali ini saya sebut dengan nama Recent Post Animasi. Kenapa di sebut dengan nama Widget Recent Post Animasi? karena widget ini bergerak turun naik secara beraturan. Menurut hemat saya, di antara ke tiga Widget Recent Post ini, Widget Recent Post Animasi adalah yang paling bagus karena menurut saya juga Widget Recent Post Animasi ini adalah Widget Recent Post penyempurna dari Widget Recent Post sebelumnya. Coba saja sobat pasang ketiga widget ini dan sobat bandingkan, mana yang lebih cantik dan mana yang kelihatan lebih indah. 

Cara Buat Widget Recent Post Animasi :

• Sign In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>

<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>

<ul id="rp_plus_img"><script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://bloggertutorialblog.blogspot.com/" target="_blank">Get this widget here</a></small>

• Klik Simpan

Tambahan :
var numposts = 5; adalah jumlah post yang akan ditampilkan, silahkan sobat blogger sesuaikan

Baca Selengkapnya ...

Cara Buat Daftar Isi

Ini adalah postingan ketiga saya tentang cara buat daftar isi. Daftar isi yang sebelumnya saya berikan adalah daftar isi otomatis update, sedangkan yang sekarang ini adalah daftar isi yang di update secara manual. Sebenarnya, mana sih yang lebih bagus antara Daftar isi otomatis update dengan daftar isi yang di update secar manual? Jawaban yang tepat untuk pertanyaan itu adalah "Daftar isi yang di update secara manual lebih bagus ketimbang daftar isi otomatis update". Pertanyaan kedua muncul lagi, kenapa? Itulah pertanyaan yang mana jawabanya harus sobat blogger cari tau sendiri. Sebagai seorang webmaster, informasi seputar dunia blog harus di cari, jangan hanya di situs atau blog Indonesia saja, tapi juga di luar negeri.

Cara buat daftar isi atau cara buat Table of content :

• Copy kode di bawah ini dan paste di kolom widget

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>
<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/cara-buat-navbar-auto-hide.html">Cara Buat Navbar Auto Hide</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/all-about-anchor-text.html">All About Anchor Text</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/cara-pasang-yahoo-emoticon-blog.html">Cara Pasang Yahoo Emoticon di Blog</a></div>
<div class="list">
<a href="http://bloggertutorialblog.blogspot.com/2012/02/apakah-blog-sudah-terindex-google.html">Apakah Blog Sudah Terindex Google?</a></div>
</div>

• Ganti yang warna merah dengan link sobat dan warna biru dengan Judul atau title posting sobat.
• Selanjutnya klik Save

Thank you for visiting Blogger Tutorial Blog. And Thanks for reading.

Baca Selengkapnya ...

Cara Pasang Alexa Traffic Widget

Alexa Traffic Widgets merupakan widget yang sangat bagus untuk di pasang di blog kita karena dengan adanya Alexa Traffic Widgets kita bisa melihat traffic rank dari blog kita. Widget yang kecil dan imut ini membutuhkan keterampilan programming yang sangat minimal. Sobat blogger hanya mengcopy kode HTML dan sobat blogger letakkan atau paste di blog. Sebelum saya memberikan tutorial tentang cara memasang widget Alexa, alangkah baiknya saya jelaskan terlebih dahulu tentang jenis-jenis Alexa Traffic Widget.

Terdapat tiga jenis Alexa Traffic Widgets yaitu :

1. Alexa Site Stats Button : Widget ini menampilkan Logo transparant Alexa, Traffic Rank dan Links in. Ada tiga bentuk widget ini, ada yang bentuk vertikal, ada yang berbentuk Horizontal dan ada yang memiliki bentuk sederhana.
2. Alexa Traffic Rank Button : Widget ini sama dengan widget yang saya jelaskan sebelumnya, cuman letak bedanya widget ini hanya memiliki satu bentuk yaitu bentuk yang sederhana. Yang saya sering temukan di beberapa blog selama ini adalah widget Alexa Traffic Rank Button.
3. Alexa Traffic Graph : Widget ini menampilkan daily reach menggunakan hitungan persentase yang digambarkan dalam bentuk grafik.

Cara Pasang Widget Alexa :

• Sobat blogger kunjungi situs http://www.alexa.com/siteowners/widgets
• Pilih salah satu dari ketiga widget tersebut dengan cara memasukkan URL blog sobat di dalam kolom tersebut (Contoh : bloggertutorialblog.blogspot.com), tanpa menggunakan http://

• Klik tombol Build Widget
• Copy salah satu dari kode HTML dari Banner tersebut.
• Lalu sobat login di akun Blogger sobat.
• Di bagian Dashboard, klik Design dan klik Add a Gadget.
• Pilih HTML Java Script
• Paste kode yang sudah kita dapatkan pada kolom yang kedua.
• Simpan Template sobat.

Thanks for your reading. Wait for my next post.

Baca Selengkapnya ...

Menghubungkan Blog Dengan Halaman Google +

Menghubungkan Blog Dengan Halaman Google +

Menghubungkan blog dengan halaman Google +, akan membantu sobat blogger dalam menjalin hubungan dengan teman, fans atau visitors blog sobat. Hal ini juga dapat membantu Google dalam mengkonsilidasi +1 dari blog atau halaman blog sobat. Selain itu, Menghubungkan blog dengan halaman Google + akan membuat blog kita memenuhi syarat untuk Google + Direct Connect.

Direct Connect

Google + Direct Connect akan membantu penunjung blog kita dalam menemukan halaman Google + sobat jadi mereka bisa menambahkan kita ke dalam Circle atau lingkaran mereka langsung dari Google Search. Untuk membuat halaman Google + di blog, kita hanya menambahkan sedikit kode di dalam kode <head>. Berikut ini contoh kode yang ditambahkan :

<link href="https://plus.google.com/{plusPageUrl}" rel="publisher" />

Kalau sobat blogger ingin memasang Google + Direct Connect di blognya, sobat blogger jangan sampai lupa untuk mengganti https://plus.google.com/{plusPageUrl dengan URL Google + sobat dan publisher dengan Nama Sobat.

Semoga informasi yang singkat ini bermamfaat. Untuk kedepannya, tutorial blog ini akan saya sambung dengan tutorial blog tentang "Google + Badge". Jadi, sobat blogger tidak ketinggalan informasi, pastikan diri sobat blogger untuk mengunjungi blog ini. Terima Kasih

Baca Selengkapnya ...

Membuat Google Translate Pin Bendera

Tidak jarang, ketika kita berselancar di dunia maya, kita sering menemukan Widget Google Translate dengan berbagai macam bentuk. Dengan adanya Widget Google Translate, tidak hanya mempermudah pengunjung dalam menterjemahkan Setiap postingan kita, tetapi dapat juga memperindah tampilan blog kita. Oleh karena itu, hari in saya akan berbagi tentang cara memasang Widget Google Translate dengan menggunakan Pin Bendera.

Cara buat Widget Google Translate menggunakan PIN Bendera :

• Sign In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

 

      

      




Translate Widget by Google 

• Klik Simpan

Hasilnya akan terlihat seperti di bawah ini

Translate Widget by Google

Kalau sobat blogger, menginginkan Widget Google Translate yang lain, Silahkan klik link di bawah ini :

1. Widget Google Translate sederhana atau simple
2. Widget Google Translate yang menampilkan bendera berbayang
3. Widget Google Translate dengan Icon Bendera yang bergerak

Baca Selengkapnya ...