Cara Memasang Tombol Di Blog

Scholovers Blogger - Siang sobat setia Scholovers Blogger,, kali ini saya akan share satu trik Cara Memasang Tombol Di Blog yang saya dapat dari sobat saya blog rangga Mungkin sobat sudah paham dan tau apa itu tombol yang saya maksud.Tombol pada blog kebanyakan di gunakan sebagai tombol penanda untuk mendownload file agar mudah terlihat oleh pengunjung blog yang memudahkan untuk membedakan link dangan kalimat lain dalam postingan blog.

Disini saya akan mencoba membahas cara memasang tombol di blog dengan tampilan sederhana, tombol nya akan dilengkapi juga dengan link supaya tombol nya berfungsi sebagai tautan contoh nya seperti link download. oke saya rasa sobat semuanya sudah cukup mengerti dan paham tentang tombol yang saya maksud, namun jika sobat belum paham mohon disimak cara pemasangan tombol di blog yang sudah saya kemas sesederhana mungkin.

Beberapa tombol yang ada yaitu : 

• Tombol yang pertama yaitu tombol biasa
• Tombol yang ke dua yaitu tombol dengan link
• Tombol yang ke tiga yaitu tombol berisikan link
• Tombol yang ke empat yaitu tombol link new tab bewarna

Sekarang kita ikuti cara memasang nya diblog dengan kode dan DEMO sebagai berikut :

Kode Tombol Biasa :

 <button>Contoh Tombol Biasa</button>

Kode Tombol Dengan Link :

<a href="http://saktobek.blogspot.com/2013/04/cara-memasang-print-this-page-pada-blog.html"><button>Contoh Tombol Link</button></a>

Kode Tombol Berisikan Link :

<a href="http://saktobek.blogspot.com/2013/04/bermain-catur-di-blog.html" target="blank"><button>Contoh Tombol Blog Berisikan Link</button></a>

Kodenya :

<a href="http://saktobek.blogspot.com/2013/04/update-terbaru-mozilla-firefox-20.0.html" target="blank"><button><span style="color: #f21414;">Contoh Tombol Link New Tab Warna</span></button></a>

Note : Jika sobat mengklik semua tombol tombol diatas akan beralih ke link dengan cara new tab, ini dikarenakan settingan blog ini sudah memakai new tab.

Sekian trik  Cara Memasang Tombol Di Blog jika ada keraguan dan pertanyaan untuk pemasangan tombol ini mohon berikan komentar di bawah ini, tetapi jika ada sobat mempunyai cara lain mohon berikan masukannya Terimkasih.

Cara Buat Balas / Reply Komentar Blog

Cara Buat Balas / Reply Komentar Blog | Untuk beberapa template blog  mungkin sebagian  sudah ada yang di sediakan tombol reply/balas untuk membalas komentar yang muncul di blog kamu. Lalu bagaimana jika tidak ada tombol balasnya???

Kali ini saya akan share cara membuat tombol reply/balas komentar di blog. Langsung saja ya sob.,

1. Login ke akun blogger anda.

2. Pada menu pilih Rancangan ➨ Edit HTML ➨ Jangan lupa untuk centang Expand Template Widget.

3. Selanjutnya di dalam kotak template, sobat cari kode dibawah ini.

<b:include data='comment' name='commentDeleteIcon'/>

jika kesulitan mencarinya gunakan CTRL+F kemudian ketik kode di atas tadi

4. Jika sudah ketemu letakkan kode berikut ini dibawah kode diatas

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Letakkan blog ID &amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='URL image'/></a></span>

5. Simpan template dan Selesai

Keterangan:

* Tulisan Letakkan blog id ganti dengan ID blog masing-masing.

Cara mengetahui ID blog adalah, pada saat menulis postingan baru, perhatikan tampilan kotak atas tempat URL pada browser (Id Blog hanya angka). contoh:

** Ganti tulisan URL image dengan salah satu URL gambar dibawah ini atau URL image sendiri, ingat URL image harus diawali dan ditutup dengan tanda " atau"

URL image tombol balas Komentar di blog: :::

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmx0Scduk3MZtS9ha2JZOid3mxxtzXxJhFIrOMQesxrBAlAfLXGDrc5lZw9vrrVLQBkGaLHeqwO6lPIZ4AWOhdm9pmqjEjWZQr4mXbuq0kCFJpxB7sl1jbGurGeD-GRZ_zrJKpvWwEkIM/s1600/otowebsite1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyU3dit7B-qdKyo-rdCDjE8oDjw67zmgorYGbBhtwzjWX7-j7AQhITyqE5NxdLED6C-eVE_xVTXqfvHRyxL5D8Q-jdMHVo2g0F23Dy9xb6d45E7LlGrKqF21tzHF2337N-8wK1pLLKeqQ/s1600/otowebsite2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPYQpqucTsfQrdsUiVC62l_0jV3e628NNbqVeE2Ch5H8wOC5cnpAgzLWEhMa6wAZHGc1Z-64uy8wy2p1SFE_SrXqxg6B-TtYvdoVpA5QPzci-gPBHPoVbYypF0Lk1jrQVc22b-FoiUqE/s1600/otowebsite3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7bzwrgu63XLUr797XFduGJR_wuGgQMIRMtf88V9n_zimHwF_qYvx9jkyH04ljVpCo3zmwEBA5CoTrIuakRAOzRckpanH0ciGSCSZVMnf-TF45nHi8HfcCiZMo2bihycipyeTSry8wbGs/s1600/otowebsite4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisF8866Cd7DXQSPSjQmt08-Dh2TulJArXF4tfYnyl4Z41rf98fPHWMA-ED-b3OMiC-cNY0nyDiV1YPFo7SMovOrNPGHzugOCf2vOSPtwIR5PlWQ976m9Uw9H6B25-V3XoF6t7I98tgcNI/s1600/otowebsite5.png

Sekian lah Cara Buat Balas / Reply Komentar Blog.

CARA MEMBUAT GAMBAR BERPUTAR DAN MEMBESAR PADA BLOG

Cara membuat gambarberputar dan membesar pada blog..

cara membuat gambar berputar dan membesar pada blog, cara membuat gambar berputar lincah pada blog, cara memuat gambar berputar bebas pada blog, cara membuat gambar berputar ketika disentuh oleh krusor, cara memperindah tampilan blog dengan memutar gambar, tampilan gambar berputar pada blog, mempercantik blog dengan memutar gambar.

Cara membuat gambarberputar dan membesar pada blog, mungkin temen-temen bertanya-tanya dalam hati, bagai manasih caranya agar gambar di blog sobat bisa berputar-putar, hehehee , , caranya mudah sob, and kalian pasti bisa karna sangat mudah tentunya,

tujuan memutar gambar pada blog adalah untuk memper indah/ membuat pembaca blog kerasan untuk berada didalam blog kita, karna menurut mas seem penampilan tu sangat penting hehehee,,, ya udah deh langsung ja kepokok permasalahannya ya itu membuat gambar berputardan membesar... cikidot....

Langkah-langkahnya sbb;

1. Pertama, pastinya LogIn dulu ke BLOG Kalian.

2. Kemudian dari Dasbor, cari Template --> Edit HTML.

3. Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>

4. Kemudian CoPas Code di bawah tepat di ATAS Code ]]></b:skin>

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}

5. Terakhir tinggal di SIMPAN dan lihat hasilnya.

Smoga artikel ini bermamfaat... salam hangat n persahabatan dari ku (oone seem)

cara membuat gambarberputar dan membesar pada blog, cara membuat gambar berputar lincah pada blog, cara memuat gambar berputar bebas pada blog, cara membuat gambar berputar ketika disentuh oleh krusor, cara memperindah tampilan blog dengan memutar gambar, tampilan gambar berputar pada blog, mempercantik blog dengan memutar gambar.

Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Cara membuat link bergerak/bergoyang di blog, Link Nudging adalah suatu efek yang bergerak atau bergoyang dari sebuah/beberapa links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog. Mungkin dari kita biasa menyebutnya dengan Link Bergoyang/Bergerak atau menari, selain itu efek jQuery ini juga bisa diterapkan pada sebuah gambar (image)

Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

• Login di Blogger
• Masuk ke bagian Edit HTML pada template
• Centang pada bagian Expand Widget Template
• Cari kode </head>
• Copy paste script dibawah ini dan letakkan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label1 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>

Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini

<a href="http://www.blooger.co.id/" class="nudge">Scholovers Blogger</a>

Hasilnya akan seperti ini Scholovers Blogger
Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini

<a href="http://www.blooger.co.id" class="nudge"><img src="http://sphotos-g.ak.fbcdn.net/hphotos-ak-ash3/603804_380407398743944_2044245969_n.jpg"/></a>

Hasil gambar nya akan seperti ini :

Cara Membuat Breadcrumbs Terindex / Di indeks Google

Cara membuat / memasang navigasi breadcrumbs terindex Google di blog agar terlihat di dalam mesin pencari Google (Google search), beberapa waktu lalu saya pernah menjelaskan tentang cara membuat breadcrumb seo friendly yang tujuannya untuk memudahkan visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada

Sekarang saya akan membahas sedikit tentang perbedaan menu navigasi breadcrumbs seo friendly yang pernah saya tulis sebelumnya dengan yang akan kita terapkan sekarang. Mungkin sebelumnya anda sudah memasang breadcrumbs yang saya jelaskan dulu tetapi hasilnya tidak terlihat didalam pencarian Google seolah-olah tidak di index oleh Google, memang membutuhkan waktu yang sangat lama baginya untuk meng-indeks breadcrumbs yang seperti itu bahkan saya sempet dengar blog anda harus ber-pagerank 3 atau lebih. Tetapi sekarang hal itu tidak perlu dipersoalkan lagi meskipun blog anda belum mempunyai pagerank karena navigasi breadcrumbs yang satu ini akan terlihat di mesin pencari Google dengan waktu yang singkat dan semua label blog akan ter-index olehnya, nah untuk membuatnya anda ikuti tips dan trik blogger dibawah ini

Cara membuat Breadcrumbs di Blogspot / Blogger

• Login di Blogger
• Pilih Template
• Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
• Centang Expand Widget Templates
• Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
• Kemudian cari kode ]]></b:skin>
• Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

• Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
• Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Terakhir simpan template anda dan navigasi breadcrumbs akan siap di index Google
Baca artikel menarik lainnya tentang Link Bergoyang / link Nudging

Cara Buat Breadcrumb Seo Friendly di Blog

Breadcrumb navigation adalah sebuah menu yang dipakai untuk navigasi halaman sebuah website atau blog, sehingga akan memudahkan visitor atau pembaca untuk me-navigasi halaman blog atau website sobat. Dalam SEO, pemasangan breadcrumb adalah wajib yang sangat berguna untuk mempermudah seacrh engine untuk menjelajah atau crawling halaman blog sobat sehingga blog akan menjadi SEO friendly dan disenangi oleh search engine bot, dan juga blog sobat akan cepat ter-index oleh search engine ( Google khususnya )

Gambar diatas adalah contoh breadcrumb navigation yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang burung twitter terbang, untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan tutorial blogger yang saya berikan berikut ini:

Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot

• Login di Blogger
• Pilih Design 
• Pilih Edit Html
• Centang pada Expand Widget Templates
• Cari kode ]]></b:skin>
• Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

• Kemudian cari kode seperti di bawah ini

<div class='post hentry uncustomized-post-template'>
Kalau kode diatas tidak ada, coba sobat cari kode yang seperti dibawah ini
<div class='post hentry'>

• Letakkan kode dibawah ini tepat diatas salah satu kode biru diatas

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag,nofollow'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

• Klik save dan sobat sudah berhasil membuat Breadcrumb yang SEO friendly

Update

Membuat Breadcrumbs ter-index Google

Windows Live Writer | Menulis Artikel Blog Post Offline

Menulis artikel blog post dengan Windows Live Writer secara offline, Windows Live Writer adalah sebuah aplikasi desktop publishing blog yang dikembangkan oleh Microsoft yang merupakan bagian dari Windows Live, kegunaan aplikasi ini salah satunya adalah sobat bisa menulis artikel langsung dari desktop tanpa harus masuk ke dashboard editor blog untuk menulis artikel post

Selain itu sobat juga dapat menulis dan memasukkan foto secara offline dengan aplikasi Windows Live Writer (WLW) ini, hal itu sangat menguntungkan bagi sobat yang mempunyai koneksi internet yang lambat apalagi kalau hanya mengandalkan WIFI gratisan  untuk koneksi internet, jadi sobat bisa menulis banyak artikel dan disimpan di draft kemudian sobat bisa publish artikel post nya kapan saja sobat sempat, sangat menghemat waktu dan biaya bukan? sobat juga bisa memasukkan link (hyperlink), maps, tabel (table), video, tags dan masih banyak lagi yang lainnya. Tidak salah kenapa aplikasi ini banyak dipakai oleh para blogger diseluruh dunia karena kemudahannya itu, dan mungkin menjadi salah satu tools yang wajib dimiliki oleh penulis ataupun blogger.

Apakah Windows Live Writer Application berguna untuk SEO?

Jawabannya adalah “IYA” aplikasi ini juga bermanfaat untuk SEO, secara default Blogger platform tidak mendukung Self Pinging Service yang berguna untuk memberitahukan search engine bahwa sobat telah mempublikasikan artikel baru atau meng-edit artikel, tetapi dengan WLW hal itu bisa sobat lakukan. Itulah sebabnya kenapa sobat harus mencoba menggunakan aplikasi gratis ini.

Cara kerjanya adalah setiap kali publish artikel post baru lewat WLW, sobat bisa langsung ping artikel sobat dan dengan cara itu akan mempercepat artikel post sobat ter-index oleh search engine, dan juga service ini akan memberikan posisi yang lebih baik di SERP (Search Engine Result Page), tetapi selain itu sobat juga harus optimasi SEO onpage seperti menambahkan navigasi breadcrumb atau optimasi SEO offpage agar blog sobat lebih mantap di SERP, WLW ini hanyalah faktor kecil untuk optimasi SEO khususnya format penulisan artikel post yang benar dan SEO friendly

Cara untuk ping artikel post adalah buka Windows Live Writer kemudian Tools > Options > Ping Servers. Kemudian centang pada “Send pings to the url below”. Copy list url yang dibawah ini kemudian paste di kolom yang tersedia

http://rpc.pingomatic.com
http://rpc.twingly.com
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://www.blogdigger.com/RPC2
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://ping.kutsulog.net/
http://bulkfeeds.net/rpc
http://www.newsisfree.com/xmlrpctest.php
http://ping.blo.gs/
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://blo.gs/ping.php
http://www.pingerati.net
http://www.pingmyblog.com
http://geourl.org/ping
http://ipings.com
http://www.weblogalot.com/ping
Url ping servers diatas hanyalah beberapa saja dan sobat bisa mencari (search) list ping servers ter-update lainnya di Google

Download 

Cara Instal Windows Live Writer di Komputer

Untuk instal / pemasangan WLW ini juga sangat gampang, langsung di-instal di komputer sobat pada saat online (online installer). Dibawah ini adalah sedikit contoh screenshot instalasi-nya yang saya ambil ketika saya memasangnya di komputer saya

Setelah sobat download dan instal maka akan mucul pemberitahuan aplikasi apa saja yang ingin di pasang, saya sarankan centang pada “writer” saja, tapi kalau sobat juga ingin memasang aplikasi lainnya sobat bisa pilih sesuai dengan keinginan sobat

Setelah proses instalasi selesai kemudian sobat masukkan blog sobat beserta username dan password blog sobat

Untuk pengguna wordpress sebelum mengisi semuanya diatas sobat harus login masuk ke dashboard terlebih dahulu. Masuk ke Setting > Writting dan turun kebawah dan centang pada XML-RPC seperti gambar dibawah, dan kemudian sobat lanjutkan dengan mengisi form seperti diatas

Kemudian terakhir klik finish dan sobat telah siap menggunakan aplikasi Windows Live Writer ini, bagi sobat yang sudah menggunakan aplikasi ini mungkin bisa sharing sedikit kelebihan-kelebihan lainnya atau kekurangannya. Kebetulan saya juga masih baru dalam menggunakan aplikasi ini jadi belum sempat menjelajahi kelebihan atau kekurangan lainnya

Good Luck Sob..!!

Yahoo Messenger Emoticons (Smileys) di Blogspot

Cara membuat/memasang Yahoo! messenger emoticons di kotak komentar Blogger, YM emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticons ini bukan? Yahoo emoticons ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google

Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger

Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit script yang berisi beberapa kumpulan Yahoo messenger emoticons yang umum dipakai dalam chat.

Langkah-langkahnya adalah :

• Login di Blogger > Template > Edit HTML
• Centang pada Expand Widget Templates
• Cari kode dibawah ini

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #2b2b2b; padding: 5px; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Kemudian cari kode </body>

Copy kode dibawah ini dan paste tepat diatas kode </body>

<script src="http://bloggerpeer.googlecode.com/files/smiley.js" type="text/javascript"/><noscript><a href="http://bloggerpeer.blogspot.com" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.

Colorpic | Software Untuk Mengetahui Kode Warna HTML

Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah software kode warna yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog.

Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari Yahoo Messenger emoticons.

Gambar diatas adalah contoh pengambilan kode warna kuning dari YM buddy, hanya dengan meletakkan kursor ke warna tersebut maka kodenya pun dapat diketahui, mudah kan? nah bagi sobat yang ingin download software colorpic ini silahkan langsung menuju ke situs Iconico dan bagusnya lagi software ini gratis tanpa bayar sepeser pun.

Cara Buat Bintang Jatuh dari Kursor Di Blog

Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

• Login di Blogger
• Pilih Design > Add gadget > HTML/Javascript
• Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat.

Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Template > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

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

• Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jBehkXokoIOXvRQTsIit6UUndlQZDPHmxgTDVS935E5Nr2JLZBVG12FcL1tPCVgQmANE0MT0ttBNabXLttygnC51nBbVq2HBL326_y2-bVn40VqI25UiaqyM6bW_hwmnpgxvgK7Y5go/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">
'+mainobj.controlHTML+'</div>
')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

• Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai.

Pada Tulisan yang berwarna Merah bisa Sobat Ganti dengan Gambar yang Sobat inginkan, Inilah beberapa Gambar yang saya saran kan untuk Sobat:

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnXGQczh_9YrqzOmlEIxm2U9yYWs7VSQtzyfB4jUX6SX8KSQlNO8r_sQ-_G_-6uGm3rpvf5H-p1HQL27HmEG11rlqDwEZNQKjEwe8tKuIZBVC4SDFdNpDwNtazDs30S5cOWzlp57_TQe0/s1600/back+to+top1.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PZSVPMbxrAHxRaFNHyKz9DpQ3FW1Y-tzzLv7MRkR5Ny_UBbFHKTfFNOojpDsWI57Jle9JtEWjTadd8Dsp88pS7iHTWHfeOELZ1SXSOj3HU4qPqIQzlr05ShEFuv93hsRP-LqbNH_-yU/s1600/back+to+top2.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTv74PKPxjd4gMU7ZWfk9EEwj6jZY0qF3lGYrbM8peM9oHjH8o_wq5-jkCvWXLboO9aNhW6TDNlEZCrUaTYS4sJjpusGYfQ-Q4ExP86f7h-RBfK-ATkLLFEbIlNaKw_1zn3Vt6-EsFUY/s1600/back+to+top3.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJc2VzSwJgTdsWt9dbESzTYodsHChFYY-lozPDGpkxsSh52_x5MhjmveEWpU_bUcD1NLJAOKgKmiZ8ZJROCDvbP9_awnzLf9f58fUSgrC7fyCbAM-_DHU8idv28E_ZyefGHqkLEm54XxI/s1600/back+to+top4.png

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5w1DW5T_xhjhB1mQttnrzhj459mDCNE_-hhcqxAzldjteFxQ4_MCYz5cvk5WBw3mPeUbBTkYpVEDRGIH3N5nGfn6cxW64wnozeJnzwqfZD8KrEoBFNtpR8uwu1kZYJe6dw0OXBvfBYw/s1600/back+to+top+animasi+1.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMFeT13jEWhtc1lcvj2oqE6LaZcUtPLoOqcB5M6lXcz7aE58zQQ7TyqfInzuxU2JsvtBadB2gvaBxMYNkXNow1t2L8NwcukAlVxbXsmMEkljbFv3vn5GGktjCvhbOAaq8BE8YBFLYAVc/s1600/back+to+top+animasi2.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3R2vwHuHyhChtOhiZXJHYR7tVjRtyb8riAA6reJNX4Qq5QsAN4X7FHgLOm0I5tTiuaQOf0ms3y-OnBS3BIIvM_63T4_5s0NJxvYPlqR43x2-HxDaDN_2WljXvTWehUJwzupYs_L5JGUE/s1600/back+to+top+animasi3.gif

☻

URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUU8yLlRq7U2U8qLZVtHxqAYLLUGyy4-b_PwNFVgRO-gs8k0DDIdc5KzVXAlO3IoWIEY2lcd07PW9a8QYP__ntNWvJ2ZksLavXBDARaL8U8puww-ero8QOqp3bM9ns7io2umCW42WKxME/s1600/back+to+top+animasi4.gif



 Good Luck!!!

Cara Buat/Pasang 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

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 burung twitter terbang 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 Layout > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- 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/AVvXsEgJ85pp3ei73b3e1R2THbR8wAu-wm8tmZk-q84jKhYcTf7vUSnyAsMUqiKI22lgj_DsMazenQbQwRTLWr-ahkLDFxSCOGP7uR5B5a_zXkZrEwiioBoO5w-OnMPfG8K8jRNHjfvREQhQGAM/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/Username";
var tweetThisText = "Twitter - UserID http://www.blooger.co.id/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEm_uvdQXNesnRLmqsDV25EXHQv8N2qcm7zzbNU82xORyg3Co0g2HerEqwNVwLdK0MMd_fE4LbEYmOV8DtGhLlVfpM032eK72p0MuPx9Hz8bq98wYtCY8JHY_WGUiIr_NzLSmnlVOHTQ/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdbFTfi2zUyfD6s4-lSB4UdB2mqUBQjlMTrgjIVQBqj90Vh1enYHIQQPaXSWV8MRdR-iY7SCo6L9Om5P2Rqs1jb45_-vJe1Tusd14-qlCGotfbqODO_w4qgEZbLAa1HLmevPLCZkj7IQ/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgVXf5ivyDlGkdJzgGLILfuZLdmEsTwxTtC9HFLmbdvNM-uTx2a8Sru1Ipkqw-nOw1znnhhbBFHOMeHZwjET20c2F8BXgCf3nUIGHr_Qk2M7sYo-kteZNCLsD6guiBM-Tkep_PkZ-0IU/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9t1PI2joLDaavf-ncZ-CXkxU7pwop00CoAiRUVxlxx5pHRNjH56MY9caS8MMRJYMhVYh1U-M7t5sVVJwKyCVYWhibMmtdE6KxoAap5nrPrCEdUV2d2kFD4_pRrrzi5GbjwD69XabImbc/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6H9wReDlCUGObrgWGtbm93OeNUQyLl_rHDT-HXaUkPSY7tXba0gsl19j-ZzntTOjydX8Jlvhv6QpxsLe3ogC2xVMc1Jy2bDet8MqpolF3yclmuz9eSQXbijszjIurZZ5wxu71L2KqgQs/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDOQJMJoosM1LmN83UAz415wae8h6VXU74OCF3HA1l24RYLAbNm1q2AQuf6HUCAWIRQcUDjE5HEV79I2Hg84TE4F_He7WjetZL3E5GHRIdyz1UTW0yEji6auQBjIetLZKyBkAUzuS_hc/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeevUi016bcV9095jnBmAwdtCl8uBgyTBwsDz0Gqk24J5-TojJ400IwndAXbvHMzkFHNuggnrNRbJUndcknSu2OEE56u0GKeXBuo459w37hfCqxO-uz8XABNrxxfydyzXN4lztmzhwHHw/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusE9Lv7k8RyYAJSmW-R4PGWW3paxD_iaf-uLF4H57tnTlYwjy3Tc9I-06of9OxjGh70SBukfXLMrj4VSc4XUcfMeqbgmRmk-rs7vi3GiXaLq9yzXD65H7jnaFW80SLr1cdLNAUzRq5g0/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!