Membuat Efek Hover Blockquote Blinking Bulb di Blog

Posted by Wahyu basofii on Sabtu, 08 Juni 2013

Sebelumnya Saya Mem-posting Artikel Tentang Salah satu Kontes Humor,dan Sialnya Artikel tersebut  ternyata tidak Ada Di Pencarian Google Alias Terkena Google Sanbox, Mungkin Karena saya Terlalu berlebihan optimasi seo sampai 100% di chkme.com. Tapi Alhamdulillah sekarang sudah Muncul Lagi..hahaha

Tapi yang Kita bahas kali ini bukan mengenai google sanbox, melainkan tentang Cara Membuat/Memasang Efek Hover Blockquote Blinking Bulb di Postingan Blog yang Pada setiap Blog ber-Niche Tutorial, pasti sangat diperlukan karena Memuat Kode-kode yang banyak.

Wahyu only

Sebenarnya sih,Blockquote di blogger sendiri sudah ada pada blog yang masih menggunakan template standar atau template asli bawaan blogger. Namun blockquote pada template yang masih default blogger tersebut hanya mamberikan fasilitas blockquote yang masih murni atau bisa dikatakan blockquote sederhana, karena masih standar dan belum memiliki efek apapun pada blockquote tersebut.dan kali ini saya  Untuk lebih jelasnya, berikut adalah bagaimana Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog :

1. Login ke blogger.
2. Kemudian klik Template >> Edit HTML
3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Setelah ketemu, copy kode dibawah ini kemudian letakkan tepat di atas atau sebelum kode ]]></b:skin>

blockquote {
background: #000 url(http://3.bp.blogspot.com/-8GhtdkYj2DU/UbMiHpbdN7I/AAAAAAAABSA/yHFP46LAvN0/s1600/Blockquote-wahyu-only-gelap.jpg) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font:Courier new;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(http://1.bp.blogspot.com/-M1KiMuTz81c/UbMiHhVUJHI/AAAAAAAABSE/4b6LV8z_n3A/s1600/Blockquote-wahyu-only-terang.jpg) no-repeat right bottom ;
color:#00ff00;
}

blockquote p {
margin: 0;
padding-top:10px;
}

5. Simpan Template.

Tutorial diatas Adalah untuk membuat efek pada blockquote akan menyala saat di sorot mouse layaknya seperti lampu didalam ruangan dan akan terlihat gelap jika mouse diarahkan menjauh dari blockquote.
dan untuk memunculkan pada teks yang ingin di jadikan kedalam blockquote tinggal di block saja teks tersebut kemudian klik tombol Quote pada bagian toolbar kolom posting.

Wahyu only

Apabila warna blockquot tersebut kurang sesuai dengan warna blog yang anda gunakan, maka silahkan custom sendiri. Anda dapat menggunakan efek yang sama dengan mengubah background, warna font atau warna border, dll.

Jadi Anda dapat dengan mudah menyesuaikan jenis font dan warna border serta warna background untuk menciptakan mouse efek hover. Anda dapat merubah menggunakan background lain jika anda inginkan dengan cara mengganti kedua link background, Background di link berwarna merah muncul pada mouse hover dan background kedua di link biru muncul ketika mouse menjauh dari blockquote tersebut.

Nah, Mudah bukan sobat,, Demikian ulasan saya tentang Cara Membuat Efek Hover Blockquote Blinking Bulb di Blog, silahkan dicoba di Blog sobat,Tapi sebelum itu Tinggalkan Jejak dulu ya...

Judul : Membuat Efek Hover Blockquote Blinking Bulb di Blog
Label :
URL : http://wahyu-only.blogspot.com/2013/06/membuat-efek-hover-blokquot-blinking-Bulb-di-Postingan-Blog.html

21 komentar:

  1. Mantab gan. Izin coba tutor diatas

    BalasHapus
  2. wah keren mas.. boleh nih kalau di modifikasi

    BalasHapus
    Balasan
    1. iya,silahkan bro....makasih kujunganya :)

      Hapus
  3. Sob, mau tanya,, kok template saya tidak bisa dipasang blackquote ya sob,, kalau saya cari kode blackquote gak ketemu, mohon penjelasannya ya sob,,,
    thankz..

    BalasHapus
    Balasan
    1. Buka dulu bro posnya.yang compose terus block teks yang mau dikasih blockquote dan klik tanda 'kutip' yang terdapat pada menu dipos..
      kalo sudah,klik pratinjau untuk melihat blockquote.
      .

      Hapus
    2. Udah bro, tapi tetep aja gak bisa, mungkin template saya tidak mensupport kali bro....

      Hapus
  4. Wuih mantap sob, nanti di coba. :)

    BalasHapus
  5. asyikkk nih mas...akan sy coba nanti...soale gi bw pke hp nih...
    trims ya :)

    BalasHapus
    Balasan
    1. sama mas..ane juga sering nge blog pake hp

      Hapus
  6. kerennnnn gan... boleh lah, izin coba :D

    BalasHapus
  7. tanks gan
    from http://legiokta-ft.blogspot.com

    BalasHapus
  8. keren.. makasih sharenya :) ,. baru coba yng blink blinknya :D .

    BalasHapus
  9. kalo ini boleh lah. tapi yg paling saya gak suka itu banyak blogger yg pake teknik cloacking untuk ningkatin adsense-nya tapi dg maksa, tiap klik sesuatu di blognya eh ternyata ada link adsense yg muncul pop up. banyak blogger indonesia udah 'gila' (dalam tanda kutip) karena seo dan adsense. berharap dapat banyak duit dg cara2 gak fair.

    BalasHapus
    Balasan
    1. hmm..maksudnya gimana ya..saya gk ngerti maksud sobat -_-

      kalo maksud sobat mengkritik blog ini boleh2 saja..tapi asal anda tahu,ketika ada pop up,klik cloacking itu bukan saya yang memasang,,,karena semua itu dari pihak iklan sendiri seperti bidvertiser dan chitika diblog ini..

      Hapus
  10. Terimakasih ni tutorialnya, mau disimpan dulu

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter