Cara Membuat Efek Shadow Terbaru Terkeren

Tutorial Blogger, Kesehatan, Islami

  • HOME
  • DAFTAR ISI
  • BLOGGER
  • TEMPLATE
  • TIPS TRIK
  • SEO
  • DESAIN BLOG
  • WIDGET
  • KESEHATAN
Home Blogger Desain Blog Tips And Trik Widget Cara Membuat Efek Shadow Terbaru Terkeren

Cara Membuat Efek Shadow Terbaru Terkeren

Alhamdulillah saya bisa posting artikel lagi , saya sangat mengucapkan terimakasih sekali pada Allah SWT yang masih memberi saya peluang untuk memposting artikel. Kalau yang artikel kemarin saya bagikan setelah listriknya mati , sekarang saya baru akan memberikan artikel setelah ada tamu dari tadi di rumah saya (hehehe) , yang kemarin saya bagikan yaitu berjudul Membuat Blogroll Bergerak Paling Keren yang bertujuan untuk menambahkan link teman atau sahabat kedalam widget atau postingan blog sobat.

Cara Membuat Efek Shadow Terbaru Terkeren ini sendiri sudah banyak para blogger lainnya yang membagikannya , tapi saya ganti judul menjadi judul seperti diatas itu.

Contohya sobat bisa lihat gambar dibawah ini dan begitulah contoh Efek Shadow Terbaru Terkeren , hehehe
Contoh Efek Shadow Terbaru Terkeren
Sobat mau membuat efek shadow seperti diatas ??? silahkan sobat ikuti cara-caranya berikut ini,mudah kok:

1. Login ke Blogger Sobat
2. Klik Template > Edit HTML
3. Sobat cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)
4. Taruh kode berikut ini diatas kode ]]></b:skin> tadi
#shadow2{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLq71vwOwhIHwJGzOvFbXXK4ZK2B9WZyzfJo-rTXMmOWrUEDLAa9yiT1bkiZjhb8uCHcdqQxYQo3h3g698tWDEEJorgii1QrcGF3ulNT1lp9_kwjHDXxMlNuM5YZN72s7mUMGqvGi_DLI/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent; height: 20px; width: 300px; } Sumber : http://ahmad-manarul.blogspot.com/2013/05/membuat-efek-shadow-di-widget-sidebar.html#ixzz2UZx0X8dX
5.Simpan template sobat.
6. Bila sobat sudah menyimpan templatenya , sekarang yang harus kita lakukan adalah memilih widget apa yang akan kita berikan efek shadownya , contoh kita menggunakan artikel terbaru sebagai contohnya .
Maka sobat cari kata artikel terbaru (Gunakan ctrl + f untuk mempercepat) maka kurang lebih bentuk kodenya seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
7. Sobat tambahkan kode <div style='overflow:auto; width:auto;height:200px;'> dan </div> dan <div id='shadow2'/>. Maka penampakan kodenya kira-kira menjadi seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div style='overflow:auto; width:auto;height:200px;'>
<div class='widget-content'>
    <data:content/>
  </div></div><div id='shadow2'/>
8. Lalu simpan template Sobat dan lihat hasilnya.

Bila sobat berhasil menerapkan cara diatas maka kurang lebih widget sobat mempunyai efek shadow keren dibawahnya. Mudah kan sob ???? kalau kita berusaha pasti mudah kok , hehehe

Demikianlah postingan saya kali ini tentang Cara Membuat Efek Shadow Terbaru Terkeren . Seperti biasanya sob , semoga artikel ini berguna dan bermanfaat bagi sobat semua. Bila ada tutur kata atau pengucapan saya yang tidak enak , mohon dimaafkan , Wassalamualaikum
Tweet

6 Responses to " Cara Membuat Efek Shadow Terbaru Terkeren "

  1. Boku no Blog29 Mei 2013 pukul 21.22

    Terima kasih tutornya, keren nih dengan efek shadow, ijin save tutornya sobat.

    BalasHapus
    Balasan
    1. Anonim30 Mei 2013 pukul 06.44

      silahkan di coba...

      Hapus
      Balasan
        Balas
    2. Balas
  2. Unknown5 Juni 2013 pukul 15.01

    Tak coba dlu ok gan ..

    BalasHapus
    Balasan
    1. Anonim5 Juni 2013 pukul 15.17

      silahkan gan..

      Hapus
      Balasan
        Balas
    2. Balas
  3. softwikia26 Juli 2013 pukul 01.26

    coba dulu nice info :)

    BalasHapus
    Balasan
    1. Anonim26 Juli 2013 pukul 04.41

      oke sob :)

      Hapus
      Balasan
        Balas
    2. Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar ( Atom )

Sering Dibaca

  • planet ajaib

    Cara Membedakan Tokek Jantan Dan Tokek Betina

  • planet ajaib

    5 Pembalap GP Paling Legendaris di Dunia

  • planet ajaib

    Cara Membedakan Raket Yonex Asli Dengan Yonex Palsu

  • planet ajaib

    5 Kucing Paling Mahal di Dunia

  • planet ajaib

    10 Cara Kreatif Mengungkapkan Rasa Cinta

Site Info

Blogroll

  • Harga Motor Yamaha Honda
  • Cek Resi JNE
  • Katalog Carrefour
  • Kata Kata Mutiara

Sahabat

Label

Aneh (13) Badminton (1) Bisnis (3) Blogger (67) Cerita (3) Cinta (3) Desain Blog (14) Directory (1) Fakta Menarik (2) Fenomena (2) gadget (1) Hewan (1) Hoby (2) Information (8) Internet (1) Iseng (12) Kata Kata Mutiara (1) Kecantika (1) Kecantikan (1) Kesehatan (45) Komputer (2) Manfaat (5) Olahraga (1) Pengetahuan (6) Resep (3) SEO (26) Software (1) Teknologi (3) Template (12) Tips And Trik (57) Tool Blog (3) Widget (18)
Privacy Police | Contact| About Me
Support : sertifikasi crane
isnpeksi dan sertifikasi
Copyright © 2013 Planet Ajaib - All Rights Reserved
Design by jasa sertifikasi crane
Powered by Blogger