Widget Related Post

Saya pernah membaca sebuah posting mengenai apa saja yang harus terdapat dalam sebuah web, tapi saya lupa alamatnya. Salah satunya adalah related Post widget. Widget ini biasanya ditempatkan dibawah postingan. Fungsi dari widget ini adalah untuk menampilkan link-link dari posting lain yang berkaitan atau ada hubunganya dengan posting yang dilihat. Salah satu manfaat dari widget ini adalah postingan yang katakanlah sudah udzur atau lama dan jarang sekali dikunjungi pengunjung mendapatkan kunjungan lagi. logikanya seperti ini ketika pengunjung memngakses sebuah postingan yang biasanya masih baru disaat mereka pada posisi diakhir postingan mereka diberikan pilihan untuk mengunjungi postingan lain yang berkaitan dengan posting yang mereka lihat saat itu. Jadi para pengunjung ini tidak akan buru-buru meninggalkan blog anda ketika mereka selesai membaca sebuah posting di blog anda.

Oke sekarang kita masuk ke inti dari postin kali ini yaitu menambahkan widget related post ini

• Log in ke blogger
• Click Layout
• Click EDIT HTML tab
• Download script widget. klik disini
• Beri ceklist pada pilihan Expand Widget Templates
• Cari kode dibawah ini

<data:post.body/>

• Copy-paste Script yang didwnload tadi dibawah kode diatas Save Template dan cek hasilnya

Terima kasih kepada http://www.blogspottutorial.com

Membuat widget most popular post

Widget ini berfungsi untuk menampilkan daftar post/ artikel pada blog anda yang paling banyak dilihat dan dikomentari. Untuk membuat widget yang satu ini anda cukup melakukan langkah dibawah ini.

1. Login ke blogger.com
2. Setelah masuk ke menu dasbor klik Tata Letak>> Tambah Gadget >> Pilih HTML/JavaScript
3. Copy Paste Kode dibawah pada kolom konten
4. Rubah kode yang diberi warna merah dengan url/ alamat blog anda
5. Simpan perubahan lalu lihat hasilnya
   

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < 20 ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1db0519c1a1484330328c8c455a513c7&url=http%3A%2F%2Fpanongkrongan.blogspot.com&num=10" type="text/javascript"></script>

Terimakasih kepada mas Ardian'z (theardzcoholic.blogspot.com) Untuk tips kali ini

Membuat Area Header Lebih Fleksibel

Secara default area header pada blog di blogger biasanya dikunci! sederhananya kita tidak bisa menambahkan komponen lain di area ini. jadi hanya pada area ini hanya diperbolehkan merubah judul da deskripsi. yang jadi permasalahan kadang kita ingin menambahkan komponen baru pada area ini terutama bagi para blogger yang memasang iklan PPC (seperti adsense), dan ingin mengaplikasikan template "leader board". Agar area header ini dapat di modifikasi dan ditambahkan komponen lain selain judul dan deskripsi lakuan langkah2 dibawah ini:

Untuk langkah pertama anda Login dulu ke Blogger, setelah masuk menu dasbor klik TATA LETAK >> EDIT HTML, pada kolom EDIT TEMPLATE cari kode dibawah ini:

<div id='header-wrapper'>

Nah sekarang lihat koding-koding dibawahnya. disana terdapat variabel-variabel yang anda bisa rubah, dengan tujuan agar area ini dapat di modifikasi, variabel-variabelnya antara lain:
maxwidgets='nilai', rubah nilai variabel ini oleh anda, misalkan nilainya diisi tiga, berarti komponen maksimal yang dapat di tempatkan pada area ini adalah 3 komponen.
showaddelement='nilai', nilai default dari varibel ini adalah 'no', rubah menjadi 'yes'.locked='nilai', nilai default dari varibel ini adalah 'true', rubah menjadi 'false'Save Template. dan lihat hasilnya pada jendela TATA LETAK!

terimakasih sekali lagi buat bloggerbuster

*Selalu Lakukan Back Up Sebelum melakukan modifikasi

Hanya Menampilkan Judul Dalam Arsip Blog Dan Label

Teknik ini sangat saya sukai, karena dengan teknik ini hanya akan ditampilkan hanya judul posting (tanpa menyertakan teks isi dari posting) ketika pengunjung mengklik Link Label(di blog ini dinamakan Kategori) atau Blog Archive (Di blog ini dinamakan arsip blog), sehingga waktu loading halaman akan semakin singkat (terutama pada link Kategori atau Arsip yang memiliki banyak posting) kalian bisa melihat perubahan apa yang saya lakukan dengan mengadaptasi teknik ini dengan mengklik link Kategori atau Arsip (pada link bulan atau tahun). Untuk teknik kali ini saya berterimakasih untuk bloggerstop.net

oke kita mulai saja praktek kali ini

Untuk langkah pertama anda Login dulu ke Blogger, setelah masuk menu dasbor klik TATA LETAK >> EDIT HTML, beri checklist pada pilihan Expand Template Widget, pada kolom EDIT TEMPLATE cari kode dibawah ini:

<b:include data='post' name='post'/>

lalu ganti semua kode diatas dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<li/><data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Save Template lalu cek hasilnya!

*Selalu Lakukan Back Up Sebelum melakukan modifikasi

Menyembunyikan Navigation Bar Blogger

Tips ini sangat sederhana, tapi merupakan hal yang krusial. Bagaimana tidak penting, kalau anda lihat pada navigation bar terdapat sebuah button FLAG, yang fungsinya membaritahu pihak bloggers bahwa blog tersebut tidak layak untuk dipublikasikan (dengan berbagai alasan tentunya), dan apabila banyak sekali pengunjung ke blog itu yang menekan tombol FLAG tersebut (dengan catatan bukan dari satu pc atau satu IP yang sama), dijamin blog anda bakalan di blokir. Saya pernah mengalaminya ketika dalam posting blog terdahulu ada sangkut pautnya dengan SARA he..HE..... (SAYANG WAKTU ITU AKU BELUM TAU TRIK INI). Tapi navigation-bar ini dapat dengan mudah kita sembunyikan, hanya dengan menambahkan beberapa baris kode CSS. Terima kasih buat mba Amanda Fazani dan Bloggerbuster nya buat trik ini.

Untuk langkah pertama anda Login dulu ke Blogger, setelah masuk menu dasbor klik TATA LETAK >> EDIT HTML, pada kolom EDIT TEMPLATE cari kode dibawah ini:

]]></b:skin>

lalu tambahkan kode dibawah ini sebelum kode diatas :

#navbar-iframe {
height:0px;
visibility:hidden;
display:none }

Klik Save Template, lalu cek hasilnya.

*Selalu backup template anda sebelum melakukan modifikasi

Menambahkan Sidebar Pada Blog

Semua template standar yang disediakan oleh blogger hanya menempatkan satu buah side-bar di kiri atau di sebelah kanan dari area utama (main wrapper/ area posting). hal ini tentu saja menjengkelkan karena dengan terpaksa kita hanya bisa menempatkan sedikit sekali widget di bagian yang sangat sering di lihat pengunjung (bagian atas atau awal dari blog)

Tapi ini semua bukan akhir dari segalanya, kita bisa menambahkan side-bar tambahan disebelah kanan atau kiri dari blog kita. saat ini layout yang sering dipakai oleh para blogger adalah menempatkan dua buah sidebar disebelah kanan blog. tapi pada dasarnya semua sama yaitu menambahkan sebuah sidebar baru pada plog kita (bahkan kita bisa menambahkan banyak side-bar pada blog kita tergantung selera kita).

Oke kita mulai saja bagaimana menambahkan sebuah side-bar. pada tutorial ini dicontohkan hanya menambahkan satu side-bar baru, anda bebas menambahkan jumlah side-bar baru dengan meng-kustom kode tutorial dibawah. tutorial ini menggunakan template dengan side-bar default berada disebelah kanan.

Pertama anda login dulu ke blogger. Setelah masuk ke menu dasbor, klik TATA LETAK>>Edit HTML lalu pada EDIT TEMPLATE cari kode dibawah ini :

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; nilai ini merupakan nilai lebar dari area header. lalu cari kode dibawah ini

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:940px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; atau samakan dengan nilai lebar header. nilai ini merupakan nilai lebar dari area deskripsi header. lalu cari kode dibawah ini

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; atau samakan dengan nilai lebar header. nilai ini merupakan nilai lebar dari area outer. lalu cari kode dibawah ini

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

Nah nilai yang diberi warna merah merupakan nilai lebar untuk area posting, rubah oleh anda berdasarkan pembagian area di blog. Begini; apabila anda menambahkan sebuah side-bar tentu saja berarti blog anda di bagi menjadi 3 kolom, yaitu side-bar-1(sidebar default), main-wrapper (area dimana posting ditampilkan), dan side bar 2 (yang anda akan tambahkan). apabila anda ingin menyamakan semua lebar dari ketiga area tersebut maka setiap area diberi nilai 940 (nilai dari outer-wrapper) / 3 = 313px, tapi tentu saja anda bebas menentukan sendiri lebarnya! dan hal yang perlu diperhatikan area main-wrapper ini haruslah lebih besar dari area side-bar, karena area ini dimana posting ditampilkan, tapi tetap patokan untuk menentukan lebar dari ketiga area ini adalah semua nilai lebar dari ketiga area ini bila dijumlahkan sama dengan nilai lebar outer-wrapper. selanjutnya cari kode dibawah ini:

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

Nilai yang diberi warna merah merupakan nilai lebar untuk area side-bar (side-bar yang sudah ada secara default), beri/ rubah nilai sidebar ini berdasarkan keinginan anda. setelah itu tambahkan kode dibawah ini tepat dibawah kode diatas.

#newsidebar-wrapper {
width: 220px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

apabila anda ingin menambahkan dua buah side-bar baru maka kode diatas digandakan, contoh menambahkan 2 buah sise-bar

#newsidebar-wrapper1 {
width: 100px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
#newsidebar-wrapper2{
width: 100px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Dengan kode diatas maka pada blog anda akan terdapat 3 side-bar.

lalu cari kode dibawah ini

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-color:#000000;
border:2px solid #ffffff;
}

Nilai yang diberi warna merah merupakan nilai lebar untuk area footer samakan nilainya dengan nilai outer-wrapper

Sekarang bagaimana menempatkan side-bar baru, apabila anda ingin menempatkan side-bar baru berdampingan dengan side-bar lama (yang telah ada) atau disebelah kanan dari blog anda. maka cari kode dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

lalu copy kode dibawah tepat sesudah kode diatas.

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

contoh:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Apabila anda menambahkan dua buah side bar baru maka gandakan kode diatas, contoh

<div id='newsidebar-wrapper1'>
<b:section class='sidebar' id='newsidebar1' preferred='yes'>
</b:section>
</div>
<div id='newsidebar-wrapper2'>
<b:section class='sidebar' id='newsidebar2' preferred='yes'>
</b:section>
</div>

Sedangaka apabila anda ingin menempatkan side-bar baru disebelah kiri dari area main-wrapper maka tempatkan kode diatas tadi tepat sebelum kode diatas. contoh

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Lalu Save Template, dan cek hasilnya di menu tabulasi TATA LETAK . lihat hasilnya biasanya anda harus merubah-rubah lagi settingan dari nilai-nilai lebar dari area-area pada blog (area header-wrapper, main-wrapper, footer, dll) agar semuanya pas dan sesuai dengan keinginan anda

Mempartisi Area Footer Menjadi Beberapa Kolom

Anda pasti pernah melihat dimana sebuah blog yang pada area footernya dibagi menjadi beberapa kolom . Sebenarnya membagi atau mempartisi sebuah area pada blog tidaklah terlalu sulit bahkan untuk orang awam sekalipun. Nah pada posting saya akan memberikan tutorialnya kepada anda.

Sebelum anda memulainya back up dulu tamplate anda, dan baca posting sampai akhir untuk mengindari kesalahan. Juga pindahkan semua Widget yang berada di area footer ke area side bar.

Pertama anda login dulu ke blogger. Setelah masuk ke menu dasbor, klik TATA LETAK>>Edit HTML lalu pada EDIT TEMPLATE cari kode dibawah ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Lalu ganti seluruh kode diatas dengan kode dibawah ini:

<div id='footer'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Tapi anda tidak harus meng-copy semuanya, anda bisa merubahnya tergantung keinginan anda dan kondisi layout blog anda (karena pada contoh diatas footer dibagi menjadi 3 kolom). Nah mana-mana saja yang bisa anda rubah:

Pertama adalah jumlah kolom yang ingin ditambahkan. Bila anda perhatikan pada koding diatas terdapat 3 buah skup (lingkup area) kode yang sama, yang membedakan hanya id nya saja (footer1, footer2, footer3 juga col1, col2, dan col3). Nah satu skup tersebut merupakan satu area kolom yang ditambahkan pada area footer. lihat kode dibawah untuk contoh satu skup/area kolom

<div id='footer'>
<div id='footer1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

Sebagai contoh apabila anda ingin membagi 4 kolom maka terdapat empat buah kode diatas. Dan kodingnya akan seperti dibawah ini:

<div id='footer'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer4' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Yang kedua adalah lebar tiap kolom, lihat kode diatas terdapat kode width: 50%;, nah value atau nilai ini bisa dirubah. sebagai contoh bila anda membagi footer menjadi 4 kolom, maka nilai atau value pada tiap skup atau area koding kolom adalah 25%, atau bisa juga menggunakan satuan pixel. contohnya apabila area footer blog anda adalah 600px, dan anda ingin membaginya menjadi 2 kolom maka nilai width pada tiap skup/area kode kolom adalah width=300px;. lihat kode dibawah:

<div id='footer'>
<div id='footer1' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer2' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Setelah selesai klik SAVE TEMPLATE. lalu lihat hasilya

Pada percobaan pertama saya dalam menambahkan tips koding ini, layout footer saya berantakan. bila anda mengalaminya coba modifikasi lagi kode diatas, biasanya masalah berasal dari pengisian nilai lebar kolom (width) yang kurang atau lebih.
Anda juga bisa menambahkan variabel-variabel (Warna area, border, dll) lain untuk memodifikasi are footer ini agar tampilanya lebih bagus.

Mengganti Icon Blog di Blogger

Bagi anda para blogger, mungkin suatu saat anda merasa bosan dengan icon blogger yang selalu muncul di blog anda, dan anda ingin merubahnya! selain untuk menghilangkan rasa bosan, penggantian icon ini akan membedakan blog anda dengan blog orang lain. dan apabila icon anda sangat unik, bisa saja icon ini menjadi ciri khas dari blog anda. sebenarnya tips ini hanya tips lama, tapi bagi anda yang mungkin belum mengetahui cara merubah icon ini, saya akan memberikan caranya selangkah demi selangkah.

persiapkan sebuah image dengan ukuran yang direkomendasikan untuk icon yaitu 22x22 pixel atau 32x32 pixel (format direkomendasikan .gif), lalu upload ke album web online misal Album Web picasa. Setelah diupload copy alamat lokasi image tersebut(klik kanan>>properties di image tersebut). Anda juga bisa mengambil icon dari website lain! coba saja googling image dengan filter ukuran image kecil. lalu copy alamat lokasi dengan cara mengklik kanan image yang dikehendaki.

Setelah image telah sukses diupload, atau anda telah selesai googling image dan telah meng-copy alamat lokasi image tersebut, lalu anda sign in ke blogger! setelah anda masuk ke menu dasbor, lalu klik tab Tata Letak>>Edit HTML

Pada kolom Edit Template, Cari Kode ini:

<b:skin><![CDATA[/*

Nah Lalu Copy Paste Code dibawah ini tepat sebelum kode diatas

<link href='url image' rel='SHORTCUT ICON'/>

Untuk url image isikan alamat url dari icon yang anda inginkan (alamat lokasi yang tadi anda copy), misal icon yang ingin anda jadikan icon blog anda alamatnya; http://tbn2.google.com/blogger-logo-full.jpg

maka kode yang disisipkan adalah

<link href='http://tbn2.google.com/blogger-logo-full.jpg' rel='SHORTCUT ICON'/>

setelah itu klik SAVE TEMPLATE. lalu lihat blog anda!
Oh iya anda bisa menggunakan icon bergerak/ animasi untuk blog anda(format .gif)

Thanks to http://trick-blog.blogspot.com/

Menampilkan baris kode di teks area posting

Pernahkah anda mengalami kesulitan ketika memposting sebuah artikel tutorial yang pada artikel tutorial itu menyertakan teks baris kode HTML untuk ditampilkan. Bukanya ditampilkan tapi malah baris kode tersebut menghilang ketika post tersebut dipublikasikan. Kalau anda familiar dengan bahasa pemrograman web anda pasti tahu kenapa hal ini bisa terjadi!!! Ya betul, baris kode tersebut saat dieksekusi tidak dianggap sebagai teks biasa atau istilah dalam bahasa pemrograman disebut string, tetapi dianggap sebagai kode baris perintah.

Untuk mengatasi permasalahan tersebut kita hanya perlu mengganti karakter < dan > dengan karakter pengganti. Intinya adalah seperti ini:

1. Ganti karakter < dengan &lt;
2. Ganti karakter > dengan &gt;

Contoh:

<title> <data:blog.pageTitle/> </title>

diganti dengan

&lt;title&gt;&lt;data:blog.pageTitle/&gt;&lt;/title&gt;