Sunday, March 28, 2010

Membuat Wadah Status Twitter

Posted by dav On 4:01 AM
Artikel sebelumnya membahas "Memasang Widget Twitter[1]" tanpa ada wadah (container) khusus. Sekarang kita akan mencoba menambahkan wadah status twitter pada bagian header atau bagian lainnya sesuai dengan keinginan anda agar status twitter lebih enak untuk dibaca. Pada dasarnya materi ini lebih menitik beratkan kepada pemahaman kode CSS (Cascading Style Sheet). Anggap saja sebagai "studycase" untuk belajar CSS sekaligus praktek.

Wadah (Container) Status Twitter

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML" dan tidak perlu di "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
div#twitter_div {
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S65N7txeWnI/AAAAAAAAD84/nzg7fWZlw9M/d/bgtwitter.png) no-repeat scroll 0 0 transparent;
float:right;
height:137px;
margin:110px 50px 0 0;
padding:5px 10px;
position:absolute;
right:0;
width:338px;
z-index:10;
}
div#twitter_div h2 {
margin-bottom:1px;
font-style:italic;
color:#21A7ED;
}
div#twitter_div ul {
margin:0;
}
div#twitter_div ul li {
list-style: none none outside;
font-size: 0.9em;
margin:0;
color:#141414;
}
Langkah 5
Cari kode dibawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:
<div id='twitter_div'>
<b:section class='twitter' id='twitter' showaddelement='no'>
<b:widget id='HTML30' locked='true' title='Twitter' type='HTML'/>
</b:section>
</div>
Langkah 7
Simpan template
Langkah 8
Masuk ke "Tata Letak - Elemen Laman"
Langkah 9
Perhatikan! Ada penambahan gadget baru dengan nama "Twitter" dan klik link "Edit"
Langkah 10
Masukan (copy paste) kode twitter yang pernah dibahas pada artikel sebelumnya[1].

Penyesuaian Letak Gadget Pada Header

Wadah status twitter ini mungkin saja tidak cocok untuk bentuk dari header blog anda. Tips-n-trik kali ini direkomendasikan bagi mereka yang memiliki header dengan lebar dan tinggi yang cukup.
Untuk melakukan penyesuaian letak wadah, perhatikan gambar dibawah ini:
Gambar diatas menjelaskan kode CSS dibawah ini:
div#twitter_div {
background:url(bgtwitter.png) no-repeat scroll 0 0 transparent;
float:right;
height:137px;
margin:110px 50px 0 0;
padding:5px 10px;
position:absolute;
right:0;
width:338px;
z-index:10;
}
Ubahlah nilai-nilai yang diblok untuk menyesuaikan posisi wadah status twitter pada header anda. Mudah-mudahan dapat dipahami, jika masih kesulitan silahkan hubungi via email atau chatting.

Catatan kaki:
[1] Memasang Widget Twitter

Sunday, March 21, 2010

Tooltip - jQuery tipsy

Posted by dav On 10:31 PM
Beberapa waktu yang lalu Blogger Tune-Up pernah membahas tentang Bubble Info atau Tooltip atau Bubble Help[1], sekarang kita akan mencoba jenis lain dari tooltip tersebut. Masih berbasis framework jQuery, kita akan mencoba mengintegrasikan tipsy[2] pada Blogger yang diadaptasi dari "tipsy - Facebook-style tooltip plugin for jQuery[3]". Perbedaan mendasar antara jQuery Bubble Info dengan jQuery tipsy terletak pada posisi bubble (balon) yang fleksibel (kadang diatas, dibawah, dikiri atau dikanan) tergantung posisi hyperlink pada browser, sedangkan jQuery Bubble Info hanya akan muncul pada sebelah kiri hyperlink. tipsy merupakan salah satu jenis tooltip yang banyak digunakan oleh para blogger dan website-website besar lainnya semisal twitter.
Alexandra Daddario Tooltips

Integrasi jQuery Tipsy Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan kode CSS dibawah ini diatas kode pada langkah 4:
.tipsy { padding: 5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S6b_ZTr4jPI/AAAAAAAAD74/I5PC4YCqf3Q/d/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan kode JavaScript dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hensblog.googlecode.com/files/jquery.tipsy.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
infobalon();
});
</script>
Langkah 8
Simpan template

Integrasi jQuery Tipsy Pada Hyperlink

Ada beberapa hal yang harus diperhatikan dalam proses integrasi tipsy pada hyperlink seperti dijelaskan dibawah ini.
  • Untuk mengaktifkan tooltip - jQuery tipsy tambahkan/gunakan tag "id" atau "class" (tanpa tanda kutip) didalam tag hyperlink.
  • Pilih salah satu jenis "id" atau "class" didalam tag hyperlink, "balonkk" untuk mengaktifkan tipsy pada sebelah kiri atau kanan, dan "balonab" untuk mengaktifkan tipsy pada sebelah atas atau bawah.
  • Posisi kiri, kanan, atas dan bawah akan dipilih secara otomatis tergantung posisi hyperlink terhadap browser.
Perhatikan contoh kode dibawah ini!
Untuk posisi tipsy diatas atau dibawah;
<a class='balonab' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>
atau;
<a id='balonab' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>
Untuk posisi tipsy dikiri atau dikanan;
<a class='balonkk' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>
atau;
<a id='balonkk' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>
Tooltip - jQuery tipsy
  • Keterangan yang akan muncul pada tipsy diambil dari keterangan didalam tag title (misal; title='Isi Tooltip - jQuery tipsy', maka yang muncul dalam tipsy adalah kata "Isi Tooltip - jQuery tipsy"), selain itu kita juga bisa menggunakan format HTML pada tag title pada hyperlink, seperti contoh dibawah ini:
<a id='balonab' href='http://modification-blog.blogspot.com/' title=' <b>Blogger Tune-Up</b> adalah teknologi blog populer yang dipelihara oleh <b><u><i>Dede Hendriono</i></u></b>. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi'>Hover over me</a>
  • Fungsi tag <b>...</b> untuk huruf Bold/Tebal, <i>...</i> untuk huruf Italic/Miring, <u>...</u> untuk huruf Underline/garis bawah, dan lain sebagainya...

Catatan kaki:
[1] Tooltip - jQuery Bubble Info
[2] Tipsy
[3] Jason Frame

Thursday, March 18, 2010

Info Panel Slide Vertikal dengan jQuery

Posted by dav On 9:53 PM
Memenuhi permintaan para pembaca setia Blogger Tune-Up mengenai info profil slide panel sebelah kanan, maka kali ini mari kita bongkar skenario dibelakang semua itu. Artikel ini diadaptasi dari spyrestudios.com[1] dengan judul asli "Vertical Sliding Info Panel With jQuery"[2] yang kemudian diberikan sedikit sentuhan oleh Blogger Tune-Up 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[3]. 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.

Info Panel Slide Vertikal dengan jQuery

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:
]]></b: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</h3>
<p style='text-align:justify'>Selamat datang di Kotretan Hendriono - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (elektronika, otomotif, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://dedehendriono.blogspot.com/' title='Hendriono Online'>Selengkapnya tentang kami</a></p>

<h3>Sepintas Tentang Kotretan Hendriono</h3>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjGhfmoFOUXGSmwKuZqK3fR9e2GFVzj-9D8eTQylzYmg8iDeLTqA3hX8VpKWjMqWRQV5SdrvqPvEtE2acubWkQuraDRJ9_Wr1UBd5beJxqDtER49mr_HbCzoYb7DZk3hMvAk3aqrMSm-8/s220/eyelashes_mascara.gif' width='73px' height='73px'/>
<p>Nama saya Hendriono, Saya seorang freelance designer, blogger, teknisi. Spesialisasi pada Blogger blogs, CSS, XHTML dan jQuery</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' 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/hendriono' title='Twitter'>Twitter</a></li>
<li><a href='http://facebook.com/hendriono' title='Facebook'>Facebook</a></li>
<li><a href='http://digg.com/users/hendriono' title='Digg'>Digg</a></li>
<li><a href='http://delicious.com/hendriono' title='Del.Icio.Us'>Del.Icio.Us</a></li>
<li><a href='mailto:hendriono@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
Langkah 10
Simpan Template dan Preview blog...

Keterangan:
  • Lakukan modifikasi kode pada langkah 9 sesuai keinginan anda (yang diblok putih), dari mulai informasi blog, informasi author/penulis, sampai link-link yang akan dimasukan.
  • Mohon ma'af, kali ini belum bisa dijelaskan bagaimana semua ini bekerja, nanti kedepannya artikel ini akan diupdate mengenai bagaimana kode ini bekerja.
Catatan kaki:
[1] Spyre Studios
[2] Vertical Sliding Info Panel With jQuery
[3] Mempercepat Pemuatan Perpustakaan JavaScript

Wednesday, March 17, 2010

Menambah Informasi Profile Blogger

Posted by dav On 10:47 AM
Malam ini entah terserang penyakit malas dari mana, rencana awal mau memodifikasi script artikel terkait dengan tambahan gambar dan sebagian artikel secara otomatis dan atau mencoba jQuery vertical scroll news ticker plus thumbnail image tapi, ya begitulah... Rasa malas ini justru menguasai, dalam kejenuhan ini aku hanya mencoba mengunjungi blog-blogku yang tidak terawat dengan baik. Salah satunya adalah Design Graphics, begitu dilihat artikel terakhir, sempat ada rasa kaget juga karena artikel terakhir dibuat satu tahun yang lalu, tapi Google Page Rank tidak pernah berubah, hanya dengan bermodal 9 artikel, blog ini di beri rangking 3 oleh Google. Entahlah, aku tidak mengerti apa itu SEO dan apa pula pengaruhnya buat blog yang non komersil seperti itu (tidak terlalu penting).
Iseng-iseng melihat sidebar profile, terlihat dibawahnya ada informasi tambahan profile, diingat-ingat sepertinya Blogger Tune-Up belum pernah membuat artikel tersebut. Mesin pencari lokalpun digunakan untuk mencari artikel tambahan informasi profile, kalau saja artikel tersebut sudah dibuat, ternyata belum. Ya, dari pada tidak dibagikan tipsnya, mungkin saja diantara sahabat Blogger Tune-Up ada yang tertarik untuk memodifikasi tambahan informasi tersebut.

Menambah Informasi Profile Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget" biar tambah puyeng
Langkah 4
Cari kode dibawah ini:
<data:viewProfileMsg/>
Atau kode yang mana saja dibawah ini:
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
....
....
<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>

</div>
</b:includable>
</b:widget>
Langkah 5
Tambahkan kode dibawah ini pada kumpulan kode profile:
<ul>
<li><a alt='Facebook Account Anda' href='http://www.facebook.com/account_anda target='_blank'>Facebook</a></li>
<li><a alt='Twitter Account Anda' href='http://twitter.com/account_anda' target='_blank'>Twitter</a></li>
<li><a alt='Email Account Anda' href='mailto:account_anda@gmail.com' target='_blank'>Email</a></li>
<li><a alt='Account Anda Chat' href='ymsgr:sendIM?account_anda@yahoo.com' target='_blank'>Yahoo! Messenger</a></li>
<li><a alt='Blogger Tune-Up' href='http://modification-blog.blogspot.com/' target='_blank'>Blogger Tune-Up</a></li>
</ul>
Sehingga kode yang telah ditambahkan menjadi seperti dibawah ini:
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
....
....
<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
<ul>
<li><a alt='Facebook Account Anda' href='http://www.facebook.com/account_anda target='_blank'>Facebook</a></li>
<li><a alt='Twitter Account Anda' href='http://twitter.com/account_anda' target='_blank'>Twitter</a></li>
<li><a alt='Email Account Anda' href='mailto:account_anda@gmail.com' target='_blank'>Email</a></li>
<li><a alt='Account Anda Chat' href='ymsgr:sendIM?account_anda@yahoo.com' target='_blank'>Yahoo! Messenger</a></li>
<li><a alt='Blogger Tune-Up' href='http://modification-blog.blogspot.com/' target='_blank'>Blogger Tune-Up</a></li>
</ul>
</div>
</b:includable>
</b:widget>
Langkah 6
Ubah URL sesuai dengan account milik anda kemudian simpan template dan preview...
Keterangan:
  • Ubahlah Account Anda sesuai dengan Nama Account anda
  • Tambahkan link lainnya sesuai dengan keinginan anda dan kode tambahan harus diantara tag <li>...</li>
Selamat mencoba... Happy Blogging... :)

Menambahkan Catatan Kaki pada Artikel Blog

Posted by dav On 4:12 AM
Menjawab pertanyaan sekaligus permintaan dari beberapa pembaca setia Blogger Tune-Up, maka tips-n-trik kali ini tentang catatan kaki. Catatan kaki adalah daftar keterangan khusus tentang suatu sumber artikel atau keterangan yang digunakan untuk memperkuat artikel kita yang diambil dari suatu sumber yang dituliskan pada bagian bawah setiap akhir halaman artikel atau pada akhir bab[1]. Dan biasanya catatan kaki dipergunakan pada suatu karya ilmiah, tetapi tidak menuntup kemungkinan untuk karya tulis-karya tulis lainnya, misal pada artikel blog. Catatan kaki merupakan suatu bentuk penghargaan terhadap karya orang lain yang kemudian kita kutip pada artikel kita dan catatan kaki juga merupakan bagian dari kode etik penulisan suatu artikel.
Menambahkan Catatan Kaki pada Artikel Blog
Catatan kaki harus memenuhi ketentuan sebagai berikut :
  • Harus dapat mengidentifikasikan orang yang membuat karya tulis atau pernyataan tersebut.
  • Harus dapat mengidentifikasikan media komunikasi tempat karya atau pernyataan itu dimuat atau disampaikan.
  • Harus dapat mengidentifikasikan lembaga atau tempat yang menerbitkan karya atau penyataan tersebut.
Begitulah sekilas tentang catatan kaki, mohon ma'af jika ada kesalahan dan mohon dikoreksi, maklum saya bukan ahli bahasa... (mode bingung, salah apa bener ya?). Sebenarnya untuk membuat catatan kaki sangatlah mudah, karena teknik ini pernah dibahas sebelumnya pada artikel "Memahami Tag Anchor". Tapi ternyata hal itu tidak dapat diterapkan pada artikel blogger, masalahnya sebagai berikut:
  1. Jika kita menggunakan tanda "/" pada artikel blog maka blogger dengan otomatis akan menambahkan link http://www.blogger.com/.
  2. Jika kita menggunakan tanda "#" pada artikel blog maka blogger akan mengidentifikasi tanda tersebut sebagai alamat URL blog kita.

Menambahkan Catatan Kaki pada Artikel Blogger

Perhatikan contoh berikut!

Bagi kami pendidikan segala-galanya. Saya mau hidup kekurangan, tetapi pendidikan nomor urut satu. Pendidikan adalah sesuatu yang tidak bisa diambil dari kita. Kalau jabatan, harta, bisa dicopot.[1]

Catatan kaki:
[1] Wawancara Kompas dengan Dr. R. Moh. Marty M. Natalegawa, Minggu 11 Desember 2005

Ketika pembaca meng-klik link tanda [1] maka pembaca akan dibawa ke bagian catatan kaki pada bagian bawah artikel yang merupakan sumber dari artikel tersebut, dan jika pembaca mengklik link pada catatan kaki yang merupakan keterangan dari tanda [1] maka halaman baru akan terbuka yang merupakan alamat URL dari sumber artikel. Itu mungkin skenario dari catatan kaki.
Kode yang digunakan untuk tanda [1] pada artikel seperti dibawah ini:
<sup><a href="#footnote">[1]</a></sup>
  • Tag sup digunakan untuk membuat pemangkatan sehingga tanda [1] akan menjadi [1], tanda yang akan dipangkatkan harus diapit tag <sup>...</sup>.
  • Tag a digunakan sebagai tag anchor untuk mengaitkan pada suatu sumber, tanda yang akan diberikan anchor harus diapit tag <a>...</a> (untuk lebih mengenal tag anchor silahkan baca disini)
Tetapi jika anda hanya menggunakan tag seperti diatas maka secara otomatis blogger akan memberikan URL halaman utama blog kita sehingga kode menjadi seperti dibawah ini:
<sup><a href="http://modification-blog.blogspot.com/#footnote">[1]</a></sup>
Hal ini justru akan mengarahkan pembaca pada link halaman utama blog kita, bagaimana mengatasi masalah ini?
  • Terbitkan dulu artikel yang akan ditambahkan catatan kaki
  • Ambil (copy) URL artikel yang baru saja kita terbitkan
  • Kembali lagi ke post editor (mode Edit HTML) artikel yang baru saja kita terbitkan
  • Masukan (paste) URL artikel (yang diblok) yang sudah kita ambil pada kode tag catatan kaki seperti dibawah ini:
<sup><a href="http://modification-blog.blogspot.com/2010/03/menambahkan-catatan-kaki-pada-artikel.html#footnote">[1]</a></sup>
Lalu bagaimana menghubungkan antara tanda [1] dengan catatan kaki?
Masukan nama anchor pada tanda [1] yang berada dibawah catatan kaki, seperti dibawah ini:
<a name="footnote">[1]</a> <a href="http://dedehedriono.blogspot.com/" target="_blank">Wawancara Kompas dengan Dr. R. Moh. Marty M. Natalegawa, Minggu 11 Desember 2005</a>
  • Kode name="footnote" digunakan untuk memberikan nama tag anchor agar dikenali oleh tag href="#footnote"
  • Kode <a href="http://dedehendriono.blogspot.com/" target="_blank"> adalah URL tujuan sumber artikel

Sehingga jika di bongkar kode pada contoh artikel diatas adalah sebagai berikut:

Bagi kami pendidikan segala-galanya. Saya mau hidup kekurangan, tetapi pendidikan nomor urut satu. Pendidikan adalah sesuatu yang tidak bisa diambil dari kita. Kalau jabatan, harta, bisa dicopot.<sup><a href="http://modification-blog.blogspot.com/2010/03/menambahkan-catatan-kaki-pada-artikel.html#footnote">[1]</a></sup>

Catatan kaki:
<a name="footnote">[1]</a> <a href="http://dedehendriono.blogspot.com/" target="_blank">Wawancara Kompas dengan Dr. R. Moh. Marty M. Natalegawa, Minggu 11 Desember 2005</a>

Keterangan:
  • Untuk memasukan berbagai kode maka post editor harus dalam mode Edit HTML
Catatan kaki:
[1] Wikipedia Footnote

Monday, March 15, 2010

Memasang Widget Twitter

Posted by dav On 1:17 AM
Twitter adalah sebuah jaringan informasi realtime dengan kekuatan dari orang-orang diseluruh dunia yang memungkinkan kita berbagi dan menemukan informasi terbaru yang sedang terjadi[1]. Dengan Twitter kita bisa berbagi informasi paling hangat yang terjadi disekitar kita, walaupun karakternya terbatas hanya 140 karakter, tapi hal ini cukup untuk bisa memberikan informasi seperti halnya SMS.

Memasang Widget Twitter pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak"
Langkah 3
Tambahkan sebuah Gadget/Widget berjenis "HTML/JavaScript"
Langkah 4
Judul gadget/widget bebas, dan masukan kode dibawah ini pada bagian konten/isi:
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href="http://www.twitter.com/hendriono"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-a.png" alt="Follow me on Twitter" /></a>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/hendriono.json?callback=twitterCallback2&count=5" type="text/javascript"></script>
</div>
Langkah 5
Simpan gadget dan preview...

Keterangan:
  • Ubah nama "hendriono" dengan nama account twitter anda
  • Ubah nilai "5" untuk menentukan jumlah status yang akan ditampilkan

Catatan kaki:
[1] About Twitter

Thursday, March 11, 2010

Pratinjau Gambar dengan Efek jQuery Facebox

Posted by dav On 10:22 PM
Pratinjau Gambar dengan Efek jQuery Facebox[1] (Image Privew with jQuery Facebox Effect) merupakan salah satu dari sekian banyak efek-efek[2] pratinjau gambar dengan menggunakan framework jQuery. Prinsip kerjanya juga mirip-mirip antara satu efek dengan efek lainnya, kita bisa membandingkannya. Hanya saja dari sekian banyak efek pratinjau gambar yang pernah dicoba, efek facebox inilah yang paling cepat dan tidak terlalu memberatkan loading blog. Efek ini pula yang sekarang digunakan Blogger Tune-Up pada gambar yang disertakan pada setiap artikel.
Entah karena mirip efek yang digunakan facebook atau karena apa sehingga namanya menjadi Facebox. Tampilan efeknya cukup sederhana dengan paduan fade, zoom dan ukuran frame yang menyesuaikan dengan ukuran asli gambar. Silahkan klik gambar dibawah untuk demonya dan ikuti langkah penerapan Pratinjau Gambar dengan Efek Facebox jika sudah yakin ingin menggunakannya pada blog anda.
Pratinjau Gambar dengan Efek jQuery Facebox

Integrasi Efek jQuery Facebox pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
#facebox .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#facebox .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#facebox .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#facebox .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#facebox .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#facebox{left:0;position:absolute;text-align:left;top:0;width:100%;z-index:100}
#facebox .popup{position:relative}
#facebox table{border-collapse:collapse;margin:auto}
#facebox .body{background:#fff;padding:10px;width:370px}
#facebox img{background:transparent;border:0;margin:0;padding:0}
#facebox .footer{border-top:1px solid #DDD;margin-top:10px;padding-top:5px;text-align:right}
#facebox .tl,#facebox .tr,#facebox .bl,#facebox .br{height:10px;overflow:hidden;padding:0;width:10px}
#facebox .loading,#facebox .image{text-align:center}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
Langkah 7
Simpan template...

Setting Efek jQuery Facebox pada Artikel

Langkah A
Buat artikel dan upload sebuah gambar
Langkah B
Pastikan post editor berada pada mode Edit HTML, cari kode gambar seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600-h/gambar.jpg">
<img src="http://2.bp.blogspot.com/.../s400/gambar.jpg"/>
</a>
Langkah C
Sisipkan kode loader jQuery Facebox dan buang kode "-h" (tanpa tanda kutip) sehingga menjadi seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600/gambar.jpg" rel="facebox">
<img src="http://2.bp.blogspot.com/.../s400/gambar.jpg"/>
</a>
Langkah D
Terbitkan artikel anda...

Catatan kaki:
[1] Facebox
[2] Efek-efek gambar

Seperti Apakah Blogger Professional?

Posted by dav On 1:13 AM
Sebuah pertanyaan yang sering terdengar diantara para blogger, bahkan Blogger Tune-Up sering menerima komentar dan email dengan nada pertanyaan sama. Ada yang bertanya mengenai kategori blogger professional, ada yang bertanya bagaimana jika ingin menjadi blogger professional dan lain sebagainya. Sebenarnya pertanyaan tersebut sangatlah sulit untuk dijawab karena pada dasarnya professional dan amatirnya seorang blogger sangat sulit di identifikasi, bahkan Blogger Tune-Up mencoba untuk berdiskusi dengan para blogger yang dianggap professional tapi justru mereka sendiri tidak mau mengakui bahwa mereka sudah termasuk kategori professional. Untuk bisa memahami seperti apakah seorang blogger professional, dibawah ini adalah instrumen kecil yang bisa kita gunakan untuk mengidentifikasi orang lain atau diri sendiri.
Seperti Apakah Blogger Professional
1. Waktu
Seorang blogger yang baik akan sangat menghargai waktu dan akan selalu mencoba untuk meluangkan waktu, tidak hanya untuk menulis artikel pada blognya, tetapi lebih banyak lagi hal yang bisa dikerjakan, mulai dari berinteraksi dengan para pengunjung, membalas komentar-komentar pengunjung, melakukan riset secara online, mengumpulkan informasi dan atau hanya sekedar jalan-jalan ke blog orang lain. Hal ini penting kita lakukan sebagai seorang blogger, minimal satu jam sehari harus kita sisihkan waktu kita untuk melakukan hal-hal tersebut, karena itu yang akan memicu karakter seseorang untuk menjadi blogger, akan memicu pemikiran seseorang untuk terus berkarya dan menuangkan ide-ide yang lebih baik lagi. Mungkin pada saat kita mengawali membangun suatu blog, hal itu sangat banyak menghabiskan waktu, dari mulai menentukan topik, memilih layout, menambahkan fasilitas blog, membuat navigasi yang nyaman dan lain sebagainya.

2. Ahli dalam Suatu Topik
Seorang blogger professional harus memiliki keahlian pada topik yang dipilihnya. Hal ini untuk menciptakan kepercayaan para pembacanya, sehingga mereka yang berkunjung ke blog kita baik itu hasil undangan kita, hasil pencarian mesin pencari maupun karena kebetulan, mereka merasa penasaran untuk kembali lagi secara rutin membaca-baca artikel yang kita buat. Blogger harus benar-benar ahli dilapangan, misal dia adalah seorang web designer maka dia harus benar-benar orang lapangan yang siap setiap saat dengan apapun yang terjadi mengenai web design, baik itu mengenai ketentuan baru, baik itu mengenai perkembangan bahasa pemrograman baru sampai dengan topik yang sedang hangat dibicarakan mengenai web desain. Dan hal ini merupakan hasil pembelajaran yang berkesinambungan setiap saat, dalam arti kita memperoleh keahlian itu bertahap dari waktu ke waktu dengan keinginan yang tinggi untuk belajar terus mengenai topik yang menjadi pilihan dalam blognya.

3. Menyukai Topik
Banyak orang yang mengatakan bahwa "apa yang kita sukai itulah yang sebenarnya mampu memberikan kehidupan dan kenikmatan dalam hidup kita", hal ini juga berlaku dalam dunia blogger. Kesukaan pada sesuatu dan atau minat pada sesuatu biasanya akan membuat seseorang sangat serius menekuni hal tersebut dan selalu penasaran untuk terus menelusuri hal tersebut dan itu dilakukan tanpa paksaan atau bahkan menyenangkan. Inilah yang seharusnya dipilih menjadi topik utama dalam blog. Misal; anda sangat menyukai dan berminat dengan dunia teknik otomotif, maka bicarakan hal-hal yang berhubungan dengan dunia otomotif dan jangan terlalu memaksakan menulis sesuatu yang tidak berhubungan dengan minat dan kesukaan kita. Memaksakan diri untuk membuat topik yang tidak kita sukai atau tidak diminati justru akan menjatuhkan kita di mata blogger lain, hal ini akan membuat para pembaca enggan singgah di blog kita.

4. Kemampuan menulis
Hal ini juga harus diperhatikan, karena banyak blogger yang sepertinya tidak begitu memperhatikan hal ini. Ya memang, blog adalah catatan pribadi dari seseorang, tapi untuk apa kita menulis diblog kalau itu hanya untuk dinikmati sendiri atau sebagai arsip pribadi? Kalau tidak ada hubungan atau maksud dengan orang lain, tidak perlu kita menuliskannya di blog, cukup di buku diari. Blog lebih dari sekedar buku diari, karena tulisan yang kita buat akan pasti dibaca orang lain. Maka disinilah pentingnya memahami kemampuan menulis baik dari sisi tata bahasa, alur cerita yang bertahap, mudah di mengerti oleh pembaca lain dan dapat dipertanggungjawabkan. Jangan sampai artikel yang kita buat hanya mampu dimengerti oleh kita saja sebagai penulisnya, bagaimana dengan orang lain yang sengaja atau kebetulan singgah? Kemampuan menulis mutlak harus dipahami dan dikuasai oleh seorang blogger, walaupun tidak sebaik penulis atau pengarang buku yang sebenarnya, tetapi minimal pembaca mudah untuk mengerti apa maksud dari yang kita tuliskan dalam blog kita.

5. Pengetahuan Teknis Blog
Pengetahuan teknis blog adalah kemampuan untuk memahami dan memanejemen blog itu sendiri yang terkait dengan teknis dasar blog, karena blog adalah perangkat lunak berbasis manajemen isi, maka seorang blogger selayaknya menguasai dasar dari blog yang dikelolanya. Seperti kemampuan database, domain transfer, script, plugin, dan lain sebagainya. Hal ini agar tidak terlalu banyak mengeluarkan dana perawatan dan perbaikan (maintenance and repair), selain itu karena blog bersifat pribadi maka selayaknya pemilik blog tersebutlah yang harus menguasai luar dalam blog yang dikelolanya.

6. Pengetahuan Blogging
Pengetahuan blogging dengan pengetahuan teknis blogging ada saling keterkaitan yang kuat. Seperti menguasai trackback, ping, SEO, social bookmarking, twitter, RSS feed, facebook, podcasts, youtube, autoresponder dan hal lain yang bertujuan untuk meningkatkan rangking hasil pencarian pada mesin pencari serta fasilitas-fasilitas lain untuk membangun jaringan yang kuat dan berkesinambungan. Tentunya hal ini harus ditunjang kemampuan teknis dalam hal pemasangan script, modifikasi, penambahan kemampuan dan hal-hal dasar blog.

7. Kemampuan Mendesain Blog
Ada beberapa blogger menilai hal ini tidaklah begitu penting, tetapi akan lebih baik jika seorang blogger juga memiliki kemampuan mendesain blog, baik itu dalam hal layout yang unik dan kreatif, kecepatan akses halaman, maupun sistem navigasi yang mudah bagi para pengunjungnya, karena hal ini akan memberikan kesan pertama yang menarik bagi pengunjung. Tidak perlu terlalu jauh dalam hal penguasaan desain blog, cukup hal-hal dasar teknik desain, seperti menguasai dasar bahasa HTML, CSS dan optimasi blog. Tetapi harus diingat pula bahwa "content is the king" atau isi artikel adalah raja dari segala hal yang berhubungan dengan blog. Apalah artinya suatu rumah didesain bagus tapi ternyata tidak memiliki sesuatu yang menarik atau spesial didalamnya. Apa yang ada didalam menunjukan karakter blogger professional atau amatir.

8. Berjiwa Wirausaha
Berjiwa wirausaha bisa juga diartikan kemampuan memahami pasar dan kebutuhan masyarakat internet, hal ini untuk menarik jumlah pengunjung yang banyak dan berkesinambungan. Jika kita peka terhadap kebutuhan pasar masyarakat internet tentunya kita juga mudah untuk menemukan topik yang menarik bagi masyarakat internet, sehingga akan menciptakan daya tarik tersendiri bagi pengunjung. Mereka para pengunjung akan dengan mudah menemukan trend yang sedang hangat maupun produk yang dibutuhkan dan atau justru kita mampu menciptakan tren baru untuk di buat hal yang menarik untuk dibahas. Secara sederhana seorang blogger harus memiliki pola fikir bisnis (business mindset).

9. Kreatif Inovatif
Kreatif adalah kemampuan untuk menciptakan dan atau mengubah sesuatu yang kurang atau tidak menarik menjadi sesuatu hal yang sangat menarik. Sedangkan inovatif adalah kemampuan untuk menemukan sesuatu yang baru atau menarik. Kreatif dan inovatif adalah hal yang sangat berharga di masyarakat internet, nilai sebuah blog biasanya dilihat dari kedua aspek tersebut. Kreatif dan inovatif akan membuat seorang blogger mampu menemukan dan membuat tulisan berkualitas tinggi, akan mampu menemukan cara-cara baru untuk mempromosikan blog atau produk, dan akan mampu menemukan cara baru monetisasi blog.

10. Memiliki Jaringan
Konsep yang sederhana tapi merupakan suatu kekuatan untuk meningkatkan jumlah kunjungan pada blog yang dikelolanya. Seorang blogger harus memiliki hubungan yang baik dengan blogger lain atau bahkan dengan blogger yang lebih professional. Ini merupakan teknik terbaik untuk meningkatkan kualitas blog baik dari sisi artikel, karakter atau pun jumlah kunjungan. Semakin kuat dan banyak jaringan yang terbentuk dapat dipastikan secara perlahan tapi pasti kita sudah masuk dalam kategori blogger proffesional. Seperti halnya konsep Ukhuwah Islamiyah dalam Islam bahwa "memutuskan hubungan silaturahmi sama dengan memutuskan rejeki", makin banyak relasi semakin banyak rejeki. Insya Allah... Untuk membangun jaringan kita bisa saja manfaatkan fasilitas-fasilitas social networking, seperti; twitter, facebook, milis, dan lain sebagainya.

11. Kemampuan Berkomunikasi
Kemampuan berkomunikasi adalah salah satu sarana untuk memperkuat jalinan persahabatan antar blogger. Hal ini sangat berpengaruh kepada professionalisme seorang blogger untuk meningkatkan kualitas karakternya, baik itu karakter artikel maupun karakter pribadinya. Semakin lancar berkomunikasi semakin mudah kita memperoleh ide-ide berkualitas dan menarik. Selain mampu menguasai bahasa ibu kita juga harus menguasai bahasa internasional, hal ini untuk membangun jaringan yang bukan hanya bersifat lokal kedaerahan tetapi berlaku global. Bahasa Inggris merupakan salah satu bahasa internasional dan alangkah lebih baiknya kita menulis juga dengan bahasa tersebut, sehingga mampu menyentuh seluruh karakter pembaca secara global.

12. Rajin Menulis
Hal yang sepertinya tidak begitu diperhatikan oleh sebagian besar blogger adalah kontinyuitas menulis artikel. Hal ini terjadi karena kadang kita tidak menemukan ide yang perlu untuk ditulis. Untuk memancing ide-ide kreatif dan inovatif kita, mungkin artikel yang pernah dibahas[1] dapat membangkitkan ide-ide yang terdiam menjadi suatu artikel yang berkualitas. Pertahankan frekuensi menulis pada blog kita, minimal satu hari satu artikel, hal ini agar para pembaca kita tidak bosan dan merasa perlu untuk mengunjungi blog kita setiap hari.

Dari semua hal diatas, apakah kita memiliki ciri-ciri tersebut? Mari kita sama-sama menginstrospeksi diri, seandainya belum maka mulai hari ini mari kita belajar menjadi professional. Tidak ada kata terlambat dan tidak ada kata tidak mampu, semua bisa dan harus bisa... Ayo semangat menulis....!!!

Catatan Kaki:
[1] Menulis Artikel Blog Versi Darren Rowse

Tuesday, March 9, 2010

Statis Scroll to Top dengan jQuery

Posted by dav On 12:15 AM
Scroll to Top jika diterjemahkan secara bebas berarti gulung atau geser ke atas. Sebenarnya kita bisa saja menggulung halaman blog keatas melalui scroll bar pada browser yang biasanya terletak disebelah sisi kanan halaman blog. Tetapi jika halaman blog/artikel tersebut panjang maka ini cukup merepotkan pembaca blog kita ketika mereka ingin kembali ke bagian atas halaman, dengan tambahan fasilitas Statis Scroll to Top membuat proses scroll menjadi mudah, pembaca blog cukup dengan meng-klik satu kali tombol scroll yang selalu dalam posisi tetap (statis) maka halaman akan di geser/di gulung keatas dengan kecepatan yang berbeda-beda.
Statis Scroll to Top pada dasarnya adalah tag anchor yang pernah dibahas pada artikel "Memahami Tag Anchor", kemudian dilengkapi dengan jQuery membuat proses scroll itu menjadi halus, pergeseran halaman dari bawah menuju keatas awalnya cepat kemudian perlahan-lahan kecepatan menurun sampai berhenti pada bagian atas halaman. Demonya ada pada halaman blog ini sebelah kanan bawah dengan tombol panah ke atas.

Memasang Static Scroll to Top with jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode css dibawah ini diatas kode pada langkah 4:
#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode JavaScript jQuery 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'>
//<![CDATA[
$(document).ready(function(){
$('a[href*=#luhur]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
Langkah 8
Cari kode dibawah ini:
<body>
Langkah 9
Tambahkan kode id="luhur" pada kode langkah 8 sehingga menjadi seperti dibawah ini:
<body id="luhur">
Langkah 10
Cari kode dibawah ini:
</body>
Langkah 11
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 10:
<div id='kaluhur'>
<a href='#luhur' title='Luhur'><img src='http://lh6.ggpht.com/_xcD4JK_dIjU/S4QCfI_V6LI/AAAAAAAAD1A/JK107RTwhiw/d/kaluhur.gif'/></a>
</div>
Langkah 12
Simpan template dan preview blog...

Keterangan:
  • Perhatikan langkah 5! Ubah kode css sesuai keinginan anda; right=kanan; bottom=bawah; ini berarti tombol berada disisi kanan bawah; jika ingin berada di sebelah kiri bawah ubah "right" menjadi "left" (tanpa tanda kutip).
  • Perhatikan langkah 11! Ubah url gambar (http://URL/kaluhur.gif) jika anda akan menggunakan gambar milik anda sendiri.
Selamat mencoba dan semoga berhasil. Happy blogging :)

Sunday, March 7, 2010

Tooltip - jQuery Bubble Info

Posted by dav On 3:31 AM
Bubble Info atau Tooltip atau Bubble Help adalah sebuah elemen umum antar muka pengguna grafis yang akan menampilkan suatu informasi dari suatu item pada halaman website ketika seorang pengunjung mengarahkan (hover) pointer mouse atau meng-klik item tersebut[1]. Item pada halaman website yang bisa diberikan elemen tooltips biasanya berupa hyperlink, tooltips ini akan bekerja memberikan suatu informasi jika pengunjung tersebut mengarahkan mouse pointernya atau meng-klik hyperlink yang ada pada suatu halaman website.
Ini biasanya digunakan untuk memperjelas suatu hyperlink yang akan dituju atau hanya sekedar memberikan informasi tambahan dari suatu hyperlink. Sebenarnya banyak jenis dari tooltip yang sudah dibuat oleh para master web desain, dari yang hanya sekedar menggunakan elemen title, elemen css, elemen javascript, elemen jQuery dan masih banyak lagi. Kedepannya Blogger Tune-Up akan memberikan tutorial tentang tooltip jenis lainnya.
Tooltips - jQuery Bubble Info

Integrasi jQuery Bubble Info pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:
p.popup {
display:none;
height:42px;
padding:3px 30px 5px 10px;
position:absolute;
width:260px;
background-attachment: scroll;
background-color: transparent;
background-image: url(http://s2.sigmirror.com/files/58405_dzlw1/link_bubble.png);
background-repeat: no-repeat;
background-position: left top;
}
.bubbleInfo {
position:relative;
z-index:100;
text-shadow:#000 1px 1px 1px;
}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.bubbleInfo').each(function () {
var distance = 20;
var time = 150;
var hideDelay = 100;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var picu = $('.picu', this);
var info = $('.popup', this).css('opacity', 0);
$([picu.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
return;
} else {
beingShown = true;
info.css({
top: -23,
left: -270,
display: 'block'
}).animate({
left: '-=' + distance + 'px',
opacity: 0.95
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
left: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//]]>
</script>
Langkah 7
Simpan template...

Integrasi jQuery Bubble Info pada Hyperlink

Secara sederhana untuk mengaktifkan jQuery Bubble Info pada hyperlink sebagai berikut:
Dibawah ini adalah contoh hyperlink standar:
<a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a>
Tambahkan kode jQuery Bubble Info seperti dibawah ini:
<div class="bubbleInfo">
<a class="picu" href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a>
<p class="popup">Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono.</p>
</div>
Yang di blok adalah kode tambahan untuk mengaktifkan jQuery Bubble Info.

Keterangan:
  • Setelah jQuery Bubble Info diintergariskan pada template maka seluruh hyperlink baik pada template maupun pada artikel bisa ditambahkan jQuery Bubble Info.
  • jQuery Bubble Info ini cocok diterapkan pada sidebar
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan Kaki:
[1] Wikipedia Tooltip

Saturday, March 6, 2010

Membubuhkan Tandatangan Pada Artikel Blog

Posted by dav On 10:16 AM
Pada saat kita berjalan-jalan untuk membaca-baca artikel, kita sering melihat tanda tangan pada akhir artikel. Ini merupakan salah satu identitas juga dari suatu blog, selain untuk memperindah artikel juga akan terlihat bahwa sang penulis serius dengan apa yang ditulisnya. Tanda tangan atau signature yang dibubuhkan sangat memperkuat karakter artikel dan penulis, hal ini untuk meyakinkan para pembaca bahwa "saya bersungguh-sungguh dengan apa yang saya tulis". Begitu mungkin kurang lebih maksud dan tujuan signature atau tanda tangan pada artikel.
Membubuhkan Tandatangan Pada Artikel Blog

Membuat dan menyisipkan tanda tangan/signature

Langkah 1
Buatlah tanda tangan anda dengan menggunakan software desain grafis sekelas Adobe Photoshop, atau jika anda kurang begitu paham dengan software tersebut silahkan gunakan situs penyedia layanan signature/tanda tangan seperti halnya website mylivesignature. Silahkan ikuti petunjuk pembuatan tanda tangan pada website tersebut.
Langkah 2
Jika tanda tangan/signature sudah jadi silahkan upload pada layanan penyimpan data gambar atau upload pada blogger itu sendiri
Langkah 3
Login ke Blogger
Langkah 4
Masuk ke "Tata Letak - Edit HTML"
Langkah 5
Klik/Cheklist "Expand Template Widget"
Langkah 6
Cari kode dibawah ini:
<data:post.body/>
Langkah 7
Simpan link tanda tangan dibawah kode pada langkah 6, seperti dibawah ini:
<img src='url_gambar_tandatangan_signature' style='border:0px;'/>
Langkah 8
Simpan template dan preview blog

Keterangan:
  • Jika blog anda terdiri dari beberapa penulis/author silahkan gabungkan, untuk menggabungkannya silahkan baca pada artikel "Memanajemen Author Blogger"
  • Untuk mengupload gambar tanda tangan kita bisa menggunakan layanan upload pada artikel di blogger setelah itu ambil link gambarnya.
Selamat mencoba dan semoga berhasil. Happy blogging :)

Memanajemen Author Blogger

Posted by dav On 8:13 AM
Blogger memberikan kesempatan kepada para penggunanya untuk bisa menambahkan para penulis blog tersebut lebih dari satu. Hal ini bermanfaat bagi mereka yang ingin membuat blog sebagai sebuah komunitas yang terdiri dari banyak penulis. Tetapi kemudian akan muncul permasalahan jika ternyata blog tersebut ingin memberikan suatu identitas khusus untuk para penulisnya. Misal tanda tangan berbeda bagi setiap penulisnya, atau iklan yang tampil disesuaikan dengan penulisnya. Bagaimana kita memanajemen para author atau penulis ini?
Memanajemen Author Blogger

Kode Manajemen Author

Secara umum script untuk memanajemen para penulis/author blogger agar dapat diatur dengan mudah adalah seperti dibawah ini:
<b:if cond='data:post.author == &quot;NamaAuthor1&quot;'>
-- Kode identitas untuk author/penulis 1 --
</b:if>
<b:if cond='data:post.author == &quot;NamaAuthor2&quot;'>
-- Kode identitas untuk author/penulis 2 --
</b:if>
<b:if cond='data:post.author == &quot;NamaAuthor3&quot;'>
-- Kode identitas untuk author/penulis 3 --
</b:if>
<b:if cond='data:post.author == &quot;NamaAuthor4&quot;'>
-- Kode identitas untuk author/penulis 4 --
</b:if>
dan seterusnya...

Pengaturan/Konfigurasi Author

Jika diperhatikan dari kode diatas maka kita hanya perlu melakukan pengaturan pada:
  • NamaAuthor# : ganti kode NamaAuthor sesuai dengan profil author atau penulis dari blog tersebut, misal Penulis 1 nama profilnya Hendriono maka ganti kode NamaAuthor1 dengan Hendriono, Penulis 2 nama profilnya Master maka ganti kode NamaAuthor2 dengan Master dan seterusnya sesuai dengan jumlah penulis/author
  • -- Kode identitas untuk author/penulis # -- : gantilah kode ini (yang diblok) dengan kode identitas dari author atau penulis, jika itu berupa kode iklan maka disinilah penempatan kode iklan tersebut, maka iklan yang ditampilkan akan sesuai dengan kode NamaAuthor#

Pembacaan Kode Manajemen Author

Jika kita baca kode diatas adalah sebagai berikut:
<b:if cond='data:post.author == &quot;NamaAuthor1&quot;'>
-- Kode identitas untuk author/penulis 1 --
</b:if>
Kode ini jika dibaca berarti; jika kondisi author sama dengan author 1 maka kode di antaranya (-- Kode identitas untuk author/penulis 1 --) akan ditampilkan tetapi jika tidak sama dengan maka kode berikutnya yang akan ditampilkan, dan seterusnya. Bagaimana jika ada penulis atau author yang tidak sempat tercantum? Maka blogger tidak akan menampilkan apapun.

Contoh penerapan teknik ini pernah digunakan pada artikel "Berbagi Penghasilan Iklan dengan Kontributor"
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Thursday, March 4, 2010

Menambahkan Tombol Google Buzz pada Blogger

Posted by dav On 8:29 PM
Satu lagi fasilitas dari Google yang diberi nama Google Buzz. Fasilitas ini hampir sama halnya dengan Twitter dan Facebook yang berfungsi sebagai sarana berbagi informasi dalam sebuah jejaring sosial. Dengan Google Buzz kita bisa berbagi photo, artikel, catatan, video, informasi terbaru kita, dan masih banyak lagi.
Karena sifatnya yang mampu saling bertukar informasi inilah, maka bisa digunakan sebagai salah satu sarana penting juga bagi para blogger untuk saling berbagi artikel dari blog yang dikelola, tentunya dengan tujuan agar semakin banyak para pembaca yang mau singgah untuk membaca-baca artikel yang kita buat. Peningkatan jumlah kunjungan (traffic) pada blog kita ini merupakan nilai lebih bagi suatu blog dan ini pula yang bisa mendongkrak posisi SERP[1] blog kita di mata mesin pencari, ya ujung-ujungnya SEO[2] juga.

Integrasi Tombol Google Buzz pada Artikel Blog [Versi 1]

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<div class='post-header-line-1'/>
Atau kode ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode dibawah ini dan tempatkan diantara kode pada Langkah 4:
<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>
Langkah 6
Simpan Template dan Preview blog...

Integrasi Tombol Google Buzz pada Artikel Blog [Versi 2]

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<div class='post-header-line-1'/>
Atau kode ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode dibawah ini dan tempatkan diantara kode pada Langkah 4:
Tombol Kecil:
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img alt='Buzz this' src='http://img2.pict.com/9c/09/57/2854010/0/buzzthis.gif'/></a>
Tombol Besar:
<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img alt='Buzz this' src='http://img2.pict.com/15/da/3e/2809374/0/googlebuzz.png'/></a>
Langkah 6
Simpan Template dan Preview blog...

Keterangan :
Ubahlah link gambar dibawah ini, jika kita ingin mengubah gambarnya (lihat link yang diblok pada Langkah 5):
Catatan Kaki:
[1] Search Engine Result Page
[2] Search Engine Optimization
Pada artikel kali ini, Blogger Tune-Up akan membahas bagaimana cara mengurangi waktu pemuatan (Loading) perpustakaan JavaScript dengan menggunakan fasilitas Auto-Loading (awal pembongkaran skenario dibelakang Blogger Tune-Up). Hal ini sangat jarang di perhatikan oleh para pemilik blog dan ini memang termasuk fasilitas terbaru dari Google AJAX API. Pada awalnya memang cukup rumit, tetapi dengan penuh kesabaran dan ketekunan Insya Allah hal ini akan menjadi mudah.
Mempercepat Pemuatan Perpustakaan JavaScript
Bahkan Google sendiri dalam dokumen resminya mengatakan "Adalah mungkin untuk memuat secara otomatis daftar API atau perpustakaan Javascript ketika sedang memasukan loader script. Hal ini dilakukan dengan tujuan untuk mengurangi waktu pemuatan dalam beberapa kasus dengan menghilangkan satu permintaan Javascript pada saat pemuatan. Fitur lanjutan ini bisa menjadi sangat sulit untuk diterapkan, tergantung pada situasi yang tepat. Oleh karena itu, kami sarankan penggunaan auto-loading harus dipertimbangkan hanya dalam kasus-kasus tertentu ketika pengurangan latency sangat penting."
Tetapi perlu juga kita pertimbangkan lebih jauh penggunaan Auto-Load ini untuk membuat para pengunjung kita lebih menikmati blog atau website kita dengan proses pemuatan halaman yang lebih cepat, sehingga penting dan tidak pentingnya seperti saran Google menjadi hal yang tidak lagi perlu kita perdebatkan. Kecuali para pembaca Blogger Tune-Up ingin memperdebatkannya.

Mari kita mulai...

Anggap kita menggunakan jQuery dan Google Map API, maka kode normalnya seperti dibawah ini:
<head>
<!-- jQuery 1.3.2 -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<!-- Google Map API V3 -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
Atau kita juga bisa menuliskannya seperti dibawah ini:
<head>
<!-- Google's AJAX APIs -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3", {other_params:"sensor=false"});
google.load("jquery", "1.3.2");
</script>
</head>
Cara diatas adalah cara terbaik dan teraman dalam pemanggilan perpustakaan JavaScript (salah satunya pernah dibahas dalam artikel "Solusi JavaScript untuk Pengguna Blogger"). Tetapi disini kita membicarakan bagaimana cara mengurangi waktu (mempercepat) pemuatan perpustakaan JavaScript tersebut. Ini artinya segala sesuatu harus dimuat hanya dengan satu kali pemanggilan. Artinya cukup satu kali pemuatan untuk semua perpustakaan JavaScript yang kita perlukan.

Menggunakan Fasilitas Auto-Loading

Awalnya kita harus menuliskan script konfigurasi kecil agar perpustakaan Google mengenalinya dengan apa yang kita butuhkan. Hal ini sesuai dengan kebutuhan kita yang bisa saja menjadi agak rumit. Untungnya Google memberikan fasilitas Autoloader Wizard, tetapi terbatas hanya untuk beberapa perpustakaan utama yang didukung oleh Google, dan tidak satupun menerima dari luar, sebagai contoh jQuery. Hal ini membuat kita harus menuliskan sendiri konfigruasi script yang dibutuhkan. Walaupun demikian ini justru membuat kita lebih mudah untuk memahami bagaimana hal ini bekerja jika kita mau belajar menuliskan sendiri konfigurasi script-nya.

Mari kita lanjutkan...
Seperti contoh yang telah kita ambil diatas, maka untuk menggunakan fasilitas Autoloading, kita harus menuliskan konfigurasi script-nya seperti dibawah ini:
{
"modules" : [
{
"name" : "jquery",
"version" : "1.3.2"
},
{
"name" : "maps",
"version" : "3",
other_params:"sensor=false"
}
]
}
Mudah-mudahan hal diatas cukup jelas. Jika diperhatikan script diatas, maka kita membutuhkan 2 module, yang pertama jQuery Versi 1.3.2 dan yang kedua Google Map API Versi 3.0 (catatan: parameter sensor wajib kita tambahkan walaupun "false").
Sekarang kita akan memadatkannya sehingga menjadi seperti dibawah ini:
{"modules":[{"name":"jquery","version":"1.3.2"},
{"name":"maps","version":"3",other_params:"sensor=false"}]}
Jika diperhatikan script diatas terpisah terdiri dari dua baris, yang harus kita pertimbangkan adalah menjadikannya script tersebut satu baris, mejadi seperti dibawah ini:
{"modules":[{"name":"jquery","version":"1.3.2"},{"name":"maps","version":"3",other_params:"sensor=false"}]}
Mudah-mudahan sampai disini masih bisa dipahami dengan baik. Sekarang kita akan meng-encode URL tersebut menjadi seperti dibawah ini:
%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%223%22%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D
Proses encode URL dilakukan agar script dibaca biasa layaknya kode HTML biasa. Kita bisa menggunakan berbagai service encode URL dari pihak lainnya, misal link ini.
Selanjutnya kita menggabungkan URL yang panjang hasil encode dengan loader script, sehingga script menjadi seperti dibawah ini:
<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%223%22%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D">
Akhirnya selesai juga...Sekarang blog/website kita hanya memerlukan satu kali pemuatan walaupun terdiri dari jQuery dan Google Map API, jelas hal ini lebih cepat dari pada biasanya. Dan kita pun bisa menambahkan berbagai perpustakaan lain sebanyak yang kita perlukan hanya dengan satu kali pemuatan, dan itu pun akan lebih cepat lagi karena script terintegrasi sebagai script HTML. Bukankah hal ini lebih baik?

Terjadi kesalahan?

Untuk menjebak setiap kesalahan, kita bisa melihat respon Google, hal ini akan diberitahukan dengan "Error: Invalid autoload". Kita juga bisa menggunakan Firefox's Error Console, atau bahkan cara termudah adalah dengan membuka halaman kita, jika menampilkan var error = new Error("Invalid autoload."); ini berarti terjadi kesalahan dengan konfigurasi script yang kita tuliskan/masukan.

Sumber inspirasi:
Selamat mencoba dan semoga berhasil... Happy Blogging :)