Rabu, 18 Mei 2016

Cara Membuat Menu Show Hide Pada Postingan Blogger

Hy sobat jumpa lagi dengan abang Mhiden ,,, Kali ini saya akan posting tentang " cara membuat menu Show Hide Pada Postingan Bloger " .. Sering kali kita memposting dengan script atau text yang terlalu panjang , dan sungguh tidak enak untuk dilihat  ... maka dari itu , solusi yang palig tepat adalah membuat menu show hided pada postingan blog adalah cara yang paling ampuh dan efektif....



Ok langsung saja kita buat ...
Sebelum membuatnya , saya akan berikan sedikit contohnya ., alias satu contoh :-P ...


ISI DENGAN POSTINGAN KK YANG AKAN DI HIDE SHOW

Ok langsung saja kita mulai ..

  • siapkan gado - gado sebagai cemilan :-D  biar nggak tegang .
  • login keblogger sobat , kalau kalian tidak tahu , langsung klik saja disini .
  • setelah masik diblogger silahkan klik nama blogger sobat . contoh.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgX0I43WTysICQ9GmDvZPKQS8MH-cw8mn0BdFoMgUvGEhp9-aoPNDX3Xse9wQzzv2d9QWQsrh-pEW_t47IhaFBkAbhDZgrZH_aYdqvaagOerBMqC4kqy6tUd3mtxyNgV6VTopxdr-KpQ/s1600/Blogger+dasboard.png

  • setelah masuk di dashboard blogger sobat , Cari tulisan "Entri Baru", lalu klik.

  • Setelah Di klik , akan muncul tampilan sebagai berikut ,


  • Pada kotak yang berwarna merah tuliskan judul postingan sobat ,
  • Pada kotak yang berwarna biru , adalah tempat untuk memasukkan script yang akan kita masukkan nanti , untuk kotak yang berwarna hijau , adalah tempat memulai menulis postingan dll,
  • Sekarang klik kotak yang berwarna biru tadi , kemudian masukkan script berikut ; 
 <div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;"></span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="margin: 0px; padding: 0px; width: 65px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI DENGAN POSTINGAN KK YANG AKAN DI HIDE SHOW
</div></div>
</div>

  • Selanjutnya sobat klik tanda BUKA diatas ini ,, Nanti akan muncul script , copy scritp tersebut , kemudian patekan dipostingan sebagai code HTML .. Nanti akan tampil seperti berikut


KETERANGAN
Ganti code script yang berwarna merah , biru dan hijau sesuka kalian ..

Sekian tutorial kali ini , lebih dan kurangnya mohon dimaafkan , saya aditya , wassallam . :-D..


OH IYAA AKULUPA ,, JANGAN LUPA TINGGALKAN LIKE DAN COMET YAHH ,,, SATU LIKE DAN SATU COMENT SANGAT BERARTI BAGI BLOG INI ,,, TRIMAKASIH SEBLUMNYA ... SEE YOU LETTHER :-D

Tidak ada komentar:
Write komentar