Selamat pagi sob? itu kalo sobat membaca postingan articles ini pada waktu pagi hari, jika siang ya selamat siang, jika sore . . . dan seterusya deh, xixixi . . .
Dalam kesempatan kali ini saya akan share kepada teman-teman tentang Cara membuat Vertical Sliding Info Panel Dengan jQuery, widget ini sangat keren banget sob, dan tidak akan menghabiskan tempat di blog sobat, jadi sangat cocok banget jika blog sobat lagi kehabisa tempat.
Widget ini sliding auto hide dan biasa di gunakan untuk menyimpan data profil sobat dan lain sebagainya. Untuk contoh Vertical Sliding Info Panel Dengan jQuery sobat bisa lihat gambar berikut.
Contoh Vertical Sliding Info Panel Dengan jQuery
Gimana keren bukan?

Untuk Cara membuat Vertical Sliding Info Panel Dengan JQuery di blogger sobat, sobat cukup ikuti step-by step berikut:

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Racangan ➨ Edit HTML ➨ Centang Expand Template Widget.


3. Sekarang sobat backup dulu ya templatenya, untuk mengantisipasi bila terjadi kesalahan.


4. Selanjutnya pada edit template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.


5. Jika sudah ketemu sekarang sobat copy kode di bawah ini dan paste atau letakkan di atas kode tadi.

; text-align: left;">.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 #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}
.panel p{color:#fff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;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://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 35px 10px 10px}
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://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 40px 10px 10px}
a.active.trigger{background:#222 url(http://4.bp.blogspot.com/-7z5GA-G6HtE/TcGaZLSwjiI/AAAAAAAAAo8/hoiwsj5T1aA/s320/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6. Masih dalam edit template sekarang sobat cari kode </head> dan letakkan kode berikut di atasnya.


<script src='http://otowebsite.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

7. Simpan template.

8. Tinggal satu langkah lagi, Pada menu sobat klick Rancangan ➨ Tambah gadget (saya sarankan di bagian paling bawah, dan jangan di beri judul) ➨ Lalu pilih HTML/Java Scrtipt.

9. Sekarang sobat copy kode berikut dan pastekan ke dalam elemen HTML/Java Script tadi.

<div class='panel'>
<center><font size="1"><a href="http://otowebsite.blogspot.com/2012/05/cara-membuat-vertical-sliding-info.html"target=_blank"><div style="color: #444444;">
<span >make own</span></div></a></font></center>
<h3>Selamat Datang Di Oto Website [Dofollow]</h3>
<p style="text-align:justify">Salam Blogger | Senang rasanya sobat blogger sudah bersedia singgah disini. semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya, dan apabila berkenan silahkan berkomentar dan follow blog saya, dengan harapan kita sebagai sesama blogger bisa menjalin silaturohmi antar sesama blogger.
<br/>
<a title="@dek_rif" target="_blank" href="https://plus.google.com/101942472174789798746">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="90px" alt="Fhikar Note" src="http://4.bp.blogspot.com/-QGJzzavJvy0/T7eYJeLqiWI/AAAAAAAABT0/UqUIZxHqwPg/s1600/@dek_rif.jpg" />
<p>Nama Saya Arief tapi akrab di panggil Dek Rif
<br/>
Saya hanyalah orang biasa yang ingin berbagi kepada teman-teman semua dan saya ingin sukses di dunia internet</p>
<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="http://3.bp.blogspot.com/-76Zucz4bky8/Tc21ra3-lwI/AAAAAAAAArM/13nkYhZZWZ4/s320/r.png" /></a>
<a href="https://plus.google.com/101942472174789798746"><img alt="mybloglog" src="https://lh5.googleusercontent.com/-MGmtE0_3wTA/To4LmjKQEAI/AAAAAAAAA4w/SK3RyiyF5S8/s128/Inside-Google.png" /></a>
<a href="http://twitter.com/@dek_rif"><img alt="twitter" src="http://2.bp.blogspot.com/-KEgIbUnk2tw/Tc21rS3d0bI/AAAAAAAAArE/vJHksxtWCMk/s320/t.png" /></a>
<a href="http://www.facebook.com/itnaw"><img alt="facebook" src="http://2.bp.blogspot.com/-bcyUWAsCaxM/Tc21rDJyJiI/AAAAAAAAAq8/nIKR08D7G70/s320/f.png" /></a>
<a href="http://otowebsite.blogspot.com/"><img alt="HOME" src="http://4.bp.blogspot.com/-44mliT_w4HI/Tc21rDFEeoI/AAAAAAAAAq0/tAbFk-lDbKg/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

10. Simpan.

Sekarang sobat bisa lihat sendiri hasilnya!

Keterangan:
  • Kode script warna merah pada kode script yang adalah script jQuery 1.3.2 jika di template sobat sudah terdapat kode tersebut maka sobat tidak perlu memasangnya lagi.
  • Kode script yang ke tiga yang di pasang di widget yang perlu di perhatikan, sobat dapat mengubahnya sesuai selera soba, karna itu adalah cuma contoh profil saya, hehehe . . . kalo yang itu gak perlu di jelasin kan?
Oke dah saya rasa cukup untuk kali ini, ada kesulitan? jangan sungkan bertanya!

Bagaiman, apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komenntar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. Saya Devina dari indonesia di Surabaya, saya mengabdikan waktu saya di sini karena janji yang saya buat untuk Nyonya Elizabeth yang kebetulan merupakan pemberi pinjaman online dari perusahaan pinjaman Elizabeth dan saya berdoa kepada ALLAH agar dia dapat melihat posting saya pada hari ini.

     Beberapa bulan yang lalu saya melihat komentar diposting oleh seorang wanita bernama Arnah dan bagaimana dia telah scammed meminta pinjaman online dari Dr James Mowat, menurut dia sebelum ALLAH mengarahkannya ke tangan Nyonya Elizabeth dan Nyonya Elizabeth meminjamkan 2.500.000 Rupiah tanpa tekanan dan tunda, jangan hubungi Dr. James Mowat melalui email: jamesmowatloanfirm@gmail.com untuk menghindari menjadi korban penipuan.

    Saya memutuskan untuk menghubungi Arnah untuk mengkonfirmasi apakah itu benar dan untuk membimbing saya tentang cara mendapatkan pinjaman dari Nyonya Elizabeth, dia mengatakan kepada saya untuk menghubungi Nyonya Elizabeth saya bersikeras bahwa dia harus tolong beri tahu saya proses dan kriteria yang dia katakan itu sangat mudah tentang bagaimana mengajukan permohonan pinjaman dari Nyonya Elizabeth yang perlu saya lakukan adalah menghubungi dia, mengisi formulir aplikasi mengirimnya kembali, mengirim salinan pindaian kartu identitas saya, kemudian mendaftar dengan perusahaan setelah itu saya akan mendapatkan pinjaman saya . lalu saya bertanya padanya bagaimana Anda mendapat pinjaman? Dia menjawab bahwa hanya itu yang dia lakukan, itu sangat mengejutkan.

     Saya menghubungi Nyonya Elizabeth dan saya mengikuti instruksi dengan hati-hati untungnya bagi saya saya memenuhi persyaratan mereka dan pinjaman saya berhasil disetujui tetapi sebelum pinjaman dipindahkan ke akun saya, saya diminta untuk membuat janji untuk membagikan kabar baik Nyonya Elizabeth dan itu adalah mengapa Anda melihat posting ini hari ini. untuk kejutan terbesar saya, saya menerima peringatan dari 150000000 Rupiah. Jadi saya menyarankan setiap orang yang mencari sumber yang dapat dipercaya untuk mendapatkan pinjaman untuk menghubungi Nyonya Elizabeth melalui Email: elizaabethchristopherloan@gmail.com untuk pinjaman aman Anda juga dapat menghubungi saya di Email saya : devinairf128@gmail.com atau Anda juga dapat menghubungi Arnah di arnahnana01@gmail.com. Saya percaya satu giliran yang baik layak mendapat yang lain.

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top