Cara Membuat Vertical Sliding Info Panel With jQuery

 

Hi.. friends Memenuhi permintaan Teman  Blogger oktri.co.cc mengenai info profil slide panel sebelah kanan, contoh dari bisa dilihat contoh pada blog style of blogger, 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:

 

 <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>Selamat Datang Di STYLE  OF BLOGGER</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://i1189.photobucket.com/albums/z423/jonsstyle/AldyRenditia-1.jpg' width='73px'/>
<p>Nama saya JONS FUNK,saya seorang Mahsiswa S1 Teknik Informatika Di Denpasar ,Bali.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://jonsstyleofblogger.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/#!/KDJONS' title='twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/profile.php?id=100000552312384' title='facebook'>Facebook</a></li>
<li><a href='http://www.plurk.com/funk_rock' title='Plurk'>Plurk</a></li>

<li><a href='http://jonsstyleofblogger.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://jonsstyleofblogger.blogspot.com/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>JONS</a>

Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Langkah 10

Simpan Template dan Preview blog... 

Membuat Gradient Effect dengan CSS

Postingan ini adalah postingan pertama saya di domain baru www.devbook.net. Tampilan blog ini pun sedikit saya rubah untuk menyesuaikan dengan tema baru blog ini yang lebih bersifat personal blog. Design dan warna blog ini pun saya buat secara custom dan "suka-suka" untuk menyesuaikan dengan karakter pribadi saya. Untuk kedepannya insya allah blog ini akan lebih fokus membahas mengenai tutorial blog dan tutorial web design walaupun tentu saja di selingi dengan beberapa review untuk tetap menghidupi blog ini :D Mudah-mudahan saja kedepannya blog ini bisa lebih bermanfaat buat teman-teman blogger semua.

Pada postingan kali ini saya akan membahas bagaimana cara membuat efek gradasi dengan menggunakan CSS. Permainan warna tentu saja jadi kunci utama dalam mendesign tampilan sebuah web ataupun blog, buat saya sendiri CSS merupakan kode yang menurut saya sangat brilian, bayangkan saja dari 1 buah layout HTML kita dapat membuat beribu-ribu tampilan web yang berbeda-beda hanya dengan mengedit kode CSS-nya. Salah satu contohnya adalah situs social network friendster yang dulu sempat booming, dari 1 buah kode layout, member dapat merubah tampilan profile mereka hanya dengan memodifikasi kode CSS. Dari beribu-ribu kode CSS yang ada, ternyata ada beberapa fitur baru CSS yang masih jarang sekali digunakan, salah satunya adalah fungsi CSS gradient yang akan saya terangkan dibawah ini.

Untuk membuat efek gradasi kebanyakan orang menggunakan background image yang telah mereka buat di photoshop atau software-software image editing lainnya. Kekurangannya tentu saja akan memperlambat loading web atau blog kita. Sebenarnya CSS telah menambahkan fitur gradient yang dapat mempermudah kita dalam membuat effect gradient, hanya saja fitur ini baru disupport oleh browser-browser versi baru, untuk mozilla sendiri fitur CSS gradient baru bisa digunakan di versi 3.6 ke atas. Dibawah ini kode yang bisa teman-teman gunakan untuk membuat efek gradasi dengan CSS.
background: #222;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));
background: -moz-linear-gradient(top, #000, #222);

Keterangan:
background: #222;Berfungsi menampilkan warna background solid bila browser tidak mendukung.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');Berfungsi untuk internet explorer. startColorstr adalah warna awal gradasi dan endColorstr adalah warna akhir gradasi.

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));Berfungsi untuk browser webkit seperti safari, chrome, dll. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. from adalah warna awal gradasi dan to adalah warna akhir gradasi.

background: -moz-linear-gradient(top, #000, #222);Berfungsi untuk browser keluaran mozilla. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. Warna awal gradasi ditulis pertama (#000) dan warna akhir gradasi ditulis kedua (#222) dipisahkan dengan koma (,)

Mudah-mudahan bermanfaaf buat teman-teman blogger semua, selamat mencoba dan selamat berkreasi :)

CSS Shadow - Membuat Bayangan Dengan CSS

Pada postingan sebelumnya saya sudah membahas bagaimana cara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas.

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
.shadow {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}Keterangan:
5px adalah ukuran x-offset
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:
.inner-shadow {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}Keterangan:
0 adalah ukuran x-inset
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
}dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
}
Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)

Trik Rotasi Gambar Dengan CSS

Terkadang kita sering merotasi foto kita, entah di Facebook atau di blog, yang biasanya bertujuan untuk memberikan efek realistis dan tidak kaku. Tapi ternyata kita juga bisa lho merotasikan foto kamu dengan CSS, baik saat biasa maupun saat disentuh kursor. Tapi sayangnya trik ini hanya ampuh untuk browser dengan dukungan CSS 3, sisanya? Good bye aja deh!

Contoh:

Biasa	Miring tanpa hover miring
Biasa dengan hover miring	Miring dengan hover miring

Sekarang pertanyaannya adalah Bagaimana Caranya?

Secara umum, inilah scriptnya.
Image miring tanpa hover miring

• CSS
  .rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi1" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi1"><img border="0" src="Your Image Link"/></span>

Image biasa dengan hover miring

• CSS
  .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi2" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi2"><img border="0" src="Your Image Link"/></span>

Image miring dengan hover miring

• CSS
  .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
• HTML (Jika image pakai link)
  <a class="rotasi3" href="Your Link"><img border="0" src="Your Image Link"/></a>
• HTML (Jika image tidak pakai link)
  <span class="rotasi3"><img border="0" src="Your Image Link"/></span>

Gabungan dari CSS di atas
.rotasi1 { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } .rotasi2:hover { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3 { transform: rotate(7deg); -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); } .rotasi3:hover { transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Penjelasan

• Hover adalah keadaan saat kursor menyentuh/berada di atas objek (dalam posting ini adalah image).
• Image adalah gambar/foto.
• 7deg adalah nilai rotasi untuk rotasi 7^o searah jarum jam dan bisa diubah sesuai keinginan.
• Angka bisa diberi nilai negatif (-) untuk rotasi berlawanan arah jarum jam, misal -7.
• Your Link diganti dengan link tujuan (jangan lupa dengan http:// di depan)
• Your Image Link diganti dengan link image (jangan lupa juga dengan http:// di depan)
• Script bisa ditambah atau dikurangi (alias dimodifikasi) sesuai dengan kebutuhan masing-masing.

Untuk Blogger

• Cara menambahkan CSS
  - Ke Dasbor Blogger > Tata Letak > Edit HTML.
  - Tambahkan CSS di atas script ]]></b:skin>.
  - Klik Simpan template
• Cara menambahkan HTML
  - Langsung copy paste HTML ke tempat yang diinginkan (di elemen halaman, di posting, di sidebar, dll).
  - Ganti Your Link dan Your Image Link sesuai dengan ketentuan di bagian penjelasan.

Masih kurang jelas? Silakan bertanya di tempat komentar di bawah.

Kenalan Dengan Border Lengkung

Untuk Kali ini saya akan membahas tentang Border Lengkung. Sobat semua tau maksud dari lengkung atau bisa di bilang dengan bengkok, nah jadi disini saya akan menjelaskan tentang Garis Bengkok pada Template, maaf y sedikit kasar bahasa saya soalnya nilai bahasa saya pas-pasan jadi kurang baik gytu bahasa Indonesia-nya (Ngaku orang Indonesia tapi.... ) y Sudahlah tidak usah membahas nilai bahasa Indonesia saya kan jadi malu .

Mungkin sudah lama y saya tidak meng-update blog ini di karenakan aktifitas sekolah yang sibuk dan PC terjangkit virus, oke saya ceritakan sebentar y kenapa blog saya terjangkit virus. Begini ceritanya, pada suatu hari di hari yang cerah untuk ngeblogging dan menulis datang lah sebuah virus yang mencoba menyelinap ke dalam PC saya, saya berusaha berkata kepadanya, "Tolong dong jangan masuk ke PC aku, nanti data-data qu hilang dan aku tidak bisa nge-blogging (sambil menangis)" sang virus berkata, "jeuh eta mah Derita maneh, aing mah nte hayang nyaho". Walaupun saya sudah memohon-mohon si virus tetap saja masuk ke dalam PC qu yang tidak ada antibodinya sama sekali dan tiba-tiba PC nge-blank lalu cesss (seperti bunyi kentut) tercium bau gosong, waktu saya cek owh tidak mainboard qu bau gosong gytu deh padahal baru beli tuh, tapi untung masih ada garansi jadi tak harus beli lagi deh .

Begitulah cerita yang tidak penting dan tak berguna, sekarang kembali lagi ke Border Lengkung. Disini saya tidak menjelaskan cara pemasangan pada template namun disini saya akan menjelaskan nilai-nilai dari Garis Bengkok (Border Radius), sebelumnya garis bengkok ini hanya bisa di lihat di firefox saja (Percobaan saya).

Pada dasarnya Border ditulis dengan border: 1px solid #0f0; kurang lebih seperti itu sekarang karna sudah populernya CSS3 yang bisa mengurangi penggunaan JS dan berdampak pada keringanan pada template. Pada CSS3 border lengkung di tulis seperti : -moz-border-radius: 30px; dan dapat di atur dengan menambahkan topleft, topright, bottomleft, atau bottomright dan nilai dari border lengkung tersebut adalah px jadi semakin besar px maka semakin lengkung border tersebut, seandainya sobat ingin melengkungkan border di bagian atas kiri maka sobat harus menulis seperti -moz-border-radius-topleft: 30px; dan hasilnya akan menjadi seperti di bawah ini :

Contoh dari Border lengkungan atas kiri

Kode yang di gunakan :


<div style="padding-top:40px;height:50px;background: none repeat scroll 0% 0% rgb(0, 0, 0); -moz-border-radius-topleft: 30px;color: rgb(0, 255, 0); -moz-box-shadow: 3px 3px 4px rgb(88, 88, 88); text-align: center;">Contoh dari Border lengkungan atas kiri</div>

Nah kalau untuk memasangkan ke dalam Template saya akan contohkan Cara pemasangan di Main-Wrapper

kode umum main-wrapper kurang lebih seperti di bawah ini :


#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

dan apabila ingin memberi lengkungan akan menjadi seperti


#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
-moz-border-radius-topleft: 30px;color: rgb(0, 255, 0);
}

Nah mungkin di atas adalah sebagian contoh kecilnya saja, kalau sobat dapat menguasai border lengkung mungkin sobat dapat menggunakannya bukan hanya di daerah main-wrapper saja namun di bagian lain-lainnya, mungkin hanya sekian saja dari Border lengkung yang dapat saya jelaskan. Termia kasih dan Happy Blogging .

Image Gallery With CSS3

CSS3 lagi?? owh shit man.... Asyik nih saya tulis lagi tentang css3 yang keren abis dah, kali ini css3-nya tentang Image Gallery. Sebenarnya trik css3 kali ini menggunakan efek hover yang apabila disentuh akan memperbesar atau berubah bentuk. Dari pada pusing baca penjelasan saya yang g jelas mendingan kita lihat demonya yuk.

Nah kode yang saya pakai untuk menampilkan image Gallery With CSS3 adalah sebagai berikut

Css yang di pakai :

.box {
z-index: 1;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.box:hover {
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}

nah untuk diatas adalah kode css-nya apabila sobat ingin memasang-nya di template sobat tinggal tambahkan saja kode tersebut di atas kode ]]></b:skin> dan simpan deh selesai namun efek tersebut tidak akan berfungsi apabila kode css tersebut tidak di panggil. Jadi untuk memanggilnya kita gunakan class="box1" pada HTML, contoh seperti di bawah ini

<div class="box1">
<img src="Alamat-Gambar-Sobat" />
</div>

nah kurang lebih seperti itu, biar jelas silahkan sobat coba jadi jangan cuman baca saja nanti malah g bisa, oiya kalau sobat ingin mempelajari lengkap tentang css3 sobat bisa kunjungin css.info . Sekarang tugas saua selesai, dan saya mau pamit kurang lebihnya di maafkan y. Terima kasih dan Salam OT .

Membuat Back To Top Dengan CSS

Back To Top mungkin hampir semua blogger sudah mengenalinya. Tools yang satu ini memang bisa dibilang dapat menyamankan para pengunjung blog kita karena dengan adanya tools ini maka apabila pengunjung blog sedang berada di paling bawah blog maka hanya dengan mengklik tombol Back To Top ini pengunjung dapat dengan mudahnya langsung kembali ke atas.

lagi pula tanpa dijelaskan juga mungkin sobat semua dapat mengetahui manfaat tools ini dari namanya yaitu Back To Top. Memang semua blogger atau para master blogger semua sudah membagikan ilmu tentang ini namun kebanyakan menggunakan javascript nah sedangkan banyak orang yang bilang kalau memakai javascipt itu membuat blog kita menjadi berat atau lambat untuk di akses. Setelah muncul opini yang seperti itu maka saya mempunyai inisiatif untuk membuat tools ini ringan, namun bagaimana? akhirnya saya menemukannya yaitu dengan tidak menggunakan javascript namun menggunakan CSS dan HTML saja, untuk melihat demonya sobat dapat melihat di pojok kanan bawah yang bergambar panah ke atas, silahkan tekan tombol itu. sekarang kita lihat cara pembuatannya.

1. Login ke blogger
2. lalu masuk ke Tata Letak >> Rancangan >> Edit HTML
3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   
   #csstop {
   overflow: hidden;
   float:right;
   width:50px;
   height:50px;
   clear:both;
   }
   
   
4. setelah itu cari kode </body> lalu tambahkan pula kode di bawah ini tepat di atasnya
   
   <a id="csstop" href="#"><img src="http://i1189.photobucket.com/albums/z423/jonsstyle/113018.gif" alt="jonsstyleofblogger.blogspot.com"/></a>
   
   
5. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Back To Top dengan CSS dengan Back To Top dengan Javascript? lebih baik yang mana menurut sobat semua? silahkan tinggalkan pesan atau pendapat sobat di kotak komentar yang sudah di sediakan di bawah ini. Terima kasih dan Happy Blogging.

Membuat Arsip dan Label Blog model Scroll

Postingan kali ini, saya akan membahas tentang cara membuat arsip dan label blog yang model scroll, seperti yang sedang saya gunakan diblog ini. Btw, tau scroll kan? Coba tarik halaman blog ini keatas dan kebawah, nah naek turun kan? Itulah yang dinamakan model scroll. Fungsi Arsip dan Label dibuat scroll tentu adalah menghemat tempat Blog Anda seperti blog ini. Jika tidak diakali dengan menggunakan scroll tentu akan membuat label atau arsip akan memanjang terus menerus sehingga membuat halaman blog menjadi tidak karuan. Contoh model archive dan label yang memakai scroll adalah sebagi berikut :

Untuk  membuatnya kita hanya menambahkan script berikut : <div style='overflow:auto; width:ancho; height:100px;'>

Dan, untuk letaknya akan saya beberkan satu persatu :

Arsip Model Scroll :

1. Login > Layout > Elemen Halaman

2. Buat widget Arsip dengan nama Arsip Blog

3. Pilih model yang Hirearchy 

4. Masuk ke Edit HTML > centang kotak Expand Template Widget

5. Carilah 'Arsip Blog'. Selengkapnya begini: 

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>

6. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya

7. Dan untuk warna hijau, itu adalah tinggi arsip scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.

8. Langkah terakhir, tentu adalah Simpan Template   

Label Model Scroll :

1. Saya anggap anda telah memakai widget ini, dan langsung aja menuju Edit HTML

2. Klik Expand Widget Template

3. Carilah dengan kata kunci Label. Selengkapnya begini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Kode warna merah, tentu belum ada ditemplate Anda. Tambahkan kode tersebut dan label model scroll akan aktif.

5. Dan untuk warna biru, itu adalah tinggi label scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.

6. SImpan Template.

Membuat Gambar Melayang di Blog

Saat ini saya akan membahas bagaimana cara membuat gambar melayang di blog. gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh scrool mouse. Apakah sobat tertarik membuatnya ???. Sebelum membuatnya, sobat harus menyiapkan gambar. terserah sobat mau gambar bergerak yang biasanya berformat .gif atau gambar bisa yang berformat .jpeg atau bisa juga gambar foto kita...hehehe biar narsis.

Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.

Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :

1. Login Acount blogger anda.

2. Masuk pada Pengaturan.

3. Pilih Tata letak.

4. Edit html.

5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.

<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>

Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.

7. Simpan, jadi deh........

o....ya, kalo anda suka dengan blog ini pasang banner saya atuh.....Okeeey

CARA MEMBUAT TOOLTIPS DI BLOG...

...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...

...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :

JOIN

KLIK JOIN JIKA ADA INGIN BERGABUNG DENGAN SAYA

..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
1. Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan kode tadi diatasnya... Seperti contoh dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket :

background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

3. Jika telah selesai.. Simpan Template Blog...


B. Kode untuk memanggil tooltips pop-up (Muncul)...
1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>

Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...

<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_DOWNLOAD.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > GaMe Farm Frenzy 2</a><div class="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>

...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)


Note :
> Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
> Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...

... Tooltips yang Simple...

Membuat Sliding Login/Register Form Panel di Blogspot [JQery]

Setelah sebelumnya, saya telah mengajak anda untuk Membuat Chatbox Bergaya Fixed Vertical Sliding Panel[Jquery & CSS3], kini saya akan mengajak anda untuk membuat Sliding Login/Register Form Panel Dengan JQuery. Contohnya bisa anda lihat pada gambar diatas.(* Sliding Login pada Blog ini sudah dihapus) Sumber Postingan ini berasal dari: http://web-kreation.com/demos/Sliding_login_panel_jquery/

Untuk membuatnya silahkan ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

</head> dan taruh Script Javascript dibawah ini tepat sebelum atau diatasnya:

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});
</script>

Atau jika script tersebut tidak berfungsi disana, anda bisa meletakkannya sebelum atau diatas kode </body>

5. Beralihlah dan cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://i785.photobucket.com/albums/yy131/djnand/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i785.photobucket.com/albums/yy131/djnand/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://i785.photobucket.com/albums/yy131/djnand/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://i785.photobucket.com/albums/yy131/djnand/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

6. Jika sudah, anda bisa meletakkan HTML dibawah ini setelah kode <body> di edit HTML:

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome To Style Of  Blogger</h1>
<h2>Salam Blogging</h2>
<p class='grey'>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>
<h2>Tutorial</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://jonsstyleofblogger.blogspot.com/2009/06/membuat-sliding-loginregister-form.html' title='Download'>KLIK DISINI</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello Guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Log In | Register</a>
<a class='close' href='#' id='close' style='display: none;'>Close Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

7. Save Template anda...