Membuat label cloud tampil warna-warni

Membuat label cloud dengan penuh warna-warni mungkin akan terlihat indah ya, walaupun mungkin sebagian orang ada yang tidak menyukainya. Label cloud sudah tahu kan sobat?? yup, "cloud" merupakan label yang tersusun seperti "awan". Label cloud tersusun dengan berbagai ukurannya, ada yang besar, sedang, dan kecil. Nah kalau untuk membuat label menjadi berwarna-warni sobat cukup memberi kode sedikit CSS.

Ayo ikutin terus zoel ya..
1. Login blogger
2. Sobat pastinya sudah bisa merubah tampilan labelnya, ke bentuk "cloud" (oke caranya tinggal masuk design-page elements-klik edit pada gadget label-pada display pilih "cloud") udah oke kan? Lanjut..




3. Design - edit html - masukkan kode di bawah ini di atas kode ]]></b:skin>

.label-size-1 a {font-size: 12px;text-decoration: none;color:#B45F04}
.label-size-2 a {font-size: 14px;text-decoration: none;color:#cd9f01;}
.label-size-3 a {font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;color:#4B088A}
.label-size-4 a {font-size: 18px;font-weight:bold;text-decoration: none;color:#ea5a04;}
.label-size-5 a {font-size: 24px;text-decoration: none;color:#04B4AE}
.label-size-1 a:hover,.label-size-2 a:hover,.label-size-3 a:hover,.label-size-4 a:hover,.label-size-5 a:hover { text-decoration:underline }

Keterangan kode :
- label-size-1 sampai dengan 5= merupakan label yang berurut dari label yang terkecil (label-size-1) sampai terbesar (label-size-5)

- angka yang zoel beri warna biru itu adalah nilai yang dipakai untuk besar kecilnya label. ( sesuaikan dari yang terkecil sampai terbesar)

- pada kode yang zoel beri tanda dgn warna hijau itu merupakan kode warna yang nantinya sobat gunakan untuk memberi warna pada tiap label tersebut (jika ingin dapatkan kode warna lebih banyak lagi klik disini)

4. save template.

Ucapkan hamdalah jika sobat berhasil merubahnya..

Happy blogging..

Costumasi kotak follow

Kalau sudah bicara tentang mengotak-ngatik tampilan blog, hal yang yang paling menyenangkan. Dan utuk kali ini, zoel akan sedikit membahas tentang cara mengotak-ngatik tampilan kotak follow. Banyak mungkin yang sudah tahu, tapi banyak pula sepertinya yang belum tahu juga. (hehe,, imbang berarti kan). Untuk mengefisienkan waktu dan tenaga, langsung saja deh.



1. Masuk ke www.google.com/friendconnect
2. Pilih gadget
3. Nah silahkan pilih "members"
4. tinggal sesuaikan deh warna yang sobat suka, get HTML.
5. Copas di "add a gadget", save.

Whaha.. cepat banget ya perjumpaan kita kali ini. Karena zoel menganut tutorial yang simpel-simpel saja. hehe...

Happy blogging kawan...

Cara membuat spoiler di blog

Spoiler merupakan suatu widget atau aplikasi berbentuk tombol, yang bisa menyembunyikan sebagian ataupun seluruh dari isi konten kita. Spoiler selain memanfaatkan tempat dengan seminimal mungkin sehingga sedikit ruang yang terpakai, spoiler pun dapat mempengaruhi beratnya suatu blog, karena spoiler dapat menyembunyikan konten seperti gambar, ataupun aplikasi-aplikasi lainnya dengan sebuah tombol. Dan dapat terbuka apabila tombol tersebut diklik.



Gimana apakah tertarik dengan trik seperti ini, kurang lebih hasilnya akan seperti ini, coba sobat klik tombolnya!!

Tukeran Link yu!!

<br /> <a href="http://zoelf.blogspot.com" title="zoel's Blog" style="text-decoration:none;border:0;" target="_blank"><b><strong><blink>zoel's blog</blink></strong></b></a><br />



----banner----





<!-- Power banner --><br /> <a href="http://zoelf.blogspot.com"><img border="0" alt="tutorial blog" src="http://img63.imageshack.us/img63/8796/zoelfblog.gif" /></a><br /> <noscript><a href="”http://zoelf.blogspot.com”" software” title="”free" download><strong>free download software <br /> </strong></a></noscript><br /> <!-- end power banner --><br />
setelah sobat copas code ini di blog Sobat, beri komentar di Tab "tukeran link/banner atau di cbox"

Nah jika diklik tombolnya maka baru lah konten yang dituju akan keluar, seperti ini kodenya:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tukeran link yu!! (hanya contoh) </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div></div></div></div>

Cara membuat spoiler di blog

1. Login di blog sobat
2. Pilih layout
3. Edit elemen
4. add a gadget--HTML/javascript
5. copas code di atas, dengan mengedit terlebih dahulu kata yang di beri warna
6. save.

Menu navigasi horizontal

Berbagai macam cara pengoptimalan pencarian artikel pada blog, kemarin-kemarin zoel sudah posting kotak pencarian "search engine" untuk memudahkan pengunjung menemukan artikel pada blog kita, selain search engine "menu navigasi" pun bisa jadi andalan dalam pencarian postingan blog kita. Kita bisa menyimpan link posting kita di navbar ini, namun navbar ini ada kelemahannya, yaitu navbar ini tidak support fungsi dropdown, namun keuntungannya pun ada yaitu praktis dalam memakainya, kenapa?? karena Navbar ini bisa kita edit tanpa melalui pengeditan HTML, jadi misal mau masukkin link tidak usah bingung-bingung pergi ke "edit HTML" untuk masukkin link, cukup dengan memasukkan link pada kotak tab "edit elements". jadi praktis sekali penggunaan navbar ini, hukum alam bahwa klo ada kelemahan pasti ada kelebihan. hehe...

Nah jika sobat tertarik dengan tutorialnya, maka sobat langsung saja Login dulu di blogger sobat-layout-edit HTML-klik expand template widget-masukkan code di bawah ini di atas code ]]></b:skin>:

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 Kemudian letakkan code di bawah ini sesudah code <div id='outer-wrapper'><div id='wrap2'> (gunakan ctrl+f untuk memudahkan pencarian)

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Setelah itu sobat tinggal save dan sekarang coba lihat di Layout-edit elements, maka perhatikan ada gadget yang muncul di atas header.

Namun jika sobat ingin meletakkan navigasi tersebut di bawah header, maka langkah yang sobat lakukan adalah merubah letak dari <div id='outer-wrapper'><div id='wrap2'> , dan caranya rubah posisinya yang tadinya di bawah body, sekarang pindahkan tepat di atas code
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Maka sekarang lihat perubahannya.

Menampilkan hasil pencarian hanya judul postingan part.2

Melanjutkan Tutorial yang sebelumnya "Menampilkan hasil pencarian hanya judul postingan", maka judul yang sekarang costumasi dari tampilan judul postingan, karena ini ceritanya bersambung, jadi judulnya juga "Menampilkan hasil pencarian hanya judul postingan Part.2". Pada postingan yang pertama sudah di jelaskan manfaat dan maksudnya, dan sekarang untuk tampilan dari judul postingannya pun kita bisa obrak-abrik/costumasi dengan sedikit sentuhan agar enak dilihat..

Dan disini zoel punya 2 cara costumasi judulnya, dengan garis bawah, dan background. Atau mungkin setelah tahu dasarnya sobat juga bisa merubahnya sendiri sesuai kehendak dan sesuai kreativitas sobat.

Masih ingat bukan code ini, yang sebelumnya zoel posting disini kalau lupa coba lihat lagi biar nyambung.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<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>

Nah code ini merupakan code dasar/standar.
Jika sobat ingin ada garis di bawah judul posting, codenya seperti ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

maka hasilnya:

Judul postingan mempunyai background, seperti kalimat di dalam kotak, Codenya seperti ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
<a expr:href='data:post.url'>
<data:post.title/></a></div><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

maka hasilnya:

 Nb (warna biru): lebar/width bisa sobat sesuaikan dengan template sobat, background-color sesuaikan dengan keinginan sobat warna background apa yang dikehendaki bisa cari ratusan warna disini.

Mungkin itu saja Tutorial kali ini, posting ini hanya menyambung postingan yang sebelumnya sudah di publish.

Posisi iklan di bawah posting

Pengoptimalan posisi iklan dirasa begitu penting, pepatah bilang "posisi menentukan prestasi" (bukan berarti pepatah dalam ujian), jika posisi tepat maka sering dilihat pengunjung, dan akhirnya pengunjungpun mengklik iklan tersebut, jika iklan PPC maka menguntungkan jika banyak yang klik, atau mungkin iklan refferal/afiliasi dengan posisi yang menarik sehingga pengunjung sering membaca iklan tersebut, dan akhirnya pengunjung pun ikut dengan program iklan yang kita terbitkan di blog, itu juga bisa menguntungkan bukan?? Berbagai macam cara penempatan iklan bisa dilakukan, tapi untuk kali ini satu-satu dulu deh biar jelas, hehe... Sekarang iklan akan di tampilkan di bawah post.


Code dasar yang perlu sobat ketahui yaitu code posting blogger dengan code seperti ini  <data:post.body/>

Jadi logikanya jika kita ingin simpan sesuatu/katakanlah iklan, maka sobat tinggal tempatkan saja di bawahnya seperti ini:

<data:post.body/>
<simpan iklan disini>

Saya dulu bingung dengan penempatan iklan yang seperti ini, tapi setelah mengetahui caranya ternyata simpel. hehe..

Namun kondisi yang kurang nyaman apabila code yang telah kita masukkan tadi muncul di halaman setelah posting, dan tampil juga di halaman depan, maka sobat perlu menambahkan sedikit code:

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<simpan iklan disini>
</b:if>

Gimana sudah ngertikan cara meletakkan codenya??
Oia sedikit penjelasan untuk yang masih belum paham dengan penjelasan tadi masalah code <data:post.body/>, nantinya sebelum mencari code tersebut centang dulu tulisan "expand template widget".

Jadi keseluruhannya seperti ini:
1. Login blogger sobat
2. Layout
3. Edit HTML
4. klik "expand template widget" cari code <data:post.body/>
5. Masukkan code iklan sesuai penjelasan di atas.

Selamat mencoba...

Cara membuat status YM di blog

Agar orang lain tahu kalau kita sedang Online di YM, dan pastinya untuk memudahkan kita berinteraksi langsung dengan pengunjung, kita bisa menampilkan beberapa icon yang memperlihatkan apakah lagi OL atau tidak, tapi tentunya sobat juga harus sudah punya account di YM (sudah wajib itu..), kalau ga punya mau nampilin account punya siapa?? engkong mu... haha..
Cara yang praktis, efisien dan mudah tentunya membuatnya, Sobat cukup
copas code di bawah di gadget yang letaknya bisa sobat utak-atik sendiri, sudah tahu kan?? lho belom??
Baik, caranya cukup dengan langkah, Login dulu di blogger sobat ya,- kemudian layout-page elements-add a gadget-pilih HTML/javascript.

Masukkan code di bawah:

<a href="ymsgr:sendIM?ID YM">  <img src="http://opi.yahoo.com/online?u=ID YM&amp;m=g&amp;t=2&amp;l=us"/>
</a

Keterangan: tulisan berwarna merah Sobat isi dengan ID YM sobat, ngertikan?? itu lho kalau sobat mau login di YM harus masukkin dulu ID+password, nah untuk ini ga usah pakai passwordnya, cukup ID sobat saja. Dan yang berwarna biru pada angka 2, itu menunjukkan code dari gambar status yang ingin sobat tampilkan dihalaman blog Sobat, Bisa dilihat gambar di atas, ada code plus gambarnya. Oke gimana??
Mudah bukan??

Kasih komennya dong..

Kumpulan emotion facebook

Tanpa panjang lebar langsung saja deh nih emotionnya, tinggal pilih di bawah,, ok..

Angel	O:) atau O:-)
Confused	o.O atau O.o
Cry	:’(
Curly Lips	:3
Devil	3:) atau 3:-)
Sad	:-( atau :( atau :[ atau =(
Gasp	:-O atau :O atau :-o atau :o
Glasses	8-) atau 8) atau B-) atau B)
Grin	:-D atau :D atau =D
Grumpy	>:( atau >:-(
Heart	<3
Kiki	^_^
Kiss	:-* atau :*
Pacman	:v
Smile	:-) atau :) atau :] atau =)
Squint	-_-
Sunglasses	8-| atau 8| atau B-| atau B|
Tongue	:-P atau :P atau :-p atau :p atau =P
Unsure	:/ atau :-/ atau :\ atau :-\
Upset	>:O atau >:-O atau >:o atau >:-o
Wink	;-) atau ;)
Putnam	:putnam:
Robot	:|]
Shark	(^^^)
pinguin	<(")

Memasang tombol share digg

Situs social bookmarking memiliki bagian yang penting dalam menyediakan cukup banyak traffic sehingga mampu menaikkan Page Rank yang lebih baik. Memasang tombol situs social seperti digg di setiap posting, membuat pengunjung lebih mudah untuk berbagi posting ke situs networking yang berbeda. Cara ini juga cukup efisien dalam penempatan SEO kita, terutama di google.



Salah satu postingan zoel yang sudah pernah di share dengan tombol digg, padahal awalnya SEO-nya tidak begitu bagus, tapi dengan bantuan digg, coba lihat tampilan untuk SEO zoel,

Dengan keyword "netcut (si pemotong jaringn wi-fi)", blog ini masuk di urutan pertama, walaupun alamat awalnya tercantum letak sumbernya "digg.com", namun setelah masuk kedalam web dari digg, baru tercantum dimana alamat asli si pembuat artikel tersebut.
Dan ini bagus untuk meningkatkan rank SEO khususnya bagi blog yang baru, karena proses terindex google lumayan cepat.

Tanpa panjang lebar lagi, ini dia code-nya:

<!-- Digg Code by zoelf.blogspot.com -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<!-- Digg code ends here -->

Pada code yang zoel beri warna merah menunjukkan letak dari button digg tersebut, yang berarti tombol tersebut akan terletak di kanan, dengan posisi margin-kiri=10px.

Sudah tahu code tombol digg-nya, sekarang tinggal letakkan sesuai keinginan sobat, tapi biasanya yang lebih sering di pakai posisi kanan atas, penempatannya seperti ini:

1. Login di blogger sobat
2. Setelah pada tampilan dashboard, cari tab layout/tata letak
3. Edit HTML
4. Untuk antisipasi silahkan backup dulu dengan mengcopy template sobat, klik saja download full template.
5. Centang "expand widget templates"
6. cari code ini <data:post.body/>, gunakan saja ctrl+f untuk mempermudah pencarian
7. Sisipkan code digg di atas sebelum code <data:post.body/>

Save dan lihat hasilnya...

Selamat mencoba......