Wednesday, September 30, 2009

Membuat Widget Subscribe

Subscribe adalah fasilitas yang dipergunakan untuk menyebarkan artikel dari blog kita kepada mereka yang berlangganan artikel via email secara otomatis. Memang banyak website yang menyediakan fasilitas ini, tetapi FeedBurner tetap menjadi favorit selain konfigurasi yang mudah juga karena telah di ambil alih oleh Google sehingga layanan ini ada jaminan terus diberikan secara gratis dalam jangka waktu yang panjang. Salah satu dari sekian fasilitas yang diberikan FeedBurner yang terkenal adalah fasilitas subscribe, tetapi beberapa blogger kurang begitu suka dengan antar muka subscribe standar dari FeedBurner.
Pada artikel kali ini Blogger Tune-Up akan memberikan tips trik membuat antar muka FeedBurner yang lebih menarik. Hasil akhir antar muka subscribe bisa kita lihat pada screenshot dibawah ini.

Langkah pembuatan widget subscribe

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://lh6.ggpht.com/_xcD4JK_dIjU/SsRNy8VKhOI/AAAAAAAADd0/ZIspMIgXEvU/d/subscribebg.png') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://lh4.ggpht.com/_xcD4JK_dIjU/SsRNy8mkHII/AAAAAAAADdw/X_THccX8W2Q/d/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}
Langkah 5
Simpan Template
Langkah 6
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 6
Tambah sebuah gadget baru dengan type "HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini didalam konten dengan judul konten bebas (misal:Subscribe):
<div id="subscribe">
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
<input src="http://lh5.ggpht.com/_xcD4JK_dIjU/SsRNzECIbOI/AAAAAAAADd4/IbXDZGxyRRo/d/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div>
</form>
</div>
Langkah 8
Klik tombol "Simpan"
Langkah 9
Preview blog anda

Langkah modifikasi kode

Perhatikan langkah 7, perhatikan kode dibawah ini:
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
Ubahlah sesuai dengan link yang telah diberikan FeedBurner.

Selamat mencoba dan semoga berhasil. Happy blogging... :)

Tuesday, September 29, 2009

Membuat Baris Menu Navigasi Berjenjang

Banyak para blogger yang masih kebingungan dalam membuat menu navigasi yang berjenjang atau dalam bahasa aslinya dikenal dengan multi-level navigation bar. Dalam study case kali ini Blogger Tune-Up akan membantu membahas multi-level navigation bar dengan metode yang sederhana dan masih sangat standar. Tetapi anda akan mudah untuk memahami dan memodifikasinya sesuai dengan selera masing-masing. Blogger Tune-Up akan mencoba mengimplemetasikan multi-level navigation bar menggunakan kode HTML, CSS dan beberapa baris kode JavaScript dengan basis kode jQuery untuk menampilkan dan menyembunyikan sub menunya.
Hasil akhir dari Study Case kali ini kurang lebih seperti di illustrasikan pada gambar di bawah ini:
Multi-Level Navigation Bar
Berikut pembahasan tentang Menu Navigasi Berjenjang (Multi-Level Navigation Bar)

1. Struktur Dasar Menu Navigasi Berjenjang

Dibawah ini model dasar dari menu navigasi berjenjang:
Membuat Baris Menu Navigasi Berjenjang
Dibawah ini struktur dasar kode HTML-nya yang akan kita terapkan pada blog:
<div id="nav"> <!-- wadah navigasi -->
<ul>
<li>item <!-- main item -->
<ul> <!-- item submenu -->
<li>sub item</li>
</ul>
</li>
<ul>
</div>
Dibawah ini contoh penggunaan kode HTML pada menu navigasi berjenjang:
<div id="nav">
<ul>

<li><a href="#">Kategori</a>
<ul class="submenu">
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Dede Hendriono</a></li>
</ul>
</li>

<li><a href="#">Layanan</a>
<ul class="submenu">
<li><a href="http://www.feedburner.com/">Subscribe</a></li>
<li><a href="http://dehagoblog.blogspot.com/">RSS Feed</a></li>
</ul>
</li>

<li><a href="#">Alat</a>
<ul class="submenu">
<li><a href="http://bonprog.blogspot.com/">Ads Converter</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">Meta Tag Generator</a></li>
</ul>
</li>

<ul>
<div>
Untuk menambah item menu atau item submenu cukup dengan menambahkan tag <li> dengan tag <ul> didalamnya.

2. CSS (Cascading Style Sheet)

Berikut adalah code dasar CSS yang akan mempengaruhi tampilan akhir dari menu navigasi berjenjang, dalam hal ini kode CSS masih sangat standar sehingga anda dapat memodifikasinya sesuai dengan selera. Kode ini harus di tempatkan di atas kode ]]></b:skin> pada template blogger atau jika tidak harus terletak di antara tag <style> kode css </style>.

2.1. Kode wadah (container)
Kode wadah (container) dari menu navigasi berjenjang yang dipanggil oleh kode HTML dengan <div id="#nav">:
#nav{
height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
2.2. Kode link navigasi
Kode link navigasi yang akan mempengaruhi tampilan menu utama navigasi berjenjang dan juga akan mempengaruhi sub menu lainnya pada menu navigasi berjenjang.
#nav ul li a:link,
#nav ul li a:visited{
color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}
#nav ul li a:hover{
color:#EBEFF7;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}
2.3. Kode sub menu
Kode sub menu yang akan mempengaruhi tampilan sub menu navigasi berjenjang. Kode CSS ini dipanggil oleh kode HTML dengan kode <ul class="submenu">:
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}
Maka secara keseluruhan kode CSS menjadi seperti dibawah ini:
#nav{height:32px;line-height:32px;background:#3B5998;padding:0 10px;}
#nav ul,#nav ul li {margin:0;padding:0;list-style:none;}
#nav ul li{float:left;display:block;}
#nav ul li a:link,#nav ul li a:visited{color:#FFF;font-size:11px;font-weight:bold;text-decoration:none;padding:0 20px 0 6px;display:block;}
#nav ul li a:hover{color:#EBEFF7;}
#nav ul li ul li{float:none;display:block;}
#nav ul li ul li a:link,#nav ul li ul li a:visited{color:#444;font-size:11px;font-weight:bold;text-decoration:none;padding:0 10px;clear:both;border-bottom:solid 1px #DEDEDE;}
#nav ul li ul li a:hover{color:#3B5998;background:#EBEFF7;}
.submenu {position: absolute;width: 160px;background: #FFF;padding: 10px;border: solid 1px #2E4B88;border-top: none;display: none;line-height: 26px;z-index: 1000;}

3. Kode jQuery

Setelah dua langkah diatas dilewati sebenarnya menu navigasi berjenjang sudah jadi tetapi tidak memiliki efek atau sub menu akan ditampilkan tanpa bisa di sembunyikan. Maka kita perlu menambahkan kode jQuery untuk memberikan efek, jika mouse diarahkan ke menu utama maka sub menu akan ditampilkan (show) dan jika mouse meninggalkan menu utama maka sub menu akan disembunyikan (hide).
3.1. Menambahkan Basis Kode jQuery
Tambahkan file utama jQuery yang berfungsi sebagai dasar dari efek menu navigasi berjenjang. (baca artikel Solusi JavaScript)Tambahkan kode dibawah ini diatas kode </head>:
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
3.2. Menambahkan kode JavaScript jQuery
Tambahkah kode JavaScript dibawah ini diatas kode </head>, kode ini digunakan untuk menghubungkan kode jQuery dengan kode CSS agar terbentuk efek show/hide:
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});

$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {
nav();
});
</script>
Atau anda bisa membuat kode diatas sebagai file eksternal JS.

Keterangan:
Selamat mencoba dan semoga berhasil. Happy blogging... :)

Saturday, September 26, 2009

Perlebar Ukuran Kotak Komentar

Sejak blogger menyertakan kotak komentar dibawah posting, beberapa tutorial dari para master blog pun bermunculan, tetapi jika kita lihat lebar kotak komentar tersebut seperti kurang seimbang dengan lebar artikel karena ukuran standarnya hanya 300px x 320px. Hal ini cukup mengurangi keindahan bagi blog kita. Sebenarnya hal ini mudah saja bagi kita, jika berniat untuk menyesuaikan lebar kotak komentar dengan lebar artikel. Jika berniat mencoba blogger hack kali ini, blog kita harus sudah menggunakan penempatan kotak komentar di bawah artikel, jika belum silahkan baca disini.
Perlebar Ukuran Kotak Komentar

Modifikasi Lebar Kotak Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
Langkah 5
Ubah nilai 100% pada kode width='100%' sesuai dengan lebar yang sesuai, dan atau bisa juga menggunakan angka saja, misal 535 atau menggunakan satuan pixel, misal 515px. Angka inilah yang digunakan untuk mengatur lebar kotak komentar.
Langkah 6
Simpan template dan Preview blog anda...

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

Tuesday, September 22, 2009

Fasilitas Pemenggalan Artikel (Baru) dari Blogger

Fasilitas yang ditunggu-tunggu oleh para Blogger akhirnya ditambahkan oleh Blog*Spot, yaitu fasilitas pemenggalan artikel atau disebut "After the jump". Berbagai teknik pemenggalan artikel untuk Blog*Spot telah hadir di antara para Blogger, mulai dengan kode JavaScript yang sederhana hingga kode-kode yang rumit, yang pada dasarnya untuk membuat pemenggalan artikel menjadi lebih mudah. Sekarang teknik-teknik yang rumit untuk membuat pemenggalan artikel (Readmore) sudah tidak diperlukan lagi, jelas ini menunjukan keseriusan para pengembang Blogger dalam mengelola fasilitas Blogger dan semua itu diberikan secara gratis. Kita sebagai pengguna Blog*Spot sangat dimanjakan dengan berbagai fasilitas yang tidak murah dan mudah. Terima kasih yang sebesar-besarnya kepada tim pengembang (developer) Blogger.
Untuk mengintegrasikan fasilitas ini sangatlah mudah, karena fasilitas "After the jump" sudah diintegrasikan pada post editor tanpa diperlukan penambahan atau modifikasi kode HTML. Pada saat menuliskan artikel kita hanya perlu menyisipkan pemenggalan artikel dengan meng-klik icon toolbar (khusus post editor jenis baru) "Insert Jump Break" seperti gambar dibawah ini.
Pemenggalan Artikel Blogger
Ketika kita meng-klik icon tersebut maka pada artikel akan muncul garis berwarna abu-abu, hal ini menunjukan posisi artikel yang terpenggal. Garis penggal ini dapat digeser-geser pada artikel, dan kita bisa menempatkannya dimana pun.
Jika kita tidak menggunakan post editor jenis baru, kita masih tetap dapat menggunakan fasilitas pemenggalan artikel (readmore) ini dengan menambahkan kode <!-- more --> pada artikel melalui mode Edit HTML diposisi mana kita akan memenggal artikel.
Pemenggalan Artikel Blogger
Setelah itu kita siap menerbitkan artikel kita dengan artikel yang sudah terpenggal, jika pembaca ingin membaca keseluruhan artikel maka pembaca cukup meng-klik link Readmore atau Selengkapnya.
Jika kita ingin mengubah kata "Readmore" pada link pemenggalan artikel maka kita cukup mengubahnya melalui tab Tata Letak|Elemen Halaman. Klik tombol "Edit" pada "Posting Blog Widget", dan ubahlah kata pada kotak "Teks tautan laman entri:" sesuai dengan keinginan kita.

Integrasi Kode Pemenggalan Artikel

Bagi kita yang sudah terlanjur menggunakan template kesayangan dari pihak-pihak ketiga tidak perlu bingung untuk menambahkan fasilitas pemenggalan artikel ini, kita hanya perlu menambahkan beberapa baris kode agar fasilitas ini dapat terintegrasi pada blog kita.
Langkah integrasi pada template:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 4:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Langkah 6
Simpan template dan fasilitas pemenggalan artikel sudah terintegrasi pada blog kita.
Untuk menggunakan fasilitas pemenggalan artikel seperti telah dijelaskan diatas, lebih jelasnya silahkan baca disini.
Selamat mencoba dan mudah-mudahan berhasil. Happy blogging... :)

Sunday, September 6, 2009

Membuat Wadah iBox (iBox Container)

Efek yang satu ini lebih universal, maksudnya bisa digunakan untuk berbagai keperluan tidak terbatas hanya untuk menampilkan efek pada gambar. Berbeda dengan efek-efek sebelumnya yang pernah Blogger Tune-Up bahasa, seperti; efek Magnify, efek FancyZoom, efek Zoom, dan efek LightBox yang hanya terfokus untuk memberikan efek pada gambar (image effect). Makanya efek ini disebut iBox Container oleh iBegin Labs Project sebagai developernya.
Blogger Tune-Up telah mencobanya di Kotretan Hendriono dan hanya digunakan untuk memberikan efek pada gambar, jika ingin melihat previewnya sebelum mencoba memasangnya pada blog. Wadah iBox dapat diterapkan untuk berbagai keperluan, diantaranya:
  • Memberikan efek pada gambar
  • Memanggil sekaligus wadah document lain (Loading External File HTML dengan AJAX)
  • Wadah Vidoe YouTube
jQuery iBox Container

Langkah integrasi iBox Container pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script src='http://www.ibegin.com/labs/ibox/ibox/ibox.js' type='text/javascript'/>
<script type='text/javascript'>iBox.setPath(&#39;http://www.ibegin.com/labs/ibox/ibox/&#39;);</script>
Langkah 5
Simpan template...

Modifikasi Kode Gambar Pada Artikel

Langkah A
Upload sebuah gambar pada artikel
Langkah B
Edit kode gambar melalui mode Edit HTML
Langkah C
Cari dan perhatikan kode dibawah ini (utamakan kode dengan warna biru):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600-h/SampleUserLicense.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>
Langkah D
Tambahkan kode iBox Container seperti dibawah ini (kode warna biru):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600-h/SampleUserLicense.jpg" rel="ibox" title="Keterangan Gambar"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>
Jika gambar tidak mampu diload buang kode -h pada kode gambar, sehingga kode menjadi seperti contoh dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/s1600/SampleUserLicense.jpg" rel="ibox" title="Keterangan Gambar"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="URL-GAMBAR/s200/SampleUserLicense.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXXXX"/></a>
Langkah E
Terbitkan artikel...

Keterangan:
Jika ingin mengenal lebih jauh mengenai fungsi iBox Container silahkan kunjungi iBegin Labs Project dan khusus untuk mempelajari iBox Container silahkan download disini.

Selamat mencoba dan semoga berhasil. Silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)

Saturday, September 5, 2009

Membuat Keterangan Gambar (Image Caption)

Jika kita membaca-baca buku hampir semua gambar yang disertakan dalam artikel selalu diberi keterangan gambar (image caption) hal ini berfungsi untuk memperjelas gambar dan agar antara gambar dengan artikel ada saling keterkaitan. Pembaca akan dengan mudah memadukan antara artikel dengan gambar, hal ini karena pembaca pada umumnya akan merasa yakin jika artikel disertai gambar. Secara default Blogger tidak memberikan fasilitas ini, sehingga kita perlu menambahkan beberapa baris kode agar gambar yang kita sertakan dalam artikel dapat diberi keterangan dibagian bawah. Walaupun kode image caption yang akan kita gunakan belum 100% otomatis, tapi tidak ada salahnya Blogger TuneUp menyuguhkannya, mungkin diantara pembaca ada yang mampu membuatnya menjadi otomatis tanpa ada modifikasi manual.
Ayat-Ayat Cinta

Integrasi Image Caption 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 tepat diatas kode pada langkah 3:
/* Image Caption */
.keterangan {border: 1px solid #ddd;text-align: center;background-color: #eee;padding: 10px 0 10px 0;-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.keterangan img {margin: 0px 0px 10px 0px;padding: 0px;border: 1px solid #ddd;}
.keterangan p.keterangan-text {margin: 0px;padding: 0px 0px 0px 0px;font-size: 12px;font-weight: bold;line-height: 12px;font-family: Arial, Helvetica, sans-serif;font-style: normal;color: #333333;}
Langkah 5
Simpan template...

Modifikasi Kode Gambar

Langkah A
Upload gambar pada artikel
Langkah B
Edit kode gambar melalui mode Edit HTML
Langkah C
Cari dan perhatikan kode dibawah ini (utamakan kode dengan warna biru):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/></a>
Langkah D
Tambahkan kode Image Caption seperti dibawah ini (kode warna biru untuk image caption):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg"> <div class="keterangan" style="width:240px"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 220px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/><p class="keterangan-text">Contoh Keterangan Gambar</p></div></a>
Langkah E
Terbitkan artikel

Keterangan:
  • Perhatikan langkah D, lebar gambar adalah 220px maka lebar image caption harus 240px. Nilai ini diperoleh dari penambahan 20px dari lebar gambar, sederhananya 220px + 20px = 240px. Hal ini agar diperoleh bingkai image caption yang simetris antara sisi kiri dan sisi kanan.
  • Kode <p class="keterangan-text">Contoh Keterangan Gambar</p> ini adalah teks yang digunakan untuk keterangan gambar, ubahlah "Contoh Keterangan Gambar" sesuai keterangan gambar yang anda inginkan.
  • Kode <div class="keterangan" style="width:240px"> ini adalah kode untuk membuat image caption, nilai 240px disesuaikan dengan lebar gambar dengan penambahan 20px seperti yang sudah dijelaskan diatas.
Selamat mencoba dan semoga berhasil. Tinggalkan pesan pada komentar jika mengalami kesulitan dan Happy Blogging... :)

Friday, September 4, 2009

Widget Artikel Terbaru dengan Gambar Thumbnails

Sebelumnya Blogger Tune-Up pernah membuat artikel serupa "Tampilkan Artikel Terbaru Plus Gambar Thumbnail", tetapi sebenarnya fasilitas yang diberikan pada Blogger Hack sekarang sangat berbeda dengan sebelumnya. Widget yang akan dibuat masih tetap menggunakan JavaScript dan hasilnya hampir mirip dengan artikel "Pemenggalan Artikel Otomatis". Tetapi setelah dipraktekkan pasti akan ditemukan sesuatu yang berbeda.
Beberapa fasilitas baru, diantaranya:
  1. Widget yang dibuat berisi; ringkasan artikel, jumlah komentar, tanggal posting dan link "Selengkapnya".
  2. Gambar thumbnails; ketika kita menambahkan gambar didalam artikel maka dengan otomatis gambar tersebut akan disesuaikan hingga ukuran 75 x 75 pixel pada Widget Artikel Terbaru.
  3. Jumlah artikel yang ditampilkan tidak terbatas atau dapat disesuaikan dengan keinginan kita
  4. Proses modifikasi sangat mudah dan silahkan dicoba sendiri...

Langkah pembuatan widget artikel terbaru

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
Tambahkan Gadget baru
Langkah 4
Beri judul (misal: Artikel Terbaru) dan masukkan (copy paste) kode dibawah ini:
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Langkah 5
Simpan Gadget dan Preview blog...

Keterangan:
  1. var numposts = 5; : nilai 5 untuk menentukan jumlah artikel yang akan ditampilkan
  2. var showpostthumbnails = true; : nilai "true" untuk menampilkan gambar, nilai "false" untuk tidak menampilkan gambar
  3. var displaymore = true; : nilai "true" untuk menampilkan link "Readmore" dan nilai "false" untuk tidak menampilkan link
  4. var displayseparator = false; : nilai "false" untuk tidak menampilkan garis pemisah antar artikel, dan nilai "true" untuk menampilkan garis pemisah antar artikel
  5. var showcommentnum = true; : nilai "true" untuk menampilkan jumlah komentar, nilai "false" untuk tidak menampilkannya
  6. var showpostdate = true; : nilai "true" untuk menampilkan tanggal pembuatan artikel, nilai "false" untuk tidak menampilkannya
  7. var showpostsummary = true; : nilai "true" untuk menampilkan ringkasan artikel, nilai "false" untuk tidak menampilkannya (hanya judul artikel saja)
  8. var numchars = 100; : nilai 100 untuk menentukan jumlah karakter yang akan ditampilkan
Tampilkan Artikel Terbaru Sesuai Dengan Kategori (Label)
Untuk menampilkan artikel terbaru sesuai dengan kategori atau label kita hanya perlu menambahkan sedikit kode label agar widget artikel terbaru menampilkan artikel yang sesuai dengan kategori yang kita inginkan.
Perhatikan kode pada langkah 4 diatas dan cari kode dibawah ini:
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
jika sudah ditemukan, tambahkan kode dibawah ini dan ubah "Label" dengan kategori yang ingin ditampilkan:
/-/Label
sehingga kode menjadi seperti dibawah ini (kode warna biru adalah kode label):
<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Selamat mencoba, semoga berhasil. Tinggalkan pesan pada komentar dibawah... Happy blogging walaupun lapar... :)
Sumber : Blogger Plugins