Menghiasi Blog Dengan Mini Icon

Bagi sahabat blogger yang ingin menghiasi templatenya dengan tampilan icon-icon mini seperti yang kalian lihat pada blog ini, saya akan mencoba membantu kalian caranya. Untuk menambahkan beberapa icon pada blog, kalian butuh kode css yang sudah saya kategorikan masing-masing di bawah ini. Silahkan copas kode css tersebut tepat di atas kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian dan kemudian simpan.

/* Mini icon Untuk label pada kolom sidebar
-----------------------------------------------
*/
#Label1 ul li {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat;
 padding: 0 5px 0 20px;
 line-height:1.6em;
 }
/* Mini icon Untuk label pada kolom Footer
--------------------------------------------------
*/
.post-labels {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat; 
 padding-left: 20px;
 font-family: "Times New Roman", Serif; 
 line-height:1.6em; font-size:12px;
 }
/* Mini icon Untuk arsip pada kolom sidebar
--------------------------------------------------
*/
.BlogArchive #ArchiveList ul li.archivedate  {
 border-bottom: 1px solid #EFF0F1;background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding:0 5px 0 35px; 
 line-height:1.8em;
 }
span.zippy  {display:none;}

/* Mini icon Untuk tanggal terbit postingan
---------------------------------------------------
*/
.date-header {
 background: url(http://img4.imageshack.us/img4/4774/calendarmonthqz7.png) left no-repeat;
 padding:0 0 0 20px;
 }
/* Mini icon Untuk recent posts dan recent comments
---------------------------------------------------
*/
#Feed1 ul li, #Feed2 ul li  {
 border-bottom: 1px solid #EFF0F1;
 background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding-bottom:2px 5px 2px 25px;
 }
/* Mini icon Untuk comments pada kolom footer
---------------------------------------------------
*/
.comment-link {
  background: url(http://img220.imageshack.us/img220/158/icocommentwfi3.png) left no-repeat; 
  padding-left: 17px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

/* Mini icon bonus dari duayu
---------------------------------------------------
*/
.fn {
  background: url(http://img504.imageshack.us/img504/1718/userty2.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; font-size:12px;
  }
.timestamp-link {
  background: url(http://img4.imageshack.us/img4/3465/datelx9.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

Jika kalian ingin mengganti icon-icon tersebut dengan milik kalian sendiri silahkan kalian ganti tulisan yang sudah saya beri warna biru dengan URL icon tempat dimana kalian mengupload icon kalian. Nah selebihnya silahkan kalian otak atik sendiri kode css-nya sesuai dengan selera kalian. Semoga ini sedikit membantu.

Cara Memasang Google Talk

apa itu google talk ? google talk adalah salah satu fasilitas chat milik google . yang fungsinya adalah untuk berkomunikasi/chatting untuk para pengguna akun google. Sama seperti yahoo messenger, google talk juga bisa dipasang diblog yang tujuanya adalah untuk berkomunikasi antara pengunjung blog dan pemilik blog yang menggunakan google talk sebagai sarana komunikasi.

Untuk memasang Google talk bi blog cukup mudah , yang sobat perlukan hanyalah memiliki akun google. Nahh… akun google pasti sobat blogger sudah punya kan ? untuk memasang google talk langsung aja sobat ikuti langkah-langkah cara pasang google talk di bawah ini.

1.Login ke blogger dengan ID Sobat.

2.Klik Tata Letak.

3.Klik Tambah Gadget.

4.Kemudian pilih HTML/javascript.

5.Selanjutnya copy dan paste kode berikut di dalamnya.

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe><p style="margin:-8px 0"><br /><center>
<a style="text-decoration:none;font-size:60%;" href="http://kolom-tutorial.blogspot.com/2008/01/pasang-google-talk-di-blog.html">Add to your blog</a></center></p>

6.Klik SIMPAN

7.Selesai...selanjutnya silakan sobat tinggal lihat hasilnya..

Cara Mengganti Template Blogger

Desain Template dari blogspot terkadang ga bikin kamu puas dengan tampilanya .ya mungkin cara satu-satunya supaya tampilan blog kamu jadi menarik kamu harus ganti template dari situs-situs yang menyediakan template gratis.kalo kamu mau diblog saya juga ada beberapa template yang bisa didownload,pengen tau CARA GANTI TEMPLATE BLOGbdari pihak ketiga ? tenang aja karena saya akan menjelaskan bagaimana CARA GANTI TEMPLATE BLOG

Sekarang ini pengguna blog udah banyak banget ,jadi ga sedikit yang tampilan blognya sama.dan tampilan blog juga akan menpengaruhi daya tarik tersendiri kepada pengunjung blog kita.Tetapi buat kamu yang menjalankan teknik-teknik SEO tidak dianjurkan untuk sering bergabti template, Silakan ikuti tutorial Cara Ganti Template Blog berikut ini :

CARA GANTI TEMPLATE BLOG
1.Cari template dengan menggunakan mesin pencari dengan kata kunci "free blogspot template" atau bisa juga download template diblog saya ini.

CARA GANTI TEMPLATE BLOG
2.Setelah kamu download template yang kamu inginkan ekstrak file template tersebut,caranya klik kanan file template tersebut kemudian klik "ekstrak file".

CARA GANTI TEMPLATE BLOG
3.Setelah template berhasil di ekstrak file akan berubah menjadi sebuah folder,Buka folder file template tersebut nanti didalamnya ada file XML,copy File tersebut lalu paste di "my document" supaya ga ribet nanti mengunggah template nya.

CARA GANTI TEMPLATE BLOG
4.Selanjutnya LOGIN ke blogger

CARA GANTI TEMPLATE BLOG
5.Klik "Tata Letak" kemudian Klik "Edit HTML"

CARA GANTI TEMPLATE BLOG
6.kLIK "Browse" disamping kata "Upload sebuah template dari sebuah file pada hard drive Anda" lalu pilih file XML template yang tadi dipaste di my document.setelah itu klik "Unggah"

CARA GANTI TEMPLATE BLOG
7.jika ada pernyataan Klik "simpan dan lanjutkan"

CARA GANTI TEMPLATE BLOG
8.Selesai... Tinggal kamu lihat hasilnya.

cara pasang favicon versi scroll text

halo sobat blogger di manapun anda berada. Percantik/perganteng blog anda dengan trik blogger dari saya ini. Trik ini ialah favicon, tapi favicon ini lain daripada yg lain, favicon ini namanya favicon versi scroll text.
 

1. Buka http://www.freefavicons.info
2. Klik browse untuk mengambil gambar dari komputer Anda
3. Kolom di bawahnya isi dengan text yang akan muncul



4. Kalau sudah klik Create Favicon
5. Kemudian klik Get It Now untuk menyimpan hasilnya di komputer Anda
6. File tersimpan di komputer Anda

kemudian daripada itu ..

Extract File
Akan ada beberapa file yang terdownload, extract hasil download.
- Buka File Rar Anda, akan ada banyak file
- Biasanya file yang kita butuhkan akan bernama Animated_favicon.gif, klik file tersebut
- Klik Extract To pada toolbar WinRAR
- Pilih tempatnya lalu klik OK

ImageShack
- Buka http://imageshack.us
- Klik Browse, cari file (animated_favicon.gif) yang tadi telah Anda extract
- Klik Start Upload (kolom lain abaikan saja, tak perlu diisi
- Nah, muncul URL file Anda yang bisa Anda gunakan untuk favicon Anda

Penting!!! Ada Direct link to image dan short link to image
Pilih saja yang direct link to image, yang kita gunakan adalah URL di kolom sebelah kiri tulisan Direct link to image.

Pasang Favicon
Untuk memasangnya sudah pernah saya bahas, baca saja cara ganti icon blog(favicon)
Di artikel tersebut ada script untuk memasang favicon, ganti yang berwarna merah dengan URL yang baru saja Anda dapat.

Semoga bermanfaat........

Cara Membuat Banner Animasi

Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Contoh banner animasi :




selamat mencoba. 



http://kolom-tutorial.blogspot.com/

Free Template Blog

Blog adalah salah satu media yang paling di minati di internet dan blogger adalah salah satu blog terbesar dan paling banyak dipakai. Tetapi sayang karena sangat banyaknya pemakai dan sedikitnya template yang di sediakan memaksa kita untuk berusaha sedikit untuk memodifikasinya supaya terlihat berbeda dari pada blog lainnya. Dan untuk alasan profesionalitas kita membutuhkan tampilan yang elegan dan tidak sembarangan. Berikut adalah tempat yang bisa anda kunjungi untuk merubah tampilan blog anda:

1. btemplates.com
Terdapat sangat banyak template untuk blog anda siap pakai untuk memperindah tampilan website anda. klik disini untuk mendapatkan

2. blogspottemplates.blogspot.com

di blog ini anda akan menjumpai sejumlah template dengan layout yang sama hanya backgroundnya saja yang dirubah. Namun jumlah template yang diberikan lumayan jumlahnya cukup untuk menambah koleksi template anda.klik disini untuk mendapatkan

3. http://www.blogcrowds.com/resources/blogger_template.php

Template yang diberikan cukup menarik dengan beragam layout yang pasti anda akan suka, jumlahnyapun cukup banyak. Jadi silahkan ambil dan percantik blog anda dengan template yang telah mereka sediakan. klik disini untuk mendapatkan

4. http://www.geckoandfly.com/blogger-templates-beta/

Walau jumlahnya sedikit, namun template yang mereka berikan cukup menarik dan layak anda coba. Tampilan yang simple membuat kita dapat dengan mudah memodifikasi tampilanya. klik disini untuk mendapatkan

5. http://www.bloggertemplates.org/

sesuai dengan namanya mereka memang membuat website ini untuk blogger template karena isi website mereka hanya Cuma ada template. Templatenya juga bagus dan kelihatan profesional. klik disini untuk mendapatkan

Membuat Efek Warna Pada Link

Efek warna pada link memberikan efek menarik bagi pengunjung sehingga pengunjung penasaran dan mngklik linknya.. dan ini juga bermanfaat sebagai pembeda antara Link dan Tulisan yang bukan link. Mau tau cara membuatnya gini nih..

Caranya mudah hanya dengan mengcopy dan pastekan saja:
sebelum diubah anda silahkan lihat dan cari kode ini pada edit html anda :

a:link { color:$linkcolor; text-decoration:none; } a:visited {color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; }

Klo sudah coba bentuk yang pertama yaitu dengan mengganti kode diatas menjadi:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; }

-->Bentuk yang Kedua

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-size: 120%; }

-->Bentuk yang ketiga:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; }

-->Bentuk yang keempat

a:link { color: #0066CC; text-decoration: none; } a:visited { color: #cc0000; text-decoration: underline; } a:hover { color: #2D8930; text-decoration: blink; }

-->Dan yang terakhir Bentuk yang lima :

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; font-weight: bold; font-size: 120%; background: #ffff66; text-decoration: blink; }

Silahkan coba dan jangan lupa untuk Membackup dahulu template anda sebagai langkah jaga-jaga jka terjadi kesalahan yang dapat merusak blog anda nantinya..




http://tipsblogspot.blogspot.com/2008/08/efek-warna-pada-link.html

Membuat CSS Dock Menu

Dock Menu Merupakan menu Horizontal yang disertai gambar-gambar dan apabila menunya disentuh maka akan menampilakan efek berubah size/ukurannya. Nah dibawah ini contoh gambar dari CSS Dock Menu ini. N-design-studio.com situs ini merupakan situs yang menyediakan Trick Dock Menu menggunakan script CSS. o-om.com saya jadikan sebagai rujukan untuk menuliskan artikel ini.. mungkin berguna untuk anda.

Untuk mengetahui bagaimana cara kerja CSS Dock Menu ini, silahkan klik disini! sebagai sample, dan mungkin saja anda tertarik untuk mencoba.

Langkah yang perlu dilakukan untuk membuat CSS Dock Menu ada pada blog anda ialah:

1. Download Script code CSS nya Disini!.

2. Lihat Disana anda Folder JS (terdapat 2 file Script) yaitu Interface.js dan jquery.js Buka Juga folder Images untuk mendapatkan icon menunya. Upload semua File tersebut dan simpan pada Host Directorynya masing-masing.. Boleh juga anda menyimpannya pada Google Page Creator

3. Kalau sudah menyelesaikan Semua pengUploadtan filenya.. Silahkan masukke langkah selanjutnya

Cara Pemasangannya Pada Blogger

1. Masukke Edit Html dan cari kode <head> Kalau sudah ketemu Letakkan script ini dibawahnya:

<head>
<script src='http://google.pages.com/jquery.js' type='text/javascript'/>
<script src='http://google.pages.com/interface.js' type='text/javascript'/>
<link href='http://google.pages.com/style.css' rel='stylesheet' type='text/css'/>

Warna ungu merupakan alamat directory, ubahlah alamat tersebut sesuai dengan path directory masing-masing

2. Selanjutnya cari kode </body> Letakkan script yang ada dibawah ini, diatas kode </body>. Seperti ini:

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

</body>
</html>

3. Proses pemasangan menu terserah pada anda mau diletakkan pada Page Element atau edit html. Pasang kode ini disana :

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>

Warna Hijau Menunjukan alamat URL yang dituju ganti sesuai alamat URL yang anda tuju dan warna Merah Menujukkan path directory untuk warna merah ganti sesuai path directory anda.

Mengerti Programming dapat mempermudah anda mengerti pemasangan dan peletakkan script-script code.

Cara Membuat Sidebar terpisah dan Berkotak-kotak

wah udah lama nih.. ga' mengisi dan mengotak-atik siblog.. soalnya saya beberapa hari ini lagi sibuk.. jadi baru bisa nge-Blog lagi seperti biasayanya.. beberapa waktu lalu saya mengunjungi blognya kang-rohman disana kang- rohman menulis artikel tentang cara membuat sidebar agar terlihat terpisah-pisah, persis kayak blog milik kang rohman, Nah dari situ saya menulis artikel ini ya itung-itung penyebar ilmu yang baek biar yang baca dapat berguna dan bisa dipaktekin.Nah nih gambar blog kang rohman... Sidebarnya terlihat terpisah-pisah kan..

Dari gambar diatas.. bisa di lihat sidebarnya terpisah dan seperti kotak-kotak lagi, jadi terkesan rapi blognya mo tau cara buatnya biar bisa jadi kayak gitu?? ha.. baca terus ya biar ngerti...

Nah cari kode Sidebar Widgetnya seperti:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Pisah ketiga kode ini.. biar ga' bingung jadinya.. (kode ini terdapat pada template minima) tapi bila sidebar widget dengan main widgetnya udah terpisah.. dibiarrin aja, nah setelah dipisah maka jadinya seperti ini:

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu:
kode pada Sidebar . Widger dimodifikasi jadi

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

1. Background merupakan latar belakang blog bisa diganti dengan warna yang sesuai
2. Border 1 px dotted #6c6b6b; merupakan garis yang mengelilingi wiget sebesar 1pixel
3. Margin merupakan jarak kebawah antara widget yang 1 dengan yang lainnya sebesar 1,5em
4. Padding memberikan sela 0,5em

Nah, keempat hal inilah yang dapat membuat sidebar seakan-akan terpisah dan berkotak-kotak..

Nah silahkan mecoba ya...

Cara Membuat Vertical Menu

Vertikal Menu merupakan pilihan menu yang biasa dipakai pada website-website yang mempunyai banyak pilihan menu di dalamnya, vertikal menu berbentuk pilihan menu yang turun kebawah jika kita sentuh dengan menggunakan mouse kita.. dengan kita menggunakan vertikal menu ini maka kita akan dapatkan pilihan menu yang banyak untuk blog kita

Nah saya akan memberikan cara pembuatannya pada blog.. ikuti caranya dan langkah-langkah nya dengan seksama, dengan anda mengikuti pastinya anda tidak akan mendapatkan kesulitan dalam pengeditan kode CSS nya

Masuk ke Akun Blogger Anda dan pilih layout terus cari Edit HTML

Masukkan kode CSS ini di atas kode ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Kemudian SAVE

Anda bisa mengganti warna yang ada dengan warna yang anda sukai

Selanjutnya pilih Page Element dan kli add Page elemnet pilih lagi HTML/java Script

Masukkan kode ini didalmnya

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
<li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
<li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
</ul>

Ganti your blog name dengan nama blog milik anda
Klo sudah klik save

selesai, selamat mencoba

Cara Membagi 1 List style menjadi 2 Kolom

Tadi abis jalan-jalan eh ternyata saya baca postingan miliknya si Jaloe
dan saya tertarik jadi saya terusin aja biar makin banyak yang baca dan banyak yang tau. Cara buat 1 list menjadi 2 kolom itu sangat berguna lo apalagi bagi yang punya template 2 kolom dan lebih beruntung lagi kalo punya template 3 kolom jadi bisa hemat tempat, dapat meletakkan 2 widget atau tambahan lainya ke dalam 1 list saja. Jadi penen liat bagaimana bentuknya.. nah begini nih bentuknya

Untuk mendapatkan yang seperti diatas cara mudah ko' tinggal cari kode

]]></b:skin>

Dan letakkan kode ini di atasnya

/* Kode Css List Two Kolom
------------------------------------------------------------------------------------------*/
#catl {
padding :5px 10px;
width : 91%;
background-color : #ffffdd;
border : 1px solid #ccc;
margin : auto;
}

#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }

/* style all the list items here */
#catl ul li {
height : 1em;
list-style-type : none;
color : #333;
padding : 0.3em 0 0.4em 0.25em;
font-size : 0.9em;
border-bottom : 1px solid #ccc;
text-indent:0px;
}

/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
margin-left : 50%;
margin-top : -1.8em;
padding : 0.3em 0 0.4em 0.5em;
border : 0;
}

/* Every other two list items are styled with a background for usability and style */
.catl_alt {
background-color : #fffffc;
}

/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
margin-top : -2.3em;
}

Kalau sudah Klik Simpan dan Pilih Page Element Dan pilih Add Page Element/Tambahkan sebuah widget baru dengan pilihan Html/java script.

Kemudian masukkan kode ini di dalamnya:

<div id="catl">
<h3>Satu List Dua Kolom</h3>
<ul>
<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>
<li class="catl_alt">List Item Tiga</li>
<li class="catl_l2">List Item Empat</li>
<li>List Item Lima</li>
<li class="catl_l2">List Item Enam</li>
<li class="catl_alt">List Item Tujuh</li>
<li class="catl_l2">List Item Delapan</li>
</ul>
</div>

Catatan penting :

1. Yang perlu di ganti adalah tulisan antara tag <li> dan </li>.
Jika ingin membuat linklist menjadi seperti ini.
<li><a href=�http://alamat url/�> Nama List </a></li>
jika ingin membuat list berupa link gambar seperti ini.
<li><a href="http://alamat url/"><img src="alamat gambar></a></li>
2. Atur tulisan list-nya jangan terlalu panjang. Dan Jika ingin menggunakan gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.

View Source : green-beast

Cara Membuat Huruf Kapital di Awal Paragraf

Membuat huruf besar di awal paragraf bukan suatu hal yang sulit, kenapa saya bilang begitu seperti halnya kita membuat tulisan pada microsoft word yang dimana kita buatkan huruf awalannya dengan huruf besar layaknya koran atau majalah silahkan melihat contohnya disini! pada blog disana terlihat selain tulisan terkesan rapi juga dapat menjadi suatu daya tarik tersendiri. Bagai mana cara membuatnya nah silahkan ikuti langkah berikut :

1. masuk ke layout --> Edit html

2. Cari kode berikut
.post-body {
.....
}

3. Kalau ketemu silahkan letakkan kode ini dibawahnya ( dibawah tanda } ).
.post bt {

float:left; color:

$headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px; }
4. Saat penulisan postingan terbaru jangan lupa untuk menuliskan kode ini : <bt></bt>. Misalnya huruf awalnya P maka letakkan huruf P di tengah kode tersebut seperti : <bt>P</bt>

Cara Mengganti Nama Author

Merubah Nama Author itu dapat di lakukan dengan mudah lho.. ya tinggal dari kode script dibawah ini :

<p class=�post-footer-line post-footer-line-1�>
<span class=�post-author�>
<b:if cond=�data:top.showAuthor�>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

cara mencari nya mudah ko':
1. Masuk ke akun blogger anda.
2. Klik Layout --> edit Html
3. Centang Box pada tuisan Expand Widget.
4. Ganti Kode berwarna merah dengan nama yang anda inginkan.
5. Save template.

Mudah kan sekarang nama author milik anda sudah terganti..

Cara Menambah Icon di Samping Judul Artikel

Bingungkan.. bingungkan apa sih maksudnya menambah icon di samping judul artikel, nah setidaknya anda akan sedikit bahkan banyak
mengerti apa masksudnya setelah anda baca smpai habis artikel ini ya mungkin berguna bagi anda. Menambahkan Icon atau gambar kecil sebelum judl artikel atau lebih jelasnya disamping judul artikel itu dapat menarik perhatian pembaca untuk melihat artikel tersebut itu sepenuhnya kenapa? yah dengan dihiasi dan maka judul posting pun lebih mencolok dan dapat menark mata pembaca yang melihatnya.Maka dari itu saya akan beri tahu bagaimana caranya menambahkan icon/gambarnya.

Caranya Ialah :
1. Masuk Akun Blogger Anda dan klik Layout pilih Edit Html.

2. Cari Kode Css Berikut :
.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
<font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;

3. Cari Icon Yang ada suka misalnya icon buku dan pena yang punya gambarnya (http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:http://remas-alakbar.com/images/
buku.pngh) atau anda bisa mencarinya di Iconarchive.com, disana anda akan mendapatkan banyak contoh icon.

4. Ganti kode padding:30px 0px 0px 45px; Jadi padding:48px 0px 0px 45px; dan tambahkan height:48px; dan background:url nya dibawah color:#333;yang jadinya seperti ini:
.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
background:url(http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:
http://remas-alakbar.com/images/buku.png) no-repeat left center;

5. Save templatenya.
Nah silahkan mencoba apakah anda bisa.. saya yakin anda pasti bisa

Cara Membuat Snapshot

Apa itu Snapshot ?Snapshot adalah adalah sedikit jendela yang muncul saat kita mengarahkan kursor pada sebuah link.Contohnya silakan Klik disini dan coba kamu arahkan kursur Ke link yang ada dan lihat efeknya. Nah itulah yang disebut Snapshot .Dalam postingan kali ini saya akan membahas bagaimana Cara Bikin Snapshot Di Blog . Mungkin Snapshot ini berguna untuk mempercantik tampilan blog, Atau sekedar hanya pengen memasangnya aja kali ya .hehehe pengen Bikin Snapshot di blog?Silakan ikuti tutorial Cara Bikin Snapshot Di Blog

1.Silakan Klik http://www.snap.com./

2.Klik "Get Started"

3."Choose a Color Theme" adalah tema dari Snapshot yang akan mau kamu buat.silakan pilih tema sesuai selera.

4."Add Your Logo" Adalah logo yang nanti pengen kamu gunakan . silakan klik "Browse" Untuk meng upload logo yang kamu inginkan.

5."Select Your Shots Language" Isikan dengan bahasa yang dipake blog.

6.Kasih tanda titik pada "My site displays sexually-explicit content".

7.Kemudian Klik "Continue".

8.Selanjutnya isikan email,URL blog dan password pada "Enter Your Account Details".

9.Sebelum Klik continue lagi jangan lupa kasih tanda titik pada "I agree to Terms & Conditions above"

10.Selanjutnya Copy kode HTML pada "Get Your Code " Lalu paste di blog kamu .caranya:

11.Login Ke blogger .Lalu klik "Tata Letak" Kemudian Klik "Edit HTML".

12.Cari Kode </body> Lalu Paste Kode HTML dari Snapshot Tadi diatasnya. Jangan Lupa Klik "Save Template"

Kalo udah selesai silakan arahkan kursor Pada link yang ada diblog kamu. Dan lihat hasilnya..

Cara membuat label atau menghapus label yang sudah terpasang dipostingan

Pertama sobat login ke blogger sobat di http://www.blogger.com

Setelah sobat masuk ke dasbord blogger sobat klik menu postingan dan pilih edit entri

Setelah itu sobat pilih postingan mana yang mau dihapus labelnya dengan cara member centang pada kotak disebelah postingan tersebut

Selanjutnya sobat klik kotak aksi label dan scroll ke bagian bawah sampai melihat opsoi yang hapus label

Setelah itu sobat klik nama label yang mau dihapus pada postingan tersebut

Jika sobat ingin membuat label baru untuk postingan tersebut langkahnya sama seperti diatas. Bedanya hanya pada bagian aksi label.

Setelah postingan yang akan diberi label baru terpilih sobat klik aksi label dan klik label baru

Selanjutnya sobat ketikan nama label baru pada kotak yang disediakan, setelah selesai klik ok

Cara Pasang Info Cuaca

Info Cuaca adalah salah satu aksesoris yang cukup menarik untuk dipasang diblog. Tujuanya adalah ya untuk mengetahui ramalan cuaca,walaupun Info Cuaca ini hanya mewakili kota tempat tinggal sang pemilik blog .namun Info Cuaca ini cukup menarik untuk dipasang di blog kamu .Tertarik ? Silakan ikuti Tutorial Cara Pasang Info Cuaca Di Blog Berikut ini :

1.Klik http://www.wanderground.com.

2.Masukan nama kota tempat kamu tinggal,lalu klik tanda Search disampingnya.

3.Setelah muncul Info Cuaca kota kamu silakan klik Get Your Wheater Sticker yang ada dibawah.

4.Silakan pilih banner Info Cuaca yang kamu inginkan.

5.Setelah kamu memilih banner yang kamu inginkan,nanti akan tampil kode HTML dari banner tersebut.

6.Copy Kode HTML banner yang kamu pilih.

7.Selanjutnya LOGIN ke blogger kemudian klik Tata Letak Lalu klik Tambah Gadget dan Pilih HTML/javascript lalu paste kode tadi kedalamnya. jangan lupa klik save.

8.Selesai.. Tinggal kamu lihat hasilnya.

Cara Membuat Label atau Tag Clouds

Membuat Label atau Tag Clouds.Apa itu Tag Clouds ? Tag Clouds adalah sebuah Label yang hurufnya tidak rata dan jika Tag yang hurufnya rata itu biasanya adalah tag yang populer di blog kamu dan jika jika kecil berarti tag tersebut kurang populer.Dan buat kamu yang tertarik untuk membuatnya.Silakan ikuti tutorial Membuat Label atau Tag Clouds berikut ini.

1.LOGIN ke Blogger.

2.Klik Tata Letak kemudian klik lagi Edit HTML.

3.Selanjutnya cari kode ]]></b:skin>.Lalu copy dan paste kode berikut di bawahnya.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

4.Cari lagi kode <head> . kemudian copy paste berikut tepat di bawahnya.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

5.Cari lagi kode berikut ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

6.Hapus kode tersebut.lalu ganti dengan kode berikut ini.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

7.Selanjutnya klik SIMPAN TEMPLATE

8.Selesai dech.. trus tinggal kamu lihat hasilnya.

Cara Pasang Site Meter di Blog

Sitemeter adalah Alat untuk mengukur jumlah pengunjung blog atau yang sering disebut Counter Web, namun bedanya Site meter tidak memberikan perhitungan Jumlah pengunjung blog secara langsung didalam blog orang yang menggunakan fasilitas dari sitemeter tersebut,atau bisa dikatakan site meter adalah counter web tersembunyi .mengapa dikatakan sebagai counter web tersembunyi ? ya karena sitemeter hanya memberikan banner atau link menuju counter blog kita. dibawah ini adalah contoh banner dari sitemeter .



Jadi jika sobat ingin memasang web counter yang tidak ingin dilihat oleh pengunjung blog secara langsung,,sobat bisa menggunakan site meter ini .jika sobat tertarik untuk memasang sitemeter,silakan ikuti langkah-langkah Cara Pasang Site Meter di bawah ini .

Cara Pasang Site Meter

1.Klik http://www.sitemeter.com/.

2.Klik Sign Up pada pilihan Site Meter Basic Free .

3.Klik lagi Sign Up pada pilihan Site Meter Basic Free.

4.Kemudian isikan data yang diperlukan pada form pendaftaran, seperti :

• Your Site's URL isikan dengan Alamat blog sobat.
• Your Site's NAME isikan dengan judul blog sobat.
• Codename isikan dengan nama sobat atau dengan kata yang lainya .
• Your Current time biarkan saja .
• Beri tanda titik pada By checking this box I agree to be bound by.

5.Klik Next.

6.Pada form pendaftran selanjutnya silakan isikan form pendaftaran tersebut dengan lengkap ,Seperti :

• Email addres isikan dengan alamat email sobat.
• Title isikan dengan Other saja.
• Your ZIP or postal Code isikan dengan kode pos alamat sobat ,atau isi saja dengan 17422.
• Country isikan dengan indonesia.
• Pilih jenis kelamin sobat pada GENDER.
• Beri tanta titik NO pada pilihan Can you receive HTML email.

7.Klik Next.

8.klik Next lagi setelah ada pernyataan dan tidak ada masalah pada pendaftaran.

9.Selanjutnya klik Manager pada tab menu yang ada diatas.

10.Kemudian klik HTML pada Adding Site Meter to your site .atau biar lebih jelasnya lihat gambar dibawah.



11.Copy seluruh kode HTML yang diberikan Sitemeter.

12.Selanjutnya Login ke blogger.

13.Klik Tata Letak.

14.Klik Tambah Gadget.

15.Kemudian pilih HTML/javascript.

16.Selanjutnya paste Seluruh kode HTML yang tadi kedalamnya.

17.Klik Simpan.

18.Selesai... untuk melihat jumlah pengunjung blog sobat tiap hari ,sobat tinggal klik aja banner tersebut.nanti akan tertampil statistik blog sobat.

Cara Membuat Teks Berjalan atau Efek Marquee

Bagaimana cara membuat teks berjalan Pada postingan,sidebar Atau tempat yang lainya dech .hehehe yupzz dalam postingan kali ini saya akan membahas bagaimana cara Membuat Efek Marquee Atau Teks Berjalan .apa itu marquee ?Marquee adalah suatu program HTML untuk membuat teks atau juga gambar bisa bergerak atau berjalan.
Perhatikan Kode HTML Berikut :
letakan kode berikut di HTML/Javascript




<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="40%">

Blog tutorial|Free Template|HTML Tutorial|Dan tips&trik mengenai internet|

</MARQUEE>


Jadi untuk Membuat Efek Marquee Tinggal copy paste kode di atas lalu Ganti teks yang bertanda biru dengan teks yang anda ingin tampilkan..