The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

Slide Panel For Blog

Trik Slide Panel ini Bisa anda pasang di Sidebar dan area Postingan Sobat,Tips Ini Untuk Menghemat Tempat di Blog Kita,,
Slide Panel Fungsinya Untuk Menyembunyikan Konten yang ada di dalamnya maka jika kita klik akan keluar kontenya..




ikuti langkah-langkah berikut ini untuk cara pembuatannya:

1.Login Ke Blogger
2.Pada Dasbor Klik Tata Letak ->> Edit Html
3.Kemudian Letakan Code Berikut ini di atas Code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

-Copas Lagi Code Berikut ini dan letakan di bawah code di atas

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.btn-slide&quot;).click(function(){
$(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
});
});
</script>

4.Kemudian masukan Code Css Berikut di atas Code ]]></b:skin>

#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;width:280px;height:200px;display: none;}

.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(http://1.bp.blogspot.com/_QeR8kbaWhLU/S-YpuL_4-qI/AAAAAAAAAvY/oCc1nsIsZSg/s1600/btn-slide.gif) no-repeat center top;}

.btn-slide {background: url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S-Ypuu53xSI/AAAAAAAAAvg/v_4rKz5mEkc/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}

.active {background-position: right 12px;}

-Simpan Template

5.Langkah Terakhir Copas Code Berikut ini Dan letakan Di tempat Yang anda inginkan (Postingan Or Sidebar)

<div id="panel" style="font-weight:bold;">

LETAKKAN CONTENT ANDA DISINI

</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>

Ket:

-Width:28px - Height:200px; adalah Lebar dan tinggi area content
-Width:300px; adalah lebar border pada code class slide
-Slide Panel adalah tombol tulisan pada slide

6.Jika Sudah Klik Simpan
Sumber Artikel Jquery Tutorial For Designers

ARTIKEL TERKAIT



19 komentar:

Bang Koko mengatakan...

Wahh Bisa Menghemat Ruang Ya sob....

Nice Post.......:)

Tutorial Edit Blog mengatakan...

Ok Sob makasih tas infonya......nice post

Blogger Manado mengatakan...

Perlu di coba nich kayaknya tips ini
sukses trus sobat...

Blog Tutorial | Berbagi Untuk Semua mengatakan...

di save dulu bro,thx

Teknologi Komputer mengatakan...

terima kasih atas saranya.
salam kenal/
di tunggu kunjungan balik dan komentarnya di blog saya ya :)

Penghuni 60 mengatakan...

saya udh liat demonya keren bgt tuh...
tp bs utk template klasik gak nih?
coz aku pake template klasik

zoeL mengatakan...

wah mantep nih gan.. kayanya perlu dicoba..

Dhana/戴安娜 mengatakan...

salam sahabat
ehm bagus jadi tampilan lebih menarik.good luck n maaf telat

Botzzz mengatakan...

@All : Makasih ya atas kunjungannya.......:)

Koko Bota mengatakan...

mampir di mlm minggu.....

semoga sukses trus sobat,nice post

tawangakal mengatakan...

Muantap bangeeettt...!!!

bataraemas.com mengatakan...

Contohnya mana bos

ianHinata mengatakan...

sob klo mau tukeran link gmana caranya??

ianHinata mengatakan...

dAH DI COBA sOB... KEREN.. PI FUNGSI KHUSUNYA BUAT APA YA?? HEHE.
buat Blogger yang lain...maen2 dong ke blog ane mau minta saran neh..
btw thanx sob..

Rizky2009 mengatakan...

sementara aq koleksi dulu sob triknya, mantab euy

Botzzz mengatakan...

@ianhinata:untuk sementara saya blm menyediakan tempat untuk tukar link,,maklum bos Blog baru hehhehe..

@Rizky: makasih ya mas dah mampir balik.....

khusus buat saya mengatakan...

knjungtan balik.......

DuniaPiyen mengatakan...

wah mantap tutorialnya.... bisa buat menghemat tempat

Rievay bloodthirsty mengatakan...

sperti permintaanmu sob..aku mampir di tempatmu..tempat ini nyaman sekali.

Posting Komentar