Hai Sobat, lama rasanya udah ga bikin postingan, terkadang begitulah, hobbi males kalo kambuh begitu sudah...hehehee.
Oyawww, berhubung kemarin ada temen chat di FB nanyain, gimana cara bikin gambar(blog) yg di sudut kiri atas itu mas(maksudnya vertical sliding info panel gitu lhooohhh), yo wis lah, saya coba bikin postingannya aja. Profil slide panel sebelah kiri atas, contoh bisa dilihat pada blog Gubug Rantau, artikel saya ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery dan juga dari berbagai sumber, terutama dari blog" Sobat yg udah pada senior,dan kemudian saya kasih sedikit sentuhan iseng" an coba",sehingga menjadi seperti yang sekarang ada pada blog saya. saya mencoba membuat artikel ini sesederhana mungkin, hal ini agar mudah dipahami bagaimana cara kerja dari sliding panel, sehingga secara perlahan kita bisa sambil belajar melakukan modifikasi pada bagian isi dari sliding panel tersebut.
Yo wis lah Sob, kelamaan dongengnya, langsung ke TKP aja yuuuukkk....>>>
Langkah Pertama
Login ke Blogger
Langkah Kedua
Masuk ke "Tata Letak - Edit HTML"
Langkah Ketiga
Klik "Expand Template Widget"
Langkah Empat
Cari kode di bawah ini:
]]></skin>
Langkah Kelima
Masukan (copy paste) kode dibawah ini diatas kode pada langkah ke empat:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<div class='panel'>
<h3>WELLCOME</h3>
<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>A Little Something About Me</h3>
<img height='73px' src='http://i1209.photobucket.com/albums/cc398/johantkurniawan/My%20Village/Rantau.jpg' width='73px'/>
<p>Nama saya Johant,saya hanya manusia biasa, mungkin sama sperti Anda, sekarang sayapun masih menjalani proses kehidupan, dan takdir sekarang membawa saya ke Papua, alias MERANTAU, BERDOA dan Berharap semoga bisa menjadi manusia yang lebih baik lagi, sesuai dengan Kehendak NYA.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://johantkelana.blogspot.com/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/johantkelana' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//johant.de.rantau' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/johant' title='friendster'>Friendster</a></li>
<li><a href='http://johantrantau.blogspot.com/' title='plurk'>Gubuk Rantau
</a></li>
<li><a href='http://johantkelana.blogspot.com/' title='plurk'>Jalan Hidup</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Me</a>
Note: script pada langkah 9, baik kode maupun tulisan yang berwarna hijau tinggal diedit & disesuaikan dengan blog Sobat, karena pada dasarnya skript yang sudah ada diatas, masih bisa di modifikasi untuk menghasilkan tampilan yang sesuai dengan selera kita masing". Dan semua tergantung pada ketelitian dan kesabaran Sobat, untuk bisa mendapatkan hasil yang maksimal.
Langkah 10
Silahkan mencoba Preview blog terlebih dahulu
Langkah 11
Jika hasilnya sudah dirasa cukup, silahkan Sobat klik SIMPAN TEMPLATE.
Langkah 10
Silahkan mencoba Preview blog terlebih dahulu
Langkah 11
Jika hasilnya sudah dirasa cukup, silahkan Sobat klik SIMPAN TEMPLATE.
0 komentar:
Posting Komentar