Panduan Blog Komplet

Memebuat Kotak Komentar di bawah Postingan

2009-09-01T21:09:00.000-07:00

Kotak komentar berfungsi untuk mengomentari setiap artikel yang dituliskan oleh penulis artikel. Untuk membuatnya berada di bawah postingan bagi pemilik blog, merupakan hal yang penting, karena selain dapat langsung berinteraksi dengan para pengunjung blog, juga dapat menciptakan rasa kepercayaan pengunjung terhadap Blog Anda.
Untuk membuatnya berikut langkah-langkahnya :

1. Login ke www.draft.blogger.com (bukan www.blogger.com)
2. Kemudian pergi ke setting --> Comment kemudian lihat pada Comment Form Placement dan klik Embedded below post. Selanjutnya di simpan.

3. Kalau sudah, Silahkan ke Layout ---> Edit HTML, kemudian klik Expand Widget Templates
4. Kemudian carilah kode berikut ini :

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

5. Bila udah ketemu, selanjutnya letakan kode berikut ini di bawahnya:

<b:include data='post' name='comment-form'/>

6. Selesai selanjutnya Save

Cara menampilkan Postingan Terbaru

2009-09-01T20:56:00.000-07:00

Berikut langkah-langkahnya :
1. Login pada Blogger.com
2. Pada Dashboard Klik Page Element Kemudian, Klik Add a Gadget
3. Selanjutnya Pilih HTML/JavaScript
4. Kemudian Copy kode dibawah ini, dan letakan pada kotak content HTML/JavaScript

catatan : - Ganti BlogAnda.blogspot.com dengan URL blog kamu.
- Angka 5 adalah jumlah posting yang ditampilkan di Recent Post.

5. Kemudian Save (simpan)...

Cara Menggunakan Google Analytics

2009-08-25T19:38:00.000-07:00

Langkah-langkahnya :
1. Login ke Google Analytics
2. Setelah Login, Klik Tambahkan Profil Situs Web

3. Masukan URL Blog atau Web yang akan di Analytics, seperti gambar di bawah ini :

MEMASANG TRACKING KODE KE DALAM BLOG

4. Setelah URL Blog sudah di masukan, Klik Selesai
5. Kemudian akan muncul Text Area yang berisi kode JavaScript yang akan di letakan pada Blog atau Website. Dan yang penting letakan kode tersebut di antara Tag <body> dan </body>

Bentuknya seperti ini : <body> KODE DARI GOOGLE ANALYTICS </body> atau diletakan tepat di atas </body>

6. Kemudian Klik Finish

Mendaftarkan Blog ke Search Engine

2009-08-24T22:08:00.000-07:00

Saya sering mendapat pertanyaan, bagaimana caranya mendaftarkan situs ke search engine seperti Google dan Yahoo. Tanpa didaftarkan pun, sebenarnya cepat atau lambat situs kita pasti akan ditemukan oleh search engine.

Perlu diketahui bahwa spider dari search engine itu bekerja secara otomatis. Dia secara aktif akan menelusuri link-link yang ia temukan pada saat mengindeks suatu website.

Nah, jika suatu ketika ada salah satu link tersebut yang mengarah ke situs kita, maka spider tersebut akan mengunjungi situs kita pula. Dengan demikian situs kita akan ikut diindeks, meski kita tidak pernah mendaftarkannya ke search engine tersebut.

Namun proses ini biasanya lama sekali, kecuali memang situs kita tersebut sangat terkenal. Agar lebih cepat, kita bisa mendaftarkannya secara manual. Tidak perlu semuanya, cukup ke beberapa search engine yang terkenal saja seperti Google dan Yahoo.

Berikut cara mendaftarkan situs ke search engine Google dan Yahoo.

Google

- Buka website http://www.google.com/addurl/
- Ketikkan alamat situs kita pada kotak URL
- Klik tombol Add URL

Yahoo

-Buka website https://siteexplorer.search.yahoo.com/submit
-Ketikkan alamat situs kita pada kotak input pada bagian Submit a Website or Webpage
-Klik tombol Submit URL

Tool Google Analytics

2009-08-24T21:03:00.000-07:00

Tool dari Google yang berguna untuk mengevaluasi blog atau situs adalah Google Analytics. Tool ini lebih profesional dan fiturnya lebih lengkap di bandingkan Google Webmaster Tools.
Google Analytics adalah layanan Google yang berguna untuk menampilkan data statistik tentang blog atau situs Anda. Untuk mendaftar Google analytics, Anda hanya perlu Google ID. Sebagai syarat utama menggunakan Google Analytics,Anda perlu login menggunakan Google ID milik anda.

"CARA MENDAPATKAN KODE GOOGLE ANALYTICS"

Untuk mendaftarkan diri ke Google Analytics tidak terlalu sulit, yang pastinya Anda harus punya Account misalnya di Gmail.com. Sama seperti Yahoo, Google juga memberlakukan satu account untuk semua layanannya. Itu berarti jika kita punya account di GMail.Com, kita bisa menggunakan account tersebut untuk mendaftar layanan lainnya, termasuk Google Analytics.

1. Masukkan alamat email dan password pada form login yang tersedia. Setelah itu akan muncul tampilan halaman Sign Up dari Google Analytics. Nah, untuk mendaftar klik saja tombol Sign Up yang ada di halaman tersebut.
Selanjutnya akan muncul tampilan form seperti gambar di bawah ini. Isikan saja data-data yang diminta pada form tersebut.

Kotak Website’s URL adalah alamat website utama yang kita daftarkan. Nanti kita juga bisa mendaftarkan alamat website lain hingga maksimal 50 alamat situs (kalau nggak salah) dengan account yang sama. Untuk kotak Account Name bisa kita isi sama dengan isian diatasnya.

Klik button Continue untuk melanjutkan proses ini. Pada form berikutnya isikan nama, telepon dan negara. Yang wajib diisi hanya kotak pilihan negara, kotak isian lainnya bisa diabaikan. Selanjutnya klik button Continue.

Beri tanda centang pada kalimat “Yes, I agree to the above terms and conditions“, lalu klik button Create New Account. Selesai sudah proses signup tersebut.

Kita sudah terdaftar di layanan Google Analytics sekaligus kita juga sudah mempunyai sebuah kode Tracking untuk website utama yang tadi kita daftarkan. Langkah berikutnya kita harus meletakkan Tracking Code tersebut pada setiap halaman web di situs kita.

Google Webmaster Tools

2009-08-24T20:55:00.000-07:00

Salah satu tool terbaik untuk mengevaluasi Blog atau situs Anda adalah Google Webmaster Tools. Tool ini dapat digunakan oleh siapa saja yang memiliki Google ID untuk melihat apa yang direkam oleh Robot Google. Ada banyak informasi menarik yang bisa dilihat dari Google Webmaster Tools untuk mengoptimalkan Blog atau situs Anda.

Apa itu Feed ?

2009-08-18T23:37:00.000-07:00

Feed adalah salah satu media di internet yang berasal dari situs atau blog kita dan mengandung isi blog. Perbedaan Feed dan Blog adalah: Feed tidak ada yang namanya menu navigasi, tidak ada iklan, banner, tidak ada widget. Jadi 100% murni teks dan berisi gambar dari sebuah postingan. Kebalikan dengan Blog dimana blog dapat berisi menu navigasi, berisi iklan,banner, berbagai widget dan lain-lain.
Feed ini sangat penting untuk mendaftarkan ke Google webmaster Tools. Crawler Bot atau robot yang digunakan Google untuk meng-indeks sebuah situs, pastinya akan mebutuhkan Feed, karena tidak mungkin Crawler Bot akan meng-indeks iklan, banner, widget. Oleh sebab itu dengan adanya Feed dapat mempermudah untuk mendaftarkan diri ke Google Webmaster Tools.

Menghapus Navbar dari Blog blogger

2009-08-18T23:33:00.000-07:00

Navbar atau NavigasiBar merupakan identitas dari blogger sebagai penyedia blog Blogger. Banyak blog Blogger yang kita temui,tidak lagi menggunkan Navbar pada blog-nya. Tidak sedikit orang beranggapan bahwa adanya Navbar pada blog agak mengganggu pandangan. Bagi Anda yang menginginkan membuang Jauh-jauh Navbar, berikut langkah-langkahnya :

1.Pada Dashboard buka Tab Layout, kemudian klik Edit HTML
2.Centang Expand widget Tempelates
3.Cari kode #header-wrapper
4.Kalau sudah ketemu, letakan kode berikut tepat dibawahnya :

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

5. Setelah itu,segera di Save

Mengubah Nama Link ‘Post a Comment’

2009-08-18T23:29:00.000-07:00

Bagaimana cara untuk mengubah namalink ‘post a comment’, menjadi berbahasa Indonesia,misalnya : “Komentar Anda”, “Beri sebuah Komentar” dan lan sebagainya. Jadi dalam artikel kali ini, ‘Post a comment’ akan diubah menadi “Beri Komentar Anda”.
Untuk membuatnya berikut langkah-langkahnya :

1. Buka Tab layout Blogger Anda, Kemudian klik Edit HTML
2. Centang Expand Widget Tempelates
3. Selanjutnya Anda cari kode berikut di Edit Template

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'> Beri Komentar Anda </a>
</p>

"Beri komentar Anda", dapat diganti sesuai dengan keinginan Anda

4 .Setelah selesai,jangan lupa di Simpan

Cara Membuat Alternatif Teks Sebagai Search Engine Friendly

2009-08-18T23:26:00.000-07:00

Alternatif teks dapat berfungsi untuk membuat blog menjadi Search Engine Friendly artinya memudahakan mesin pencari menemukan blog Anda. Untuk menambahkan alternatif teks pada image atau gambar dalam postingan. Berikut langkah-langkahnya :
1.Pastikan Anda telah meng-upload sebuah gambar pada Tab Posting
2.Setelah itu bukalah Tab Edit HTML, pada Tab posting.
3.Selanjutnya carilah kode Alt=” “
4.Kemudian ketikan teks alternative pada baris kode tersebut, misalnya :
Alt=”my car”.
Setelah selesai, segera terbitkan image atau gambar yang telah dilengkapi dengan alternative teks tersebut dengan menekan tombol Terbitkan Entri

Bagaimana Menambahkan Gambar Dalam Artikel

2009-08-18T23:23:00.000-07:00

Dalam suatu artikel gambar dapat memperjelas artikel yang dituliskan. Anda dapat menampilkan gambar dari PC atau Web. Untuk menmbahkan gambar pada artikel, berikut caranya :

1.Letakan kursor mouse pada lokasi di mana Anda ingin meletakan gambar yang akan Anda tambahkan bersumber dari PC, tekan tombol Browse.
2.Setelah itu klik ikon Tambah Gambar
3.Selanjutnya muncul jendela unggah gambar. Jika gambar yang Anda tambahkan bersumber dari PC, tekan tombol Browse
4.Muncul kotak dialog File Upload, pilihlah file gambar yang akan Anda tambahkan pada artikel blog, sesudahnya tekan tombol Open.
5.Anda kembali ke jendela Unggah Gambar, lakukan pengaturan tata letak ukuran gambar.
6.Setelah selesai tekanlah tombol Unggah Gambar
7.Proses Unggah atau Upload gambar ke ertikel blog mulai berlangsung, tunggulah beberapa saat hingga usai.
8.Setelah poses Upload berhasil, tekanlah tombol Selesai.
9.Secara Otomatis gambar yang Anda tambahkan langsung muncul di dalam artikel.

Memberi Border Pada Gambar Posting

2009-08-18T23:22:00.000-07:00

Untuk memberikan kesan rapi dan tidak tampak polos pada gambar yang di letakan bersamaan dengan artikel,pertama Anda perlu menentukan letak gambar, pada bagian kiri, kanan ataupun tengah. Untuk memebri border pada gambar, berikut langkah-langkahnya:

1.Buka Tab Edit HTML (pada kotak penulisan artikel, bagian atas)
2.Setelah di klik Edit HTML, Anda di hadapkan pada artikel dalam format HTML, kenali kode yang merepresentasikan gambar pada artikel atau post Anda. Jika sudah, temukan kode border gambar yang telah dimasukan sebelumnya. Lalu ubah angkanya sesuai dengan keinginan.

“ border=”5” angka ini menemtukan tebal tipisnya border pada gambar.

Bagaimana Membuat Link Pada Posting

2009-08-18T23:17:00.000-07:00

Link berfungsi untuk menghubungkan blog Anda dengan blog atau situs lain. Terkait dengan hal tersebut, Anda dapat menambahkan link pada artikel Anda sehingga pembaca bias memperoleh informasi langsung dari sumbernya. Langsung anda ikuti langkah-langkahberikut ini :

1.Blok kata atau frase yang akan Anda link ke blog atau situs lain.
2.Selanjutnya carilah blog atau situs lain yang akan Anda jadikan sumber link.Jika Anda telah menemukanya, seleksilah alamat URL dari blog atau situs tersebut pada location bar browser kemudian klik-kanan dan pilih opsi copy.
3.Jika sudah, kembali ke halaman blog Anda.Klik ikon Tautan
4.Pada kotak dialog yang muncul kemudian, paste-kan alamat URL situs sumber tadi ke kotak teks Masukan URL,sesudahnya tekan tombol ok.
5.Hasilnya frase yang Anda blok tadi langsung berubah warna menjadi biru dan dilengkapi dengan garis bawah.
6.Sesaat kemudian muncul tampilan artikel beserta dengan link di dalam posting.
7.Selanjutnya jika artikel tersebut di publikasikan dan pengunjung mng-klik pada link tersebut, pengunjung akan di antarkan masuk ke dalam halaman website yang ditautkan dalam blog.

Artikel Tentang Posting

2009-08-18T23:11:00.000-07:00

Mempublikasikan Artikel

Apabila artikel telah selesai dibuat, Anda akan melanjutkan untuk memublikasikan-nya. Langkah-langkah mempublikasikan artikel yang telah dibuat.

1.Cek terlebih dahulu artikel yang telah Anda buat sebelum dipublikasikan,dengan menekan tombol Preview
2.Apabila artikel teleha sesuai dengan keinginan Anda, tekanlah tombol Publish Post.
3.Jika posting Anda berhasil dilakukan, Anda akan menemukan teks konfirmasi yang berbunyi "Your blog post published successfully"
4.Berikutnya,klik link (in a new window) atau"Lihat Jendela Baru" di sebelah kanan View Blog.
5.Kini,anda dapat melihat tampilan artikel yang telah Anda posting.

Mengedit Artikel post yang telah Terpublikasi

Untuk meng-edit artikel yang telah terpublikasi dengan alas an ternyata masih ada hal-hal yang perlu dibenahi, seperti salah ketik atau masih ada data yang kurang lengkap, atau hal-hal lainya yang masih perlu diubah. Anda dapat mengeditnya kembali dengan meng-klik link Edit Post. Namun jika setelah beberapa saat atau beberapa hari Anda baru sadar bahwa ada kesalahan pada postingan, Anda dapat melakukan pengeditan dengan langkah-langkah berikut :

1.Pada bagian Dashboard pada blogger Anda, kliklah link Edit Post.
2.Setelah bagian Edit Post pada tab Posting muncul, tekanlah Published sehingga semua artikel yang telah terpublikasi sebelumnyaakan muncul.
3.Kemudian Centanglah pada judul artikel post yang akan Anda perbaiki
4.Selanjutnya klik Edit pada judul artikel post yang Anda ingin perbaiki.
5.Setelah Anda mengedit artikel post, tekanlah tombol Publish Post, dan sesaat kemudian artikel yang telah diperbaiki akan muncul kembali pada postingan blog Anda.

Mengedit Artikel menggunakan fasilitas pencarian

Apabila Anda barumembuatdan mempublikasikan artikel kurang dai sepuluh posting, pengeditan masih cukup mudah untuk dilakukan. Namun, bagaimana dengan cara mengedit artikel dengan jumlah postingan sampai ratusan. Untuk memermudah hal ini, Blogger telah menyediakan fasilitas khusus yang dapat membantu Anda dalam menemukan artikel post yang akan diedit dengan cara seperti ini :

1.Masuk kedalam tab posting kemudian klik menu Edit Post.
2.Kemudian, masukan kata unci dari artikel post yang ingin diedit di dalam kotak teks Search.
3.Tekan tombol Search
4.Setelah itu artikel yang dicari telah berhasil di temukan.

Membuat “Read More” Pada Blogger

2009-08-18T22:45:00.000-07:00

Read More berfungsi untuk membuat artikel yang bersambung. Jadi, pada halaman depan blog Anda tidak perlu menampilkan seluruh artikel secara utuh, cukup potongan awalnya saja. Kemudian cukup dengan menampilkan link yang dapat mengantarkan pembaca pada artikel selngkapnya atau artikel keseluruhan. Jika Anda tertarik mengunakan fungsi Read More ini, ikuti panduan berikut :

Langkahnya :
1.Dari halaman Dashboard, pilih link Layout kemudian klik Edit HTML
2.Selanjutnya, centanglah opsi Expand Wiget Templates
3.Dalam kotak Edit Template carilah kode dibawah ini :

<p><data:post.body/></p>
Kode ini biasa terdapat setelah kode :
<div class='post-body entry-content'>

4.Kemudian ganti kode tersebut dengan kode berikut ini:

<b:if cond='data :blog.pageType = = "item" '>
<style>. fullpost{ display: inline;}</style>
<p><data: post.body/></p>
<b:else/>
<style>.fullpost {display:none;}</style>
<p><data: post.body/>
<a expr: href='data:post.url'><strong> Read More...
</strong></a></p>
</b: if>

Tulisan Read More yang terdapat pada kode di atas, Anda dapat gantikan dengan menggunakan “Baca Selengkapnya” atau baca seterusnya.

5.Setelah ituklik tombol Save Tempelate.
6.Untuk langkah berikutnya, lanjutkan dengan memilih Tab settingdan Pilih Formating
7.Masukan kode berikut pada teks yang ada di bagian Post Template.

<span class="fullpost">

</span>

8.Kemudian di Save Setting
9.Nantinya ketika Anda menuliskan suatu artikel yang akan di letakan pada posting, pilihlah Edit HTML.
10.Selanjutnya ketikan potongan artikel pertama yang ingin Anda tampilkan di halaman sebelum kode <span class="fullpost"> . Setelah kode tersebut , lanjutkan potongan sambungan artikel tersebut, yang nantinya akan terlihat
Setelah link Read More di klik.
11. Di akhir, tulisan posting letakan kode </span>

Contohnya :

Penerapan di posting :

Example : Postingan ini, bercerita tentang bagaimana kita sebagai orang yang peduli terhadap kebersihan lingkungan . ( di akhir kata ini, akan muncul Read More)
<span class="fullpost">
kerusakan lingkungan di akibatkan keser
akahan manusia. (Merupakan sambungan kata dari( Sambungan dari posting, dan menampilkan semuapostingannya.
</span>

Auto Hide Navbar Pada Blogger

2009-08-18T22:41:00.000-07:00

Aturan TOS dari blogger, bahwa membuang navbar pada blogger menyalahi aturan. Jadi bagaimana cara mengakali biar navbar blogger masih nongol. Caranya navbar di buat auto-hide seperti di taskbar Windows.
Jadi apabila seseorang menggerakan mouse ke tempat navbar seharusnya berada, maka navbar akan muncul di situ, dan jika mouse pengunjung menjauh dari posisi navbar berada, maka navbar akan menghilang.

Untuk membuat hal ini, berikut langkah-langkahnya :
Buka layout---> Klik Edit HTML---> cari kode berikut ini : </head>
Selanjutnya letakan kode di berikut dibawah </head>

#navbar-iframe {opacity: 0 . 0 ; filter : alpha (Opacity=0)}
#navbar-iframe: hover {opacity : 1 . 0; filter : alpha (Opacity=100, FinishedOpacity=100)}

Simpan dan “go” lihat hasilnya…

Meng-customize Ukuran Font pada Title Bar

2009-08-18T22:36:00.000-07:00

Blogger memang tidak menyediakan langsung cara mengedit ukuran font pada titlebar. Title bar adalah tulisan atau judul yang terdapat di setiap postingan/artikel. Pada artikel ini, kita mencoba membahas letak font pada titlebar dan bagaimana cara untuk merubah ukuranya yang sesuai dengan blog yang di buat.

Langkah pertama yaitu buka Layout Blogger anda---> Edit HTML---> Expand Tempelate Tempelates, kemudian cari kode ini:

#header h1 {
margin: 5px 5px 0;
padding : 15px 20px .25em;
line-height: 1 . 2em;
text-transform : uppercase;
letter-spacing: . 2em;
font : $pagetitlefont;
}

Kode di atas tersebut kemudian ditambahkan dengan kode ini font-size: 1px;
Jadi hasil bentuk susunanya akan seperti di bawah ini :

#header h1 {
margin: 5px 5px 0;
padding : 15px 20px .25em;
line-height: 1 . 2em;
text-transform : uppercase;
letter-spacing: . 2em;
font : $pagetitlefont;
font-size: 1px;
}

Memberi Warna Warni Pada Komentar

2009-08-18T22:28:00.000-07:00

“Memberi warna pada komentar”, komentar dari kebanyakan blog biasanya hanya terlihat berwarna tunggal, ya sebenarnya tidak masalah itu kan sesuai selera masing-masing. Bagi anda yang senang dengan warna-warni coba pada artikel kali ini kita sedikit menambah keindahan warna pada blog khususnya pada bagian komentar. Untuk melakukan hal ini, berikut langkah-langkahnya :

1.Masuk ke Layout blogger Anda
2.Backup terlebih dahulu tempelate “ Expand Tempelate Widget”
3.Setelah di backup, cari kode CSS tentang komentar.
Setiap blog, kode CSS ini berbeda, tetapi pasti diawali dengan /* Comments
4.Kemudian Blok semua kode yang bernaung di CSS comments itu dan ubah dengan kode ini :

/* Comments
--------------------------------------------------------------------------------------------------------- */
#comments {
margin : 0;
}
#comments h4 {
margin : 0 0 10px;
border-top: 1px dotted #99bb99;
padding-top: . 5em;
line-height: 1.4em;
font: bold 110% Georgia, Serif;
color: #333;
}

#comments-block {
line-height: 1.6em;
}

. comments-author {
background : #CCFFCC /*comment header background color (comment author name) */
url ("http://www.blogblog.com/dots/ikon_comment.gif') no-repeat
2px . 35em;
margin: . 5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}

.comment-body {
background: # 99FFFF; /* Reader comment background color*/
margin: 0;
padding: 7px 7px 7px 7px; /* Modified padding values */
}

.comments-body p {
margin : 0 0 .5em;
}

.comment-body-author {
background : # cccccc; /* The author comments background color. */
margin: 0;
padding: 7px 7px 7px 10px; /*Modified padding values*/
}

.comment-body-author p {
font-size: 105%;
margin: 0 0 .2em 0;
color : #6728B2; /* The author comments text color. */
text-decoration : bold;

.comment-footer {
background: # CCFFCC; /* Comment footer background color (comment permalink ) */
margin : 0 0 .5em;
padding : 0 0 .75em 20px;
color : #996;
}

.comment-footer a: link {
font-style: italic;
color: gray;
}

1.Jangan lupa di simpan "Save"

Akhirnya terciptalah blog dengan komentar yang berwarna -warni

Menambahkan gambar ke sidebar

2009-08-18T22:23:00.000-07:00

Untuk menampilkan gambar ke sidebar, langkah pertama seperti biasa gambar di upload ke google pages atau Yahoo Geocities. Setelah itu ambil alamat URL Image yang diupload.
Jika sudah, langkah berikutnya adalah :
1.Klik Layout pada Dashboard blogger
2.Klik Page Element yang dilanjutkandengan meng-klik Add a page Element di sidebar.
3.Kemudian pilih HTML/JavaScript dan coba masukan kode ini :

Tulisan yang berwarna merah diganti dengan alamat URL gambar yang sudah di upload sebelumnya.

1.Setelah selesai langsung Save, dan lihat hasilnya…

Menambahkan Gambar Beranimasi Pada Blog

2009-08-18T22:12:00.000-07:00

Gambar beranimasi (*.gif) adalah gambar yang bergerak, tidak seperti JPEG, PNG,ataupun BMP. Untuk menambahkan gambar beranimasi ini, harus menggunakan cara yang berbeda. Jika meng-upload gambar bmp/png/jpeg dalam blog, kita meng-upload langsung lewat blogger.
Tetapi tidak untuk gambar yang beranimasi,harus meng-upload ke pihak ke tiga terlebih dahulu.Misalnya saja upload ke google Pages (pihak ketiga) atau pages.google.com. Kalau upload gambar gif lewat tool bawaan blogger langsung, lihat hasilnya pasti gambar tidak akan bergerak selayaknya JPEG,BMP atau PNG.

Menambahkan gambar ke dalam artikel
Untuk menambahkan gambar ke dalam postingan, langkah yang harus di lakukan yaitu dengan meng-upload gambar tersebut ke dalam situs uploader penyedia hotlinking.

Seperti pages.google.com. Setelah gambar sudah selesai di Upload di situs penyedia hotlinking. Langkah berikutnya adalah masuk ke halaman blogger anda.

1.Pilih postingan mana yang akan ditambahkan gambar.
2.Kemudian klik Edit HTML, yang berada di postingan
3.Lalu tambahkan kode ini

Kode yang berwarna merah diganti dengan alamat image hotlinking yang sebelumnya kita sudah upload, misalnya di google.pages atau photobucket .

Membuat Teks Bergerak pada Title Bar Blog

2009-08-18T22:08:00.000-07:00

Pada umumnya teks yang terlihat pada title bar, seperti judul blog atau judul artikel, bersifat statis. Artinya hanya diam dan tidak begerak. Oleh karena itu, pada artikel ini kita akan membuat Title bar blog Anda lebih menarik dan memberi kesan yang beda, dimana Title bar Anda akan terlihat Teks bergerak atau berjalan. Untuk membuatnya berikut langkah-langkahnya :

1.Dari halaman Dashboard, pilih Layout kemudian klik Edit HTML
2.Kemudian di dalam kolom Edit Tempelate, Carilah kode berikut :

3.Setelah ketemu, langsung ganti aja kode tersebut dengan kode berikut :

Ket : angka 100 menunjukan kecepatan, dimana Anda dapat mengatur kecepatan bergeraknya teks. Semakin besar angka,maka semakin lambat kecepatanya.
4. Terakhir tekan tombol Save Tempelate. Kemudian lihat hasilnya. Nah terlihat kan pada halaman pertama blog Anda, judul blog pada Titlebar akan bergerak.

Menambahkan Image Melayang di Pojok Halaman Blog

2009-08-18T21:58:00.000-07:00

Menampilkan image melayang dalam halaman blog memang dapat menarik perhatian pengunjung, bahkan banyak yang bertanya-tanya,gimana yach..cara buatnya? Untuk meletakan image melayang diusahakan agar letaknya tidak mengganggu pengunjung blog Anda, biasanya letaknya di pojok halaman blog, berikut ini cara menempatkan image di pojok halaman:

1.Buka Tab Layout, pilihlah Edit HTML
2.Lalu dalam kotak Edit Tempelate, cari kode ]]></b:skin>. Kemudian sebelum kode tersebut letakan kode HTML berikut :

#trik_pojok{
position : fixed;_position: absolute;bottom: 0px;right: 0px;
clip: inherit;
_top: expression (document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left: expression (document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth);}

Teks “bottom” dan “right” akan menempatkan image di pojok kanan bawah. Anda dapat mengubahnya jikaingin menempatkan image di posisi lainya. Misalnya untuk menempatkan image di pojok kiri atas, ganti teks “bottom” dengan “top” dan “right” dengan “left”.

3.Setelah itu, temukan kode </body>,kemudian letakan kode berikut sebelum kode tesebut.

Ubahlah teks berwarna merah dengan link Anda (bisa berupa alamat blog) dan Anda bisa mengubah teks
yang berwarna biru dengan URL dari image yang ingin Anda pasang.

4.Jika sudah kemudian tekanlah "Save Template"

Widget ShoutBox

2009-08-18T21:44:00.000-07:00

ShoutBox adalah sebuah books yang memungkinkan komunikasi antara pemilik blog dengan pengunjung blog. Salah satu penyedia ShoutBox yang gratis adalah ShoutMix.
Untuk memasang ShoutBox sangat mudah, pertama yang paling penting adalah Anda terlebih dahulu mendaftar di ShoutMix sebagai penyedia ShoutBox berikut langkah-langkahnya :

1.Buka www.shoutmix.com
2.Klik Sign up untuk mendaftar pada layanan ShoutMix. Kemudian Anda disuruh untuk mengisi formulir pendaftaran, selanjutnya klik “Continue” untuk melanjutkan.
3.Kemudian pilih tampilan ShoutBox yang Anda inginkan, masukan huruf untuk verifikasi, kemudian klik “Continue” untuk melanjutkan.
4.Untuk mendapatkan kode ShoutBox, klik “Go to My Control panel”.
5.Pada boks “Quick Start” pilih “User ShoutBox, kemudian ada beberapa pilihan penggunaan ShoutBox,untuk meletakan pada blog Anda, pilih “Place ShoutBox onWebpage”

Voting Bersama Vizu

2009-08-18T21:38:00.000-07:00

Vizu adalah sebuah situs yang menyediakan widget voting yang dapat Anda gunakan pada blog secara gratis. Vizu menyediakan widget voting yang lebih bagus dan komplit, serta lebih Customizable. Voting ini, sebagai tool untuk memberikan pengunjung blog anda,agar bisa memilih atau memvoting suatu tema. Misalnya Menurut Anda, apakah artikel ini berguna untuk Anda? Pilih:
Sangat berguna sekali
Sangat berguna
Berguna
Cukup berguna
Kurang berguna
Tidak berguna

Jadi setiap pendapat dari voting tersebut, bagi pemilik blog dapat dijadikan acuan untuk meningkatkan isi atau konten dari blog.
Bila anda tertarik untuk menggunakn Widget tersebut silahkan mengunjungi www.vizu.com

Widgetbox Untuk Blogger Anda

2009-08-18T21:24:00.000-07:00

Ini nih tempat gudangnya Gadget/Widget, dari namanya saja sudah bisa ditebk. Widget box ini menyediakan berbagai jenis Widget yang mendukung Blogger, Wordpress, TypePad, dan MySpace.
Untuk memulainya, Anda harus terdaftar terlebih dahulu. Kemudian pilih-pilihlah Widget yang disenangi untuk dipasang pada blog Anda. Setelah itu pilihlah penampilan/ Display sesuai dengan keinginan dan klik "Get Widget".
Setelah itu paste kode yang diberikan WidgetBox ke dalam Blog. Letakan kode Anda di text box paling bawah. Atau Anda bisa meminta mereka yang melakukannya, dengan menekan Add to Blogger.

sekarang kunjungi situsnya di www.widgetbox.com

Widget Clustrmaps

2009-08-18T21:11:00.000-07:00

Statcounter memang bisa digunakan untuk men-track pengunjung situs, tetapi kita tidak tahu mereka datang dari mana, dan mayoritas dari mana. Oleh karena itu, kita butuh jasa Clustrmaps.

Clustrmaps menampilkan pengunjung dengan titik besar merah dan meletakan titik merah itu di sebuah wilayah yang menandakan bahwa dari sanalah pengunjung tersebut berasal. Untuk menggunakanya, Anda silahkan mengunjungi situs www.clustrmaps.com lalu daftarkan diri Anda sebagai pengguna widget maps gratisan ini.

Cara Menampilkan Widget Berita Untuk Blog Anda

2009-08-18T20:59:00.000-07:00

Beberapa Blog ingin menaruh beberapa widget pada sisi atau blog yang menampilkan beberapa berita segar di blog atau untuk menarik perhatian para pengunjung. Bila sekarang anda ingin memiliki jenis widget seprti ini, maka sekarang ini mulailah. Dengan adanya berita-berita pada blog Anda, pengunjung lebih menikmati saat berselancar pada blog Anda. Untuk mendapatkan widget tersebut silahkan masuk ke www.feedzilla.com
Freezilla adalah free widget untuk setiap orang dan Anda dapat memilih sumber maupun jenis berita yang ingin Anda pajang buat pengunjung.

Langkah-langkahnya :

1.CHOOSE THE TOPIC ON YOUR NEWS WIDGET
(Pilih Topik Berita)

2. CUSTOMIZE YOUR NEWS WIDGET
(Sesuaikan Berita)

Keterangan :

- Jumlah berita
- Menampilkan ringkasan?
- Gulir
- Lebar (px)
- Ketinggian

3. INSTALL YOUR NEWS WIDGET
(Instal Berita )

Setelah semua langkah di atas telah selesai, Anda akan mendapatkan kode yang akan diletakan pada blog Anda, sehingga akan menjadi sumber informasi berita yang terupdate.
Untuk meletakan pada blog Anda Buka Layout kemudian Buka Add Gadget kemudian pilih HTML/JavaScript.

AddThis (Social Bookmarking – RSS Feed)

2009-08-18T20:48:00.000-07:00

AddThis (Social Bookmarking – RSS Feed)

Pada tulisan kali ini, kita akan mencoba bermain widget dari luar widget blogger. Pada posting yang sebelumnya, Saya pernah menulis sedikit uraian tentang widget yang disediakan blogger secara gratisan. Namun penyedia layanan widget lainya juga tidak kalah menarik. Jadi pada artikel ini, kita akan menggunakan widget lewat HTML/JavaScript.

Social Bookmarking

AddThis merupakan salah satu penyedia jasa social Bookmarking yang terkenal di internet. Layanan yang disediakan AddThis sangat menarik dan juga pastinya gratis.
AddThis selain sebagai Social Bookmarking juga sebagai jalan melakukan SubScribe dari situs Anda. Contohnya apabila ada seorang pengunjung yang menyukai situs Anda, mereka tidak hanya mem-bookmark situs Anda, tetapi mereka juga dapat berlangganan apa saja yang berada dalam situs blog Anda. Jadi jika Anda memposting artikel baru, akan langsung terkirim secara otomatis ke alamat email seseorang yang melakukan SubScribe, disinilah fungsi SubScribe. Untuk itulah AddThis menydiakan SubScriber yang siap digunakan.
Bagi Anda yang merasa tertarik dengan AddThis untuk mendapatkan Widgetdari situs tersebut, Anda harus mengunjungi dan melakukan registrasi atau pendaftaran di http://www.AddThis.com.
Dengan AddThis selain mendapatkan Widget AddThis Social Bookmark, Anda juga dapat membuat Widget AddThis RSS Feed, yaitu dengan cara mengisi alamat Feed URL, dan isilah dengan nama blog Anda yang di akhiri /RSS.xml atau /atom.xml .contohnya : http://blogkomplet.blogspot.com/atom.xml. setelah itu Anda tinggal meletakan kodenya dalam blog.
Untuk meletakan di dalam blog Anda, masuk pada Layout, kemudian klik Page Elements ---> Add Page Element---> HTML/JavaScript, kemudian letakan kode yang diberikan AddThis pada kolom HTML/JavaScript. Gampang khan?

Bagaimana caranya untuk meletakan di setiap akhir postingan ?
Caranya yaitu, masuk pada Layout--->Edit HTML, setelah itu klik Expand Widget Tempelates kemudian cari kode seperti dibawah ini :

Bila sudah ketemu letakan kode AddThis dibawah kode

Setelah selesai cobalah preview blog Anda maka AddThis akan muncul pada setiap akhir postingan Anda.

Menambahkan Iklan Adsense di Awal dan Akhir blogger Posting

2009-08-15T00:53:00.000-07:00

Pada posting ini,kita akan membahas sedikit cara mudah untuk menambahkan atau menempatkan kode iklan Adsense
di akhir atau di awal posting Anda.ini salah satu Cara yang bisa di gunakan untuk dapat meningkatan "klik" iklan Adsense pada blog Anda
Untuk meletakan unit kode iklan dari Adsense yang pertama Anda harus mengambil kode tersebut di Account Adsense, di pastikan Anda telah terdaftar
Setelah Anda mendapatkan kode tersebut dan ingin menempatkan pada blog Anda,berikut langkah-langkahnya :

1. Buka tab Layout pada Blogger Anda---> Page Element
2. Klik Edit HTML
3. Jangan lupa centang Expand Widgets tempelates
4. Kemudian cari kode berikut ini :

<data:post.body/>

5. Bila sudah ketemu, Kemudian letakan kode Adsense sebelum dan sesudah kode di atas

Example :

<>

<data:post.body/>

<>

6. Terakhir Preview hasilnya, bila cocok langsung tekan tombol Save

Catatan : Tidak disarankan untuk menggunakan cara ini, biasanya Adsense tidak menyukai dengan cara-cara seperti ini, jadi berhati-hatilah.

"Terima kasih atas kunjunganya"

Menambahkan Gambar Sebelum / Setelah Judul Posting

2009-08-13T01:08:00.000-07:00

Bagaimana cara menambahkan gambar sebelum judul posting maupun setelah judul posting blogger seperti yang telah banyak penulis blog buat. Anda dapat meletakan foto Anda atau icon-icon gambar lainya. Untuk membuat tutorail ini berikut langkah-langkahnya :

>Gambar di ambil dari "anshuldudeja"

1. Buka Blogger Layout Anda
2. Klik Edit HTML
3. Kemudian klik Expand Tempelates widget
4. Setelah itu, cari kode berikut pada tempelate Anda

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

5. Sekarang Anda harus menambahkan baris berikut di antara kode di atas.

Kode yang berwarna Orange di atas adalah kode URL Gambar Anda

Merah part of code, gambar akan DI ATAS
Hajau part of code, gambar akan di sebelah KIRI
Biru part of code, gambar akan di sebelah KANAN
Orange part of code, gambar akan DI BAWAH

"Terima kasih atas kunjunganya"

Cara Merubah Posisi Letak Blogger Widget

2009-08-13T00:38:00.000-07:00

Dalam artikel ini, Saya akan menjelaskan bagaimana cara untuk mengatur Widget pada blog Anda berada di posisi kanan, kiri atau pusat "center". Untuk melakukan hal ini, Anda hanya menulis kode sederhana dan menambahkan kode tersebut yang akan di sertakan dalam HTML/JavaScript.

Bagi Anda yang tertarik untuk tutorial ini, berikut langkah-langkahnya :

sebelum Anda menambahkan suatu widget kedalam blog, pertama Anda menambah Add Gadget dalam Tata letak "Layout", Setelah Jendela baru terbuka Klik HTML/JavaScript. Pada kotak tentunya Anda meletakan kode HTML/JavaScript yang berasal dari penyedia widget tersebut.

Kemudian kode tersebut di letakan di anatara kode berikut ini :

Contohnya :

For align to center

<div align="center">
Kode Widget Anda
</div>

For align to left

<div align="left">
kode widget Anda
</div>

For align to center

<div align="right">
Kode Widget Anda
</div>

"center" : posisi tengah
"left" : posisi kiri
"right" : posisi kanan

Kode yang berwarna merah adalah kode dari widget Anda
Kemudian di simpan dan lihat hasilnya...

"Terima kasih atas kunjunganya"

Buat Read More Plus Judul Posting

2009-08-10T21:51:00.000-07:00

Bagi anda yang sudah memiliki "Read More" pada tulisan postinganya, boleh dong sedikit di modifikasi ala "bengkel blogger"? ,. Jadi setiap kali anda menulis tulisan atau artikel untuk mempersingkat biasanya menggunakan "Read More" atau "Baca Selanjutnya" Nah pada artikel kali ini, gimana menambahakan Read More atau Baca selanjutnya yang di tambhakan Judul Postinganya di sebelahnya.

Contohnya :

(Read More "Menambahkan Permalink Dalam Blogger Post">>)

Untuk menerapkan pada blog anda berikut caranya:

1. Pada Blogger Pilih Tata Letak atau Layout
2. Kemudian Edit HTML
3. Expand Tempelate Widget
4. Cari kode seperti ini

Biasanya bagian bawahnya terdapat kode ini

Posisinya seperti di bawah ini :

5. Bila sudah ketemu, ganti kode

dengan kode seperti di bawah ini :

;<a
expr:href='data:post.url'>Read More

“<data:post.title/>”
 »» </a>

6. Save dan coba lihat hasilnya...

"Terima kasih atas kunjunganya"

Menambahkan Sosial Bookmark Ikon

2009-08-08T11:47:00.000-07:00

Untuk menambahkan sosial bookmark ikon , yaitu hanya dengan cara menambahkan beberapa HTML dan CSS ke blog Blogger Anda. Penampilan sosial bookmark ikon ini sangat menarik perhatian pengunjung. Bagi Anda yang tertarik dengan ini silahkan langsung melihat bentuk contohnya seperti di bawah ini

Bagaimana cara untuk menempatkan pada blog Anda, berikut langkah-langkahnya:

1. Masuk pada blogger Dashboard
2. Buka Layout
3. Klik Edit HTML
4. Cari kode "]]></b:skin>"
5. Kemudian letakan kode berikut sebelum kode "]]></b:skin>"

div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left top;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right top;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://i32.tinypic.com/21ndq48.jpg') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}

6. Kemudian Centang Expand Widget Templates dan cari kode <data:post.body/>
7. Letakan kode berikut ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<br/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'/></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg'/></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Technorati'/></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'/></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'/></li>

<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Designfloat'/></li>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Facebook'/></li>

<li class='sexy-twitter'><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://bigtweet.com/ext/bigt/bigt.js');document.body.appendChild(e)})())" /></li></li>

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Furl'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/webupd8' rel='nofollow' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Email this'/></li>

</ul>
<span class='sexy-rightside'/></div>
</b:if>

- Sosial bookmark Ikon ini hanya muncul di halaman posting, dan tidak akan terlihat di halaman utama.

8. Jangan lupa Save dan lihat hasilnya...

Membuat Halaman Peel Efek Tambahkan Untuk Blogger

2009-08-08T10:45:00.000-07:00

Thanks to Sohtanaka atas peel efeknya.Menambahkan peel efek pada blogger, suatu cara yang hebat untuk menarik pengunjung. Ini telah di perkenalkan oleh Sohtanaka. Cara Menggunakan Cukup copy semua kode pada halaman ini ke clipboard blog Anda. Bila Anda tertarik untuk menggunakanya

Langkahnya :

1. Buka Layout Blogger
2. Klik Edit HTML---->Press Ctrl + F
3. Kemudian cari kode berikut ini

</head>

Setelah ketemu, letakan kode berikut di bawah </head>

- Kode pada baris yang berwarna merah adalah kode URL gambar.

4. Kemudian cari kode <body>
5. Setelah ketemu, letakan kode dibawah ini setelah kode <body>

terakhir jangan lupa Save

Menambahkan Permalink dalam Blogger Post

2009-08-08T10:23:00.000-07:00

Permalink adalah link yang menghubungkan langsung dengan halaman yang bersangkutan.Dengan adanya permalink ini pengunjung tidak perlu menuju toolbar, pergi saja ke link Permalink-nya dan copy alamatnya.Untuk menambahkan di blogger Anda berikut langkah-langkahnya

Langkahnya:

1. Buka Layout
2. Klik Edit HTML
3. Centang Expand Widget Templates
4. Cari kode di bawah ini

<data:top.timestampLabel/>
<b:if cond='data:post.url'>
</b:if>
<b:if>

Bila sudah ketemu letakan kode berikut ini di antara kode di atas, jadi akan seperti kode di bawah ini:

<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url'
title='permanent link'><data:post.timestamp/> permalink</a>
</b:if>
<b:if>

4. Kemudian jangan lupa Save, dan lihat hasilnya

Horizontal Navigation Menu Untuk Blogger

2009-08-08T09:35:00.000-07:00

Untuk mengatur dan menciptakan penampilan blog lebih hack blogger, Anda bisa membuat sebuah "Horizontal tab navigasi" pada bagian header blog .Dengan tab navigasi ini anda bisa meletakkan menu-menu yang mengarah kehalaman lain pada blog anda dan memudahkan para pembaca membuka halaman lain tersebut.

Untuk membuatnya berikut langkah-langkahnya :

1. Buka Layout Blogger, kemudian Edit HTML
2. Tekan tombol Expand Widget Tempelate
3. Cari kode seperti ini </b:skin>
Bila sudah ketemu, letakan kode di bawah ini sebelum </b:skin>

/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

4. Kemudian cari kode berikut ini

Bila sudah ketemu, letakan kode berikut ini, di bawah kode di atas

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='/'>home</a></li>
<li><a href='http://blogkomplet.blogspot.com/search/label/AKSESORIS%20BLOGGER'>Aksesoris</a></li>
<li><a href='http://blogkomplet.blogspot.com/search/label/BLOGGER%20HACK'>Hacks</a></li>
<li><a href='http://blogkomplet.blogspot.com/search/label/MENUS%20FOR%20BLOGGER'> Menus</a></li>
<li><a href='http://blogkomplet.blogspot.com/search/label/TIPS%20BLOGGER'>Tips</a></li>
<li><a href='http://blogkomplet.blogspot.com/search/label/TUTORIAL%20BLOGGER'>Tutorial</a></li>
</ul>
</div>
</div>
</div>

- Untuk Link yang berwarna Hijau, ganti dengan Link dari blog Anda
- Anda bisa mengganti Bacground warna menu navigasi sesuai dengan tempelate blog Anda.

Kemudian Save dan lihat hasilnya..

Horizontal Multi Level Sub Menu Drop Down

2009-08-08T09:01:00.000-07:00

Apa sebenarnya yang di maksud dengan "Horizontal Multi Level Menu Drop Down", ini adalah salah satu bentuk Menu yang terdiri dari Sub-sub menu yang lebih keseluruhan untuk menjangkau pada bagian-bagian sub dari menu utamanya. Dari pada pusing-pusing njelasinya Anda cukup meng-Klik DISINI untuk melihat contohnya.

Bila Anda tertarik untuk melengkapi pada blog Anda berikut langkah-langkahnya :

Buka Layout pada Dashbord, Kemudian Klik Edit HTML dan kemudian cari kode seperti berikut ini </b:skin>.

Bila sudah ketemu, letakan kode di bawah ini sebelum kode </b:skin>

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Kalau sudah selesai, kemudian cari lagi kode seperti ini </head>
Kemudian letakan kode di bawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>

Selanjutnya cari dan temukan kode seperti di bawah ini

Bila sudah ketemu, letakan kode di bawah ini setelah kode di atas

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://www.anshuldudeja.com'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://anshuldudeja.blogspot.com'>Blogger Widgets</a></li>
</ul>
<br style='clear: left'/>
</div>

Jangan lupan Save Tempelate, dan lihat hasilnya.

Menambahkan Option Print This dalam Blog

2009-08-08T08:37:00.000-07:00

Bagaimana pengunjung blog bisa mencetak langsung Blog Anda, pada artikel ini merupakan salah satu contoh hack. Yaitu menambahkan Option Print This Blog. Bagi yang mempunyai blog dengan artikel-artikel yang menarik, Anda boleh mencobanya untuk membagikan artikel atau postingan Anda di nikmati oleh pengunjung.

Langkah-langkahnya adalah :

1. Masuk pada Tab Layout
2. Klik Edit HTML
Disarankan untuk mem-backup tempelate blog, karena anda akan merubah sedikit bagian dari tempelate.
3. Cari kode <head>, kemudian letakan kode di bawah ini di bawah tag <head>, sembarang mau di letakan di mana, pokoknya di antara tag <head> dan penutup </head>.

Jika sudah, jangan lupa menekan tombol Save Tempelate. Lalu tambahkan kode ini di setiap akhir Post/artikel Anda :

Cetak Halaman Ini

Jika kita menginginkan link Cetak Halaman Ini muncul di setiap posting, maka anda harus menyisipkan ini secara otomatis setiap membuat sebuah artikel.

Caranya :

Masuk Setting-->Formating, dan tambahkan kode di atas.

Google Gadgets For Your Blogger

2009-08-07T13:00:00.000-07:00

Banyak Gadgets yang telah di sediakan oleh google secara gratis yang bisa di terapkan pada blog Anda. Google merupakan Serach Engine No.1 di dunia, yang kemudian mendirikan Blogger.com yang booming saat ini bagi pengguna blog "weblog". Blogger di kenal "open source"

Banyak gadgets yang bisa di gunakan secara gartis untuk membantu mempermudah pengelolaan blog dan mempercantik blog. Pada artikel kali ini, untuk memperkenalkan apa saja Gadgets yang di sediakan google untuk blogger Anda. Untuk itu segeralah menuju ke alamat ini Google Gadgets For Your Webpage

Memasang Widget Translator

2009-08-07T12:45:00.000-07:00

Aksesoris Translator ini sangat berguna terutama apabila ada pengunjung yang berasal dari negara lain. Bila blog Anda berbahasa Indonesia, Anda dapat menggunakan translator sehingga pengunjung dari luar Indonesia dapat mengunjungi dan membaca artikel yang di tulis pada Blog Anda. Diusahakan blog Anda di isi dengan basic bahasa Indonesia yang baik dan benar.

Untuk membuat Translator berikut langkahnya :

1. Buka Tab Layout
2. Klik Add Gadget
3. Kemudian pilih HTML/JavaScript
4. Setelah itu masukan kode di bawah ini

5. Terakhir di Save Tempelate dan lihat hasilnya

Membuat Recent Post (Postingan Terbaru)

2009-08-07T12:25:00.000-07:00

Menampilkan postingan terbaru pada blog, merupakan kemudahan bagi pengunjung setia blog Anda yang selalu berkunjung untuk melihat postingan baru yang di tampilkan pada sidebar blog. Dengan adanya tutorial ini di usahakan blog Anda memiliki posting-posting yang selalu update.

Untuk memulai membuat resent post, buka account blogger Anda, kemudian ikuti langkah-langkahnya berikut ini :

1. Buka Tab Layout, kemudian Klik Page Element
2. Tekan Tombol Add Gadget
3. Pilih HTML/JavaScript
4. Kemudian letakan kode berikut ini, di dalam content HTML/JavaScript

Ket : ganti nama blog dengan nama blog Anda dan angka 5, isilah dengan jumlah posting terbaru yang sesuai keinginan Anda.

Kemudian di simpan "Save"

Menghapus Jumlah Posting Arsip Blogger

2009-08-07T11:13:00.000-07:00

Ini merupakan tutorial sederhana tentang cara untuk menghapus jumlah posting yang ditampilkan di arsip blogger. Di beberapa blog biasanya bentuk ini sering di gunakan sehingga bentuk arsip akan lebih rata dan menarik di bandingkan yang menggunakan.Untuk mengikuti tutorial ini, Anda di pastikan memiliki Arsip Blogger di Sidebar. Bagi yang tertarik silahkan mengikuti langkah-langkahnya

langkahnya :

1. Login ke Blogger.com
2. Klik edit HTML
3. Expand Widgets--->Press Ctrl-F

(<data:i.post-count/>)

4. Bila sudah ketemu silahkan di hapus kode tersebut, kemudian Save Template

Hasilnya akan seperti di bawah ini :

Older Post dan Newer Post di Atas Judul Post

2009-08-07T10:35:00.000-07:00

Bagaimana Cara meletakan Older Posts Newer Posts dan Link Diatas Judul Posting. biasanya older post atau newer post terletak di bagian bawah halaman posting. Biar sedikit tampil beda Anda perlu mencobanya di letakan pada bagian atas judul posting. Karena masih jarang yang menggunakanya pada blog, mungkin Anda akan lebih menyukainya silahkan ikuti langkah-langkhanya

Langkahnya :

1. Buka Tab Layout
2. Klik Edit HTML
3. Tekan tombol Expand Widgets Tempelate
4. Cari kode ini :

<b:includable id='main' var='top'>

Selanjutnya sisipkan kode berikut di bawahnya :

<b:include name='nextprev'/>

Kemudian di Save dan lihat hasilya.

Cara Publish Posting Via E-mail

2009-08-07T10:06:00.000-07:00

Fitur di dalam blogger memungkinkan anda untuk mempublikasikan posting atau tulisan melalui email. Untuk fitur ini Anda harus melakukan perubahan pada pengaturan pada blog Anda.

langkahnya :

1. Buka Tab Pengaturan (setting)
2. Pilih pengaturan Email, kemudian pilih sebuah kata yang nantinya akan menjadi alamat email blogger kita. Kata yang kita pilih tersebut bersifat rahasia (secret Word) karena itu tidak boleh orang lain tau selain kita sendiri.

Format alamat email blogger tersebut adalah: [nama account blogger].[secretword]@blogger.com
3. Pilih Publish Emails Immediately
4. Untuk mengirim postingan lewat email, buka email kita. Isikan alamat email dengan alamat email blogger kita yang mengandung secret word tadi. Isi subyek email yang nantinya menjadi judul postingan. Kemudian tulis artikel yang mau dijadikan postingan. Kemudian kirim

Go to top of Page

2009-08-02T05:53:00.000-07:00

Bagi Anda yang memiliki posting yang banyak dalam satu halaman, sampai memanjang ke bawah, jelas sangat memusingkan pengunjung Anda. Oleh sebab itu saya sarankan untuk menggunakan Read More atau Baca Selanjutnya, yang pernah saya tulis pada blog ini. Tapi apabila dalam satu halaman posting bagi pengunjung ingin kembali pada bagian atas "top" pada halaman tersebut Anda dapat menggunakan salah satu cara sebagai berikut:

langkahnya :

1. Buka Tab Layout Blogger Anda
2. Klik Add Gadget, "Add Gadget" pada bagian di atas "Foother" di bawah Gadget posting.
3. Setelah itu muncul pada jendela baru HTML/JavaScript
4. Letakan kode di bawah ini pada kolom HTML/JavaScript

<script>

</script>


<font face="Tahoma"><a target="_blank" href="http://www.javascriptfreecode.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>

5. Setelah selesai, Kemudian di Save----> lihat hasilnya.

Kalender Pada Blog Blogger

2009-08-02T05:35:00.000-07:00

Kalender merupakan salah satu widget yang mungkin Anda dapat meletakan pada Blog Anda, hanya dengan mengkopi kode yang sudah disediakan, maka kalender menarik sudah terpampang untuk pengunjung Blog Anda. Salah satu yang saya gunakan by javakhafan Bagi Anda yang tertarik untuk meletakan Kalender segera ikut.

Langkahnya :

1. Buka Tab Layout Blogger
2. Klik Add Widget
3. Letakan kode di bawah ini dalam kotak HTML/JavaScript

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body>

<center>
<script LANGUAGE="JavaScript">


</script>
</center>


</body>

</html>



<font face="Tahoma"><a target="_blank" href="http://www.javascriptfreecode.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>

4. Jangan lupa SAVE, dan lihat hasilnya.

Menyembunyikan Layout Navbar Blogger

2009-08-01T00:38:00.000-07:00

Sembunyikan Navbar Blogger Layout Dari blog Anda yang terletak di bagian atas blog yang akan ditampilkan. Biasanya keberadaan Navbar agak sedikit mengganggu pengunjung blog Anda dan Bagaimana cara Sehingga anda dapat menyembunyikan dari blog. Anda hanya perlu menambahkan sedikit kode css. Bila tertarik berikut langkah sederhananya:

Untuk menyembunyikan Blogger Navbar:

1. Login Account Blogger
2. Masuk ke Dashboard---> Klik Layout
3. Tekan tombol Edit HTML
4. Cari kode berikut ini pada kotak Edit HTML : body {
5. Paste kode di bawah ini, dan letakan setelah kode : body {

# navbar-iframe (
height: 0px;
visibility: hidden;
display: none;
)

atau gunakan

div.navbar (
keburaman: 0,0;
display: none;

"terima kasih atas kunjungannya"

CSS Dock Menu

2009-07-30T01:46:00.000-07:00

Apakah Anda pernah membuat CSS Dokumen Menu? Bila belum mari Anda saya ajak untuk menerapkan CSS Dock Menu ke Blog Anda. Css Dock Menu menggunakan Jquery Javascript library dan komponen Fisheye Interface dan beberapa ikon. "Klik di sini" untuk melihat demonya. CSS dok menu ini adalah untuk menambah perfeck pada Blog. Di sini saya akan menunjukkan bagaimana untuk menerapkannya ke halaman web/Blog Anda. Dock menu layaknya di komputer MAC akan menampilkan efek icon, kita akan melihat perubahan size icon ketika mouse diarahkan ke bidang menu tersebut.

Bila Anda tertarik untuk meletakan pada web/blog Anda berikut langkah-langkahnya :

1. Download terlebih dahulu FILE nya
Download the CSS dock menu zip package
2. Kemudian File nya di unzip terlebih dahulu
3. Dalam folder JS ada 2 file javacript (interface.js dan jquery.js) dan pada folder images anda akan menemukan file gambar, silahkan upload semua file tersebut ke host directory masing-masing (Anda bisa menyimpan filenya di Pages.google.com), kalo sudah silahkan buka kembali folder css-dock-menu, ulangi lagi seperti langkah sebelumnya yaitu dengan upload file iepngfix.htc dan style.css

4. Setelah proses Upload sudah selesai, kemudian lanjutkan untuk memasangnya di Blog Anda.

Cara pasang di blogger.com:

1. Masuk ke Layout----> Edit HTML
2. Cari kode <head>
3. Kemudian letakan kode di bawah ini, tepat dibawah kode <head>

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

Untuk warna Hijau diatas silahkan sesuaikan dengan path directory masing-masing.

4. Selanjutnya masih pada halaman Edit HTML, cari kode </body>
5. Setelah ketemu letakan kode di bawah ini,tepat di atas kode </body>

<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>

Terakhir tinggal pada proses pemasangan menu. Dock menu ini bisa anda letakan diarea mana saja, bisa di elemen halaman blogger maupun di halaman Edit Html. Untuk mudahnya Aplikasi penerapan sebagai contoh di bawah ini :

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

catatan : warna MERAH merupakan Link tujuan, sedangkan yang berwarna HIJAU silahkan sesuaikan dengan path directory masing-masing.

Banyak hal-hal yang berbau progammer yang sulit di pahami, kecuali bagi yang ahli di bidang proggamer mungkin mudah saja, bagi yang belum mengerti (termasuk saya "newbie") teruslah belajar dan mencoba.

Menghilangkan Angka Pada Label (Kategori)

2009-07-29T21:59:00.000-07:00

Label atau kategori pada standart blogger biasanya menampikan jumlah dari banyaknya posting dalam satu kategori. Bila Anda tidak menginginkan angka tersebut nongol disitu,berikut contoh dan cara menghilangkanya.

Langkah-langkahnya :

1. Klik Layout, kemudian tekan tombol Edit HTML
2. Jangan lupa beri tanda centang pada "Expand Template Widget"
3. Kemudian cari kode seperti dibawah ini
(<data :label.count/>)
4. Bila sudah ketemu kode tersebut, untuk tidak menampilkanya, hapus semua kodenya.
5. Kemudian JANGAN LUPA SAVE------Lihat Hasilnya.

Menampilkan Artikel yang Berhubungan (Related Post) di Blogger

2009-07-29T21:31:00.000-07:00

"Related Post" berfungsi untuk memudahkan pengunjung blog Anda untuk mencari informasi lain, yang masih berhubungan dengan artikel yang mereka baca. Related Post ini berdasarkan kategori atau label yang sama dalam satu blog.

Untuk membuat Related Post pertama login ke blogger.com setelah login

1. Klik Layout ----> Edit HTML
2. Beri tanda centang pada kotak "Expand Widgets Template"
3. Kemudian Anda Mendownload Klik "SCRIPT INI"
4. Buka file tersebut kemudian copy semua script yang ada didalamnya.
5. Setelah itu Anda cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Untuk blog yang ada "readmore"nya biasanya akan terdapat 2 kode. Anda meletakan dibawah kode yang pertama.

Bila sudah selesai jangan lupa SAVE---> lihat hasilnya.

Page Navigasi Untuk Blogger

2009-07-29T21:11:00.000-07:00

Page Navigasi terletak pada bagian foother blog anda. Page Navigasi berfungsi untuk mengefisiensikan penggunaan halaman pada blog Anda. Untuk membuat dan meletakan pada blog Anda, berikut langkah-langkahnya :

1. Pada Blogger Anda Klik Layout-----> Edit HTML
2. Kemudian Cari ]]></b:skin>
3. Letakan kode di bawah ini, di atas ]]></b:skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

4. Langkah berikutnya Cari Kode ini :

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

5. Bila udah ketemu, letakan kodeberikut di bawah </b:section>

6. Untuk Mengganti seberapa banyak angka/page yang muncul, yaitu dengan mengganti
1 : var pageCount = 5; angka 5 sesuai dengan keinginan anda.

Membuat Blog di Blogger.com

2009-07-29T00:56:00.001-07:00

Blog, singkatan dari kata Weblog, merupakan sebuah halaman di web yang awalnya digunakan untuk menyimpan Links atau hal-hal lain yang ditemukan di dunia web. Blogger sendiri tentunya berarti pengguna blog yang melakukan aktifitas, membuat, dan menulis blog secara rutin. Dari sebuah blog yang Anda miliki banyak aktufitas yang Anda lakukan. Untuk saat ini, Anda mulai dengan BLOGGER.COM.

Berikut langkah-langkah untuk membuat akun di Blogger.com :

1. Masuk ke Blogger.com
Dengan mengetikan URL http://www.blogger.com pada browser. Akan muncul halaman depan dari blogger.com dalam bahasa Indonesia. Jika ingin mengganti bahasanya, cukup pilih bahasa di bagian kanan atas.

KLIK TOMBOL 'Ciptakan Blog Anda' untuk memulai

Tip : Jika sudah punya akun Google seperti Gmail, bisa langsung masuk dengan mengetikan Nama Pengguna dan Kata Sandi.

2. Ciptakan Akun Goggle
Isi formulir untuk membuat akun Goggle yang baru. kamu harus sudah memiliki e-mail terlebih dahulu. Jika sudah lengkap diisi, klik " Lanjutkan" untuk meneruskan proses pembuatan blog.

3. Pilih Nama Blog
Pilih judul dan nama blog yang akan kita gunakan. Jika sudah lengkap diisi, klik " Lanjutkan" untuk meneruskan proses pembuatan blog. Pilih nama yang sesuai dengan Isi blog Anda.

4. Pilih Tempelate
Pilih tempelate yang sudah disediakan oleh Blogger.com sebagai tampilan blog kamu. Silahkan pilih sesuai dengan yang Anda inginkan. Check pada tempelate yang diinginkan kemudian klik " Lanjutkan" untuk melanjutkan proses pembuatan blog.

5. Mulai Nge-blog
Jika proses berhasil maka akan muncul ucapan selamat datang. Klik " Mulai Blogging" untuk menulis blog post pertamamu.