Hi.. friends Memenuhi permintaan Teman Blogger oktri.co.cc mengenai info profil slide panel sebelah kanan, contoh dari bisa dilihat contoh pada blog oktridarmadi, Artikel ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery yang kemudian diberikan sedikit sentuhan oleh saya sehingga menjadi seperti yang sekarang digunakan. Artikel kali ini masih berbasis jQuery seperti efek-efek yang lainnya, makanya bagi teman-teman blogger yang mengikuti artikel demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel
Oke langsung saja berikut ini :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:
.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}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
Langkah 8
<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>
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<div class='panel'>
<h3>Selamat Datang Di OKTRI BLOG</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>Sekilas tentang penulis</h3>
<img height='73px' src='http://i634.photobucket.com/albums/uu66/oktri_2009/o-3Jqh3BlhR3srjirD0J-A.jpg' width='73px'/>
<p>Nama saya Oktri darmadi,saya seorang Mahsiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://oktridarmadi.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/oktridarmadi' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//oktri.darmadi' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>
<li><a href='http://oktridarmadi.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://www.oktri.co.cc/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Oktri</a>
Langkah 10
Simpan Template dan Preview blog...
ni info bro tipsnya!! sebah undangan undangan nih bro di forumku skalin meramaikan blogger forum dan bisa link back gratis setelah postingan
BalasHapusSalam ukhuwah untuk sobat bloger, oke mas tips baru lagi nih...bisa dicoba deh...manteb bisa tambah keran lagi nih blog,sipsh..maksih untuk artikelnya mas sukses selalu
BalasHapuswah kak bagus tuh...tapi lebih jelas donk ka..
BalasHapusjadi di kasih keterangan..tukan scripnya warnanya merah semua jadi agak" bingung kak?
kapan kapan saya coba sob, massih males edit template
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus@arbitter salam blogger,,,
BalasHapus@q ingin bisa mksh ya mas...salam ukhuwah,terima kasih kemabali .mudah2 dapat berguna
@rizal ya patut dicoba thu buat ,hehehe
@hendriono terima kasih sudah berkomnetar mas,,,wah mas ini ngeledek blog mas dah dipasng malah blognya lebih bagus...salam kenal ya mas
@vidi pa yg salah q dah coba thu liat az skrg dah q pasang diblog ini pake cara diatas...mungkin km kurang teliti,,
terima kasih mas hendriono,sudah mengingatkan ,
BalasHapussudah saya saya hapus Js yg dibawah,,sekali lagi terima kasih banyak
wah dah aku coba..tapi kenapa gak bisa and muncul kode pesan salah terus...padahal udah sama apa yg di blog ini terapin..????napa yua???jwab???
BalasHapusnah seperti inilah pesannya :
BalasHapus( Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "ref" must end with the ';' delimiter. )
terus gimana tuh kak???
Komentar ini telah dihapus oleh pengarang.
BalasHapuswah dari blogger tune up y
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusPertamax,..
BalasHapusSudah berulang Kali Stie mencoba tutorial yg seperti ni tpi selalu ga,tpi setelah mampir di agan stie coba akhirnya berhasil,Terimakasih gan atas tutornya.
Semoga Tuhan Selalu Memberikan Yang terbaik buat agan dan membalas semua ke baikan agan,.
sekali lg terimakasih,..
klo da waktu silahkan mampir di http://www.davastie.co.cc/ Di Tunggu gan ke datangannya.
Lam kenal bro..
BalasHapusAq udah pasang di template terbaru bawaan blogger. berhasil.. cuman.. efeknya, setiap postingan jadi bergeser/menciut ke kiri semua.
cuma itu aja efekna.
kira2 kenapa yah ??
Req jg bro, cara bikin efek salju seperti yg km pake.. thanks bro..
matur tengkyu!!
BalasHapusoy jangan sungkan2 berkunjung ke www.freakoutcloth.blogspot.com yaaaa!!!hehehe...
Maaf Brother....
BalasHapusmau nnya... Kko saya cari ]]> ga ada yaaa?
udah pke CTRL+F.... gmna yaa brother tlong..
yg lngkah pertama brother...tlong dbantu
BalasHapusmaaf repost..
gan sama kaya vivan pradita..smua jadi menciut gtu..knpa tuh??
BalasHapustrus msalah ke 2 ko pnya we klo stiap diklik eh trus tu mlah lngsung balik lg widgetnya..boro2 bisa ngeliat..apa yg slah gan?? mohon di jawab...
http://dhe-romantic.blogspot.com
aduh2 maaf agan jdi double post...
BalasHapusmslah saya udah terpecahkan...
buat yg lain yg ngalamin kaya saya cobe cek2 aja code yg dikasih sama Mas Oktri..
Cobalah Belajar dan jdi lebih baik...
Regards..
http://dhe-romantic.blogspot.com
nice sobat :D
BalasHapuska..
BalasHapusini hanya untuk menampilkan Nama "facebok, Twitter," saja. Gimana caranya kaya ka Oktri, menampilkan Icon Facebook dan Twitter. bkan menampilkan kata Facebooknya saja.
kalo bikinnya banyak bisa nggak???
BalasHapusdalam 1 page...jadi kaya menu2 tapi pake panel gitu....
Selamat PAgi..
BalasHapusSaya sudah mencoba ka..
tapi tulisannya begeser ke kiri, jadi agak tidak terlihat (tertimpa)
mohon pencerahannya
koq malah muncul di page paling bawah sich stelah aku coba bro...tolng penjelasannya yach.....mao banget nich tips
BalasHapusqo gak bs muncul info'a yah???
BalasHapuscm muncul OKTRI kaya pnya anda... gimn cara muncul'in info'a yah???
bingung...
cuakeb masss .
BalasHapusmksii ya tips n tricknya mass .
sukses selalu :)
Komentar ini telah dihapus oleh pengarang.
BalasHapusdi blog saya enggak ada ]]>
BalasHapusgiemna
???????????
Komentar ini telah dihapus oleh pengarang.
BalasHapuskok punya aku gag bisa ya kak?? tulisan
BalasHapus]]> gag ada adanya ]]>
gmana dunk?? mohon bantuannya
Klo mau nambahi garis hijau yang ada di Vertical Sliding Info Panel With jQuery kyak gtu gmana sih????????
BalasHapusBlognya sangat menarik dan informatif Mas. Saya pengen belajar.
BalasHapus