CARA MENGETAHUI KECEPATAN LOADING BLOG

Sore Sahabat Blogger, Lagi pada ngeposting blognya sendiri ya? Kalo gitu, saya mau tanya donk, kalian pernah gak mengukur seberapa sih kecepatan Blog Anda? dan Apakah kalian peduli dengan keceptan Blog Anda? Tidak? kecepatan Blog itu sangat penting loh para sahabat Blogger, karena kalo Blog kita lama loadingnya alies lemot, tuh para pengunjung bisa - bisa seperti gambar di bawah ini loh.

                                                

CARA MEMBUAT HEADER KEREN PADA BLOG

Malam Sahabat Blogger, Kalian tau kan Header Blog? nih bagi yang masih pemula seperti saya nih, saya kasih tau cara mudah untuk membuat header Blog anda menjadi keren tanpa menggunakan Edit HTML yang super ribet ...
Kalo begitu langsung aja ya ...
Selamat membaca ...
hehhehehe ...

1.buka situs di http://www.flamingtext.com/
silahkan sobat pilih gambar yang ingin di jadikan header terserah kalian mau yang mana

CARA MEMBUAT SHARE BUTTON MELAYANG DI BLOG

Sore Sahabat Blogger, udah santai ya?Bagus deh kalo udah santai mah.
Pada kesempatan kali ini saya bakal Share ke kalian semua " cara membuat Share Button Melayang di Blog " yang seperti punya Blog saya tuh ...
hheeheh ...
nih caranya :


1. Masuk ke Blog anda
2. Lalu pilih tata letak
3. Setelah itu klik Tambah Gadget di tempat mana saja yang kalian suka.
4. Pilih HTML/JavaScript
5. Setelah muncul copas kode - kode berikut ini :

Cara Ping Blog ke Search Engine Google

Malam Blogger, Ketemu lagi nih. hhehheh ...

Apakah kalian tau  tentang Ping Blog itu? saya sih hanya tau sedikit, tapi saya bakal coba menjelaskan ke Sahabat Blogger sekalian, ok?

Nih, Ping Blog itu adalah salah satu teknik dari SEO. Ping itu memiliki singkatannya loh Sahabat Blogger, yaitu Packet Internet Gopher. Sedangkan pengertian Ping itu sendiri adalah sebuah Utilitas yang dapat digunakan untuk memeriksa induktifitas jaringan berbasis technology Tranmission Control Protocol/Internet Protokol (TCP/IP) dengan utilitas ini kita dapan menguji apakah komputer sudah tersambung dengan komputer lain.

huh sepertinya bahasanya ketinggian ya para Blogger?

Kalo menurut saya sih Ping itu adalah sebuah cara cepat untuk meningkatkan pengunjung dan cara cepat  agar terindeks ke searc engine.

Maka dari itu mengapa kita perlu untuk selalu melakukan ping blog ini setiap kita selesai memposting sebuah artikel adapun cara untuk melakukan ping google yaitu

Cara Membuat Animasi Semut berjalan di blog

     

Malam sobat Blogger pada kesempatan sebelumnya saya pernah Share " cara membuat animasi berjalan di Blog ". Nah tapi pada kali ini saya bakal Share hal yang bisa di bilang hampir sama, dan caranya pun sama hanya yang berbeda kode scriptnya saja.

Jika sahabat Blogger tertarik dengan Tips dan trik Artikel Cara Membuat Animasi Semut berjalan di blog , sobat bisa ikuti tutorial dibawah ini tinggal tambah gadget kok.....

1. Login blogger sobat.
2..Klik tata letak

3. Add gadget / tambah gadget
4. Pilih HTML/java script
5. Lalu Masukan script di bawah ini dalam kotak HTML/java script :

<div style="display:scroll; position:fixed; top:150px; center:20px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div>

6. Tinggal SAVE

7. Sobat blogger lihat hasilnya, semut berputar-putar pada blog.

Jika sobat ingin merubah gambar atau letaknya ini caranya :

• top:150px      : ini untuk mengatur jarak dari atas
• center:20px   : mengatur jarak ditengah, jika sobat ganti left atau right maka letaknya disamping kiri atu kanan.
• untuk link gambarnya berwarna Merah yaitu photobucket bisa sobat ganti dengan gambar yang kalian suka yang penting bergerak. ok?

Demikian cara membuat animasi Semut berjalan di Blog, gimana sahabat Blogger? kalian puas dengan Hasilnya? Atau masih Kurang ? kalau kurang saya silakan Coment dan saya bakal berusaha menjawab pertanyaan kalian.

sekian dulu dan Terima Kasih.

hehheheh ...

Cara Membuat Halaman 404 Error/Tidak Ditemukan

       Tidak semua halaman yang dikunjungi pengunjung dapat diakses di situs, akan tetapi terkadang menemukan halaman yang tidak ditemukan ( Page Not Found ). Dengan mendesign, merancang, dan membuat halaman error 404 Redirect ke halaman utama atau berdasarkan arahan, kita dapat mengatasi masalah ini serta membuatnya agar error tersebut dapat memudahkan pengunjung menemukan apa yang dicarinya.

Terdapat halaman error 404 ini bisa disebabkan oleh beberapa faktor yaitu feed yang tidak ditemukan, script javascript pada komentar yang kurang baik,  penghapusan artikel oleh admin, penggantian URL halaman, salah mengetikkan URL oleh pengunjung dan yang lain sebagainya.

Oleh sebab itu, maka pada kesempatan kali ini saya akan berbagi kepada kalian tentang bagaimana cara membuat halaman error 404 tersebut dengan meredirect mereka ke halaman beranda atau homepage pada blog / halaman posting konten lainnya. Tujuan dari Redirect Error Page ke Homepage yakni membawa pengunjung ke hompage atau halaman lain secara otomatis tanpa melakukan klik apa-apa, oke kalo gitu langsung saja. Cekidot.

hahahahhaa ...

Cara Membuat Halaman 404 Page Not Found :

• Login ke Blogger
• Pilih Setelan » Preferensi Penelusuran » Kesalahan dan Pengalihan » Pesan Khusus untuk Laman Tidak Ditemukan » Edit (Lihat gambar di bawah untuk lebih jelasnya)

Di dalam kotak tersebut, anda dapat memberikan kode HTML sesuai dengan design anda.

 Cara membuatnya adalah dengan melakukan design di halaman posting. Jadi, buat terlebih dahulu artikel baru di menu Post. Setelah itu anda bisa memberikan kata-kata dan apapun sesuai keinginan anda dngan tampilan bagus, kemudian klik HTML di ojok kiri atas pada toolbar posting. Copy script HTML tersebut dan masukkan ke dalam kotak custom page not found tersebut.

Anda juga bisa menggunakan script di bawah ini, sebagai contoh :
<p align='center'><strong>
<font color='#ff0000' size='25px'>
Error 404<br/>[Page Not Found]...!!!
</font></strong></p>
<br/>
<p align='center'><font color='#0000ff' style='font-size: 25px'><strong>Kami mohon maaf atas ketidaknyamanan ini.</strong></font></p><br/>
<p align='center'><font color='#000' style='font-size: 15px'>Dalam beberapa saat, sobat akan dialihkan ke halaman lain secepatnya...!!!</font>
<script type = "text/javascript">
//Redirect Page Not Found - Error 404 By Lostsector
LS_redirect = setTimeout(function() {
location.href= "Masukkan URL Redirect tujuan Anda disini"
}, 5000);
</script>

Gantilah kode berwarna biru diatas dengan url halaman yang anda tuju. Lalu klik Save.

Demikian tutorial blogger dan tahapan kali ini mengenai pemasangan kode untuk meredirect halaman error 404 page dan mendesignnya. Terimakasih dan semoga bermanfaat.
Selamat mencoba oke ...

Cara Membuat Judul Blog bergerak

Kalian pengen efek kaya judul blog saya?Saya kasih bocorannya deh.
langsung aja ya blogger.

kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

• Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
• Copy dan paste code berikut di HTML/Javascript :

"font-family: inherit;"><script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + msg;pos = 0; 
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, 

pos); 
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Save/Simpan, dan lihat hasilnya.

Semoga manfaat ...
Baca JUga 13 Tips SEO Andalan Untuk Blogger Pemula
Thank udah berkunjung ke Blog saya, di like dan jadi pengikut ya?
:)

Cara Submit Blog Otomatis Ke 3005 Directory Blog Sekaligus

Hai para Blogger, kalian biasanya submit blog kalian ke website terkenal pasti dengan satu peer satu ya?

pasti capek kan kalo gitu, apalagi kalo submit ke 3005 website di seluruh dunia, waw pasti kelenger dah.

hhhhhahahh ...

Maka dari itu, Pada artikel kali ini saya ingin Share Cara Submit Blog Otomatis Ke 3005 Directory Blog Sekaligus dan kita hanya disuruh menunggu hasilnya, bahkan sambil duduk manis dan ngemil juga bisa kok.

Langkah-langkahnya:

• Masuk ke http://www.imtalk.org/cmps_index.php?pageid=IMT-Website-Submitter
• Isi sesuai data blog sobat
• Pada Pilihan Limit the number of created pages (pilih sesuai keinginan sobat)
  1. Top 50 = Blog di submit ke 50 website teratas
  2. Top 100 = Blog di submit ke 100 website teratas
  3. 250 = Blog di submit ke 250 website
  4. 500 = Blog di submit ke 500 website
  5. 1000 = Blog di submit ke 1000 website
  6. 2000 = Blog di submit ke 2000 website
  7. 3005 = Blog di submit ke 3005 website
• Klik Submit. Tunggu Hingga Proses Selesai. (jangan ditutup dulu browser sobat sampe submit blog sobat selesai) 
• 
  

NB: Jangan ditutup dulu Web Browser sobat sebelum semua submit sudah sesesai sesuai dengan jumlah submit yang anda inginkan.

Semoga bermanfaat dan Slamat mencoba

Cara mudah Mengganti Logo Blog

Cara Mudah Mengganti Logo Blog Kita (favicon). Memang logo utama dari blog kita menggunakan logo asli blogger seperti dibawah ini. Logo favicon ini kau bisa lihat disebelah nama blog kita.

Namun kita bisa mengubah dengan logo yang kita sukai dan pastinya akan membuat penampilan blog kita lebih menarik dengan logo yang berbeda. Kita akan memberikan step step mengubah logo favicon kita lebih detail dilengkapi gambar.

Langkah pertama yang harus dilakukan adalah pembuatan logo favicon kita.

Masuk ke situs favicon generator Favocin Generator Disini

Kemudian masukkan gambar pada browse dan setelah selesai memasukkan gambar yang akan dijadikan logo blog, terus klik tombol create favicon (catatan : memang tak semua gambar bisa di jadikan favicon, kamu coba dengan gambar loga lainnya kalau gagal).

Saya disini akan mencoba memakai logo dari Huruf A untuk saya jadikan logo favicon saya biar tampak keren.

Setelah kamu klik tombol Create Favicon akan muncul kotak download dan segera download favicon kamu yang hanya berukuran 1.1 KB dan berekstensi .ico

Langsung tekan klik Download the generated favicon (dibawah tulisan merah tips-mudah-ngeblog)

Setelah selesai kita tinggal masukkan logo favicon kita ke blog.

Kemudian kita masuk blog kita :

Masuk Tata Letak pada  blog kita.

Klik tombol Edit Favicon kemudian browse tan pilih favicon yang telah kita download kemudian save.

Catatan : Favicon tidak akan langsung tampil pada blog, kita tunggu beberapa hari dan favicon kita akan berubah menjadi logo kita sendiri, selamat mencoba tips mudah mengubah logo favicon (logo blog kita sendiri).
Baca juga cara " mengganti Tampilan scroll bar menjadi keren di blog"

Cara Merubah/Mengganti Cursor di Blog

Hai para blogger, rasanya bosen juga ya pakai bentuk kursor, yang itu-itu aja, gimana kalau kita ganti / ubah bentuk kursornya menjadi seperti punyaku nih, atau yang kalian suka, kalian bahkan bisa pilih yang kalian suka, mau dari bentuk animasi, bentuk love , bentuk anime, dll bahkan kalian bisa request sendiri bentuk yang kalian suka/ mau di tambah tulisan juga bisa.

Apakah Kalian tertarik?

Ok, jika tertarik dengan Cara Merubah/Mengganti Cursor Blog terasa kurang lengkap jika tidak dipraktekan, nah,,, untuk tambah ilmu baru langsung saja ikuti tutorialnya dibawah ini: sampai bawah ya,,,

1. Masuk ke link http://www.cursors-4u.com/ (situs tersebut adalah penyedia segala macam jenis tampilan cursor blog)

2. jika sudah masuk akan tampil seperti gambar ini:

3. Setelah masuk pilih pada categoris seperti pada tanda merah gambar diatas. pilih yang sobat suka. contoh pilih categories Cursors/Pointers maka akan tampil seperti gambar dibawah ini:

4. Pilih salah satu dari pilihan tampilan cursor yang sobat suka seperti gambar diatas, maka akan tampil seperti dibawah ini:

Keterangan gambar diatas :

Pilih nomor satu terlebih dahulu blogger/blogspot kemudian muncul seperti gambar diatas. kemudian copy kode pada nomor dua tersebut kedalam notepad atau wordpad. dan ikuti langkah selanjutnya :

Cara pemasangan kedalam bog.

1. Login ke akun bogger Anda
2. Plih Tata Letak
3. Klik tambah gadget
5. Pilih HTML/Javascript
6. Copy/paste kode yang anda simpan di notepad tadi
7. Save.

Sekarang lihat tampilan *cursor blog* sobat, udah unik dan menarik kan,,,, sekian dulu Cara Merubah/Mengganti Cursor di Blog. good luck dan semoga berhasil.

hehheheh ...

jangan lupa like dan coment ya

thx

Cara membuat animasi berjalan di Blog

Malam sobat gimana nih Kabarnya? baik semua kan? pada kesempatan kali ini saya bakal kasih tau bagaimana cara membuat Animasi berjalan di blog, oke langsung aja ya, sahabat blogger.
Silahkan sobat ikuti langkah-langkahnya untuk membuat Foto dan Gambar Bergerak di Blog atau Cara Membuat Animasi Berjalan Di Bagian Bawah Blog adalah sebagai berikut ini:

1. Silahkan sobat >> "Masuk atau Login" ke blogger.com menggunakan akun sobat.
2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >>HTML/Javascript. Jangan di beri judul.
3. Kemudian silahkan sobat masukkan Kode Script di bawah ini ke dalam kotak Konten HTML/Javascript. Pilih salah satu kode saja yang sobat sukai.

1. Animasi Zombie Berjalan Loncat-Loncat

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left"scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i1093.photobucket.com/albums/i440/putraeka1/th_avatar2088630_11.gif?t=1295005006" style="cursor: pointer;" /></a></marquee></div>

2. Animasi Alien Berjalan

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left"scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i1217.photobucket.com/albums/dd384/TauFixers/MyIcon.png?t=1303003796" style="cursor: pointer;" /></a></marquee></div>

3. Animasi Naruto Berjalan Berubah-ubah

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/NarutoShippuudden.gif" style="cursor: pointer;" /></a></marquee></div>

4. Animasi Kiba Akamaru Naik Hewan Berlari

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/KibaAkamaru.gif" style="cursor: pointer;" /></a></marquee></div>

5. Animasi Sasuke Berlari

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://th217.photobucket.com/albums/cc54/ivandra79/Naruto/th_SASUKE_GIF.gif" style="cursor: pointer;" /></a></marquee></div>

6. Animasi Deidara Naik Burung

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif" style="cursor: pointer;" /></a></marquee></div>

7. Animasi Neji Strikes Mainkan Jurus

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/NejiStrikes.gif" style="cursor: pointer;" /></a></marquee></div>

8. Animasi Leecombo Beraksi

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="2">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Leecombo.gif" style="cursor: pointer;" /></a></marquee></div>

9. Animasi Jurus Andalan

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left"scrollamount="7">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343243.jpg" style="cursor: pointer;" /></a></marquee></div>

10. Animasi Kakashi

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee direction="right" behavior="left" scrollamount="2">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kakashi.gif" style="cursor: pointer;" /></a></marquee></div>

11. Animasi Jiraiya Summoned Naik kodok Menyembur Api

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left"scrollamount="2">
<a href="http://fransiscoallfriend.blogspot.com/2013/09/cara-membuat-animasi-berjalan-di-blog.html" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/JiraiyaSummoned.gif" style="cursor: pointer;" /></a></marquee></div>

gimana cukup banyak pilihannya kan? semoga berguna dan bermanfaat ya ( saya udah pernah mencobanya dan hasilnya bisa dilihat di blog saya) Jika ada yang tidak berfungsi, silakan coment dan dengan segara bakal bakal menggantinya dengan yang baru.
thx udah mau dateng ke Blog saya.
:)

Membuat Gradiasi Warna Linear Background

Pada kesempatan kali ini saya bakal Share " Membuat Gradiasi Warna Linear Background ".
Sering kita melihat berbagai macam efek yang dihasilkan dari suatu program pengolah gambar seperti Photoshop, Corel Draw, dan sebagainya. Salah satu fitur yang banyak digunakan adalah gradiasi. Contoh dari penggunaannya adalah terhadap pembuatan sebuah background, logo, banner, spanduk dan lainnya.

Bukan hanya digunakan pada kegiatan sehari-hari, untuk anda seorang designer tentu membuat tampilan situs atau blog yang rapih sudah merupakan hal yang harus dipenuhi. Dengan menggunakan efek ini, kita tidak perlu membuat sebuah background dengan gambar, tetapi hanya dengan mengedit kode CSS yang berlaku pada elemen Web tersebut.

 Tampilan suatu situs/blog akan sangat mempengaruhi kegiatan penjelajahan yang dilakukan oleh pengunjung. Semakin bagus design serta model yang digunakan, akan semakin disukai pengunjung.

Setelah pada tutorial sebelumnya kita mengetahui dan mempelajari Cara Mengganti Background Blog dengan Gambar, sekarang membahas ke topik berikutnya mengenai editing gradient efek. Berikut ini adalah panduan / tutorial praktis yang dapat membantu anda membuat sebuah paduan warna baik itu linear, radial, angel, oval, horizontal, vertical dengan mudah.

Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), Opera dan Google Chrome. Berikut adalah kode CSS3 untuk membuat efek gradiasi:

background: #29b8e5;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29b8e5', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#29b8e5), to(#ba5b0d));
background: -moz-linear-gradient(top, #29b8e5, #ba5b0d);

Untuk mendapatkan efek gradiasi yang lebih bervariasi sebenarnya anda juga bisa menambahkan property 'color-stop' untuk mengatur scale warna seperti yang terdapat pada Photoshop. Tetapi karena pengaturannya agak sulit, anda dapat memanfaatkan fasilitas dengan menggunakan tools yang ada pada CSS3 Gradient Generator.

Nanti akan ada kode yang muncul sesuai dengan pengaturan anda. Silahkan copy kode tersebut jika sudah selesai. Dan letakkan di bagian kode mana saja seperti body{background:..... dan seterusnya} atau lainnya.

Agar perubahan yang terjadi pada warna menjadi halus, contohnya anda dapat menggunakan kode script di bawah ini :

background: #b3dced; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzZGNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5YjhlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2UwZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to right,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-8 */

Paste kode diatas disamping atau dibawah kode body{........

Untuk kode lainnya seperti margin, padding,height, text decoration, height, color dan lainnya jangan dihapus. Yang anda hapus adalah kode background: sampai dengan pembatas titik koma ( ; )

Gimana Cukup mudahkan tidak terlalu sulit?
hhehheh ...
Slamat mencoba dan semoga berhasil.
Terima kasih udah berkunjung.

Cara membuat kotak komentar Facebook di Blog

Pada kali ini saya bakal Share kepada Para Blogger, cara Membuat kotak Komentar Facebook di blog. Nah loh apa hubungannya komentar di Blog dan Komentar pada facebook? Nih saya Jelasin dulu ya Sahabat Blogger.
Facebook memang sebagai Social Media sedangkan Blogger adalah Pembangun Blog dengan platform gratis. Hubungan pembuatan komentar Facebook di Blogger, bukan untuk media promosi di social media melainkan menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan facebook. Untuk cara pembuatan kotak komentar facebook ini cukup mudah dan 100% berhasil. Agar blog Anda lebih terkonektivitas dengan facebook, langkah pertama adalah dengan membuat aplikasi di facebook terlebih dahulu. Tetapi, bagi Anda yang hanya ingin mengarahkan kotak komentar sebagai Anda yang menjadi adminnya tidak perlu membuat aplikasi facebook ini.

Cara Membuat Aplikasi di Facebook :

• Login ke Facebook Anda.
• Silahkan klik link Pembuatan Aplikasi Facebook ini.
• Klik "Create New App"
• Masukkan Nama Aplikasi anda di "App Display Name" , seperti gambar diatas.
• Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".
• Masukkan kode yang tertera, apabila kode benar maka akan muncul tampilan berikut ini

Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu. Lalu Simpan. Catat nomor Aplikasi ID Anda, seperti yang ditunjukkan di gambar Facebook tersebut. Sampai disini anda telah selesai membuat plugin aplikasi facebook. Sekarang lanjut ke tahap pembuatan komentar facebook di blog.

Cara Membuat Kotak Komentar Facebook di Blog :

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML

2. Klik pada bidang kotak yang berisi kode-kode template anda, letakkan pointer dimana saja.

3. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F 

4. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

.comments-page { background-color: #00BFFF;} 

#blogger-comments-page { padding: 0px 5px; display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px;

cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}

5. Setelah itu cari lagi kode </head> kemudian letakkan kembali kode di bawah ini tepat di atas kode </head> :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

Ganti kata ID FB Anda dengan aplikasi facebook yang telah Anda buat tadi. Jika Anda tidak membuat aplikasi facebook, silahkan masukkan id facebook anda yang terlihat di browser. Contoh : http://facebook.com/pemakan.wortell/ masukkan pemakan.wortell saja.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>  .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by 
<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>
</div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Lalu, Klik Simpan Template dan lihat hasilnya. Jika Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.

Maka, cari kode ini <html dan ganti dengan kode di bawah ini :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Simpan Template Anda.

Huih ...
Akhirnya kelar juga Nge post yang 1 ini, cukup panjang ternyata hasilnya.
hheehhehe ....
Semoga Cara Membuat Kotak Komentar Facebook di Blogger ini dapat bermanfaat untuk Anda. Semoga Bermanfaat. Jika Ada permasalahan mengenai cara mengganti komentar facebook ini, silahkan berkomentar, jangan lupa di like juga ya,
Thx udah mau berkunjung