Belajar Nge-Blog..








Bila tak pegal di tangan
silahkan tulis sebuah komentar!
=xBATAMx=







Sabtu,
23
Oktober

Membuat Javascript-jQuery ZigZagLap Tooltip


Posted by
'cah ndeso kluthuk
Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan penampilan. "Rasa suka" akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.
Kode CSS ZigZagLap Tooltip

.tooltip {
        display:none;
        background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSflhOMhVKfZzfws6GK40LKn8DGkIQzoZXtBWCLgRUT6UeOqoBQvTu7BRxizk6G3k8cluF11gmHFTOQhlny6PC_uBD-xHqbG3zU57vMj31G68ZtsPl51Ts5ja5__5a1tkEOEwA4NQ9ucs/s200/gubhugreyot.jpg) right bottom no-repeat;
        background-position:96% 93%;
        width:250px;
        font-family:Arial;
        font-size:13px;
        padding:10px 10px 20px;
        color: #00CCFF; 
        text-shadow:1px 1px 1px #000;
        border: 4px solid #555;
        border-radius:10px;
       -moz-border-radius:10px;
       -webkit-border-radius:10px; 
        box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -moz-box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -webkit-box-shadow:0px 5px 20px rgba(125,124,250,.9); 
} 
#jqtips img {
        border:0;
        cursor:pointer;
        margin:0 8px;
}

Javascript ZigZagLap Tooltip


Cara Membuat ZigZagLap Tooltip

  • Login to Blogger
  • Dashboard
  • KLIK link "Design/Rancangan".
  • KLIK "Edit HTML".
  • Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode tersebut (letaknya di atas </head> atau <body>). Tutorial tentang Cara Cepat Cari Kode HTML di Template dapat dibaca dengan membuka Special Tutorials (menu sebelah kiri).
  • Copy dan pastekan kode CSS di atasnya.
  • Download Javascript. Akan lebih sempurna jika javascript tersebut kemudian di upload di file hosting (ripway.com, stashbox.org, yourjavascript.com atau yang lain).
  • Simpan Javascript di atas tag pembuka <head> (terletak di ujung atas Edit Templates) dalam bentuk seperti di bawah ini:
    • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://h1.ripway.com/.../Javascript/zigzagLap.js" type="text/javascript"></script> <head>
    Atau dalam bentuk seperti di bawah ini jika javascript tidak di upload:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> Letakkan di sini javascript hasil download! </script> <head>
  • Copy dan simpan javascript berikut di atas tag penutup </body>.
    • <script type="text/javascript"> $("#jqtips a[title]").tooltip({effect: 'bouncy'}); $("#jqtips img[title]").tooltip({effect: 'bouncy'}); </script> </body>
  • KLIK SAVE Templates/Simpan Template.

Cara Menggunakan Kode tooltip

Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:

Dalam tag a (link berbentuk teks dan gambar):
<div id="jqtips">
<a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>

<div id="jqtips">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyTeec30uGoV0OPJpeXKUYAX-3S82PkBkrA3sCHmQTw_Ru_YcXlGE-1ey8YIpdhK9Nn-U7Gv3p5hoBLCnBsSFAJa46JsU-iItMl5YgK5IswqeQH5ythVgZ2eylDVYjEUTFZfbweyKiTk/s220/36_2_34.gif" width=".." height=".." /></a>
</div>

Dalam tag img:
<div id="jqtips">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyTeec30uGoV0OPJpeXKUYAX-3S82PkBkrA3sCHmQTw_Ru_YcXlGE-1ey8YIpdhK9Nn-U7Gv3p5hoBLCnBsSFAJa46JsU-iItMl5YgK5IswqeQH5ythVgZ2eylDVYjEUTFZfbweyKiTk/s220/36_2_34.gif" width=".." height=".." title="Tuliskan teks tooltip di sini!" />
</div>

Selamat bekerja dan semoga blog sampeyan tambah gantheng, cakep, cantik, manis dsb .... dsb ....


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :






Bila tak pegal di tangan
silahkan tulis sebuah komentar!
=xBATAMx=







Jumat,
22
Oktober

Create 2 New Elements Under the Posting Blog: New Blogger Templates


Posted by
'cah ndeso kluthuk

Pembuatan Element Baru di Bawah Widget Post New Blogger Templates.
Membuat elemen baru untuk pemasangan beberapa wifget blog sangat penting dilakukan. Pembuatan elemen baru berguna untuk lebih memudahkan pengaturan posisi/tempat widget yang terpasang atau mau dipasang. Kita akan coba bahas cara membuat elemen baru di bawah kolom/box posting atau tepatnya di bawah kolom komentar. Sisi menguntungkan dari elemen baru dengan lokasi di bawah boks posting adalah kedekatanya dengan posting yang setiap saat di baca pengunjung serta lebar bidang yang cukup luas. Bila kita menggunakan template 2 kolom maka 2 buah elemen baru dengan lebar masing-masing 250px bisa termanfaatkan. Sampeyan juga bisa merubahnya menjadi 2 elemen dengan lebar (width) berbeda (misalnya 300px dan 200px). Sangat efektif dan tepat sebagai sebuah wadah widget! Beberapa widget seperti Stats, Recent Posts, Popular Posts, Related Posts, atau mungkin Profile Blogger dan beberapa widget lain bisa di tempatkan di sini.

Cara Membuat Element Baru di bawah Posting di New Blogger Template

  • Login to Blogger
  • Dasboard
  • Design/Rancangan
  • Edit HTML
  • Back-up Templates (lihat caranya di Special Tutorials - menu sebelah kiri atas).
  • Cari Kode (find CSS Code) ]]></b:skin>.
  • Letakkan Kode CSS di atas ]]></b:skin>.
  • Cari kode:
    • <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section>
  • Letakkan xHTML berikut tepat di bawahnya.
    • <div id='bottompostLEFT'> <b:section class='bottompostleft' id='bottompostleft' showaddelement='yes'/> </div> <div id='bottompostRIGHT'> <b:section class='bottompostright' id='bottompostright' showaddelement='yes'/> </div>
  • KLIK SAVE Templates/Simpan Templates.
  • Periksa hasilnya di Page Elements/Elemen Laman di bawah "Posting Blog".
  • Apabila Elemen baru sudah terlihat, coba isi dengan widget. Sampeyan bisa menggeser widget yang sudah ada di sidebar seperti widget profile, stats, label, arsip atau yang lain (dengan cara di "drag") untuk melakukan percobaan hingga hasil fungsi elemen baru bisa dilihat di halaman blog. Setelah "drag widget dari sidebar" KLIK "SAVE", kemudian buka blog.

Kode CSS

#bottompostLEFT {
float: left;
overflow: hidden;
width: 200px;
margin: 20px 0 10px 0;
padding: 0;
}
#bottompostRIGHT {
float: right;
overflow: hidden;
width: 200px;
margin: 20px 0 10px 0;
padding: 0;
}
.bottompostleft .widget, .bottompostright .widget  {
border-bottom: 2px solid #666;
padding-bottom: 10px;
margin: 10px 0;
}
.bottompostleft .widget a:link, .bottompostright .widget a:link {
color: $(widget.link.color);
text-decoration: none;
}
.bottompostleft .widget a:visited, .bottompostright .widget a:visited {
color: $(widget.link.visited.color);
}
.bottompostleft .widget a:hover, .bottompostright .widget a:hover {
color: $(widget.link.color);
text-decoration: underline;
}

Catatan/Keterangan:
  • Untuk mencari kode <b:section class='main' .... dst, cari sebagian kode terlebih dahulu agar lebih mudah. Contoh cari yang ini terlebih dahulu.
    <b:section class='main' id='main' showaddelement='no'>
  • Gunakan Ctrl+F untuk mencari kode. Sampeyan bisa membuka tutorial Cara Cepat Cari Kode di Template dengan membuka Special Tutorials.
  • Untuk memudahkan pembuatan elemen baru ini sebaiknya gunakan width/lebar dari ukuran yang agak kecil terlebih dahulu, baru selanjutnya semakin diperlebar hingga diperoleh ukuran yang paling tepat. Sampeyan bisa memperkirakan ukuran dua elemen baru yang dibuat dengan melihat dan membandingkan dengan lebar halaman posting.
  • Setiap perubahan pada width elemen baru, periksa hasilnya dengan membuka blog.
  • Akan lebih baik buat percobaan terlebih dahulu di blog khusus nyoba desain baru. Buatlah sebuah blog khusus percobaan!

Perbandingan Cara Buat Elemen

Sampeyan bisa membuka link di bawah ini untuk membandingkan pembuatan elemen baru di bawah posting yang dibuat dengan cara sedikit berbeda dan dilakukan di Blogger Lama (Template Tata Letak).
Cara Lain Membuat Elemen di Bawah Posting Blog

Untuk melihat hasil yang telah diterapkan di halaman blog, silahkan buka link demo berikut (lihat di bawah kolom komentar. Di elemen baru ditempatkan widget Related Posts dan Recent Posts).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini 






Bila tak pegal di tangan
silahkan tulis sebuah komentar!
=xBATAMx=



Baca Selengkap Nya Bozz

This share facebook
Langganan: Postingan (Atom)