Cara Memasang Gambar Animasi Bergerak Di Blog
Tutorial Seperti ini sebenar nya bagus, buat mempercantik suatu blog agar para pengunjung betah berlama- lamaan di blog kita, dan pada postingan kali ini akan saya bagikan cara membuat gambar animasi bergerak pada suatu blog. sbb:


1. Login Ke Blogger
2  klik  layout/rancagan/setelan
3. klik add gatget
4. pilih html/java script
5. copy paste Script di bawah ini



Gambar Animasi Bergerak Ikan


Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:100px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>



Gambar Animasi Bergerak Pinguin


Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>



Gambar Animasi Bergerak Helikopter


Script :
<div style="position: fixed; bottom: 80px; left: 10px;width:110px;height:130px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Selamat Datang" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Gajah lompat

Script:
<div style="position: fixed; top: 80px; left: 20px;width:120px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Selamat Datang " /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Boring
Script :
<div style="position: fixed; top: 80px; left: 20px;width:80px;height:120px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Tuyul ketawa

Script:
<div style="position: fixed; bottom: 80px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Boneka Joget

Script :
<div style="position: fixed; top: 80px; left: 20px;width:82px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>



Gambar Animasi Bergerak Panda Main Bola

Script :
<div style="position: fixed; top: 80px; right: 30px;width:160px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Tuyul Baring
Script :
<div style="position: fixed; top: 80px; left: 20px;width:120px;height:100px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Selamat Datang." /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak mata rasinggan
         
Scripit:
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Naruto

Scripit:
<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>




Gambar Animasi Bergerak Panda
        
Scripit:
<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Spongebob
      
Scripit:
<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>


Gambar Animasi Bergerak Doraemon
    
Scripit:
<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>
6.klik simpan

semoga bermanfaat!!
Read More >>
Cara Memasang Widget Burung Twitter Terbang Di Blog

  Berjumpa lagi dengan saya admin Fujianto21-chikafe, pada artikel Tutorial Ilmu Blogger, yang pada kali ini akan menshare cara membuat dan memasang widget burung twitter terbang di blog, semoga keadaan kawan-kawan semua dalam keadaan baik,senang,gak galau,dan sehat wal afiat, Aamiin.

 Widget Burung Twitter terbang adalah salah satu widget unik, cantik dan menarik yang membuat blog kita  paling gak, bisa membuat tampilannya  jadi menarik, dan membuat pengunjung blog terkagum-kagum ngeliat burung terbang di halaman blog kita. Karena burung twitter nya akan terbang sendiri mengikuti halaman blog ketika discroll, keatas maupun kebawah, dan jika halamannya diem, maka burung twitter nya pun akan diem, seperti gaya nya burung hantu gitu, diem nya.

 Salah satu tujuan Memasang Burung Twitter terbang ini adalah Memfollow akun twitter kita, ketika ada yang mengeklik burung twitter tersebut, maka secara otomatis akan membuka halaman baru menuju akun twitter kita, dengan begitu jika twitter kita ingin banyak followers nya dan ingin banyak di follow oleh orang, pasang lah widget ini diblog sobat, Karena widget ini sangat unik dan juga menarik perhatian para pengunjung blog,
Untuk cara Memasang nya, ikuti langkah langakah di bawah ini:

1. Login Keakun Blogger

2. Pilih Tata Letak Atau Layout

3. Klik  Tambah Widget

4. Pilih HTML/JavaScript

5. Copy Kode di bawah ini , lalu pastekan pada kolom kotak Html/java Script

<!-- 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/AVvXsEjmXdW0uX_LU2pEL7xEkTejQTm87queL6qALMW3Ippl15nAv57sOJLSBEzd_f6MhP7pdw8_M6_wWylrJ75NYpqoeY2UTa4sVH7P2ww715Mn_85OelZX8GeHArXkZMM4k0I2DWOQqau9dzM/";
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/fujianto21";
var tweetThisText = "Twitter - UserID @fujianto21";
tripleflapInit();
</script>
Keterangan:

  • Ganti username fujianto21 dengan username atau nama pengguna twitter sobat, contoh username nya @fujianto21, maka tulis saja fujianto21.
Kumpulan Burung twitter terbang berwarna
Daftar URL Warna Burung Twitter
  •  Burung Twitter Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpjAZXbY77at4skY_5R1X-2nK9oOLrk4HdQaqup4wFHxmIGhPDd7RCOV5uODUjuvje6vGLmGuUHPfVVCZTIzujiFlDExLvIzaPHU-RZgsqvhjfRvHtuk_pFk9jDJaxIt_tpfRx4ekBcaM/s1600/red+bird.png
  •  Burung Twitter Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aLHR0B11dVzegi4qpA03LxozEs2lK8OE1MZuw1lTlz9t_n20AZ62GYa9wYtx2Vg7HSCNk64eC6ggOIZzLkCZMB2P-JLtMsRGLWGhTkM-OXTqItiySabvav72lVsfkYhhINCzuhCza8s/s1600/Green+bird.png
  •  Burung Twitter Warna Kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cOSW7rdrjwtWmBPo3Ez_4fN_sYNl5NmxK7ZP0pE6jQcKczLuLSGYOyt5ZwW5OiR7Vvwxpu5qytUaKFBrry4OZO-OsBsy-REzPxpPbzIDuBnu3S2MuAx8SZ8VOiYeoF9R9myIMIDTCao/s1600/yellow+bird.png
  • Burung Twitter Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeOoCD8Hi585-ydO9CDTryGt7anzQZjlOO0vwjM_u4WXhFaV5vUEqbb9hyphenhyphenSLMvwKwGApMpfqgRxbq7qdlNdMJb7Pl9XvXDU9poK5thl8PDyZe-2pgeecRRX8L4SwHwckC5Qg8iKgFTeJI/s1600/black+bird.png
  • Burung Twitter Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn9eK_xw2Bl1JXIu22K2bKtyXmMDjv9qFpNQj7zVPD3upmpS1K-UD64LQvZP9zx-pFMbE8SuyJ1K1VqbJF5hAXqVz3eQ2W0z2_ENGFd9aQb8GArMauPCEYAPuTGILLgShci6kNcUBJu0/s1600/purple+bird.png
  • Burung Twitter Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgec9Upy54wqQleUbsozqPBuTPGJ-1mpUyjCm2PvSc_hJ2oSM7aeXRwAY7YmXkpjdsfkHPI4496R_fCUrBb1qnEMy0vlfas80dwIL0w3m2At2dhyLmXy2QTFF-zlcrKZgMi31CoymB_s/s1600/white+bird.png
6. Kalau sudah jangan Lupa di simpan.

 Selesai, begitulah langkah-langkah Cara Membuat dan  Memasang Widget Burung Twitter Terbang Di Blog, semoga cara diatas berhasil di praktekan, dan twitter sobat makin banyak followers nya, jika kurang mengerti dengan langkah langakah di atas, silakan bisa ditanyakan pada kolom komentar di bawah,terimakasih.

Sumber :  http://fujianto21-chikafe.blogspot.com
Read More >>
Memasang Menu Navigasi Keren Pada Blog
Sebuah bar navigasi atau menu bar adalah penting untuk sebuah blog. Selain berfungsi untuk mempermudah pengunjung, menu navigasi juga dapat memperindah tampilan sebuah blog. Cara membuat tab navigasi tidaklah terlalu sulit.
Dalam tutorial ini akan di jelaskan bagaimana cara memasang menu yang sangat keren untuk blog Anda. Posisi menu navigasi ini akan berada tepat di bawah header, adalah posisi yang khas untuk sebuah bar navigasi. Cara menambahkan menu navigasi ini dilakukan dengan menggunakan pilihan gadget melalui halaman tata letak.
Dengan menggunakan menu gadget ini tentunya akan memudahkan ketika Anda ingin menghapusnya nanti, tidak perlu repot-repot halaman HTML untuk mengedit nya. Untuk membuat menu navigasi ini blog harus memiliki Add A Gadget Link thingy atau wadah widget di lokasi tertentu. Dan berikut ini tutorial belajar bagaimana membuat Elemen tepat di bawah header.
LIHAT DEMO
Add It To Blogger
1. Masuk ke Blogger Dashboard >> Layout >> dan klik add a gadget (lihat screen shot di bawah)

2. Klik Add A Gadget link di bawah header.
3. Pilih add HTML/JavaScript.
4. Biarkan title nya kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam widget.

<style>
#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84sVwruonG8RSOxNkTzdGtCLDozvkca9VdnQ2YkmqvW8HBPKdDv5kivS-ObBcNZotzVQms6Mteb9MCH1Z9h0J2vlR7R8qs4-6YqDnm652VilPtrwHpt-Fqxo3i1ZNg3OI5NAWO0F0rKni/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}

#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
border-left:none;
}

#tab_menu li:last-child {
border-right:none;
}

#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>
6. Replace “#” dengan URL yang ingin di masukan ke dalam menu.
7. Untuk merubah lebar nya silahkan edit kode ini "width: 960px"
Berikut ini beberapa background untuk menu navigasi yang mungkin dapat Anda sesuaikan dengan warna blog yang Anda miliki.








https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjCQNbwbjptIA37EN8hHDb9aFOcMSqKk0jnGxbAGH1gX6CuMmEEaPRMthqGLixTK4cdfPXyXZMfx43OsaebN0WtwD9D1mYb2CisFvwf1aI0ZbPL9SQu7DcBydR9obOHThjAqBvHnW-3_q/s1600/menu_bg_1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-FeBH8q4RZuE8IQh99PcOn-AgWwhTm7gDACeIG0-VoKvKueuICUm9JaJ-FEQnVQCCr5rGx_4duiGaDT2EIOHrxRxS-plY_qQ5F6gwx4WiXZuSwEub9Yp0I_qU3iTXS6arByFeII9ZjzSn/s1600/menu_bg_2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9Uhvqj0sKwvW8F6BkLpFcfQ1xLfjhuUWtwjaCl5Mo8STZyQZPewYH-RUM6COP4KDcuf7QNg2jYIfJ2lVEoGAbJwmcru8DPWtPAKRfOfK4vzxom2wtxwvzp4DhaCjYSEuEEdQhkupuwJo/s1600/menu_bg_3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHEFyoI03V7IxNggWgVGX1ffizwCbv3oXedHyl3kjdrB9e6UEPCPb5X_NuFi80qlXsHFriIZFZxFrcdlgVHg9nahiN8j3dgZgkprzDDiiGTFIIZwjNsoVYaPwUUtyXpnfKeRlZcoydtgG/s1600/menu_bg_4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZ_r1OuFQq5zyHUKuIpwUrDTW1fsKiYDl0hZB8eRIRfL27KfQpiL5XPUuj-KBSe27fVcGjYmsL9UcuRU9pau8wcY-3bhRtf5WXIgGhV2fP8AGiIPEgTg1WX1OcieXjuw6K-W5Q_Xtkc1I/s1600/menu_bg_5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI_89ftI9vTKRDI1FmL6IT_QTKMajjezOki0CDIJcDF1OaHtnBcjI-BBR5MGE-DMgjyzWQT4feVgfgdTxSab6qovwsLWkoUwZOTrxGz4eokVpvixx7DGa-_h2sIDkqFy6NV6fR1Koz08s/s1600/menu_bg_6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQYqYD8OukKoUdoVtysZhY0Gr2jLJP0B6HwlZD6-feVMOr6I4JceycBEKkdyBnpDvkg7xmFJq2AOMRG6sGjKqnurilYAUP88244Yu2sb-tzInRvbuYp_PAefAwvDvew3Ty8qTmMd40Pvkt/s1600/menu_bg_7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrtqFBLHvWaPu30YRUcYc9Fta3ISY05gW7FJkPzxuX142LvSdU7ujQ-ubCgLChk5nd31RcXqWenVoFx4wGILnAND66vLx_NI4BnP_16CCYaKV8ukpR3BDHvYuGRI5A8_MegJGd7aoGGba/s1600/menu_bg_8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fUHENmTGLkWXakaUDfdmXHvY0hy9GmEPezL4OsQlE8jVvvQfNKJeJ2SooU83_OqJksSaDd1BxNLfanC4aStgPr4GnFkVDSNaKBF5LWUSTU06wI4Poy-ck5RWbFM54nFptjcKx8qrsMPL/s1600/menu_bg_9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQSdVM1Zmz0xzzh5hQbd3gN8j26XMfrxix3QxAjmB5NFUv1safr1YM1sIrpyid0UuN6NoKOZRi41L1LIZdmoWJZSNo92UmXentihCOpH9rQDDxQOeBiRqwNV8OLC3LVhghudgFXFHN706/s1600/menu_bg_10.png

Cari kode URL ini untuk menggantinya dengan kode URL yang ada di atas sesuai dengan selera Anda
background:url(http://3.bp.blogspot.com/-OycpSljNYE/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;
Read More >>
rainbow
hi, pada artikel kali ini saya akan membagikan sebuah trik menarik untuk mempercantik tampilan blog sobat, penasaran? bagi sobat yang suka ngotak-ngatik blog nya untuk mempercantik dan memperindah tampilan blog, tips ini pas banget. trik ini membuat link berubah warna saat kursor diarahkan ke link dan membuat seperti efek pelangi pada link, jadi tambah meriah dan penuh warna kan? yang pasti makin enak di pandang oleh visitor blog sobat. follow step by stepnya
  • login ke blogger
  • pilih template >> edit html
  • centang expand widget template
  • cari kode </head> untuk mempermudah gunakan ctrl+f
  • copy paste kode ini tepat diatas </head>
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }
        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }
        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}
function ChangeColor()
{
    objActive.style.color = makeColor();
}
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }
    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;
    return '#' + elmR + elmG + elmB;
}
//]]>
</script>

  • kemudian simpan
  • lihat hasilnya saat sobat mengarahkan kursor ke link, it's rainbow
Read More >>
Banyak sekali blog blog yang saya kunjungi ketika ingin berkomentar pesan komentar yang seharusnya berada di atas kotak komentar malah berpindah kebawah saat membalas komentar, hal ini juga sering terjadi pada emoticon smiley yang berpindah kebawah saat berkomentar, tentu hal ini membuat kotak komentar yang tadi terlihat rapih dan menarik justru menjadi kebalikannya, tapi tidak perlu khawatir lagi karena kali ini saya akan membagikan tutorial memperbaiki pesan komentar dan emoticon yang turun kebawah kotak komentar. perhatikan step by stepnya


  • login ke blogger
  • back up template untuk berjaga-jaga
  • pilih template >> edit html
  • centang expand widget template
  • cari kode <b:includable id='threaded-comment-form' var='post'> untuk mempermudah gunakan ctrl+f
  • ganti kode berikut
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

  • ganti kode diatas dengan kode dibawah ini
 <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

  • cari kode  
document.getElementById(domId).insertBefore(replybox, null);
  • ganti kode diatas dengan kode dibawah ini
document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

  • simpan template
Read More >>
about the author
menampilkan kotak author atau profil singkat dibawah posting merupakan trik mempercatntik tampilan posting dan juga membuat pengunjung blog tahu tentang profil singkat si penulis blog, fungsi utama dari widget author box adalah menampilkan secara singkat biografi sang penulis atau profil singkat penulis pada bagian bawah posting agar bisa dibaca oleh pengunjung yang ingin tahu tentang si penulis blog istilah anak gaulnya si keppo, jika sobat ingin melihat contohnya seperti apa silakan lihat dibagian bawah posting ini, langsung aja nih praktekin tutorialnnya. 
 
 
 
  • login ke blogger
  • pilh template >> edit html
  • cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f
  • copy paste kode dibawah ini tepat diatas ]]></b:skin>
 /* depermana12 Author Box */
.about-author {
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px  solid #666;
}

.about-author img {
width:70px;
height: 70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 5px 5px;
  -moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.about-author img:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #666;
-webkit-box-shadow: 1px 1px 4px #666;
box-shadow: 1px 1px 4px #666;
}
.about-author h3{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
@-webkit-keyframes about-author {
  0% {color:orange}
  20% {color:red}
  40% {color:blue}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:green}
}
@-moz-keyframes about-author {
  0% {color:orange}
  20% {color:red}
  40% {color:blue}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:green}
}
@-keyframes about-author {
  0% {color:orange}
 20% {color:red}
 40% {color:blue}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:green}
}
.about-author h3 {
/* Waktu 10 detik */
  animation:10s infinite about-author linear;
  -webkit-animation:10s infinite about-author linear;
}
  • cari kode <data:post.body/> untuk mempermudah gunakan ctrl+f , akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama
  • copy paste kode berikut dibawah <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Deddia Permana&quot;'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='http://i1307.photobucket.com/albums/s597/depermana/deddia_zps9721aa19.png'/>
<p>tuliskan 3 baris tentang profil singkat sobat tepat disini</p>
<p>Follow him @ <a href='http://depermana-share.blogspot.com' target='_blank'>Depermana12</a> | <a href='https://www.facebook.com/permana.deddia?ref=tn_tnmn' rel='nofollow' target='_blank'>Facebook</a> |
<a href='https://twitter.com/depermana12' rel='nofollow' target='_blank'>Twitter</a></p>
</div>
</b:if></b:if>
NOTE:
  • ganti tulisan berwarna biru dengan nama sobat
  • ganti tulisan berwarna merah dengan foto profil sobat
  • ganti tulisan berwarna kuning dengan alamat blog sobat dan nama blog
  • ganti tulisan berwarna hijau dengan alamat facebook sobat
  • ganti tulisan berwrana orange dengan alamat twitter sobat
Read More >>
Cara membuat widget sticky pada sidebar blog - istilah sticky yang kalau diartikan kedalam bahasa indonesia adalah menempel maksud dari menempel adalah widget pada sidebar akan selalu beraada pada posisinya walau mouse sudah di scroll kebawah. widget dengan posisi sticky ini banyak digunakan oleh bloger sebagai widget penarik perhatian karena widget yang telah di kasih posisi sticky tidak akan hilang ketika di scroll down melainkan akan melekat dibawah adress bar blog.
Membuat widget menjadi sticky pada sidebar

untuk penggunaan widget sticky ini tidak terlalu susah karena untuk membuat widget menjadi sticky hanya perlu menambahkan class pada widget yang dipilih

Memasang  kode untuk widget sticky



  1. login blogger >> template >> edit html
  2. copy javascript berikut ini kemudian paste diatas kode </body> pada template

<script type='text/javascript'>
      $(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'></script>


  1. simpan template

Cara menggunakan pada widget

untuk mengaplikasikanya pada widget yang dipilih untuk di buat sticky hanya tinggal menggunakan id dibawah ini tepat sebelum kode widget
<div id="on-top">code widget yang ingin di beri posisi sticky    </div>


CONTOH : disini saya akan membuat widget facebook likebox menjadi sticky
<div id="on-top"><div class="fb-like-box" data-href="http://www.facebook.com/depermana12" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>

Sumber :  http://www.depermana.com
Read More >>
Membagikan artikel ke sosial bookmarking - bagi sobat yang suka dalam hal memodifikasi tampilan blog untuk mempercantik blog, widget ini sangat cocok untuk sobat selain memenuhi kebutuhan SEO juga memenuhi keindahan blog dimata pengunjung widget sosial bookmarking ini disebut flipper sharing widget karena widget ini berbalik saat di sorot kursor.
untuk membangun trafic blog sudah tidak bisa dilepaskan lagi dari sosial media yang menjadi patner blog sobat untuk memenuhi kebutuhan SEO dalam mengaet visitor ke blog sobat, fungsi utama widget ini yaitu befungsi untuk membagikan artikel ke sosial bookmarking berkualitas seperti dig, reddit, delicious, google plus, dan lainnya.
keunggulan dari widget ini selain membagikan artikel ke sosial media, tips seo, juga widget ini menggunakan gambar-gambar yang dijadikan satu gambar atau yang sering disebut css sprites yang membuat loading widget terasa lebih cepat karena hanya men-request satu gambar dari server dibandingkan dengan menggunakan gambar yang terpisah menjadikan widget butuh waktu lama untuk menrequest banyak gambar, tanpa panjang lebar lagi ikuti panduannya ya.

cara memasang pada blog

  • login keblogger
  • template >> edit html >> cari kode <data:post.body/>
  • copy paste script dibawah ini tepat dibawah  kode diatas
<style>
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCvppOphFoV3HZuLGGXB5TCfTIGECbwHuvrHN7EZjhTXgFb_ul-TZWNVjvE8MzsejXYXemUKb2KOdVxhnQbpFYUx-5tdGTuGK3tSR0xMOJ9lpWTWmYQ9LKHKi0Nlzue3dKrb0TvdifdZE/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>

 Sumber :  http://www.depermana.com
Read More >>
Spoiler adalah salah satu trik menarik mengehamat tempat pada blog, saya yakin sobat pernah liat spoiler di forum-forum seperti kaskus dll (iyalah udah pernah liat spoiler kalo nggak ngapain baca postingan ini, hehehe) fungsi utama spoiler adalah untuk menghemat tempat dikarenakan postingan memilik gambar yang yang lumayan banyak ataupun blog-blog yang menyediakan tutorial blog yang memilik postingan berisi script yang panjang dengan memakai spoiler akan menghemat tempat sekaligus loading lebih cepat, sebenernya fungsinya hampir sama dengan textarea namun spoiler memilik fitur buka tutup.

Contoh Spoiler:

komputer:

  • untuk membuat spoiler copy paste script dibawah ini dalam posting dalam mode HTML

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">judul spoiler:
<input value="BUKA"style="margin: 0px; padding: 0px; width: 60px;
font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode
.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]
.style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode
.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]
.style.display = 'none'; this.innerText = ''; this.value = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">sisipkan gambar atau text yang akan di buat spoiler disini<br>
</div>
</div>
</div>

NOTE: 

  • untuk menyisipkan text/script bisa langsung ditulis tanpa menggunakan atribut
  • untuk menyisipkan gambar gunakan atribut <center><img src="url gambar"></center>
Contoh:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">judul spoiler:
<input value="BUKA"style="margin: 0px; padding: 0px; width: 60px;
font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName
('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode
.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]
.style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode
.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]
.style.display = 'none'; this.innerText = ''; this.value = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;"><center>
<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoQwDs42GRaLv1Yecb5l3WDXHjY4PwAjDrjFcL4XGub1MaINOS2EQYuTyEk-TCQqufEBs9KN4DJf4SQVf1jAKajhqbZX0pCQZhmXOlK4RvEo-SZN_LzkOEn5f-8KBKDEuOCyHdU_9S3ilW/s1600/computer.png"></center><br>
</div>
</div>
</div>

 Sumber :  http://www.depermana.com
Read More >>