CARA MEMBUAT WIDGET BURUNG TWITTER TERBANG DI BLOG

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

<!-- 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/AVvXsEj46RywhyqCDdVmkDVnwrP51V5ylUaMj3RyZ8dpgbsZ-01sa3DyuRRNgZo4OarVFPN4xLRpsSRoA_Mc_BTM76BD1b4lu_p6wPqFrWSHFsAkpoVqc6Yi0qa9C7LsmlC3Ep8qTA0mVTn6Vp0/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>

• 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

 Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWaMJqSev8o4ep_0YLdE2XOxTHURbJrBTFVR0n7WfokRpil-IxPe4u_jLJUiKmCH53eRY-F3A0voB3cVBBQKaPsyXRlqm2E-dF_GSH9EjIF0sELWyncHe-8dN5v7aVhwIBIv-FnWmCxo/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfvCml9uPfR4TYoJEor7RU6qPHxONfmki4MHOwkzQDyTplEMrlz-8DqJlSkjmf-_0nklUhVJtJ1R144rza72i_fTf2cFe8yqLJg4H-Gk5WNn5afkk1JZLwfjs3Xd53BpVfAROivKymHo/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cgmUsQ1RtylRzDiJIdx0HG71d5Q5dovbmj6g8h8_KFmVHN0TErQP4Stnss0RwoWiQkkew8yTFF3r-lFnnoBp1c21OsjOQv5SdW7YVd2J-pfMy592bI9f78kX1M_IfPyRLQ2xDMLf3K0/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlcrv2S11jQf83Lgu8CkVJ1Afda7Yrxw-bStlZ4ssKQ2NGLDfrEEiokn2aRYjBFi5G8Fh8jCiEN7o8j_83gjY1kDswNWllN1aGedJkvmd-RZONJzNUMaFI8lgKloyi-CkJHHOR7Ywx_n4/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXl5Ub3T0Ye0bPD3NQrZ4HhV0SmKGXU01Fu7b3YhrrOJc350GKvA3kLiGJT9-T0t8Jo63FbwXv5xQzM-NkxsDObyfJnyKH2SvCWNild0_0Uc3zGVlaNR5UZC-57czIJ3xH60vFcsa6LQ/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0_KM5hLUXLD3K1owIDR4wbAm7R8b7gkSBWtQSFGkuMhck1UpVevbyWNp4Yw4L_IY9tGX8Ho8F-tbhtNRMAWOGTpXnz5FMupK98YDcyVZ6mp_NZ-jlD24joBW3nhlOdvb2chNpK2lgj8/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqSzcF1VNyRll9yOmD-EQr9lO8f9VlsUpaNquEwWQlC6fE7BwzPic_DM8dtkonowoRDvfN4vcnlpyAP3vwmmHBbxQqJvBIgBkYvLQKGmDx0YJfhRP-LsQ22BJ2EGlzIfMF7RPRP9KSvo/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwi63BKEbVOrg7Rb5_1ObJ9cFPtK86nR_b9xGk06pr65WeGU5KXoP_7MJ8OrJqRdtQJ1d-FCzg4Hwk6I3fMdWFo-TPxgzPygGwSACz3bszwg4PDv-VuxdO3epruuv7vILuJLAqzQbHxsg/s1600/red+bird.png

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

Sumber: http://bloggerpeer.blogspot.com

>>Read More

CARA MEMBUAT READ MORE OTOMATIS DI BLOG

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?
Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.
Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

•  Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. berikut ini adalah keterangannya data yang bisa dirubah :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

>>Read More