Belajar Desain Blog

Thumbnail Buat Recent Post Blogspot

2010-03-11T16:56:00.000+07:00

Thumbnail Blogspot - Gambar atau foto dapat memberikan sejuta arti bila dibandingkan dengan tulisan, oleh karena itu pada umumnya orang lebih tertarik untuk melihat foto dibanding melihat tulisan, salah satu cara menarik visitor atau pengunjung blog adalah dengan menggunakan gambar untuk posting blog (namun perlu diingat semakin banyak gambar akan semakin menambah kerja blog saat loading). Jika kamu termasuk salah satu yang menyukai membuat post dengan gambar dibawah ini ada script javascript untuk membuat recent post dengan thumbnail atau gambar kecil untuk blog.

Cara membuat recent post dengan thumbnail adalah seperti dibawah ini :
A1. Pertama login ke blog kamu www.blogger.com
A2. Setelah login pilih layout.
A3. Kemudian tambah widget dan pilih HTML.
A4. Copy kode script javascript dibawah ini ke dalam widget HTML.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOGKAMU.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

A5. Simpan dimana kamu suka

Kostumisasi nya dapat dilakukan sendiri seperti merubah warna (summaryColor), jumlah post (numpost), ukuran font (summaryFontsize), mau tebal apa ga (aBold), ukuran besar box (boxwidth), apakah mau menampilkan gambar acak apa tidak (showRandomImg), ukuran thumbnail (thumbWidth dan Height), semua bisa diatur sesuai selera, semoga membantu. :-D

Cara Membuat Judul Blogspot SEO Friendly, Katanya Sich?

2010-02-20T12:35:00.001+07:00

Cara Membuat Judul Blogspot SEO Friendly bagaimana? katanya sich judul postingan harus permalinks seperti di Wordpress. Permalink? benda apaan lagi tuch.. :-D klo ini saya juga kurang tau, tapi katanya (kebanyakan katanya nich, harap maklum yach..baru belajar) kalau gak salah sich singkatan dari permanent links, yang berfungsi mengkaitkan link secara permanent (bingung yach muter mutar, sama klo gitu saya juga bingung.. :-D).

Cara Membuat Judul Blogspot SEO Friendly, katanya sich seperti ini :
Pertama, Login ke Blogger dengan username dan pasword blog kamoe.
Kedua, Setelah masuk klik tab Tata Letak (Layout) kemudian klik tab Edit HTML.
Ketiga, cari kode berikut ini :

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

setelah ketemu ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

atau Membuat Judul Blogspot SEO Friendly bisa juga dengan menggantinya dengan kode berikut ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.Title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

atau Membuat Judul Blogspot SEO Friendly bisa juga dengan menggantinya dengan kode berikut ini, terserah suka-suka kamu dech :-D :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Membuat Judul Blogspot SEO Friendly nah itu katanya yach, klo berguna syukur klo ga berguna guna-gunain dech, hehehehe... Happy Blogging.

Tulisan Karakter Script Blog KODE HTML Special

2010-02-04T22:48:00.003+07:00

Bagaimanakah membuat tulisan dengan karakter khusus atau spesial dalam kode script x/HTML untuk blog atau web yang dimiliki? Cara penulisannya cukup mudah, tidak seperti kontes seo astaga.com lifestyle on the net yang super susah, asal... kita tahu kode HTML karakter special tersebut, hehehe...
Untuk lebih jelasnya tentang kode script HTML silahkan lihat tabel kode script HTML spesial dibawah ini.

Karakter Script Blog KODE HTML Khusus dan Special

Untuk menampilkan secara benar karakter seperti " & ¡, dibutuhkan penggunaan ISO-Latin-1 (juga sering disebut ISO8859-1) Character Codes. The "Latin" part refers to its origins in the Roman alphabet, and the "1" refers to the version number.

Character Entities adalah string abjad seperti &ABC;.
Numeric Entities adalah string angka seperti {.

Entity Name	Numeric Entity	Character Entity	Character
quotation mark	"	"	"
ampersand	&	&	&
less-than sign	<	<	<
greater-than sign	>	>	>
non-breaking space
inverted exclamation	¡	¡	¡
cent sign	¢	¢	¢
pound sterling	£	£	£
general currency sign	¤	¤	¤
yen sign	¥	¥	¥
broken vertical bar	¦	¦	¦
section sign	§	§	§
umlaut(dieresis)	¨	¨	¨
copyright	©	©	©
feminineordinal	ª	ª	ª
left angle quote, guillemotleft	«	«	«
not sign	¬	¬	¬
soft hyphen
registered trademark	®	®	®
macron accent	¯	¯	¯
degree sign	°	°	°
plus or minus	±	±	±
superscript two	²	²	²
superscript three	³	³	³
acute accent	´	´	´
micro sign (mu)	µ	µ	µ
paragraph sign	¶	¶	¶
middle dot	·	·	·
cedilla	¸	¸	¸
superscript one	¹	¹	¹
masculine ordinal	º	º	º
right angle quote, guillemotright	»	»	»
fraction one-fourth	¼	¼	¼
fraction one-half	½	½	½
fraction three-fourths	¾	¾	¾
inverted question mark	¿	¿	¿
capital a, grave accent	À	à	à
capital a, acute accent	Á	á	á
capital a, circumflex accent	Â	â	â
capital a, tilde	Ã	ã	ã
capital a, dieresis or umlaut mark	Ä	ä	ä
capital a, ring (angstrom)	Å	å	å
capital ae diphthong (ligature)	Æ	æ	æ
capital c, cedilla	Ç	ç	ç
capital e, grave accent	È	è	è
capital e, acute accent	É	é	é
capital e, circumflex accent	Ê	ê	ê
capital e, dieresis or umlaut mark	Ë	ë	ë
capital i, grave accent	Ì	ì	ì
capital i, acute accent	Í	í	í
capital i, circumflex accent	Î	î	î
capital i, dieresis or umlaut mark	Ï	ï	ï
capital eth, icelandic	Ð	ð	ð
capital n, tilde	Ñ	ñ	ñ
capital o, grave accent	Ò	ò	ò
capital o, acute accent	Ó	ó	ó
capital o, circumflex accent	Ô	ô	ô
capital o, tilde	Õ	õ	õ
capital o, dieresis or umlaut mark	Ö	ö	ö
multiply sign	×	×	×
capital o, slash	Ø	ø	ø
capital u, grave accent	Ù	ù	ù
capital u, acute accent	Ú	ú	ú
capital u, circumflex accent	Û	û	û
capital u, dieresis or umlaut mark	Ü	ü	ü
capital y, acute accent	Ý	ý	ý
capital thorn, icelandic	Þ	þ	þ
small sharp s, german (sz ligature)	ß	ß	ß
small a, grave accent	à	à	à
small a, acute accent	á	á	á
small a, circumflex accent	â	â	â
small a, tilde	ã	ã	ã
small a, dieresis or umlaut mark	ä	ä	ä
small a, ring	å	å	å
small ae diphthong (ligature)	æ	æ	æ
small c, cedilla	ç	ç	ç
small e, grave accent	è	è	è
small e, acute accent	é	é	é
small e, circumflex accent	ê	ê	ê
small e, dieresis or umlaut mark	ë	ë	ë
small i, grave accent	ì	ì	ì
small i, acute accent	í	í	í
small i, circumflex accent	î	î	î
small i, dieresis or umlaut mark	ï	ï	ï
small eth, icelandic	ð	ð	ð
small n, tilde	ñ	ñ	ñ
small o, grave accent	ò	ò	ò
small o, acute accent	ó	ó	ó
small o, circumflex accent	ô	ô	ô
small o, tilde	õ	õ	õ
small o, dieresis or umlaut mark	ö	ö	ö
division sign	÷	÷	÷
small o, slash	ø	ø	ø
small u, grave accent	ù	ù	ù
small u, acute accent	ú	ú	ú
small u, circumflex accent	û	û	û
small u, dieresis or umlaut mark	ü	ü	ü
small y, acute accent	ý	ý	ý
small thorn, icelandic	þ	þ	þ
small y, dieresis or umlaut mark	ÿ	ÿ	ÿ

Sebagai catatan bahwa tidak ada Character Entity atau Numeric Entity untuk karakter tulisan 'trademark' (TM). Tidak seperti karakter © or ® karakter tulisan TM sederhananya cuma terdiri dari abjad T dan M. Untuk menampilkannya cukup ditebalkan saja (bold) TM, sebagai contoh TM, atau gunakan super script seperti ^TM (<sup>TM</sup>).

Lebih lengkap mengenai kode x/HTML kunjungi W3School Character entity references in HTML 4.0

Cara Membuat Readmore Plus Judul Posting

2010-02-03T14:03:00.002+07:00

Postingan kali ini menjelaskan bagaimana cara membuat readmore atau baca selengkapnya atau akses full artikel (suka-suka anda mengganti tulisan yang diinginkan) plus judul posting.
Seandainya judul posting blog kamu tentang Astaga.Com Lifestyle On The Net, maka sebagai contoh blog style akan menjadi : Akses Full Astaga.Com Lifestyle On The Net, ini karena saya menggunakan tulisan akses full jadi tergantung selera anda dalam membuat tulisan di blog.

Fungsi penambahan readmore plus judul posting apa? apakah cuma untuk gaya lifestyle blog karena lagi kontes lifestyle seo dari portal astaga.com lifestyle on the net atau jangan-jangan cuma menambah berat beban loading blog, karena ga ada gunanya menambah sesuatu yang tidak ada hasil. Tenang aja teknik penambahan readmore plus judul posting ini tidak akan menambah berat beban loading blog lifestyle, karena blog cuma memanggil data dari postingan bukan dari serve luar blog kecuali kita memasukkan javascript yang dipanggil dari server lain, itu baru menambah berat beban blog.

Jangan menambah hal-hal tidak berguna untuk blog anda karena akan memperlambat loading blog, terutama sebisa mungkin hindari penggunaan sebagian besar javascript. Nah, mari sekarang kita mulai membuat readmore plus judul posting.

Langkah - langkah membuat readmore plus judul postingan adalah sebagai berikut :
PERHATIAN!!! Backup dahulu template dengan mengklik DownLoad Full Template! sebelum melakukan perubahan layout template untuk mencegah hal-hal yang tidak diinginkan.

Pertama : Login ke blogspot anda.
Kedua : Setelah login, klik tab TATA LETAK atau LAYOUT kemudian pilih EDIT HTML.
Ketiga : Pada tab EDIT HTML, centang tanda Expand Template Widget dan cari :

ReadMore

atau

Baca Selengkapnya

tergantung dari tulisan yang kamu buat untuk script readmore kamu, karena keduanya sama saja.

Keempat : Bila sudah ketemu tulisan tersebut, tambahin "readmore atau baca selengkapnya" dengan kode script di bawah ini :

<data:post.title/>

Kelima : Simpan atau save template anda dan lihat hasilnya style blog yang anda buat.

Tips di atas hanya berguna melengkapi blog lifestyle yang sudah memiliki fungsi script readmore. Nah lho, klo yang belum punya gimana? Baca di postingan sebelumnya tentang cara membuat readmore dengan tiga langkah mudah. :-D

Astaga!COM LIFESTYLE On the Net Portal SEO Update

2010-02-01T15:14:00.002+07:00

Belajar SEO tidak mudah, mirip seo lifestyle kontes astaga.com dengan keyword kata kunci astaga.com lifestyle on the net, review seo Lifestyle astaga terakhir membuat semua peserta kontes pada manyun karena google masih menggoyang dan menguji kekuatan rank blog peserta kontes astaga.com lifestyle on the net.

Blog peserta kontes seo astaga.com lifestyle on the net banyak yang menghilang entah kemana postingannya. Google.co.id masih menggoyang karena banyaknya spam tentang astaga.com lifestyle on the net, fenomena kontes seo selalu menjadi ajang spam, makanya google ajak peserta bergoyang dangdut, hehehe

Susah optimasi kata kunci astaga.com Lifestyle on the net membuat peserta mencoba berbagai cara untuk mampu bertengger di posisi puncak klasemen astaga.com lifestyle on the, namun sayang banyak diantara peserta mengeluarkan teknik black hat seo.

Mirip fenomena politik negeri kita Indonesia tercinta, dimana para politikusnya mirip tikus membuat lobang dan mencari cara mencapai tujuannya dengan menghalalkan berbagai cara.
Namun apapun itu, kontes astaga.com lifestyle on the net memang layak disebut kontes, karena begitu sengitnya persaingan blog antara peserta kontes seo lifestyle astaga.com di internet sehingga membuat penonton seperti templateo merasakan semangat perjuangan begitu keras untuk mencapai puncak posisi kontes seo astaga.com lifestyle on the net

Apakah aku seorang blogger yang cinta SEO?

2010-01-25T11:56:00.001+07:00

Apakah aku seorang blogger yang cinta SEO? wah, pertanyaan sulit dijawab nich, seorang blogger yang cinta SEO blogger akan selalu belajar bagaimana bentuk Seo blogger itu sendiri, sedangkan saya cuma seorang blogger iseng menulis catatan gak tentu, kenal seo aja baru kemarin, hehehe.

Hebohnya kontes Seo Astaga!com Lifestyle on the net membuat banyak blogger coba ikut berpartisipasi, saya cuma bisa mengucapkan selamat berjuang semoga juara seo Astaga.com Lifestyle on the net.
Kontes seo astaga.com lifestyle on the net jika saya perhatikan banyak diikuti master-master handal dalam dunia seo, makanya cuma jadi penonton dan pemberi semangat peserta kontes seo astaga.com on the net.

Templateo hanya blogger tanpa tau arti seo apalagi mendalami seo Style, templateo nulis blog belajar desain blog ajah tergantung mood, klo rajin nulis klo ga yach ga nulis. Jadi klo pertanyaannya apakah aku seorang blogger yang cinta seo, maka jawabannya bisa ya bisa tidak, tergantung mood juga. :-D

Blog ini dibuat cuma untuk mengingatkan Templateo agar ga lupa cara buat blog, maklum otak udah mulai tumpul dalam hal ingat mengingat, makanya dicatat di blog templateo ini. Bagi pengunjung blog templateo saya ucapkan terima kasih, semoga artikel di blog templateo ini ada manfaatnya menambah ilmu pengetahuan tentang cara belajar desain blog, jika anda memiliki artikel menarik jangan segan-segan untuk comment di blog templateo ini, karena Ilmu akan bertambah apabila ada masukan dan kritik tentang ilmu yang salah.

Postingan ini hanya support untuk sahabat yang ikut kontes Astaga!com seo Lifestyle Astaga.com on The Net, mari dukung kontes SEO Astaga.com Lifestyle on the net. Blog info Astaga.com seo kontes Lifestyle on the Net

Feed Cara Cepat Autospam

2010-01-22T11:25:00.001+07:00

Membuat feed rss, atom, dan comment, mudah, ga sampe 2 menit udah jadi, akan tetapi seberapa penting bagi blog anda? Memang untuk mempercepat dan mempermudah pengunjung memperoleh informasi terbaru adalah dengan Feed rss, atom, atau comment.

Cuma sangat disayangkan, kemudahan selalu berbanding terbalik dengan keamanan. Mau aman tapi sulit atau mau mudah tapi ga aman, hayo pilih mana? bingungkan, hehehe sama klo gitu.

Jika anda sering online dan surfing di internet maka saat ingin mencari informasi penting melalui search engine google, yahoo, dan lainnya, namun saat diketikan kata atau frase maka tampilan informasi cuma sampah bukan artikel content dicari. Mengapa ini bisa terjadi?

Fenomena spam autoblog membuat semua itu terjadi.Autoblog mengambil informasi dari rss feed, dan atom untuk dimasukkan ke blog auto, sehingga pemilik asli artikel content tersebut web blog nya tenggelam ke dasar pencarian.

Nah, untuk anda yang baru membuat blog maka sebaiknya jangan mengaktifkan rss feed atau feed atom di layanan feed manapun, karena layanan feed tidak terlalu bermanfaat terhadap traffic blog anda. Namun apabila anda tetap menginginkan layanan feed anda aktif maka bersiap-siaplah menjadi makanan autoblog dan spam blog di internet.

Penggunaan rss feed dan atom feed semua kembali kepada individu pribadi, karena feed adalah cara cepat autoblog membuat spam di internet.

Langkah Mudah Adsense di Blog Indonesia

2009-12-19T20:39:00.001+07:00

Banyak jalan menuju kaya (eh..salah.. banyak jalan menuju kesuksesan, hehehe)...
Google adsense secara default tidak akan menampilkan program adsensenya pada blog atau web yang berbahasa Indonesia, namun entah siapa yang mulai akhirnya diperoleh juga cara agar adsense tetap dapat muncul di blog berbahasa Indonesia.

Nah, jika ada yang minat memasang adsense untuk blog atau web berbahasa Indonesia maka dapat melakukan langkah-langkah dibawah ini :

1. Pertama buatlah sebuah file (misal dengan extension .php) yang berisikan script google adsense kemudian taruh di web hosting anda.

2. Triknya adalah pada saat melakukan setup iklan baru pada bagian “more option” secara default yang terpilih adalah “show public servis ads”, ubah dengan memilih “Show non-Google ads from another URL”, kemudian masukkan url yang mengarah ke file yang telah dibuat pada langkah pertama.

Dengan cara tersebut maka iklan google adsense akan tampil walaupun di blog bahasa indonesia. Sebagai catatan karena ini masuk daerah abu-abu, lakukan dengan resiko ditanggung sendiri :D . Selamat mencoba ;)

Cara Meletakkan Adsense Di Postingan

2009-12-19T20:05:00.001+07:00

Berikut caranya :

Pertama : Masuk ke LAYOUT -> EDIT HTML -> CENTANG "Expand Widget Templates"

Kedua : Cari kode ]]></b:skin> kemudian masukkan kode css berikut tepat diatasnya

.adsense {
margin-right:10px;
height:280px;
width:338px;
float:left;
overflow:hidden;}

Note : height dan width diatur sesuai dengan tampilan adsense yang digunakan.

Ketiga : Selanjutnya Cari kode <data:post.body/> dan letakkan kode adsense diatas kode tersebut untuk menampilkan iklan adsense diawal postingan/dibawah kode tersebut untuk menampilkan iklan adsense dibawah postingan.

Keempat: Save

Kelima : Agar iklan adsense tidak muncul, gunakan kode berikut diawal postingan

Keenam : Sebelum memasukkan kode adsense, maka kode yang masih berbentuk java script tersebut dikonversikan dulu ke HTML.

Cara Menempatkan Hasil Adsense For Search Agar Terlihat Cantik

2009-12-19T19:55:00.001+07:00

Adsense For Search merupakan salah satu type adsense yang dapat dipergunakan untuk menghasilkan uang, namun adsense for search terkadang memunculkan hasil pencarian tidak sesuai dengan halaman blog yang kita buat.

Nah, dibawah ini adalah trik untuk menampilkan adsense agar terlihat cantik di blog anda.

Pertama : Dapatkan dulu 2 kode ini dari adsense Anda, seperti ini:

Kode Pertama:

<div id='cse-search-results'/>
<script type='text/javascript'>
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 590;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script src='http://www.google.com/afsonline/show_afs_search.js' type='text/javascript'/>

Kode Kedua:

<form action='http://roni-pascal.blogspot.com/2006/03/hasil-pencarian.html' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='partner-pub-xxxxxxxxxx:taa9vlbyl50'/>
<input name='cof' type='hidden' value='FORID:11'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='q' size='21' type='text'/>
<input class='button' font-size='4' name='sa' type='submit' value='Cari'/>
</div>
</form>

Note; pub-xxxxxxxxx (ganti xxxxxxxxx dengan nomor adsense anda)

Nah, sebelumnya Anda harus membuat dahulu posting kosong (ga ada isinya), dan dikasih judul apa saja tergantung style anda, misal: judulnya "Relevant Article". Dan ingat postingnya di set ke tahun lamaaaaaaaaaa sekali, pokoknya yang tahun dulu bangetsss... Setelah itu klik tombol Terbitkan Entri.

Untuk mendapatkan 2 kode diatas, caranya sangat mudah sekali kok,

1. Masuk ke akun adsense Anda

2. Terus klik tab Adsense Setup ==> klik AdSense for Search

3. Di Search Type: pilih Only sites I select, lalu dikolom Selected sites: isi url alamat blog Anda.

4. Scrool ke bawah lalu dibagian Site language, pilih Indonesian

5. Selanjutnya klik tombol Continue, lalu klik tombol Continue lagi.

6. Pada opsi Opening of search results page, pilih Open results within my own site, lalu di Enter URL where search results will be displayed isikan url alamat postingan kosong tadi baru dibuat dan di Enter width of results area: isi ukuran pixel lebar post blog Anda.

7. Kemudian di opsi Ad Location:, kalo ukuran lebar post blog anda 795 ato lebih bisa pilih Top and Right dan Right, dan apabila kurang dari 795 cuma bisa pilih Top and Bottom, jadi sesuaikan saja dengan ukurang post blog Anda. Seperti lebar post blog ini cuma 590, jadi saya pilih Top and Bottom.

8. Kemudian dibagian warna Anda tentukan sendiri warna yang tepat seperti warna blog Anda terutama di fontasi-nya, link-nya, background-nya dll. Lalu klik tombol Continue

9. Terakhir Anda isi namanya terserah Anda, apapun namanya. Lalu klik tombol Submit and Get Code.

10. Tunggu sebentar, maka Anda mendapatkan 2 kode itu.

Sekarang trik diblognya.
Anda login ke blogger, lalu klik Tata Letak pilih klik Edit HTML dan jangan lupa Expand Template Widget dicentang.

Cari kode ini <data:post.body/>
atau kode ini <p><data:post.body/></p>,

Dua-duanya sama aja kok. Dan simpan kode dibawah ini (kode ini harus yang Anda dapatkan waktu menerapkan cara nomor 3 diatas).

Di bawah adalah contoh kode yang dicari tsb :

<div id='cse-search-results'/>
<script type='text/javascript'>
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 590;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script src='http://www.google.com/afsonline/show_afs_search.js' type='text/javascript'/>

Selanjutnya klik tombol Simpan Template

Karena ini adalah widget search engine-nya, jadi Anda bisa simpan di sidebar atau ditempat lain yang menurut anda potensial :

<form action='http://NAMABLOGANDA.blogspot.com/1997/12/NAMA-POSTINGAN-DI-BLOG-ANDA.html' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='partner-pub-xxxxxxxxx:taa9vlbyl50'/>
<input name='cof' type='hidden' value='FORID:11'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='q' size='21' type='text'/>
<input class='button' font-size='4' name='sa' type='submit' value='Cari'/>
</div>
</form>

Simpan, dan lihat hasilnya. Selamat membuat design Adsense untuk blog anda.

Cara Membuat Teks Berjalan Dengan Marquee

2009-12-16T12:34:00.001+07:00

Sepintas kita lihat indah nya apabila blog layout teks nya bisa berjalan, namun secara fungsi kurang maksimal. Oleh karena itu apabila blogger ingin memaksimalkan fungsi marquee untuk teks dapat dilakukan melalui beberapa langkah berikut ini :

1. Untuk membuat teks berjalan dari kiri ke kanan.

KIRI ke KANAN

<marquee>KIRI ke KANAN"</marquee>

2. Untuk membuat teks berjalan dari kiri ke kanan dan berhenti pada saat mouse ditujukan pada teks.

KIRI ke KANAN dan BERHENTI

<marquee onmouseover="this.stop()" onmouseout="this.start()">KIRI ke KANAN dan BERHENTI</marquee>

3. Untuk membuat teks bergerak bolak-balik : kiri -> kanan -> kiri.

Bolak Balik

<marquee behavior="alternate">Bolak Balik</marquee>

4. Untuk membuat teks bergerak dari bawah ke atas.

BAWAH ke ATAS

<marquee direction="up">BAWAH ke ATAS</marquee>

5. Teks bergerak dari atas ke bawah.

ATAS ke BAWAH

<marquee direction="down" width="100%" height="100">ATAS ke BAWAH</marquee>

Itulah beberapa contoh teks berjalan atau marquee yang bisa anda masukkan ke dalam blog, tinggal pilih mana yang ingin di masukkan. Apakah ingin teks berjalan dari kiri ke kanan, bolak balik, atas ke bawah maupun bawah keatas.

Jika telah mengikuti langkah-langkah diatas dengan benar, coba lihat hasilnya.

Selamat Mencoba.

Cara Membuat Banner Untuk Blog

2009-12-16T12:28:00.001+07:00

Banner di blog biasanya dipergunakan untuk meletakkan iklan atau merupakan tempat promosi. Banyak blog yang memasang banner yang bagus dan cantik untuk blog mereka.

Sebenarnya bagaimanakah cara membuat banner untuk blog itu? Dibawah ini akan dijelaskan cara sederhana membuat banner di blog anda.

Langkah-langkah cara membuat banner untuk blog adalah sebagai berikut :

1. Pertama masuk ke acount blogspot anda

2. Pilih Layout (Tata Letak) --> Edit Html

3. Cari kode berikut ini, dengan menekan tombol keyboard ctrl+F :

]]></b:skin>

4. Copy kode berikut kemudian tempatkan persis diatas kode tersebut.

#Banner-ads {

margin:0px;

padding: 5px;

text-align: center;

width : 960px;

}

#Banner-ads img {

margin: 7px 4px 4px 0px;

padding: 3px;

width : 125px;

height : 125px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Banner-ads img:hover {

margin: 7px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

5. Copy semua kode dibawah ini :

<div id='Banner-ads'>
<a hight='100' href=' http://YourURL' target='_blank' width='100'><img alt='ads' border='0' src='http://YourURL-IMAGEs/images/125x125.gif'/></a>
</div>

6. Kemudian letakkan persis di atas kode berikut :

<div id='main-wrapper'>

7. Terakhir Save atau Simpan Perubahan Template anda.

Jika telah mengikuti tutorial diatas dengan benar, maka kotak iklan link banner akan muncul pada blog anda.

Cara Membuat ReadMore dengan Tiga Langkah Mudah

2009-12-15T17:48:00.000+07:00

PERTAMA, cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>»»  READMORE...</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan :

tulisan yang berwarna merah adalah yang bisa anda ganti.

Summary noimg 430 = tinggi artikel terpenggal tanpa image

Summar img 430 = tinggi artikel terpenggal dengan image

Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Cara Membuat Related Post di Blogspot

2009-12-03T23:13:00.005+07:00

Cara membuat related post ini sudah banyak dibahas di berbagai blog dan web, disini saya memposting kembali agar saya sendiri tidak lupa dan mudah-mudahan juga berguna bagi pembaca yang baru memulai blogging dan mendesain blog.

1. Setelah login ke blog anda, masuk ke menu 'Layout-->Edit HTML'

2. Beri centang kotak 'Expand Widgets Template'

3. Selanjutnya cari kode ini <data:post.body> , cara mudah mencarinya yaitu tekan tombol ctrl dan F bersamaan kemudiannya masukkan apa yang mau dicari.

4. Setelah ketemu, letakkan script berikut ini di bawah kode <data:post.body>.

Copy dan paste kode berikut :

<b:if cond='data:blog.pageType == "item"'>

<div class='similiar'>

<div class='widget-content'>

<h3>Related Posts by Categories</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

5. Selesai dan save template anda.

6 Cara Membuat Autoblog di Blogspot

2009-12-01T11:28:00.001+07:00

Banyak yang lagi ribut pada masalah auto blog, saya sndiri lom pernah nyobain autoblog? Apa sih autoblog itu? Auto blog adalah sebuah cara yang membuat blog kita terisi articel secara otomatis.
Sehingga apabila ada seseorang yang pengen ngeblog tapi males mikir dan nulis article untuk blognya plus ga mau repot mengurusnya tiap hari namun pengen blognya bisa terisi sendiri, solusinya buat aja autoblog.
Namun berhati-hati dengan penggunaan autoblog ini, karena bisa saja blog atau web anda di blok oleh search engine seperti google. Maka dari itu ada baiknya hal ini digunakan cuma untuk belajar. Berikut ini cara termudah bagi blogger untuk membuat autoblog di Blogspot.

1. Pertama-tama login ke account blog anda (sebaiknya blog yang masih baru atau buat blog baru).
2. Klik pada tab settings atau pengaturan pada blog yang anda.
3. Kemudian pilih tab email & mobile.
4. Pada kolom email posting address, buatlah sebuah nama email yang baru.
Formatnya akan seperti ini : namaakunbloggeranda.isikannamayangandainginkandisini@blogger.com.
5. Dibawahnya pilih Publish emails immediately.
6. Klik save settings.

Selanjutnya adalah subcribe ke newsletter yang sesuai dengan topik blog anda, sehingga tips akan secara rutin dikirimkan kepada anda (yang biasanya selalu disisipi link affiliasi).

Article atau materi yang terkirim ke email akan langsung terpublish ke blog anda, sehingga anda tidak perlu mikir bagaimana menghasilkan content yang unique dan berkualitas.

Selamat berauto blog :-D (resiko di tanggung penumpang, heheheh)

Cara mendaftar dan setting domain di dnspark

2009-11-22T11:37:00.001+07:00

Daftar di DNSPARK sangat mudah, anda tinggal menuju website dnspark yaitu http://www.dnspark.net kemudian klik register now untuk daftar, setelah itu akan muncul form seperti gambar di bawah ini :

Setelah registrasi selesai maka yang perlu dilakukan adalah login ke dnspark.

Settingan pada DNSPark

Setelah login, untuk menambahkan domain, pilih DNS Hosting di Configuration Menu lalu Add Domains.

Kemudian pada Add A New Service, beri centang pada DNS Hosting - Free dan masukkan URL domain nya lalu pilih Add Now.

Pada menu Domain List, pilih URL domain anda tadi untuk setting lebih lanjut. Pada Add Records, masukkan informasi dibawah ini:

Untuk infomasi name server domain anda (pada registrar) ketikkan:

ns5.dnspark.net
ns3.dnspark.net
ns2.dnspark.net
ns1.dnspark.net
ns4.dnspark.net

Setelah semua selesai silahkan ditest konfigurasi anda, apakah sudah benar atau belum. Selamat mencoba.

Membuat Menu Horizontal

2009-09-09T09:13:00.001+07:00

Pertama-tama kamu harus punya gambar yang akan dijadikan background untuk menu tab. Apabali belum ada gambar, cari dulu yach.. heheheh
Ok, saya anggap bahan-bahannya sudah ada, mari kita mulai marakitnya (bukan merakit bom lho) :
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.

3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://pustakatemplate.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://pustakatemplate.blogspot.com/"><span>Trik-Tips</span></a></li>
<li><a href="http://pustakatemplate.blogspot.com/"><span>Free Template </span></a></li>
<li><a href="http://pustakatemplate.blogspot.com/"><span>Kamus</span></a></li>
<li><a href="http://pustakatemplate.blogspot.com/"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://pustakatemplate.blogspot.com/ dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan kamu. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/> </b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/> </b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

Selamat Mencoba..

Free SEO Tool

2009-09-09T09:02:00.003+07:00

Tools yang satu ini bisa dipergunakan untuk mengecek pagerank, dan segala kebutuhan mengenai data dari domain anda. Free All in one SEO Tools yang bisa anda gunakan secara gratis
Yups...nama tools itu adalah SEO Quake yang bisa anda install langsung melalui Firefox anda. Dan semua ini gratis. Beberapa kelebihan yang anda dapatkan dengan menggunakan tools ini, diantaranya mengetahui :

1. Nilai Pagerank

2. Jumlah Google index

3. Jumlah Yahoo link directory

4. Jumlah Yahoo backlink

5. Peringkat Alexa

6. Whois

7. Umur domain

8. dan lain-lain...

Cara penggunaan nya cukup mudah :

1. Masuk ke situs nya,dan install pluggin SEO Quake melalui Mozilla Firefox.

2. Setelah selesai diinstal,anda tinggal akses situs yang anda inginkan,maka akan muncul gambar diatas blog atau web yang ingin di akses. Disitu terdapat data mengenai blog atau situs yang dikunjungi. Cukup mudah bukan, hanya dengan mengakses blog atau web. :-D

3. Untuk menonaktifkan tools ini,anda cukup klik gambar logo SEO Quake pada browser anda pada bagian kanan paling bawah.

Silahkan download SEO Quake di SINI

Selamat mencoba!

Cara Setting Domain Pada Blogspot

2009-09-09T08:33:00.002+07:00

Blog dengan nama tanpa embel-embel blogspot, wordpress, multiply, dll tentunya akan membuat blog kita terlihat lebih elit dan berkelas, dan juga akan membuat nama blog kita akan lebih mudah diingat orang. Jika kita sudah membeli domain maka ada beberapa hal yang harus kita lakukan supaya domain kita tertuju pada web/blog yg kita punya, diantaranya yaitu setting DNS, Name Server dll. Mari kita mulai saja langkah-langkah untuk customisasi domain ini.

* SETTING DNS (DOMAIN NAME SERVER)
Langkah awal kita yaitu melakukan setting DNS. Biasanya jika kita membeli domain akan ada biaya tambahan (sekitar Rp 3000,-) untuk menambahkan layanan "DNS Managed". Tapi jika kamu tidak ingin mengeluarkan biaya ada layanan gratis supaya kita bisa melakukan setting DNS, seperti di dnspark.net. Nah berikut ini adalah tutorial jika kamu menggunakan layanan dari dnspark ini :

1. Jika kamu belum memiliki account di dnspark km bisa daftar di https://www.dnspark.net/register.
2. Jika sudah daftar silahkan login.
3. Pilih menu "DNS Hosting" (disebelah kiri). Kemudian pilih "Add Domains"
4.Beri tanda centang kotak "DNS Hosting - Free" lalu Isikan nama domain yang sudah kamu beli di kolom "Enter new domain" (tanpa www).
5. Kemudian Klik tombol "Add Now"
6. Jika berhasil maka nama domain mu akan muncul di "Domain List" (pojok kiri bawah)
7. Klik domain kamu untuk melakukan pengaturan selanjutnya.
8. Pada Dropdown "Type" pilih "CNAME".
9. Pada Kolom "Alias Name" isikan www (sebenarnya itu bisa diisi apa saja, tp untuk domain utam sebaiknya diisi "www").
10. Kemudian untuk destination name isikan ghs.google.com (untuk blogspot).
11. Jika sudah klik tombol "Update All"

Untuk proses setting DNS sudah selesai.

Bagi yang sudah punya "DNS Managed" sendiri di domainnya, cara settingnya seperti ini:
- Masuk ke "Managed DNS" Trus Pilih "CNAME Records"
- Kemudina klik tombol "Add CNAME Records"
- Untuk kolom "Host Name" diisi dengan "www"
- Untuk Kolom "Value" pilih yg bagian bawah kemudian isi dengan "ghs.google.com"
- Kemudian Klik tombol "Add record"

Selesai deh...

* SETTING NS (NAME SERVER)
Bagi yang sudah memiliki "Mange DNS Service" sendiri di domainnnya maka langkah berikut ini tidak perlu dilakukan. Tapi jika kamu menggunakan layanan DNS Manger dari dnspark.net, maka kamu harus merubah "Name Server" di domain manager kamu. Bagi yang membeli domain dari dodoldomain.net maka langkah-langkahnya adalah seperti berikut ini, (bagi yang beli ditempat lain saya rasa hampir sama langkah2nya)

1. Login di dodoldomain.net kemudian pilih "My Account"
2. Jika sudah maka kamu akan berada dalam kawasan "admin area" domainmu.
3. Pilih menu "Domain --> List Last 10"
4. Domain kamu akan terlihat di "List of Domain"
5. Klik link "Domain Name --> Click to Manage"

6 Kemudian klik tombol "Modify Name Server".

7 Isikan name server berikut kedalam kolom "Name Server1, Name Server2, Name Server3, Name Server4, Name Server5" kemudian klik tombol "Submit"

ns1.dnspark.net
ns2.dnspark.net
ns3.dnspark.net
ns4.dnspark.net
ns5.dnspark.net

Nah urusan dengan si "Name Server" Sudah Selesai

* SETTING PUBLISHING DI BLOGGER
Nha sekarang tinggal langkah terakhir. gini langkahnya :

1. Login di blogger. Pilih menu "Setting --> Publishing"
2. Kemudian klik link Switch to : Custom Domain
3. Kemudian klik lagi link Already own a domain? Switch to advanced settings
4. Kemudian isikan nama blog kamu di kolom "Your Domain" (pake www ya, contoh www.kendhin.com)
5. Lalu Klik tombol "Save Setting"

Yak Semua sudah selesai. Jika semua settingan tadi dilakukan dengan benar maka domain kamu yang baru akan aktif sekitar 1-24 jam bahkan bisa nyampe 48 jam.. Jadi sabar aja.

Menghilangkan Nav Bar Pada Blogspot

2009-07-28T13:51:00.001+07:00

Navbar adalah bar paling atas yang terdapat pada blog di blogspot. Navbar atau navigation bar adalah konsekuensi yang google sebagai penyedia hosting gratis pada blogspot berikan kepada konsumen.
Banyak silang pendapat tentang Navbar ini, apakah boleh dihilangkan atau tidak. Navbar ini tidak akan ada untuk pengguna yang berbayar. Blogger yang memiliki etika yang baik tidak akan menghilangkan navbar ini, karena mereka memiliki tanggung jawab moral. Udah dikasi gratisan masa cuma nampilin navbar aja tidak mau? apalagi navbar nya bisa kita pilih warnanya mendekati template kita. Tapi banyak juga yang protes, karena nabvar mengganggu keindahan blog mereka.
Klo ga mau pake navbar ya bayar donk... hehehe. Tapi klo tetap pengen yang gratisan dan ga mau make navbar nya ini saya kasi cara nya.
Pertama login ke blogspot terus lihat di tab bar pilih layout (tata letak) kemudian edit HTML.
Copy kode berikut :

#navbar-iframe {
visible: hidden;
height: 30px;
}

Kemudian paste di bawah kode " !<[CDATA[[ " tanpa tanda petik. Selanjutnya simpan template anda.

Selamat Mencoba