Cara Memasang Widget Animasi Naruto Yang Keren dan Lucu di Blog

Cara membuat animasi naruto bergerak di pojok blog - 

Wah ,, kembali lagi neh permathic blog mencoba untuk mengshare kepada para sahabat semua mengenai cara membuat widget animasi bergerak di pojok blog. Namun permathic pada kesempatan kali ini akan memberikan animasi animasi khusus seputar naruto. Hehehe.. maklum saya kan penggemar berat naruto, lagi pula animasi naruto dkk ini sangat keren dan menarik loh.. dan sangat pass jika di jadikan pernak pernik penghias blog anda.. nah dari pada berpanjang lebar, langsung saja saya berikan tips cara memasangnya.

Cara Memasang Widget Animasi Bergerak Naruto

• Login ke dasbor blog anda
• Pilih rancangan
• Pilih Tambah Gadget
• Pilih Html/Java Script
• Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
• Pastekan kode tadi di Html/java script tadi.
• Simpan, dan selesai

Catatan !! ada bisa mengatur dimana anda ingin meletakan animasi tersebuat sesuai keinginan. Caranya dengan mengedit tulisan yang berwarna merah pada script tersebut.

bottom (bawah), top (atas), left ( kiri), right (kanan),

Contoh : jika anda ingin memasang di pojok kanan atas, berarti anda harus mengubahnya menjadi top dan right. Mudah bukan ? selamat mencoba..

1.Jiraiya

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/JiraiyaSummoned.gif" title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

2.Daidara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i1107.photobucket.com/albums/h385/bogel4/DeidaraBird.gif " title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

3.kisame

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/KisameWater.gif" title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

4.Kiba

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/KibaAkamaru.gif " title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

5.Akatsuki

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://th244.photobucket.com/albums/gg10/spider-man155/th_Akatsuki.gif " title="Kumpul`n animasi Naruto bergerak gif" alt="cara memasang naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

6.Sakura

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Sakura2.gif " title="Kumpulan animasi Naruto bergerak gif" alt="cara memasang animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

7.Anggota akatsuki

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343009.jpg " title="Kumpulan animasi Naruto bergerak gif" alt="cara memasang animasi naruto bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

8.Tobi

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21581772/355351427.jpg " title="Kumpulan animasi Naruto bergerak gif" alt="cara pasang animasi naruto bergerak gif di blog" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

9.Hinata

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/HinatavsNaruto.gif" title="
Kumpulan animasi Naruto bergerak gif" alt="cara pasang animasi naruto bergerak gif di blog"  /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

10.Temari

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Temari.gif " title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

11.Kankuro

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kankuro.gif " title="Kumpulan animasi Naruto dan gara bergerak gif" alt="cara pasang animasi naruto bergerak gif di blog"  /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

12.Sasuke

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://th217.photobucket.com/albums/cc54/ivandra79/Naruto/th_SASUKE_GIF.gif" title="Kumpulan animasi sasuke bergerak gif" 
 alt="cara pasang animasi naruto dan sasukebergerak gif di blog"  /></a><small>
<center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

13.Itachi

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343243.jpg " title="Kumpulan animasi Naruto hitachi bergerak gif" alt="cara pasang animasi naruto dan hitachi bergerak gif di blog"  /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

14.Pain

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343104.jpg" title="Kumpulan animasi Naruto bergerak gif" alt="cara pasang animasi naruto bergerak gif di blog"  /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

15.Kakuzu

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/Kakuzu.gif" title="lihat lebih banyak animasi naruto bergerak" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

16.Gaara vs daidara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/GaaraDeidara.gif " title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

17.Gaara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/GaaraSkill.gif" title="Kumpulan animasi gara bergerak gif" alt="cara pasang animasi gara bergerak gif di blog"  /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

18.Neji

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/NejiStrikes.gif " title="kumpulan animasi bergerak" alt="animasi beregerak naruto" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

 19.Rock lee

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Leecombo.gif " title="lihat lebih banyak animasi naruto bergerak." alt="animasi beregerak naruto"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

20.Zetsu

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343266.jpg " title="lihat lebih banyak animasi naruto bergerak."alt="animasi beregerak naruto" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

21.Sasori

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343137.jpg" title="lihat lebih banyak animasi naruto bergerak." alt="animasi beregerak naruto"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

22.Kakashi

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kakashi.gif " title="kumpulan cartoon bergerak." alt="animasi beregerak naruto"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

23.Sarutobi

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/3rdHokage.gif " title="klik kumpulan Widget Animasi naruto " alt="animasi beregerak naruto"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

24.Kisame

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src=" http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343066.jpg" title="lihat kumpulan Widget Animasi Naruto " alt="animasi beregerak naruto"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-animasi-naruto.html" target="_blank" title="Cara Memasang Widget Animasi Naruto">Animasi Naruto</a></center></small></div>

 Jangan Lupa Tinggalkan Komentar Di Bawah Ini ...

Cara Buat Animasi Jam Keren di Blog

Animasi Jam Flash di blog, blog sobat akan tampak profesional, keren dengan jam flash dan dengan suara detik jam dunia. Simpel dan profesional hadirnya jam animasi dengan flash di blog anda akan memuat blog anda tampak profesional.
Pertama sekali yang sobat blogger tutorial lakukan adalah, siapkan kopi, kacang dn putar musik heavy metal!! hehe becanda. lanjut!!

• Login ke Dasboard Blog - Rancangan - Elemen Halaman
• Tambah Gadget dan pilih "Html/Javascript"
• Letakkan salah satu kode dibawah ini sesuai keingnan sobat Tutorial

Jam Digital

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam Garis Hitam

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam Simpel

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>

Analog Plus Digital

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam dengan sentuhan berputar

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam Kayu

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam Ruang Terbuka

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>

Jam Lingkaran Merah Berputar

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object>

Cara Membuat Fan Page di Facebook

Bila kamu adalah pengguna facebook (sudah dijamin, pasti sudah punya akunnya), pasti kamu mengenal dengan yang namanya Fan Page atau dalam Bahasa Indonesianya Halaman (kalau gak tahu ya kebangeten banget). Di Fan Page ini kamu bisa buat suatu komunitas, mencari penggemar, bisnis, atau sampai buat sharing-sharingan-pun bisa.

Orang-orang yang baca postingan Sunu ini pasti pada belum bisa untuk bikin fan page (bercanda... hehehe). Emang beneran sih! Tapi gak papa kok, kali ini Memepein Blogbakal kasih tahu langkah-langkah pembuatannya.
Untuk membuat Fan Page cukup mudah:
1. Login akun Facebook kamu
2. Klik alamat berikut: http://www.facebook.com/pages/create.php
3. Kemudian kamu akan melihat beberapa topik untuk direktori fan page kamu nantinya. Kamu boleh memilih salah satu direktori seperti gambar dibawah ini:

4. Setelah kamu pilih, masukkan Nama Fan Page yang ingin kamu buat. Disini Sunu kasih Contoh Fan Page untuk Blogger yang dikasih nama "Forum Blogger Indonesia"

5. Nah, sekarang Fan Page yang kamu buat sudah jadi deh... tinggal kamu otak-atik sendiri aja biar bagus.

Jangan lupa ya gabung di Fan Page ini, klik LIKE di samping blog yah!!

Cara Mendaftar dan menambahkan Buku Tamu ( Chat Box ) di Blog

Saya sering melihat blog seseorang, mereka menambahkan sebuah kotak yang berisi pesan dari banyak pengguna internet (biasanya blogger) yang bertujuan untuk blog walking. Gadget tersebut ada yang menyebutnya Chatbox, Guestbook/Buku tamu, Shoutbox, dan lain sebagainya. Gadget ini biasanya digunakan untuk bisa berinteraksi dengan admin blog saat si admin online atau hanya sekedar meninggalkan pesan. Ini berguna agar si pembaca bisa mengutarakan kritik dan saran mereka, dsb.

Dan pada post ini, saya akan memberikan cara untuk mendapatkan Chat box tersebut pada blog sobat.

Ada 2 provider Chatbox yang paling sering digunakan seperti CBox (cbox.ws) dan shoutMix (www.shoutmix.com) namun disini saya menggunakan Cbox sebagai chatbox yang saya gunakan.

Berikut cara-caranya:

1. Anda harus mendaftar terlebih dahulu, masuk ke http://cbox.ws/ dan klik pada tab sign up.
2. Masukkan e-mail blog anda, password, dan URL blog anda. centang pada box "I Have Read the terms..." dan klik Get my Cbox!
   
   
   
3. Anda akan diarahkan ke page bahwa anda sudah terdaftar. kini anda bisa login dengan cbox name dan  password yang telah digunakan.
4. Anda akan masuk ke Control panel akun anda. Untuk mendapatkan kode HTML cboxnya, klik Publish!.
5. Copy kode HTML yang disediakan pada page Code Generator.

Sekarang anda tinggal membuat gadget baru di blog anda.

1. Login ke Blogger anda.
2. Pada dasbor, pilih Tata Letak.
3. Klik Tambah Gadget sesuai posisi
4. Pilih HTML/Javascript
5. Beri judul misalkan "Buku Tamu" atau sesuai selera.
6. Paste Code HTML yang sudah dicopy kedalam kotak konten.
7. Jika Selesai klik Simpan.

Kini anda sudah mempunyai kotak chatbox dari Cbox.ws di blog anda.

Cara ganti template blog dengan xml

Cara Mengganti Template Blogspot - Blogger (Versi Baru) Setelah Template Di Download

Sama halnya dengan panduan mengganti template blogger (versi lama). Untuk mengganti template blog blogger teman-teman harus mendownload template blogger gratis dulu, jika belum memilikinya silakan download template blogger gratis di sini.

Setelah template blogger gratis sudah didownload, silakan lihat dulu blogger template yang baru didownload tadi, apakah berkasnya berbentuk file zip/rar atau berbentuk xml (jika file blogger template sudah dalam bentuk xml silakan langsung diupload ke blogger/blogspot)

Jika template masih berbentuk Zip/Rar sialakan di Extract dulu. Caranya : klik kanan, kemudian pilih Extract Here.

Jika Template Blogger sudah di extract silakan upload file xml nya.

Langkah – Langkah Mengganti Template Blogspot/Blogger (Versi Terbaru)

Berikut panduan upload template blogger setelah di download dan diextract

1. Login ke dashboard blogger

2. Silakan pergi kebagian Template dengan cara mengklik menu Template (lihat gambar berikut)

3. Klik tulisan Cadangkan / Pulihkan (menunya ada di sebelah kanan atas)

Sebelum template diupload sdbaiknya download dulu template yang sudah terpasang dengan cara mengklik tulisan Unduh Template Lengkap. Dan jika template sudah selesai di unduh/download silakan upload template yang baru.

Tunggu proses upload sampai selesai, jika sudah selesai silakan lihat perubahan blog teman.

Oh ia ... biasanya setelah template baru terpasang ada tambahan widget yang mungkin tidak kita inginkan, silakan hapus widget yang tidak di inginkan dan susun kembali penempatannya di tab Tata Letak.
Nah itulah tutorial blog : Tutorial Cara Mengganti Template Blogspot - Blogger (Versi Baru)

Selamat mencoba dan semoga bermanfaat.

Cara Memasang Floating Fan Page Facebook Pada Blog

Floating Fan Page Facebook merupakan widget yang kita tambahkan pada blog untuk mempercantik tampilan blog sekaligus menata dengan rapi widget-widget yang sudah terpasang pada blog. Dan pada kesempatan kali ini, saya akan memberikan tips blog lagi yaitu Cara Memasang Floating Fan Page Facebook Pada Blog. Sebagai gambaran awal dari Floating Fan Page Facebook pada blog, teman-teman bisa melihat contohnya pada widget fan page yang saya sudah pasang pada blog ini. Pemasangan widget fan page ini tidak akan berjalan dengan lancar bilamana teman-teman blogger belum membuat halaman fan page pada facebook sebelumnya. Untuk itu, silakan buat dulu halamannya. Dan untuk membuat halaman fan page pada facebook, silakan tanyakan saja pada Om Google.

Untuk teman-teman blogger yang sudah punya halaman fan page pada facebook dan ingin memasang widget floating fan page facebook pada blog, silakan ikuti langkah-langkahnya di bawah ini :

1. Silakan login ke akun blog Anda.
2. Pada halaman dasbor akun blog, silakan klik nama blog Anda.
3. Kemudian pada halaman overview blog Anda, silakan pilih template-edit HTML-Prossed-expand widget template.
4. Selanjutnya silakan cari kode ]]></b:skin>.
5. Kalau sudah ketemu kodenya, silakan copy dan paste kode di bawah ini pas di bawah kode ]]></b:skin>

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

6. Selanjutnya silakan simpan template blog Anda dan tutup juga halaman edit HTML-nya.
7. Kemudian silakan pilih lagi layout, lalu pilih dan klik Add Gadget pada posisi mana saja.
8. Setelah muncul windows Add Gadget Blogger, silakan pilih HTML/JavaScript dengan cara klik tombol plus [+] yang ada disebelah kanannya.
9. Langkah selanjutnya, silakan copy kode di bawah ini dan paste pada bagian content.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JL_GbK9FmPiBZ1ejX2x_8cG5NAqEI8ZJTVr7MP2v9b4aEJu1beE_6bEvYB-agTS0ZAH0D1i522Q8ixLGMR1Guwlze5U9nrMehT1bZjxcTkgsHsCsOJ8Z9VJzN24y1Sfqnn9MB0VAEjTT/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed; right:-250px;top:44%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class="likebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/centrinoblog&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 258px; width: 245px;background:#fff;"></iframe> </div> </div>

10. Setelah dipaste kodenya pada bagian content, jangan dulu disimpan kodenya tapi silakan ganti kode yang saya kasih warna merah dengan alamat atau URL halaman fan page facebook Anda. Setelah diganti kode yang berwarna merah, barulah disimpan kodenya.

Ok sob, selamat ya, sudah berhasil Memasang Floating Fan Page Facebook Pada Blog. Jika ada kendala, silakan tanyakan saja lewat komentar atau buku tamu blog ini.

Cara Memasang Floating Fan Page Facebook Pada Blog

Demikian informasi dari saya tentang tips blog Cara Memasang Floating Fan Page Facebook Pada Blog dan jika informasi ini bermanfaat, silakan sebarkan ke teman-teman blogger yang lain dengan cara silakan pilih dan klik icon share di bawah ini. Terima kasih..

Cara Mudah Membuat Tombol Back To Top Keren Dengan jQuery

Ditulis Oleh Fajar Lesmana | Rabu, 26 September 2012 | 17:32

JQuery - Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website/blog. Sehingga memudahkan pengunjung suatu website/blog untuk kembali ke atas tampa menggunakan scroll.

1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

3. Simpan dan lihat hasilnya. Pasti kamu senang.



Sumber: di sini

Cara Membuat Link di Kolom Komentar

Cara Membuat Link di Kolom Komentar, di saat anda berkunjung ke blog sobat lain dalam rangka memperbanyak jumlah link (tautan) dan meningkatkan trafik blog anda, anda perlu menyisipkan jejak link anda pada kolom komentar sebuah posting. Tetapi yang paling penting adalah komentar yang anda entry haruslah berhubungan dengan posting yang sedang anda simak. Saya sarankan jangan sembarangan menyisipkan link, apalagi banyak-banyak nanti komentar anda ditolak.

Sebenarnya sederhana saja, anda tinggal menyimpan link dengan menulis kode tag HTML pada kolom komentar, caranya tulis tag alamat dan anchor link blog anda.

Contoh 1
<a href="http://nama blog anda.com">Anchor Text</a>, maka hasilnya akan terlihat seperti ini : Anchor Text

Anda juga dapat menambah efek huruf tebal dengan tag <b> dan </b>.
 Contoh :2
<b><a href="http://nama blog anda.com">Anchor Text </a></b>, maka akan terlihat seperti ini : Anchor Text

Teks berwarna merah anda gantikan dengan nama blog dan teks anchor blog anda.

Ini hanyalah salah satu tag yang dapat anda manfaatkan sebagai pemanis tampilan, masih banyak variasi tag lainnya yang dapat anda sisipkan pada anchor link anda.

Semoga Cara Membuat Link di Kolom Komentar ini bermanfaat, selamat mencoba.


Sumber : di sini

Cara Membuat Widget Populer Post Warna Warni

Cara Membuat Widget Populer Post Warna Warni V.2 - Jika menggunakan tampilan default biasanya anda akan merasa bosen dan ingin merubah yang lebih baru dan lebih enak di pandang. Seperti yang satu ini widget populer post, jika melihat setingan default akan terasa bosen dan males melihatnya.

Kini ada trobosan baru (seperti iklan) merubah widget Populer post warna wani dan terlihat seperti urutan peringkat untuk contohnya seperti di bawah ini :

Terus bagaimana cara membuatnya? inilah saaatnya untuk berbagi

Tutorial Membuat Widget Populer Post V.2

---

1. Pertama anda harus login blogger

2. Sebelumnya anda pasang dulu widget populer post, itu sangat mudah tidak usah saya jelaskan

3. Jika sudah, sekarang merubah agar seperti pada gambar, masuk Template > Edit html > Lanjutkan 

4. Cari kode ]]></b:skin> dan masukkan kode di bawah ini tepat di atas kode yang anda cari sebelumnya

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}

5. Setelah semua, langsung klik simpan. Dan lihat hasilnya setelah anda menambahkan css ini.

Semoga artikel ini bermanfaat,  jangan lupa berikan komentarnya yang terbaik


Sumber: di sini