Home » » Tutorial Mempercantik Halaman Posting Dengan Spiler dan Scroll

Tutorial Mempercantik Halaman Posting Dengan Spiler dan Scroll

Written By mediana saputra on Tuesday, 27 November 2012 | 06:56

Bismillahirrohmanirrokhim ..

Sebelumnya Saya akan menginfokan tentang pergantian Nama Blogspot saya dan Alamat URLnya ..
Nama Blogspot dan URL lama :
- Kel4mbiT.BloGSpoT dengan alamat URL : g4lax1.blogspot.com

Nama Blogspot Dan URL Baru :
-Galaxi|Belajar Tutorial dengan alamat URL : galaxitutorial.blogspot.com

Ada banyak faktor yg menyebabkan pergantian dari nama dan alamat URL blogspot saya, tetapi saya tidak akan membahasnya disini .. [tidak penting .. hahaahaah]

Yuk .. dari pada saya ngelantur .. lebih baik ikutin tutor di bawah ini ...

"Tutorial Mempercantik Halaman Posting Dengan Spoiler atau dengan  Scroll"

saya akan menuliskan 2 artikel singkat,dimana dari ke 2 artikel tersebut hampir mempunyai manfaat yg sama .. yaitu untuk meringkas postingan/artikel kita .. caranya sangat mudah ,sobat tinggal masukan artkel mana yg mau di kasih spoiler atau scroll ..
untuk mempraktekan langsung silakan sobat menuju Halaman Posting sobat dengan jalan Click Entry baru " ..  Lihat Codenya Dibawah ini :

1. Code Script Spoiler untuk halaman posting

- Membuat Spoiler dengan isi teks

Untuk melihat file Click Spoiler
<div style="margin-bottom: 2px;">Untuk melihat file Click Spoiler<div style="margin-top: 5px; text-align: center;"><input value="Spoiler" style="margin-top: 5px; width: 60px; font-size: 10px;" 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 = 'Spoiler'; }" type="button"> </div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">isi file disini</div></div></div

Membuat Spoiler dengan isi gambar/image

Untuk melihat file Click Spoiler
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="Link gambar" border="0" alt="Post spoiler">
</div>

</div>

</div> 


- Memasang spoiler dengan isi Video
Untuk melihat file Click Spoiler


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="Link gambar" border="0" alt="Post spoiler">
</div>

2. Script Scroll untuk halaman posting

<div style="overflow:auto;width:450px;height:250px;padding:10px;border:1px solid #eee">isi file disini</div>


Ket : Ubah semua Code atau tulisan yg saya tandai dengan warna , sesuaikan dengan selera dan halaman posting sobat ..

sampai di sini dulu saya menuliskan artikel ini , semoga bermanfaat untuk kita semua ..

dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..








Share this article :

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Turorial Grapich Design and Blog Design - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger