Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, October 11, 2013

cara membuat widget spoiler background style

Cara membuat widget spoiler background style ini tidak rumit, widget spoiler background style ini memiliki tampilan yang menarik, dan anda layak untuk mencobanya. Widget spoiler background style ini valid HTML 5 dan memiliki kode script yang ringan sehingga tidak mempengaruhi loading halaman blog kesayangan anda. Buat para bloger mania yang menyajikan berbagai khususnya berbagai kode pada halaman blog kesayangannya pemasangan widget spoiler background style ini sangat cocok. Bila anda tertarik dengan widget spoiler background style silahkan simak penjelasan dibawah ini, jangan lupa lihat DEMO pada spoiler " CODE CSS " dibawah ini langsung saja menuju TKP.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget Spoiler Background Style
By : Rivai Silaban | Blog Design
Update : Jumat, 11 Oktober 2013
******************************************/
.BDRS_spoiler{
border: 2px solid #666;
border-bottom:none;
border-radius: 15px 15px 0 0;
color:#FFFFFF;
cursor:pointer;
font-family:Georgia;
font-weight:bold;
text-shadow:2px 1px 2px #000;
width:100%;
background-color: #999999;
font-size: 14px;
}
.BDRS_spoiler:hover{
background-color: #666666;
color: #FFFFFF;
box-shadow: 0 1px 4px #000 inset;
}
/*** Blog Design CSS and ***/


Keterangan : Tampilan Spoiler diatas ini merupakan DEMO dari tutorial kali ini, hanya tombol spoiler yang berbeda, silahkan anda edit CSSnya sesuai dengan selera atau warna tampilan template anda .


http://2.bp.blogspot.com/-Z0NQ5NxNkmE/UjSXktAKEEI/AAAAAAAAByM/AGe4VEHPfJw/s1600/bg.png bg 1
http://1.bp.blogspot.com/-3ilOkVXlxTc/UjSXlK4UthI/AAAAAAAAByU/gGDMiS7rA7c/s1600/black.png bg 2
http://4.bp.blogspot.com/-dUEE-YxXT_I/UjSXneyMeRI/AAAAAAAAByc/lfli35wnyFM/s1600/blue.png bg 3
http://4.bp.blogspot.com/-YWTfqFp74cI/UjSXou4_s2I/AAAAAAAAByk/NeE3cahrYjY/s1600/brown.png bg 4
http://4.bp.blogspot.com/-aeH0u8VIoCY/UjSXt3RsHPI/AAAAAAAABy0/ue5qqcWLNBM/s1600/green.png bg 5

Install dihalaman postingan


  • Untuk pemasangan code tag SPOILER ini tergantung dengan kebutuhan halaman blog anda,
  • Untuk memasang dihalaman postingan artikel , anda hanya memasukkan SPOILER code CSS dan tag html dibawah ini pada artikel yang anda posting.
  • Masuk ke " Post "
  • Kemudian buat " Entri baru "
  • Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna BIRU pada kode yang ada didalam spoiler dibawah dengan tulisan kode html , script atau CSS anda,Untuk HTML atau Scriptnya silahkan konvers dulu.
  • Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
  • Setelah benar benar sudah sempurna silahkan klik " publikasikan "


<!-- BDRS code - start -->
<div style="margin: 2px;text-align:center" >
<div style="margin-bottom: 0px;"><input type="button" class="BD_spoler" style="margin: 0px; padding: 0px; width: 200px; font-size: large; text-align: center;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close Code'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open Code Here !!'; }" value="Open Code Here !!"/></div>
<div style="border: 1px inset; margin: 0px; padding: 4px; background-color: #EBEBEB; font-family: 'Courier New', Courier, monospace; font-size: 12px;box-shadow:0 0 4px #111 inset;">
<div style="display: none;text-align: left;padding:0 10px;margin:-10px 0;line-height: 20px;background: url(http://1.bp.blogspot.com/-EjZYl8GZToA/UjSXqvEsodI/AAAAAAAABys/OXxiihI3C4w/s1600/code_bg.png);"><p>

Kode Anda Disini


</p></div></div></div>
<!-- BDRS code - start -->


Keterangan Code
  • Tulisan kode warna BIRU Merupakan isi dari spoiler, baik itu berupa sebuah code ataupun tulisan.
  • Tulisan warna MERAH merupakan link dari background spoiler tersebut, bila anda ingin mengganti backgroundnya sesuai selera anda, silahkan ganti dengan link gambar pada tabel link gambar diatas.

Kesimpulan

Widget Spoiler background style ini kebanyakan digunakan hanya untuk keperluan tutorial yang bersangkutan dengan kode kode html maupun script.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget Spoiler background style
Jumat, 11 Oktober 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 11:05 AM

2 comments :

  1. pertamax nya nih mas .. tapi masih belum paham cara pengunaannya ..bisa kasih demonya gak mas..

    ReplyDelete
    Replies
    1. masa sih...
      Untuk Demonya lihat saja kode CSS diatas, kan backgroundnya beda..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog