Bagi yg bisa program photoshop, membuat banner dan badge/chicklet itu mudah. Bagi yg agak males latihan otak-atik photoshop seperti saya tidak usah kuatir. Di internet banyak penyedia program pembuat chicklet dan banner online secara gratis dan instan. Sebagai pembuka, logo atau chicklet adalah banner kecil yg biasa buat link-button seperti yg di sidebar blog saya. Sementara banner ukurannya lebih besar dan biasa ditaruh di header blog/website. Ikuti panduan buat logo/chicklet/banner berikut:

A. Cara Membuat Chicklet
1. Kunjungi http://button.blogflux.com/
2. Di LEFT-BLOCK (bagian kiri atas) ada menu “Text”, ganti tulisan “w3c” sesuai dg yg Anda inginkan. Contoh, tulis Blog;
3. Di RIGHT-BLOCK (bagian kanan atas) ada menu “Text”, ganti tulisan “xhtml” dg yg sesuai dg keinginan Anda, contoh, “Tutorial”
4. Di GENERATE-BUTTON (bagian kanan bawah) klik tulisan Generate Button. Maka akan muncul chicklet seperti ini:
5. Nah, arahkan mouse ke gambar, klik kanan –> save picture as –> kasih nama file (contoh: blog-tutorial –> save di komputer Anda.
6. Setelah di saving di komputer, masukkan / upload gambar chicklet tsb di situs online seperti googlepages.com. Dalam kasus ini, gambar disimpan di http://fatihsyuhud.googlepages.com/ jadi alamat chicklet gambar tsb. adalah http://fatihsyuhud.googlepages.com/ blog-tutorial.gif
Note: Apabila belum daftar di googlepages.com, Anda tinggal kunjungi alamat URL googlepages.com and login dengan account gmail Anda.
7. Setelah tersimpan secara online, Anda bisa gunakan sesuai kebutuhan Anda seperti untuk linkbutton tukar link dg teman-teman blogger lain, atau sekedar buat pajangan di sidebar.
Tip: bentuk font dan background warna dapat dirubah sesuai selera. Tinggal klik menu “color” dan “background” di situs di atas.
B. Cara Buat Banner Online
1. Kunjungi situs http://cooltext.com/
2. Klik menu DESIGN A LOGO (bagian atas).
3. Di menu CHOOSE A LOGO DESIGN pilih gambar yg Anda suka, contoh, klik EMBOSSED.
4. Di menu LOGO TEXT saya tulis “Blog Tutorial”
5. Klik menu RENDER LOGO DESIGN (bagian paling bawah).
6. Save ke komputer (caranya, klik kanan gambar tersebut –>save picture as –>kasih nama file )
7. Setelah itu upload ke googlepages.com milik Anda. (lihat poin A.5 dan A.6).
Catatan: Mengupload image / gambar logo atau banner tentu saja tidak harus di googlepages.com, bagi pengguna wordpress.com Anda bisa juga menguploadnya di wordpress.com, di blogger.com bagi pengguna blogspot, atau di mana saja hosting online gratis.

klik untuk selengkapnya..

Button ini akan tampil pada setiap postingan yang ada dalam blog Anda. Seperti di halaman Facebook, tombol ini menandakan visitor menyukai artikel anda dan juga tidak lupa penghitungnya yang akan tampil di sebelah button ini. Berikut ini adalah demo untuk tombol yang saya maksud:

 

 

 

Cara Menambahkan Tombol Facebook Like ke Blogspot

1. Login - Layout/Tata Letak - Edit HTML
2. Cek pada Expand Template Widget
3. Cari kode berikut ini:
   <data:post.body/>
4. Letakkan kode berikut setelah kode tadi:                                                                       <b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>
   Tombol tersebut akan tampil pada setiap post dan tidak akan tampil pada homepage, namun jika anda ingin menampilkannya di semua halaman (termasuk homepage), maka hilangkan atau hapus kode yang berwarna merah.
5. Klik Save Template.

Kustomisasi Tambahan

Ada beberapa kustomisasi yang bisa anda terapkan pada tombol ini. Seperti berikut:

1. Penggantian kalimat like menjadi recommend pada kode yang bertuliskan action=like menjadi action=recommend dan akan tampil seperti ini:
   
   
2. Coba ganti tulisan colorscheme=light menjadi colorscheme=dark atau colorscheme=evil
3. Anda juga bisa mengganti model tulisan yang semula font=arial menjadi salah satu dari opsi berikut ini:
   
   
   
   
   1. font=lucida+grande
   2. font=segoe+ui
   3. font=tahoma
   4. font=trebuchet+ms 
   5. Button ini akan tampil pada setiap postingan yang ada dalam blog Anda. Seperti di halaman Facebook, tombol ini menandakan visitor menyukai artikel anda dan juga tidak lupa penghitungnya yang akan tampil di sebelah button ini. Berikut ini adalah demo untuk tombol yang saya maksud:
      
      
      

klik untuk selengkapnya..

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :
Arsip Blog Cara Membuat Menu Horizontal Cara membuat Search Engine

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :


Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>

maka hasilnya akan seperti ini :

Arsip Blog Cara Membuat Menu Horizontal Cara membuat Search Engine

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :

Dropdown New Window Cara Membuat Menu Horizontal Cara membuat Search Engine

Gimana? Bisa nggak?

klik untuk selengkapnya..

Hai para blogger semua apa kabar nya semua..?? semoga kalian baik - baik saja. Berikut ini akan saya tunjukkan cara memasang IP pengunjung di blog kita, jadi kita bisa tahu mulai dari IP, OS, Country, dan Browser kita sendiri. Cara nya mudah banget dengan mengikuti langkah - langkah berikut ini :



1. Silahkan klik disini

2. Copy/paste kode HTML tersebut

3. Login ke blogger kamu

4. Pilih Pengaturan + Tata letak + Tambah Gadget + HTML JavaScript

5. Paste kan kode HTML tersebut dan pilih simpan

Lihat hasil nya...

klik untuk selengkapnya..

Pada tutorial sebelumnya telah dibahas cara-cara merubah tampilan wap menjadi web, namun jika kamu masih mengalami kesulitan memahami dan mengaplikasikannya, kini kamu bisa membuatnya hanya dalam hitungan menit. Seperti contoh halaman ini, kamu juga bisa merubah tampilan situs wapmu menjadi seperti ini.
Yang perlu kamu lakukan hanyalah dengan meng-copy script yg telah disediakan berikut kemudian paste di editor situsmu. Di bawah ini adalah contoh sangat sederhana WAP dengan menggunakan template CSS blog pada Wordpress dengan tema Kubrick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="id"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Judul Situsmu</title> <link rel="stylesheet" href="http://looperz11.xtgem.com/A1_CSS WEB/A1_simple.css" type="text/css" media="screen" /> <!--[if IE]><link rel="stylesheet" href="http://s3.wordpress.com/wp-content/themes/default/ie.css?m=1244995184b" type="text/css" media="screen" /><![endif]--> <link rel="shortlink" href="http://wp.me/Fq9v" /><style type='text/css'><!-- body { background: url("http://s1.wordpress.com/wp-content/themes/default/images/kubrickbgcolor.gif"); } #page { background: url("http://s2.wordpress.com/wp-content/themes/default/images/kubrickbg.gif") repeat-y top; border: none; } #header { background: url("http://s3.wordpress.com/wp-content/themes/default/images/kubrickheader.gif") no-repeat bottom center; } #footer { background: url("http://s1.wordpress.com/wp-content/themes/default/images/kubrickfooter.gif") no-repeat bottom; border: none;} #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; } #headerimg h1 a, #headerimg h1 a:visited, #headerimg .description { color: ; } #headerimg h1 a, #headerimg .description { display: } --></style> <bgsound src="http://looperz11.xtgem.com/music/mid/editgue_ThankU.mid" loop="infinite" /> </head> <body> <!-- MULAI HEADER --> <div id="page"> <div id="header"><div id="headerimg" onclick=" location.href='/';" style="cursor: pointer;"><h1><a href="#">About http://looperz11.xtgem.com</a></h1><div class="description">Dean Adjie Minwarie "LOOPERZ"</div> </div></div><!-- AKHIR HEADER --><hr /> <!-- MULAI CONTENT --> <div id="content" class="narrowcolumn"> <div class="post-25 post hentry " id="post-25"><h2><a href="#">My Profile</a></h2> <div class="entry"><div class='snap_preview'><center><a href="#"><img src ="http://looperz11.xtgem.com/My data 4 t site/Pictures/Jomlo keren_p.jpg"width=150 height=165></a></center> <!-- ISINYA DIRUBAH SENDIRI YA... --> <p><b>Nama:</b> Deddy Sofyan Munawar<br/> <b>Nick:</b> Dean Adjie Minwarie, Looperz<br/><b>Birth:</b> Subang, 11 Nov 1984<br/><b>School:</b> UIN SGD Bandung, Muamalah 2002<br/><b>About Me:</b> Lahir di pelosok desa terpencil nun jauh dari keramaian, pada malam jumat kliwon bulan shafar... Hicks, serrem ya?! Ga juga deng, tp ga heran jg sih knp aku punya sifat eksentrik or rada aneh getoh. Dibilang gini karna memang respon orang mmg kayak begitu. Tapi gak musti takut jg, aku sebetulnya penyayang kok. Apalagi sama calonku, walopun doi suka salah arti gitu. Lho??!!! Koq malah curhat!!! Tp ya sutralah ga penting jg kali yee, intinya walopun sekilas gw aneh tp gw baik koq,hicks...</p></div></div> </div> <div class="post-22 post hentry " id="post-22"> <h2>Asal Usul Situs</h2> <div class="entry"> <div class='snap_preview'><p>Sebenarnya, gak kepikiran jg sih bikin situs sendiri. Kalo g dibilang awam, jangankan bkin situs, internetan aja baru mulai suka awal tahun ini (2009) tepatnya bln maret. Alamat email pertamakupun (looperz1@hotmail.com) aku buat awal awal bulan april. Saking bangganya punya email (klo orang sunda bilang mah "agul") dan kbetulan jg waktu itu dapet internet gratis, tiap hari internetan. Baru ngerti deh istilah download/ upload, Chatting, jeung sajabana teh. (chattingpun ngerti doang, nyoba mah g pernah, tp ada bgusnya jg g dkasih suka). Upst malah curhat lg! Oya, nerusin ttg situs ini. Masih gara2 "sombong" punya email, akhirnya.., register sana sini skedar pngen tau dalemnya apa. Sampe akhirnya gara2 iseng jg, pada 29 Juni 2009, register deh di <a href="http://xtgem.com/ref">XTGEM</a> yg katanya "Best Free Wap Site Builder", pas udah punya account trus lihat fitur dan fungsinya, Subhanallah!! Apaan nih GAK NGERTI??!!Akhirnya lihat2 katalog aja, tp wah, pas dicek.. Woww, keren2 euy situsnya!! Penasaran juga'kan, akhirnya... dengan rasa ingin tau yg guede dan semangat 45, diulik aja dikit2. Walhasil, ya seginilah adanya "gubuk reotku".<br/>Buat yg baca ini, ada pesan moralnya jg nih... Banyak jalan menuju Roma, asal bener2 aja, PLUS musti ada kecintaan atw rasa suka juga, pasti hasilnya (yaa..sesuai usahanya! Hicks..)<br/><br/><b>Why is it Looperz, or what?!</b><br/>Why do I name my self as "looperz"? Well, I'm not an expert. But I do really like making music. When I make it, mostly I loop the tones, ryhtms, and most of musical instrument repeatedly, LOOP IT! I like to loop, then I'm looperz... Tapi awas, bukan looper koran lho! Hicks...<br/><br/><b>What does 11 suffix means?</b><br/>Ouw... I took it from my birthday. Eleven is quite mean something to me, it represent date and month as well. Like my wife too, she's got number 19 of her birthday. So we're the beginning and end of teens, which means we'll be the first and the end lovers, spouse in our entire life. Amin...</p> </div></div> </div> <div class="post-19 post hentry " id="post-19"> <h2>Tujuan dan Dedikasi</h2> <div class="entry"><div class='snap_preview'><p>Pada awalnya situs ini dibuat hanya karena "kebetulan iseng semata", namun karena ketertarikanku dan seiring dgn bertambahnya pula 'pengetahuanku' sehingga akhirnya situs ini dapat berkembang seperti sekarang ini. Semuanya tidak lepas dari bnyaknya acuan dari para senior yg telah terlebih dahulu "menginspirasiku". Maka karena itu pula, kini situs inipun memiliki maksud dan tujuan "ingin memberi inspirasi" kepada segala pihak, baik dalam bentuk tutorial, sharing, informasi/ hiburan dan lain2nya, sebagai tanda terima kasih dan syukurku, disamping sebagai ajang untuk pengembangan diri (ceilé... witwiw uit!!!).<br/>Terima kasih untuk XtGem, juga kang Povilas Musteikis beserta gengnya yg telah memberikan layanan terbaik Free WAPSITE BUILDER. Dengan fasilitas unlimited bandwith, unlimited space, juga fitur-fitur editingnya yg sederhana dan mudah dipahami, sehingga dapat terciptanya situs sederhanaku ini. Oya, kasian gak disebut makasih jg buat hapeku Nokia 6600, biar jadul dan budugul tp maknyus.</p></div></div></div></div> <!-- AKHIR CONTENT--> <!-- MULAI SIDEBAR --> <div class="navigation"><div class="alignleft"></div> <div class="alignright"></div> </div><div id="sidebar"><ul><li><div> <form id="searchform" name="searchform" method="get" action="http://www.google.com/xhtml"><input type="text" name="q" maxlength="2048" size="18" value=""/><input type="hidden" name="hl" value=""/><input type="hidden" name="ie" value="ISO-8859-1"/><input type="submit" name="btnG" value="search"/><input type="hidden" name="mrestrict" value="xhtml"/></form> </div> </li><li><h2>catatan</h2> <p><b>tanda # dapat diganti dgn url link yg dituju. tanda # dapat diganti dgn url link yg dituju. </b> rubah isinya sesukamu, rubah isinya sesukamu, rubah isinya sesukamu, rubah isinya sesukamu! </p></li> <li class="pagenav"><h2>Pages</h2><ul><li class="page_item page-item-10"><a href="/">Home</a></li><li class="page_item page-item-10"><a href="#" title="About">About</a></li><li class="page_item page-item-10"><a href="/">My Picture Album</a></li> </ul></li><li><h2>Contact/ Email</h2> <ul><li>az.elminwari@yahoo.co.id</li><li>dlooperz@gmail.com</li><li><a href="wtai://wp/mc;+6281312317234">Call Me</a></li><li><a href="#">Submenu #1</a></li> <li><a href="#">Submenu #2</a></li> <li><a href="#">Submenu #3</a></li> </ul></li> <li class="categories"><h2>My Site and Blog</h2><ul><li class="cat-item cat-item-26276984"><a href="/">looperz11.xtgem.com</a></li><li class="cat-item cat-item-1087334"><a href="http://braincoder.tk">Braincoder.tk</a></li><li class="cat-item cat-item-1"><a href="http://gone.madpath.com">Gone.madpath.com</a></li> <li class="cat-item cat-item-26252318"><a href="http://braincoderz.blogspot.com">The Braincoderz</a></li> </ul></li> <li id="linkcat-1356" class="linkcat snap_preview"><h2>Others</h2> <ul class='snap_preview xoxo blogroll'> <li>Find me on <a href="http://www.facebook.com/people/Dean-Adjie-Minwarie/1728743324" title="Dean Adjie Minwarie" target="_TOP">facebook</a></li> <li><a href="http://nimbuzz.com">looperz1@nimbuzz.com </a></li></ul></li> </li> </ul></div> <!-- AKHIR SIDEBAR --> <hr/> <div id="footer"><p><a href="/">http://looperz11.xtgem.com</a> <br/>Design by Dean Adjie Minwarie Looperz© <script type="text/javascript" language="JavaScript"> var today = new Date(); document.write(today.getFullYear()); </script></p></div></div> </body> </html>
Preview

Untuk template CSS pilihan lainnya yg lebih menarik dapat pula dilihat preview-nya pada gambar-gambar di bawah ini. Kamu tinggal pilih dan copy script yg kamu suka. Berikut adalah script yg tersedia:

PREVIEW	COPY SCRIPT
	Offlimits | Copy Script
	Soothing | Copy Script
	Emblazoned | Copy Script
	Balanced | Copy Script
	Gestured | Copy Script
	Crystal X | Copy Script
	Everyday Series | Copy Script
	Revolt 01 | Copy Script

Di bawah ini adalah beberapa contoh situs Sahabat Wapmaster yang telah menggunakan layanan copy script ini, baik dengan copy script yg ada ataupun request.

1. The X-Site
2. The FlashGuh
3. Alon31 Wap

Sebelum menggunakan script ini, ada baiknya untuk diketahui pula beberapa hal berikut:

1. Di dalam script ini telah lengkap dengan link CSS dan imagenya sehingga tidak perlu lg memakai CSS lain.
2. Design TAMPILAN dlm script ini adalah tampilan "default", tidak perlu diubah lg. Maka ingat, yg perlu dirubah hanyalah CONTENT/ ISI halamanmu saja, BUKAN tampilannya lg. Misalnya, kamu cukup hanya perlu menambahkan artikel atau merubah link2 saja.
3. Dianjurkan edit memakai Komputer untuk tampilan maksimal, juga karena khawatir keterbatasan karakter pada ponselmu.
4. Untuk XtGem, tidak dianjurkan mengedit pada CREATOR tp editlah pada TEXT EDITOR, caranya:
   
   
   
   • pada menu utama klik "file browser"
   • pada file html yg akan diedit klik tanda plus (+)
   • klik "open with" pilih "text editor"
   • hapus semua dan paste script di sono!
5. Cara mengedit/ membuat file ini adalah dengan mengcopy SELURUHNYA script ini dan MENGHAPUS SEMUA yg ada pd editor situsmu. Maka sebelum copy-paste, ada baikny SAVE dulu data yg terpakai pada file/ text TERPISAH.

Untuk keterangan lebìh rinci dapat dilihat pada halaman copy script. Selamat mencoba, semoga PUAS, dan nantikan pula script2 dengan design template CSS pilihan lainnya.

klik untuk selengkapnya..

Sebelum saia berbicara dengan cara pembuatanya saia kasih tau dulu apa itu camfrog..? Camforg adalah layanan Chatting yang hampir mirip dengan Yahoo messenger, kamu bisa dapatkan softwarenya di camfrog.com atau saya juga sahre softwarenya yang lebih lengkap dan gratis disini.. nah jika anda para camfroger tidak ada salahnya mencoba trik ini karena pengunjung blog/website kamu bisa mengetahui kamu lagi Online gak di camfrog... Seperti halnya dulu Anas juga udah pernah posting tentang cara menampilkan status yahoo messenger dan kali ini pun Anas juga akan kasih tau cara menampilkan satus Camfrog.. karena saya juga camfroger maka tidak ada salahnya jika saya share pengetahuan saya tentang camfrog salah satunya yaitu trik ini hehee..

Nahh dibawah ini adalah contoh dari tampilan satus camfrog
ONLINE

OFFLINE


Nah jika kamu pengen menbuat ikuti cara dibawah ini

• Log In Ke blogger lalu Masuk Menu Layout--->Page Elements
  
• Lalu pilih tempatnya Dan Add a Gadget
  
• Dan pilih HTML/JavaScript Kemudian Masuukan Code dibawah Kedalamnya
  
  
  
  <a href='camfrog:im:Mbah_Metal_'> <img src='http://camfrog.com/getstatus.php?nick=Mbah_Metal_'/>
  </a>
  Tulisan yang berwarna merah ganti dengan Id/Nickname Camfrog kamu Dan tulisan yang berwarna biru bisa kamu ganti dengan tulisan "Add" jika anda ingin link gambar itu me-add Id camfrog anda
  
• Kode diatas juga bisa kamu sisipkan di Edit HTML juga..
  
• Simpan dan lihat hasilnya...

Atau cara yang yang lain kamu bisa generate di http://www.camfrog.com/add.phtml
Selesai dehhhh gampang kann...

klik untuk selengkapnya..

Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :


Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code </head>

<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>

kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.

Kalau sudah tinggal SAVE.

klik untuk selengkapnya..

Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :

	Gadgets powered by Google

Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :

	Gadgets powered by Google

Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com

klik untuk selengkapnya..

Hallo sobat ah0licerz dimanapun anda berada, kita jumpa lagi dalam acara Trik dan Tips :D . Dalam episode kali ini kita akan mencoba membahas tentang "Bagaimana Cara Membuat Postingan/Content Blog Agar Lebih Expressive. Maksudnya apaan tuh?
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lho.....

1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D

Berikut ini adalah beberapa standar kode smile yang bisa digunakan :

:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

Sebelum mengetikkan kodenya, harus di spasi dulu.

klik untuk selengkapnya..

Barangkali istilah related post atau posting terkait sudah tidak asing lagi bagi teman-teman. Walaupun begitu, saya tetap menuliskan cara membuat related posts fungsi scrolling. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. Apalagi widget related post ini diletakkan di bawah posting. Tertarik ingin memasang related post fungsi scrolling? Tapi tunggu dulu.. Jika anda terlanjur memasang widget related post lama yang pernah saya tulis, maka harus dihapus dulu. Bingung cara menghapusnya? Caranya lakukan dengan alur mundur (dari bawah ke atas) dengan mengikuti petunjuk dari posting saya yang sebelumnya.

Related post fungsi srolling memangnya gimana sih? Oke, biar gampang bisa dilihat seperti gambar di bawah ini :


Di gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke cara pasang widget related posts dengan fungsi scrolling di bawah posting blog anda.

1. Login ke blogger dengan id anda
2. Tuju TataLetak
3. Pada tab menu, pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode <p><data:post.body/></p>
Letakkan kode berikut di bawah kode tadi :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

6. Klik SIMPAN TEMPLATE
7. Selesai

Disana ada tulisan Related Post yang bisa diganti dengan teks favorit anda. Untuk kode warna juga demikian, sesuaikan dengan desain template anda. Sekarang coba lihat salah satu posting anda. Maka related posts dengan fungsi scroll akan berada di bawah posting. Tampilannya pun lebih cantik dengan kotak yang mengelilingi widget ini. Mudah bukan, oke selamat mencoba.

klik untuk selengkapnya..

Ini cara untuk membuat "Readmore" atau " baca selengkapny"

Caranya sebagai berikut:

• Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
• Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
• Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:
  
  
  
  
  
  
  

  <style>
  <b:if cond='data:blog.pageType == "item"'> 
     span.fullpost {display:inline;}
  <b:else/>
     span.fullpost {display:none;} 
  </b:if>
  </style>

• Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan tambahkan kode berikut tepat dibawahnya:
  
  
  
  
  
  
  

  <b:if cond='data:blog.pageType != "item"'>
  <a expr:href='data:post.url'> Read More..</a>
  </b:if>

• Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Read More.. muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>. Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose Contoh penulisan posting:
  
  
  
  
  
  
  
  

  Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

  Hasil akhir postingan akan seperti ini:
  
  
  
  
  
  
  
  

  Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja.Read more..

  Selamat Mencoba!

klik untuk selengkapnya..