Laman

Kamis, 26 Mei 2011

4 Cara Mudah Mengedit Navbar di Blogspot

Share
Nah kali ini saya akan menjelaskan bagaimana cara memunculkan Navbar, Menyembunyikan Navbar, membuat navbar auto hide, dan merubah ukuran dari navbar.
kita bahas satu persatu.

A. Cara Memunculkan Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. setelah itu cari kode seperti (atau kode mirip):

#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

5.
Hapuslah kode di atas, kemudian simpan template, dan lihat hasilnya.


B. Cara Menyembunyikan Navbar

1.
Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4.
Masukkan kode berikut sebelum atau diatas kode ]]></b:skin>

/* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }

5. Jika sudah tinggal di Simpan Template dan lihat hasilnya.


C. Cara membuat navbar auto-hide

1.
Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Simpan template, dan lihat hasilnya.


D. Cara Merubah Lebar Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>
#navbar-iframe {
width:980px;margin:0 auto;
background:#6f0566;
}
Ukuran WIDTH saya sesuaikan dengan lebar dari template, demikian juga dengan warna Background.

5. Simpan template dan lihat perubanhannya.

Cara Mempercepat Loading Blog 2

Share Pada tutorial kali ini  akan memposting artikel tentang Cara Mempercepat Loading Blog, blog yang terlalu banyak widget biasanya akan lambat loadingnya. dan tentunya hal ini akan sangat menjengkelkan bagi para tamu blog yang hanya menggunakan modem-modem yang tergantung pada sinyal. karena tidak akan mampu untuk membuka isi blog secara keseluruhan, untuk mengatasi hal itu ada cara yang bisa kita siasati. yaitu dengan cara menkompress kode CSS yang ada di halaman edit HTML.
Ikuti beberapa langkah di berikut ini:

1. Masuklah  ke halaman dasbor blog sobat blogger mania lalu klik "Rancangan".
2. Kemudian klik "Edit HTML".
3. Jangan lupa "download template lengkap" dulu untuk berjaga-jaga kalau tempalte tidak bisa di parse.
4. Selanjutnya copylah (atau langsung cut) semua kode CSS yang terletak antara kode
  
<b:skin><![CDATA[/*
dan kode
]]></b:skin>   



Percepat Loading Blog Anda dengan Mengompress Kode CSS Template


Percepat Loading Blog Anda dengan Mengompress Kode CSS Template

Kemudian bukalah situs cssdrive. setelah situs terbuka, kliklah tombol Tools pada Navbarnya, kemudian pilih CSS Compressor:

Percepat Loading Blog Anda dengan Mengompress Kode CSS Template

  Langkah selanjutnya pilihlah jenis Kompresi yang anda inginkan:

Percepat Loading Blog Anda dengan Mengompress Kode CSS Template
Makin ke bagian bawah yang anda centang pada menu kedua kelompok tersebut maka makin tinggilah tingkat kompresinya. Itu artinaya susunan kode CSSnya juga akan semakin rapat. Karena itu centang lah sesuai dengan kesiapan anda menerima kerapatan susunan kode CSSnya.

Apabila sudah, pastekanlah kode CSS template anda tadi pada kotak yang sudah disediakan. Kemudian kliklah tombol compress it. Dan tunggulah hingga prosesnya selesai.

Percepat Loading Blog Anda dengan Mengompress Kode CSS Template

  Dan inilah hasil kompresinya. Di bagian bawah kotak kode tampak perbandingan berat file sebelum dan sesudah dikompres. Termasuk jumlah persentase pengurangnnya. Sekarang anda tinggal klik tombol Hightlight Code untuk menyorot semua kode CSSnya. Setelah itu copylah kode tersebut.

Percepat Loading Blog Anda dengan Mengompress Kode CSS Template
Selanjutnya masuklah kembali ke halaman Edit HTML blog sobat blogger mania dan pastekan lah semua kode ini  diantara kode
  
<b:skin><![CDATA[/*
dan kode
]]></b:skin>   


Setelah itu yang paling terakhir dan paling utama simpanlah template.

Selamat mencoba dan mempraktekanya. semoga blog sobat blogger mania semakin enteng dan para tamu yang hanya menggunakan modem modem flash/ sinyal bisa lebih puas untuk membuka blog sobat blogger mania

Cara Memasang Widget Follow Tersembunyi

Share Bagi Anda yang Blognya tidak terlalu banyak ruangan pada sidebarnya disini saya akan memberikan jalan alternatif mudah-mudahan bermanfaat untuk anda dan untuk kita semua yaitu WIDGET FOLLOWER TERSEMBUNYI/MELAYANG yang tentunya tidak memerlukan tempat banyak.:...


Baiklaah...kali ini akan saya share bagaimana cara membuat widget follower melayang dengan mode show/hide. Postingan ini merupakan permintaan dari beberepa sobat blogger (hehehe..sebenarnya saya sudah berniat memposting sebelumnya). 
Trik ini merupakan pengembangan dari Script untuk membuat BUKU TAMU TERSEMBUNYI, hehe..,,yasudahlah yang penting Follownya bisa show/hide. Mau tau caranya?? mari ikuti langka langkah berikut :

1. Pastikan login Blogger terlebih dahulu
2. Masuk ke Perancangan Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000;
background:#fff;
-moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493;
padding:10px;
}
.flcontent:hover{
border:2px solid #fff;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

Kode Widget Follow Disini

<div style="text-align: right;">
<a href="javascript:showHideFL()">
<img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close" /></a></div>
<font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-memasang-widget-follow-tersembunyi.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Widget By Utta' Vifer</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Eits..jangan disave dulu, mari lanjut ke langkah selanjutnya

6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
7. Lihat Gambar dibawah


-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna  dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya
8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
9. Save..
hohoho...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi
10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.
11. Cari kode <body> dan paste code brikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:60px;left:1px;' title='Follow This Blog'><img src='http://i52.tinypic.com/2vn1hxh.png'/></a>

12. Simpan template
lihat hasilnya... "Semoga Berhasil"

Cara Membuat Daftar isi Melayang

Share Pada postingan kali ini akan memposting artikel tentang cara membuat daftar isi melayang. yang biasanya sesuatu yang melayang ini dipakai oleh para blogger mania untuk memasang iklan agar lebih optimal. disamping untuk mempercantik blog tentunya, juga untuk menghemat widget sidebar. untuk pembuatanyapun sangat mudah dan tidak repot. yang tentunya hal ini tidak saya desain sendiri tetapi script ini saya dapatkan dari sobat blogger saya. baiklah untuk lebih jelasnya ikuti langkah langkah berikut itupun bagi sobat blogger mania yang ingin mencobanya. dan untuk contohnya bisa sobat lihat pada blogger .


Step Step/langkah langkah:

1. Masuk ke blogger
2. Tata Letak
3. Tambah widget Html atau Javascript
4. Copy paste script dibawah ini
<style type="text/css">
#di{ position:fixed; top:10px; z-index:+1000; }
* html #di{position:relative;}
.ditab{ height:200px; width:30px; float:left; cursor:pointer; background:url('http://imgur.com/Ly9Fh.jpg') no-repeat; }
.dicontent{ height:400px; float:left; border:2px solid #CCCCCC; background:#F5F5F5; padding:10px; }
</style>
<script type="text/javascript">
function showHideID(){
var di = document.getElementById("di");
var w = di.offsetWidth;
di.opened ? moveID(0, 30-w) : moveID(10-w, 0);
di.opened = !di.opened;
}
function moveID(x0, xf){
var di = document.getElementById("di");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
di.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveID("+x+", "+xf+")", 10);}
}
</script>
<div id="di">
<div class="ditab" onclick="showHideID()"> </div>
<div class="dicontent">
<div style="padding: 1px; overflow:auto; height: 400px;width: 300px;">
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
<script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
<script src="http://fajar7siblings.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
Modif By <a href='http://fajar7siblings.blogspot.com.blogspot.com/2010/04/membuat-daftar-isi-melayang.html'>Spirit 89 Blog</a>
</div> </div></div>
<script type="text/javascript">
var di = document.getElementById("di");
di.style.right = (30-di.offsetWidth).toString() + "px";
</script>
5. Ganti tulisan yang berwarna pink dengan alamat blog sobat blogger mania
6. yang terakhir dan paling utama save/simpan dan lihat hasilnya.

Selamat mencoba semoga bermanfaat. Sukses selalu buat anda...

Selasa, 24 Mei 2011

Membuat Search Box atau Kotak Pencari di Blog

Share

search iconSaya yakin para netter pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari.

Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script

3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://chumhienk-mhienk.blogspot.com/ dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Search Articles, Cari artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.

Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.

Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.


Selamat mencoba.. senyum

Cara Mengubah Tampilan Kursor Blog

Share Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan.

Untuk mengubah tampilan kursor menjadi icon gambar (seperti tampilan di blog ini), caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/tail2.gif"), auto;}
</style>
Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi Totally Free Cursors. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Selamat mengkreasi blog anda :)

Senin, 23 Mei 2011

CARA MEMASANG MUSIK DI BLOG

Share Mungkin beberapa tutorial cara pasang music di blog yang beredar pada saat ini sering sekali memberikan cara bahwa untuk memasukan lagu ke dalam blog kita mesti masuk ke sebuah situs dengan meng-copy embed code nya ke dalam blog, sebenarnya cara ini sudah sangat kuno sekali :).
Ada cara baru bagaimana kita memasang musik/lagu ke blog, blog yang saya maksud disini adalah blog yang di buat melalui blogger.com, namun apabila ada yang pake wordpress/joomla sebenarnya bisa juga, tapi kalo wordpress dan joomla kan biasa nya udah ada plugin/component tersendiri :).
Nah, berikut cara pasang musik/lagu di blog:

1. Login ke blogger.com
2. Untuk blogger0blogger pastilah sudah tau, tinggal kita pasang widget “TEXT/HTML” aja kan.
3. Lalu copy code yang berwarna biru di bawah ini.
<embed autostart=”false” height=”40″ loop=”true” playcount=”2″ src=”URL of music file” width=”300″/></embed>
Ket:
URL OF MUSIC (tulisan berwarna merah) : URL dimana ada music streaming yang sudah kita temukan.
Autostart : tentukan nilai nya, kalo “false” berarti lagu gak langsung di mainkan, tetapi kalo “true” berarti ketika pngunjung datang lagu akan secara otomatis dimainkan.
loop: pengulangan atau tidak bila lagu selesai.
Jika kita mau pasang musik secara background bisa langsung gunakan code di bawah ini, gak beda jauh koq sama yang di atas :).

Menghilangkan Navbar Blogger

Share
Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.


Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa juga menaruh kode berikut persis di bawah kode <body> :


<style type='text/css'>
#navbar-iframe {display:none;}
</style>


Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :


  • Untuk template klasik





    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
    5. Copy kode berikut lalu paste di atas kode </style>
    6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    7. Klik tombol Simpan Perubahan Template
    8. Selesai.




  • Untuk template baru





    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>
    6. /* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }
    7. Klik tombol Simpan Template
    8. Selesai.


    Selamat menikmati blog tanpa navbar !

    Generator Tulisan Terbalik

    Share


    Penting gk penting sih generator ini, tapi gk ada salahnya kan klau diposting... heheheh
    kalau tertarik buat masang widget tulisan terbalik diblog silahkan copy paste kode dibwah ini :

    <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dd734c47-a0fb-4bb3-820b-5bed70b69b35');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/upside-down-text">Upside Down Text (Flip Text)</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>


    Cara Membuat Komentar Admin Berbeda Warna dari Pengunjung Lain di Blogger

    Share Sering kita temukan di suatu blog terdapat background komentar yang berbeda antara pengunjung dengan pemilik blog. Ini juga dapat memudahkan pengunjung yang lain untk mengetahui siapa pemilik blog tersebut. Kali ini saya akan sedikit menjelaskan tentang bagaimana cara membuat tampilan komentar Admin lain dari tampilan komentar pengunjung blog.



    • Login ke Blogger
    • Masuk ke Tata Letak/Layout
    • Edit HMTL --> Expand Template Widget
    • Cari Kode ]]</b:skin> atau ]]></b:skin> 
    • Copy dan Pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
    .author-comments {
    background: #333333;
    border: 2px solid #666666;
    padding: 5px;
    }
     
     keterangan : backgroun #333333; adalah untuk tampilan background komentar dan border #666666; adalah untuk ketebalan garis.
    • Selanjutnya, cari kode <dl id='comments-block'> sehingga muncul tampilan seperti dibawah ini :
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    <dt class='comment-author' expr:id='"comment-" + data:comment.id'>

    <a expr:name='"comment-" + data:comment.id'/>

    <b:if cond='data:comment.authorUrl'>

    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

    <b:else/>

    <data:comment.author/>

    </b:if>

    said...

    </dt>

    <b:if cond='data:comment.author == data:post.author'>

    <dd class='author-comments'>

    <p><data:comment.body/></p>

    </dd>

    <b:else/> <dd class='comment-body'>

    <b:if cond='data:comment.isDeleted'>

    <span class='deleted-comment'><data:comment.body/></span>

    <b:else/>

    <p><data:comment.body/></p>

    </b:if>

    </dd>

    </b:if> <dd class='comment-footer'>

    <span class='comment-timestamp'>

    <a expr:href='"#comment-" + data:

    comment.id' title='comment permalink'>

    <data:comment.timestamp/>

    </a>

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

    </span>

    </dd>

    </b:loop>

    </dl>
    keterangan : untuk tulisan yang berwarnah merah adalah kode-kode yang harus ditambahkan kedalam script template blog sobat.
    • Simpan Template.
    Selamat mencoba dan semoga berhasil...!!!!

    catatan : saat berkomentar anda harus dalam keadaan log in di blogger

    Cara memasang gambar animasi lucu di pojok blog (widget animasi blog gratis)

    Share Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

    Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar dari situs sweetim.

    Contoh dan scriptnya bisa dilihat di bawah ini :
    1.Gajah loncat



    Script:

    <div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>






    2. Boring


    Script :
    <div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><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/0002016B.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>

    3.Tuyul ketawa


    Script:

    <div style="position: fixed; bottom: 0px; 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://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>


    4.Boneka joget


    Script :

    <div style="position: fixed; bottom: 0px; left: 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/0002013F.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>


    5. Panda main bola


    Script :

    <div style="position: fixed; bottom: 0px; right: 30px;width:160px;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/0002032D.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi-Blog</a></center></small></div>



    6. Tuyul baring


    Script :
    <div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Free-Widget-Animasi</a></center></small></div>

    7. Panda biru



    Script

    <div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
    <small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Free-Widget-Animasi</a></center></small></div>

    8. Panah



    Script:

    <div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>




    9. Bunga




    Script :

    <div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>


    10.Anjing laut


    Script:

    <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>


    11.Lumba-lumba


    Script :

    <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

    12.Kucing tidur



    Script :

    <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

    13.Kelinci


    Script :
    <div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>


    14.Dragon


    Script:

    <div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>


    15.Ikan


    Script :

    <div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>


    16.Pinguin


    Script :

    <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

    17. Helikopter


    Script :
    <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

    Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

    Cara memasang widget animasi ke blog :

    1. Pilih script yang tersedia

    2. Di Dashboard blogger pilih Rancangan - Elemen halaman

    3. Pilih Tambah Gadget

    4. Pilih HTML/Javascript

    5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript




    Catatan:


    Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog


    Artis

    1. Leonardo




    Untuk widget animasi gambar artis bisa dilihat scriptnya disini widget animasi blog


    Gambar di bawah ini belum sempat saya edit scriptnya.
    .


    9. Pintu



    10.Teriak


    11. Terkurung



    12.

    13. Sincerely


    14.



    15. Menangis




    17. Piala



    18. Sundul bola


    19. Tawon


    20.Kipas



    21.





    24.Telur menetas



    25.Ayam bertelur



    26.Beruang


    27.



    29. Kucing