Pages

Subscribe:

Ads 468x60px

Labels

  • Belajar Ngeblog (8)
Tampilkan postingan dengan label Belajar Ngeblog. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar Ngeblog. Tampilkan semua postingan

Jumat, 04 Januari 2013

Memberi efek zom pada blog


 Langsung aja gan ,Ikuti Cara di bawah ini ya....

masuk ke bagian template anda kemudian cari kode ]]></b:skin> agar lebih cepat gunakan F3 atau ctrl + F 
bila sudah menemukan ]]></b:skin> selanjutnya masukan kode dibawah ini tepat di atas ]]></b:skin> 



.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

Membuat efek pelangi pada link



1. Masuk ke account blogger sobat.
2. Pada menu pilih Rancangan ➨ Lalu  pilih Edit HTML, dan jangan lupa untuk mencentang   ....Expand Template Widget.
3. Kemudian cari kode </head> jika sobat kesulitan mencarinya coba sobat baca Cara Cepat ....Mencari Kode HTML.
4.Kalau sudah ketemu sekarang letakkan kode script berikut tepat dibawahnya:



<script src='http://otowebsite.googlecode.com/files/otowebsite.blogspot.com_efekpelangi.js' type='text/javascript'> </script>

Semoga bermanfaat :>

Cara Membuat Page Navigation Colour


Hai..sob...kali ini saya akan membahas mengenai "Cara Membuat Page Number Navigation With Colour", pasti di sobat semua udah penah kan lihat  Page Number, Klo tidak pernah lihat, lihat aja gambar di atas, Page Number  ini sering di gunakan oleh para blogger untuk menghias blog mereka, Selain itu juga bisa membantu pengunjung untuk menemukan postingan yg bagus yg ada di blog kalian, Kenapa Bisa..?
menurut saya ini lebih mudah dimengerti olah si pengunjung di banding menggunkan Postingn lama dan postinagn baru, nah gimana sobat sudah tau kan..apa sobat berminat untuk memasangnya di blog sobat,..?
kalo iya ikuti langkah-langkah berikut ya..!!!





1. Login Ke blog
2. Pergi Ketataletak >>Tambah Getged>>HTML/Java Scrip
3. Pilih Salah Satu Dalam Number Berikut

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDRarND-yjcuaUFab0evPdkq2eRRX2VvTy1TtMAOEO0Peqx77C9GXhxzWtwTKRmjwpX8FNPootuSREZsEOy1I9vgOWQE4i6mVtMhy3YUH2fcPeDzQyuAHfcl-WmC0nqhmbvriKhVsQrI/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDRarND-yjcuaUFab0evPdkq2eRRX2VvTy1TtMAOEO0Peqx77C9GXhxzWtwTKRmjwpX8FNPootuSREZsEOy1I9vgOWQE4i6mVtMhy3YUH2fcPeDzQyuAHfcl-WmC0nqhmbvriKhVsQrI/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDRarND-yjcuaUFab0evPdkq2eRRX2VvTy1TtMAOEO0Peqx77C9GXhxzWtwTKRmjwpX8FNPootuSREZsEOy1I9vgOWQE4i6mVtMhy3YUH2fcPeDzQyuAHfcl-WmC0nqhmbvriKhVsQrI/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDRarND-yjcuaUFab0evPdkq2eRRX2VvTy1TtMAOEO0Peqx77C9GXhxzWtwTKRmjwpX8FNPootuSREZsEOy1I9vgOWQE4i6mVtMhy3YUH2fcPeDzQyuAHfcl-WmC0nqhmbvriKhVsQrI/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgFJhZ1GRNH9STj599zRZzF6InjODt6Mk1cTO20XVClBDP2e0Nt7Ks_9Bq9trnQAC9mBS18wVQA8vdOq0ylbPcr0hLCL0I_uiuBBdHwjEXu0McGdVXid41nrClRHN5u7N3c7uJ7_5CY8/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script> <script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>
<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgFJhZ1GRNH9STj599zRZzF6InjODt6Mk1cTO20XVClBDP2e0Nt7Ks_9Bq9trnQAC9mBS18wVQA8vdOq0ylbPcr0hLCL0I_uiuBBdHwjEXu0McGdVXid41nrClRHN5u7N3c7uJ7_5CY8/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCp-qUALBWcuXjMY1btyy4jDvlpPZToYAZLxbgBp-Lsr1Ddtz12BS9ltm9slvBOVUHT6WtxyguaxOcCnc5iDI3sS1fvGn23nDAjD2kKbfXUjbHVjQWOeO6Yii3QdIuTc3EeIp9dSYa4wU/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgFJhZ1GRNH9STj599zRZzF6InjODt6Mk1cTO20XVClBDP2e0Nt7Ks_9Bq9trnQAC9mBS18wVQA8vdOq0ylbPcr0hLCL0I_uiuBBdHwjEXu0McGdVXid41nrClRHN5u7N3c7uJ7_5CY8/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

Minggu, 30 Desember 2012

Cara Membuat Recent Post Silide Show

Recent post atau sering disebut dengan postingan artikel terbaru. Recent Post sangat penting bagi blog kita, dengan recent post maka pengunjung blog dapat mengetahui artikel-artikel terbaru di blog kita. Maksimalkan tampilan blog anda untuk mendapatkan pengunjung yang banyak.
Recent Post bisa ditampilkan dengan banyak ragam, salah satunya dengan Recent Post Slide Show. Recent Post Slide Show ini menggunakan tampilan thumbnail atau gambar, sehingga pengunjung blog kita bisa tertarik dengan artikel terbaru di blog kita.
Saya sertakan gambar Recent Post Slide Show.
Lihat contoh gambar Recent Post tampilan Slide Show dibawah ini:

Cara Membuat Baner Berjalan

 Banner adalah gambar yang ditampilkan pada halaman blog yang bertujuan memperkenalkan / mempublikasikan sesuatu. Banner biasanya digunakan sebagai alat untuk mengiklankan sesuatu, Banner juga kadang digunakan sebagai link bergambar yang mengarah pada sebuah alamat URL baik itu postingan artikel dan lain-lain.

Jika banner pada sebuah blog semakin banyak tentu ini akan menjadi sesuatu yang rancu, perlu dilakukan manage banner. Cara yang satu ini dapat digunakan untuk memanage banner karna dapat menampilkan banyak banner dalam satu deretan atau sekedar membuat banner Anda menjadi terlihat mencolok karna trik ini akan membuat banner bergerak secara bolak balik dan hanya akan berhenti jika disorot oleh kursor mouse.

Langkah – langkahnya sebagai berikut :
1. Masuk pada akun Blogger Anda
2. Pilih Rancangan >> Elemen Laman >> Tambah Gadget pada tempat yang diinginkan
3. Pilih HTML / JavaScirpt
4. Pastekan kode berikut :

Minggu, 26 Agustus 2012

Cara Membuat Next Page dengan Tombol angka pada Blog

Selamat datang di CaraGampang.Com ,, kali ini saya akan berbagi Cara Membuat Next Page dengan Tombol pada Blog. Tutorial Blog ini dikususkan buat sahabat blogger yang templatenya belum memiliki Tombol Next Page . Tombol ini fungsinya untuk melihat halaman perhalaman dalam blog kita, ya gitu deh. Untuk lebih jelasnya silahkan lihat gambar berikut :


Gimana sob, gambarnya sudah jelas kan ? kalo begitu mari kita lanjut Cara Membuat Next Page dengan Tombol pada Blog. 
  • Masuk ke akun blogger anda. 
  • Pada  tampilan Dashboard klik Design kemudian klik Edit HTML
  • Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.
  • Centang kotak kecil yang bertuliskan Expand Template Widged.
  • Silahkan anda cari kode ]]></b:skin>
  • Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin

Sabtu, 25 Agustus 2012

Cara Menambahkan Efek Slide Pada Popular Post Di Blog

Hallo sobat blogger semua pada pertemuan ini Yusuf ingin membagikan sedikit tips Cara Menambahkan Efek Slide Pada Popular Post Di Blog. Mungkin dari sobat blogger semua sudah mempunya popular post tapi dia kaku atau diam aja kayak patung. Oleh karena itu disini saya akan membagikan cara membuat popular post kita itu bergerak sehingga membuat tampilannya profesional gitu.

Memang pada setiap blogger mau tidak mau harus membuat popular post. Karena dengan cara ini banyak pengunjung akan mengklik postingan tersebut, sadar dan tidak sadar itu lah yang terjadi. Apalagi jika kita buat sedikit sentuhan yang menarik pada widget tersebut.

Cara pembuatan dari blog ini cukup mudah saja dan diyakinkan anda pasti bisa melakukan nya.. Oke langsung aja kita ketahap yang di tunggu-tunggu yah,,, hehehe.


Langkah - langkah pembuatan :
  • Login ke Blogger dengan account anda
  • Rancangan => Edit tata letak
  • Add Widget => Entri Popular
  • Pada pengaturan pilih banyaknya entri yang ingin anda tampilkan.
  • Lalu Simpan WIdget anda.
Langkah pembuatan slide pada Popular post :
  • Nah setelah sudah selesai membuat widget pada popular post. 
  • Tambah lagi Widget (Add Widget) => Java scrip HTML
  • Kemudian Anda Masukkan Kode CSS berikut kedalam kolom Java scrip HTML
  • Save dan Ingat hasilnya harus sperti di bawah ini.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3wJHsCw4HLxybg5YDu_jCD1zzV_klQt0QYKWR5-DMBLwSFOT6QLdzhGpFbRE6f3mXJP4NmylJYFEnrTooVzFZtZrE4CJxc2mqmOHwCDDwPJfWGkFBA1hgliADzVNwxpcvxK9TIbjPdU/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;

height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:1px solid #CCCCCC;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Verdana, Arial;
font-size:11px;
color:#FFFFFF;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;

}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>


WARNING !!! : Widget Popular Post harus dibawah Sedangkan HTML Scrip diatasnya ! (lihat gambar diatas)


Catatan :
  • Biru      :  Dapat anda ubah besar widget dan tinggi dari popular post anda nantinya. 
  • Pink      : Warna dan Font Link Judul 
  • Orange :  Image Border Postingan anda 
  • Merah   : Ringkasan Postingan anda.
Nah, cukup sekian perjumpaan kita kali ini sekaligus mengakhiri pembahasan tentang  Cara


Menambahkan Efek Slide Pada Popular Post Di Blog... Salam Yusuf

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini
  • Pertama-tama silahkan login di Blogger
  • Klik Design > Page Element > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript


  • Ganti kode yang berwarna biru dengan akun Twitter sobat
  • Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
  • Simpan dan lihat hasilnya.
 Warna Pilihan Burung Twitter


<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAnfwICOGkvF2nGa1EjMHmMaEUKyV-N75bnrGUCocWj0gXaV8hNbijy4RE87BuXuWD2F2qAPl3Be8Tp2jN_Lcq0IgJTRLtGx2e2CUxadLtjRxNrom6RLg5BqtynjYG921GsYMfptnbHc/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://zuazz.blogspot.com/";
tripleflapInit();
</script>

Untuk memilih warna Burung di sini 


 Warna Kuning
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3IYk0dWvuZSIwdhBoseJvp5a10UOyoKdnaYCNQM5Rq_ZpqXZO9J9WPKCdMu_7l1-RTkYvECs_UiyFkluCcbuwUMZ17uKTiOgOf6oHqjx_OYGyHChVTmdo41tVOWvh7eIwfjiwQsXaU4/s1600/yellow+bird.png
Warna Hitam
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3yWxly21Pf6CqV0i0sa3lLOF26NCS_WuGKqy5yuvzjgwhQeBCpAJs851mBar5sw_s1X0Kk2dDCVcfTQv890LVcyP1sbWosZomcGKb2MuBXTUDuNZZ-hdOGiEe_Z3uPT9TfBPlaXGbMM/s1600/black+bird.png
Warna Biru
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieroKqck1uoEnszObBA0U9K4DrNdgP3l6Vy9pNAys5q4m2KkjcNtPOsluSHyHSemRNAR8FZkmWqZHyDIe8AWm2W-_ftSPp4ZX2CxrLfdZEB3Sojn3Miz6S2DY0eB32dHZucL_D20WEFok/s1600/Blue+bird.png
Warna Coklat
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XitChvsf8iZW56NGm-gyVh9SDSs4s5HLYaEhLYONmeqvGRNireWxcrjY88Z5wrAJavup7fD8XXHJkhUCt22LUD0B6ECDUGOoq2cRqf6b7HxAOzqYDVBkYEQfwFdN0SSYvj4AUhWyrcQ/s1600/brown+bird.png
Warna Hijau
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqT3-9Nc1-_q0xdxIsmNsLUtwzL9Q79SmqBbikmEvK7vCckpQ4dYbr3ZZ_UNpMS1Hq5TFvkR8dwUXZttjcb9gMTelF4qb8nZhmxVJFqrEiAztrtw-Vus4XucL4BUT-q1AAoArqoO8IGg/s1600/Green+bird.png
Warna Ungu
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCLWSziXwwkgYg_0MZj5Mis4_MEXUjL69cviZqcpitqjqkaS243SixkLVGCUXUcYiAm5QewAEkwXne3fTNyncppSq_ItuD10xaZE_ZUAvIRAjXopSmIIZO2UE6psFH86nIxfo4PEVtq4/s1600/purple+bird.png
Warna Putih
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDH5uzxHA5v-r6mnX0VzovP7dElWiCQB15b1_jz6IxbgTfdXMp7hCZJeNcW88eau8wryUmyvv3w4YeQTgOTKRhqFy3k_G6ftqMb0WYm5su3vaJy5Pkepw_vLz4brq_4XPWA9b-7NLTFg/s1600/white+bird.png
Warna Merah
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjh_SG7cv8IbQrcIvIR7uCXkNhCNzdzG2dHf8h3ftCg-XPPmfixhN3n0lAZhmO2HDTloT1z4j3ba2Ea5cO9t4qQfe-IbsTDxCOffGSyYDD-qkvTrBMiwy5egmvCBYdkx976TlhDtkwxOM/s1600/red+bird.png

Dan terakhir jangan lupa disimpan Good luck Sob..!!!!