Monday, June 29, 2009

Artikel Terbaru dengan Google Dynamic Feeds

Banyak cara untuk menampilkan urutan terbaru artikel di blogger blogspot, mulai dengan default feeds yang terbatas hanya 5 artikel terbaru yang ditampilkan, tampilkan artikel terbaru tanpa batas, tampilkan artikel berdasar kategori tertentu, bahkan pada artikel sebelumnya dibahas tampilkan artikel terbaru plus gambar thumbnail. Nah, sekarang ada lagi cara menampilkan artikel terbaru dengan bantuan Google Dynamic Feed, pada dasarnya mirip dengan artikel sebelumnya, hanya kelebihan dari blogger hack kali ini adalah dari tampilan yang dihasilkan lebih dinamis, karena judul artikel dan penggalan artikelnya akan ditampilkan secara bergantian.
Judul artikel dan penggalan artikel akan berjalan terus bergantian seperti halnya berita pada website-website besar yang menyuguhkan berita up-to-date. Para master blog menyebut teknik ini dengan nama Random - Recent Posts with . Sebagai contoh Blogger Tune-Up memasangnya pada blog Hendriono Online seperti screenshot dibawah ini. Mau mencoba...???
Sreenshot diambil dari Hendriono Online
Ikuti langkah berikut untuk memasangnya pada blogger (Blog*Spot) :
Langkah 1
Login ke Blogger, dan biarlah kita dalam keadaan Login.
Langkah 2
Daftarkan terlebih dahulu blog anda untuk memperoleh AJAX Feed API KEY melalui link ini.
Langkah 3
Masukan alamat blog anda seperti gambar dibawah ini dan klik tombol Generate API Key untuk memperoleh AJAX Feed API KEY.
Langkah 4
Copy lalu simpan terlebih dahulu AJAX Feed API KEY yang baru anda dapatkan, karakter ini tidak akan pernah berubah dan unik untuk setiap alamat blog.
Langkah 5
Kembali ke Dashboard blog kita dan masuk ke bagian "Tata Letak".
Langkah 6
Tambahkan Gadget baru dengan jenis "HTML/JavaScript", judul dikosongkan.
Langkah 7
Masukan kode dibawah ini :
<style type="text/css">
.gfg-root {width : 100%;height : auto;position : relative;overflow : hidden;text-align : center;font-family: "Arial", sans-serif; font-size: 12px; border: 0px solid #cccccc;}
.gfg-title { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #000000; line-height : 1.4em; overflow : hidden; white-space : nowrap;}
.gfg-title a { color : #ffffff;}
.gfg-subtitle { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #cccccc; line-height : 1.4em; overflow : hidden; white-space : nowrap; margin-bottom : 5px;}
.gfg-subtitle a { color : #3366cc;}
.gfg-entry { background-color : white; width : 100%; height : 6.9em; position : relative; overflow : hidden; text-align : left; margin-top : 3px;}
.gfg-root .gfg-entry .gf-result { position : relative; background-color : white; width : auto; height : 100%; padding-left : 20px; padding-right : 5px;}
.gfg-list { position : relative; overflow : hidden; text-align : left; margin-bottom : 5px;}
.gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; margin-left : 5px; margin-right : 5px;}
.gfg-listentry-odd { background-color : #F6F6F6;}
.gfg-listentry-even {}
.gfg-listentry-highlight { background-image : url('http://dedehendriono.googlepages.com/weed-bullet.gif'); background-repeat: no-repeat; background-position : center left;}
.gfg-root .gfg-entry .gf-result .gf-title { font-size: 12px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; margin-bottom : 2px;}
.gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px;}
.gfg-horizontal-container { position : relative;}
.gfg-horizontal-root { height : 1.5em; _height : 100%; position : relative; white-space : nowrap; overflow : hidden; text-align : center; font-family: "Arial", sans-serif; font-size: 13px; border: 1px solid #000000; padding : 5px; margin-right : 80px;}
.gfg-horizontal-root .gfg-title { font-weight : bold; background-color: #FFFFFF; line-height : 1.5em; overflow : hidden; white-space : nowrap; float : left; padding-left : 10px; padding-right : 12px; border-right: 1px solid #000000;}
.gfg-horizontal-root .gfg-title a { color : #444444; text-decoration : none;}
.gfg-horizontal-root .gfg-entry { width : auto; height : 1.5em; position : relative; overflow : hidden; text-align : left; margin-top : 0px; margin-left : 0px; padding-left : 10px;}
.gfg-horizontal-root .gfg-entry .gf-result { position : relative; background-color : white; width : 100%; height : 100%; line-height : 1.5em; overflow : hidden; white-space : nowrap;}
.gfg-horizontal-root .gfg-list { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,.gfg-horizontal-root .gfg-entry .gf-result .gf-author { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title { color: #0000cc; margin-right : 3px; float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer { float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate { display : block; color: #AAAAAA;}
.gfg-branding { white-space : nowrap; overflow : hidden; text-align : left; position : absolute; right : 0px; top : 0px; width : 80px;}
.gfg-collapse-open, .gfg-collapse-closed { background-repeat : no-repeat; background-position : center; cursor : pointer; float : right; width : 17px; height : 20px;}
.gfg-collapse-open { background-image : url('arrow_open.gif');}
.gfg-collapse-closed { background-image : url('arrow_close.gif');}
.gfg-collapse-href { float : left;}
.clearFloat { clear : both;}
#feedGadget { margin-top : 4px; margin-left: auto; margin-right: auto; width : 250px; font-size: 12px; color: #9CADD0;}
</style>
<script src="http://www.google.com/jsapi/?key=API-KEY" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'&nbsp;Judul Artikel',url:'http://NAMA-BLOG.blogspot.com/atom.xml?redirect=true&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1500, stacked : true, title: "Daftar Artikel"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Pengambilan...</div>
<div id="feedGadget"><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/" target="_blank">Gadget by Blogger Tune-Up</a></div>
Langkah 8
Baca keterangan, simpan gadget baru tersebut, dan preview blog anda.

Keterangan :
Ada beberapa parameter (warna biru) yang perlu disetting agar hasilnya sesuai dengan keinginan kita, perhatikan secara berurutan seperti dibawah ini:
  • border: 0px ini untuk menentukan garis pinggir dari container, 0 berarti tidak menggunakan garis pinggir, ubahlah nilai 0 sesuai keinginan kita.
  • solid #cccccc; ini untuk menentukan warna garis pinggir, ubahlah nilai #cccccc sesuai dengan warna yang kita inginkan (harus paham kode warna dasar HTML).
  • font-size: 12px; ini untuk mengatur ukuran huruf judul Gadget, ubah nilai 12px jika kita ingin merubah ukuran hurufnya.
  • color : #ffffff; ini untuk mengatur warna huruf, #ffffff adalah warna putih.
  • background-color: #000000; ini untuk mengatur warna latar belakang judul gadget, #000000 adalah warna hitam.
  • width : 250px; ini untuk mengatur lebar gadget, ubah nilai 250 untuk menyesuaikan dengan lebar gadget blog kita.
  • API-KEY ; ganti kalimat API-KEY dengan AJAX Feed API KEY yang sudah kita peroleh tadi, lihat kembali langkah 2 sampai 4.
  • Judul Artikel ; Ganti dengan keinginan anda, misal Title.
  • NAMA-BLOG ; ubah dengan alamat blog kita.
  • start-index=1 ; ubah nilai 1 untuk menentukan dari posting keberapa artikel itu ditampilkan, jika diisi 5 maka artikel akan diindex dari postingan ke 5 dihitung dari artikel terbaru bukan artikel terlama.
  • max-results=10 ; ubah nilai 10 sesuai dengan artikel yang ingin kita tampilkan, jika diisi 5 maka akan ada 5 artikel yang ditampilkan.
  • Daftar Artikel ; ini adalah judul gadget, silahkan ganti sesuai keinginan, misal Artikel Terbaru.
Sebenarnya masih banyak parameter lain yang bisa kita setting sesuai dengan keinginan, Blogger Tune-Up hanya menyajikan setting parameter yang penting saja. Silahkan anda berkreasi sesuai dengan imajinasi anda. Tinggalkan komentar jika mengalami kesulitan. Happy blogging :)

Friday, June 26, 2009

Tampilkan Artikel Terbaru Plus Gambar Thumbnail

Mungkin kalau dalam bahasa cingcoangnya Recent Posts Plus Thumbnail maksudnya menampilkan artikel-artikel terbaru ditambah tampilan gambar kecil (thumbnail). Blogger Tune-Up masih terus menggodok fasilitas ini agar lebih fleksibel dan ringan, tapi tidak ada salahnya dibagikan dulu, mungkin ada diantara teman-teman blogger mencoba memodifikasi sesuai keinginan sendiri.
Sebenarnya fasilitas ini adalah penyempurnaan dari beberapa artikel yang pernah dibahas Blogger Tune-Up, coba silahkan periksa artikel "Menampilkan Daftar Posting Tanpa Batas", "Tampilkan Artikel Berdasarkan Kategori" dan "Pemenggalan Artikel Otomatis". Recent Posts Plus Thumbnail adalah gabungan dari ketiga artikel tersebut. Contoh penerapannya ada di blog Design Graphics. Penasaran ingin mencoba? Silahkan ikuti langkahnya...
Screenshot diambil dari Design Graphics
Langkah pemasangan Recent Posts Plus Thumbnail :
Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak"
Langkah 3
Tambahkan Gadget jenis HTML/JavaScript, dengan judul bebas (biasanya Artikel Terbaru)
Langkah 4
Masukan kode dibawah ini :
<script src="http://dedehendriono.googlepages.com/thumbrecpost.js" type="text/javascript"/></script>
<script>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 1;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
</script>
<scriptsrc="http://ALAMAT-BLOG.com/feeds/posts/default/-/KATEGORI?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
Langkah 5
Simpanlah perubahan/penambahan Gadget ini dan Preview (tapi baca dulu keterangan)

Keterangan :
  • Simpanlah thumbrecpost.js (klik kanan save as) di webhosting anda, soalnya Blogger Tune-Up tidak menjamin file tersebut tetap ada, kemudian ubah alamat URL-nya
  • Kode imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; adalah gambar pengganti seandainya artikel tidak mengandung gambar, ubah URL sesuai dengan alamat gambar kita
  • showRandomImg = true; ini untuk mengacak artikel yang akan ditampilkan, false tidak diacak
  • boxwidth = 300; ini untuk menentukan lebar gadget/widget
  • cellspacing = 1; ini untuk menentukan jarak antar artikel
  • borderColor = "#ffffff"; ini untuk menentukan warna border (garis pinggir) gadget
  • bgTD = "#000000"; ini untuk menentukan warna background (latar belakang) gadget
  • thumbwidth = 40; dan thumbheight = 40; ini untuk menentukan lebar dan tinggi gambar thumbnail
  • fntsize = 12; ini untuk menentukan ukuran huruf judul artikel
  • acolor = "#666"; ini untuk menentukan warna huruf judul
  • aBold = true; ini untuk mengatur ketebalan (bold) huruf judul artikel, jika false maka huruf tidak di tebalkan
  • icon = " "; ini untuk menempatkan link icon jika judul artikel ingin diberi bullets, lebih baik kosong (*)
  • text = "komentar"; ini bisa diubah menjadi apa saja misal; berkicau, berkoar atau apa sajalah
  • showPostDate = false; ini untuk menampilkan tanggal artikel dibuat, false tidak ditampilkan dan true ditampilkan
  • summaryPost = 40; ini untuk menentukan jumlah karakter dari judul artikel yang akan ditampilkan
  • summaryFontsize = 10; ini untuk menentukan ukuran huruf setelah judul artikel (*)
  • summaryColor = "#666"; ini untuk menentukan warna huruf setelah judul artikel (*)
  • icon2 = " "; ini untuk menempatkan link icon bullets setelah judul artikel, lebih baik kosong (*)
  • numposts = 5; ini untuk menentukan jumlah posting yang akan ditampilkan
  • ALAMAT-BLOG.com ubah alamat blog sesuai alamat blog anda
  • KATEGORI ini berfungsi jika kita ingin menampilkan artikel berdasarkan kategori, ubah KATEGORI sesuai dengan kategori yang ingin kita tampilkan, jika tidak ingin menampilkan artikel berdasarkan kategori hapus kode ini "/-/KATEGORI" sehingga menjadi ...default?orderby...
  • Perhatian!!! Ubahlah kode yang berwarna biru saja...
  • Yang diberi tanda (*) itu sebenarnya masih dalam tahap penyempurnaan, mungkin lain waktu fasilitas ini akan lebih baik...
Semoga berhasil, biasa berkomentar jika kesulitan atau add YM-ku supaya bisa berdiskusi lebih jauh... Happy blogging :)

Thursday, June 25, 2009

SEO Friendly Meta Tags

Judul artikel ini maksudnya kita akan mencoba membuat tag meta yang mudah di kenali oleh mesin pencari (Search Engine), teknik yang seperti ini biasanya oleh para master blogger di sebut teknik Search Engine Optimization disingkat menjadi SEO. Sehingga judul artikelnya menjadi "SEO Friendly Meta Tags", ya sambil belajar bahasa Inggris, walaupun belum secara keseluruhan memakai bahasa Inggris sampai isi artikelnya, minimal judulnya saja dulu.
SEO sering disebut-sebut sebagai teknik rumit untuk meningkatkan traffic (banyaknya jumlah kunjungan) terhadap blog kita, supaya blog kita memiliki Ranking bagus di hadapan mesin pencari, efeknya SERP (Search Engine Result Page) blog kita masuk dalam General SERP mesin pencari tersebut. (Walah apa maksudnya...?). SERP adalah singkatan dari Search Engine Result Page yang dalam bahasa kita diartikan posisi hasil pencarian halaman atau alamat weblog-website pada mesin pencari, sederhananya jika kita memasukan kata kunci pada mesin pencari misal "Blogger Tune-Up" maka mesin mencari akan menampilkan halaman atau alamat weblog atau website dalam susunan yang unik, nah halaman atau alamat website-weblog yang ada pada posisi halaman awal disebut weblog-website yang bagus SERP-nya sesuai dengan kata kunci tersebut. Tetapi belum tentu bagus SERP-nya dengan kata kunci lain. (Mengerti anak-anak?)
Teknik-teknik yang digunakan para master supaya weblog-website-nya masuk dalam halaman awal pencarian sesuai dengan kata kunci yang unik disebut dengan teknik SEO. Lebih jauh mengenai Teknik SEO dan SERP akan dibahas dalam artikel terpisah. (Ma'af ya anak-anak karena waktunya sudah selesai, maka pertemuan kali ini sampai disini saja. Kapan meta tags-nya pa guru?) Meta tags merupakan salah satu faktor penting dalam teknik SEO. Langsung kepokok judul artikel tanpa penjelasan apa itu meta tags, Insya Allah dalam waktu dekat dibahas tuntas tentang meta tags. Sekarang langsung ke pemasangan meta tags dalam blog.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini :
<head>
Langkah 4
Letakan kode meta dibawah ini tepat dibawah kode langkah 3 :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Isi dengan deskripsi blog' name='description'/>
</b:if>
<meta content='Isi dengan kata kunci blog' name='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='noodp' name='robots'/>
<meta content='Isi dengan nama author' name='author'/>
<meta content='Isi dengan pemilik copyright' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
Langkah 5
Simpan Template, dan tunggu 1 sampai 7 hari hasilnya pada mesin pencari.

Keterangan :
Baris perbaris kode meta tag pada langkah 4 akan diupdate mengenai penjelasannya, masih dalam artikel ini. (Ma'af sedang malas ngetik...)

Wednesday, June 3, 2009

Template Blogger Tag b:widget

Bagaimana dengan tutorial sebelumnya yang membahas Blogger Template Tag b:section? Mudah-mudahan sudah di pahami dengan baik. Jika belum mampu dipahami, ulangilah sampai benar-benar mengerti dengan maksud dan tujuannya. OK... Blogger Tune-Up menganggap sudah menguasai dengan baik, maka lanjutkanlah dengan artikel berikut yang akan membahas Blogger Template Tag b:widget. Seperti telah di bahas pada tutorial Anatomi Utama Tata Letak Template Blogger, bahwa widget adalah elemen halaman individu seperti gambar, blogroll, atau elemen lain dari sebuah bagian elemen halaman.
Tag <b:widget> bisa dikatakan sebagai wadah (container) dari berbagai elemen halaman. Satu tag <b:section> bisa berisi satu atau lebih widget, tetapi satu tag <b:widget> hanya dapat berisi satu elemen halaman. Widget dibuka dengan tag <b:widget> dan ditutup dengan tag </b:widget>, maka diantaranya hanya dapat diisi satu elemen halaman. Perhatikan gambar ilustrasi dibawah ini.
Tag b widget

Jika dilihat dari gambar diatas dapat diterjemahkan bahwa;
  • Tag <b:section> (kotak warna biru) dapat berisi beberapa widget
  • Tag <b:widget> (kotak warna kuning) hanya dapat berisi satu elemen halaman
  • Tag <b:section> dan tag <b:widget> berada didalam BODY CONTENT (berada diantara tag <body>)
  • Hurup "b" didalam tag adalah singkatan dari "blog" sehingga jika dibaca menjadi "blog:section" dan "blog:widget"
  • "Widget" dalam bahasa Indonesia adalah "Gadget", tetapi dalam kode template blogger tetap ditulis "widget"
Tag <b:widget> diikuti atribut seperti tabel dibawah ini.
AtributDiperlukan?Keterangan
idDiperlukanSuatu nama yang unik bisa berupa huruf atau nomor, dan setiap ID widget di template blogger harus unik.Sebuah ID widget tidak dapat diubah tanpa menghapus widgetnya dan kemudian membuat yang baru lagi.
typeDiperlukanHarus salah satu dari tipe widget yang diterima, tipe widget terdiri seperti daftar dibawah ini.
lockedTambahanBisa 'yes' atau 'no', dengan 'no' sebagai standar. Widget yang terkunci tidak bisa dipindahkan atau dihapus dari tab "Tata Letak - Elemen Halaman".
title TambahanJudul tampilan untuk widget. Jika tidak ditetapkan, judul secara standar akan disiapkan (misal "List1").
pageTypeTambahanBisa 'all', 'archive', 'main', atau 'item', dengan 'all' sebagai standar. Widget akan ditampilkan hanya pada halaman yang telah ditentukan untuk blog kita. Semua widget akan ditampilkan tab "Tata Letak - Elemen Halaman", dengan mengabaikan pageType.

Tipe (type) widget ditentukan sebagai berikut :
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar
Contoh penerapan widget didalam template :
<b:section class="" id="headersection" maxwidgets="2" showaddelement="no">
<b:widget id="Header1" locked="true" title="Hendriono Online (Header)" type="Header">
...
...
kode-kode lainnya
...
...
</b:widget>
</b:section>
Demikian artikel kali ini tentang Blogger Template Tag b:widget mudah-mudahan bermanfaat.

Artikel selanjutnya : Blogger Template Tag b:widget untuk Layout