Skip to main content
    BELANJA BERGARANSI DI SHOPEE.         HARGA TERJANGKAU DI SHOPEE.         SHOPEE MALL.                            

Cara Membuat Kotak Spoiler di Blog

Spoiler - Chast Media - Blogger Tutorial.
Membuat Kotak Spoiler di blog dengan Buka Tutup.
Kotak spoiler adalah untuk menyembunyikan tulisan panjang.
Supaya tampilan blog tidak terlalu panjang.
Bisa juga menyembunyikan gambar di dalam spoiler.
Agar lebih menarik tampilan blog.
Intinya untuk persingkat sekripsi blog.
Kadang - kadang sangat di perlukan didalam blog.

Buka kotak spoilernya untuk copy kode.

MODEL PERTAMA :
( <!---CHAST Kotak Spoiler--->
<div style="margin-bottom: 2px;">
<div style="margin-top: 2px; text-align: left;">
<input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Kode'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="KODE" /> </div>
<div style="background-color: transparent; border-bottom: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 1px solid transparent; margin: 0px; padding: 6px;">
<div style="display: none;">
( Tulis dekripsi disini )
</div>
</div>
</div> )

MODEL KEDUA :
<!---CHAST Kotak Spoiler--->
<br />
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>KODE </b>: <input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Tulis dekripsi disini
<img border="0" /></div>
</div>
</div> 

 * CATATAN :
Warna BIRU adalah Judul.
* Demikian semoga bermanfaat...

  BLOG TUTORIALS

  Semoga Bermanfaat...
     POPULER



Popular posts from this blog

Cara Membuat Tabel Kolom Postingan Blog

Tabel Kolom - Chast Media - Blogger Tutorial. Cara membuat Tabel di Blog hanya perlu beberapa kode html saja. Akan menggunakan dalam beberapa pembuatan tabel, berikut kode-kode html. Membuatnya sangat lah mudah. hanya sedikit menambahkan atau menyisipkan kode script ke artikel yang ingin diberikan kotak atau tabel kolom. Langka Berikut : 1. Entri Postingan " News Post " 2. Masukan Script Ke HTML. TABEL KOLOM : Kolom A1 Kolom B1 Kolom C1 Kolom D1 Kolom A2-B2 Kolom C2 Kolom D2 Kolom A3-B3 Kolom C3-D3 Kolom A4-C4 Kolom D4 Kolom A5-D5 KODE SCRIPT : <style type="text/css"><!--td {border: 2px solid transparent;}br {mso-data-placement:same-cell;}--></style> <table border="3" cellpadding="0" cellspacing="0" dir="ltr" style="background-color: #ff0000; border-collapse: collapse; border: none; color: #000000; font-size: 12pt; table-layout: fixed; text-align: center;
Read more

Cara Mengganti Icon Favicon di Blogger

Favicon - Chast Media - Blogger Tutorial. Setiap Blog pasti memiliki Lambang icon favicon tersendiri. Icon favicon berfungsi sebagai identitas atau address blog. Favicon adalah logo kecil atau biasa disebut icon blog yang terletak di pojok kiri atas tab browser. Secara umum blog akan tampil icon logo “B” berarti blogger, logo tersebut adalah simbol bawaan ketika mendaftar di blogger dan tidak akan berubah jika tidak merubahnya sendiri. Memang tidak wajib harus merubah icon favicon, hanya saja untuk terlihat lebih menarik dan profesional. Berikut ini adalah tahapan membuat Favicon * Langkah Pertama : 1. Siapkan logo atau gambar berbentuk persegi (panjang dan lebar sama). 2. Ukuran foto atau gambar maksimal 100 x 100 pixel dan ukuranya tidak boleh lebih dari 100 kb. 3. Simpan dengan format JPG, GIF, atau PNG. * Cara Pertama : 1. Masuk ke halaman dasboard blogger. 2. Masuk ke halaman tata letak. 3. Klik edit pada Favicon (lihat bagian kiri atas) akan terbuka sebuah jendel
Read more

Cara Membuat Background Gambar di Belakang Tulisan Blog

Background di Belakang Tulisan - Chast Media - Blogger Tutorial. Banyak cara untuk menata dan mempercantik tampilan blog. Salah satunya adalah dengan menambahkan background gambar yang terletak tepat di belakang postingan atau tulisan yang kita buat. Tampilan blog akan lebih terlihat unik dan menarik. Mungkin juga memang di butuhkan background gambar untuk sebuah postingan. Untuk membuatnya ikuti langka berikut : Login ke akun Blogger Pilih Pos >> Entri Baru Copy-paste kode di bawah ini di mode HTML (bukan Compose) <div style="padding: 5px; background-image: url( http://alamat_gambar.jpg ); background-repeat: repeat; background-position: center;"> Tulis artikel postingan disini... </div> Tulis artikel postingan di mode Compose  Publikasikan.  Selesai dan lihat hasilnya. KETERANGAN:  - Ganti tulisan berwarna Merah dengan alamat URL gambar yang diinginkan. - Ganti tulisan berwarna Biru dengan artikel postingan tulisan atau gamba
Read more

Cara Membuat Kotak Script Postingan Blog

Kotak Script - Chast Media - Blogger Tutorial. Dalam buat post blog tentu sebagai blogger ingin menampilkan halaman blognya menarik. Terkadang disaat ingin menyisipkan sesuatu didalam postingan seperti memasang text link, memasang script HTML, dan lain sebagainya. Namun itu semua tidak bisa didapatkan secara otomatis dari blogspot, maka caranya yaitu dengan kita membuat sendiri. Bagi yang masih bingung dan tidak tahu caranya, blog ini akan membagikan cara mudah membuat kotak script pada postingan blog. Sebelum ke langkah-langkah pemasangannya, akan diberikan beberapa kriteria atau tampilan kotaknya sesuai style nya masing-masing. Lihat contoh dibawah ini. 1. Item Minimalis <div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;"> Isi Post </div> 2. Item Left Border <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #eaeaea; border-left: 5px solid #ff3300; border-radius
Read more

Cara Ganti Alamat Judul di Address Bar

Judul Address - Chast Media - Blogger Tutorial. Untuk mengganti alamat judul tampil yang di atas samping favicon. Kadang kadang ada yang maunya tampil nama website saja Biasanya tampilan asli hanya judul postingan  Memang tergantungan keinginan masing - masing. Maunya yang mana lebih bagus. Untuk mengganti tidak begitu sulit, Hanya menambahkan kode saja. Ikuti langka - langka berikut ini : Masuk ke Account Blogger Klik Theme, klik edit HTML Cari kode <head> Letakan kode dibawah tepat di atas kode <head> Ganti tulisan warna merah sesuai Anda... <script type='text/javascript'>  document.title = " Judul Tampil "; </script> * Demikian semoga bermanfaat...
Read more

Membuat Menu Drop Down Di Blogspot

Menu Dropdown - Chast Media - Blogger Tutorial. Drop Down Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain. Menu dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika ingin menerapkan menubar ini di blog. Silahkan ikuti tutorialnya. Menu Bar Multi Dropdown Versi 1 1. Buka akun blogger anda. 2. Pilih menu template > klik Edit Html 3. Lalu letakan kode css di bawah ini tepat di atas kode  ]]></b:skin>  atau  </style> KODE :  nav {     display: block;     margin-top: 100px;     background: #374147; } .menu {     display: block; } .menu li {     display: inline-block;     position: relative;     z-index:
Read more

Cara Memasukan Halaman Web Lain ke Postingan

Halaman Web - Chast Media - Blogger Tutorial. Meletakan halaman website lain ke postingan. Kadang - kadang ada web yang di kunci, Jadi kemungkinan tidak bisa ditampilkan di postingan. Untuk mencobanya bisa pakai alamat sendiri. Kalau ada beberapa blog yang kita miliki. Contohnya kalau miliki beberapa blog berbeda, dari blog A, B, C, kita mau tampil di blog A saja. Jadi yang diperlukan hanya menambah kode javascript  Posisi meletakan bisa di postingan. atau di Sidebar dan footer sesuai posisi yang di inginkan. Silakan mencobanya... Letakan di Tata Letak atau News Post Buka kotak spoiler untuk copy paste : KODE : <iframe align="middle" frameborder="yes" height=" 190 " name="frame1" scrolling="auto" src=" http://chastonline.blogspot.co.id /" style="border: 1px solid;" width=" 98 %"></iframe> * CATATAN : Ganti alamat yang bertulisan warna merah . Mungkin ukuran juga harus
Read more

  CHAST SHOP

  Selamat Belanja...

  LOTTERY RESULTS
  Sukses Selalu...