melacak nomer hp seseorang

<a href="http://www.ceebydith.com/cek-hlr-lokasi-hp.html" title="Ceebydith HLR Lookup">
  <img src="http://www.ceebydith.com/widget/hlrlookup.png" alt="Ceebydith HLR Lookup" />
</a>

BAGAIMANA CARA MENULIS ARTIKEL BERKUALITAS STANDAR SEO

BAGAIMANA CARA MENULIS ARTIKEL BERKUALITAS STANDAR SEO

Bagaimana Cara Menulis Artikel Berkualitas Standar SEO? Ini adalah tahap ke 3 dari 4 tahap SEO. Usahakan untuk membuat artikel berkualitas dari kata-kata kunci yang sudah diriset. Jika belum mengetahui tentang cara riset kata kunci bisa baca dari artikel berikut:

# Cara Melakukan Riset Kata Kunci

Setelah menentukan kata kunci yang akan dibuatkan artikel, maka kita siap untuk memulai. Perhatikan faktor-faktor penting di saat menulis artikel berikut ini:

#1 Memilih Judul Artikel

Tahap pertama adalah menentukan judul artikel. Pastikan judul ini mengandung kata kunci yang terpenting di dalam artikel. Panjang judul artikel sebaiknya sekitar 5-7 kata saja, karena semakin panjang akan semakin berkurang kerapatan kata kunci di dalamnya. Kalau mau membuat judul artikel heboh sebaiknya jangan sampai mengorbankan kata kunci di dalamnya. Sebagai contoh, jika judul artikelnya "Harga Ipad 3 Turun Lagi" cukup diubah menjadi "Astaga! Harga Ipad 3 Turun Lagi"

#2 Memilih URL Artikel

Jika judul artikel yang dipilih cukup panjang, maka bisa jadi tidak dimuat semua di URL artikel. Bagi pengguna blog berplatform blogger.com bisa mengubah URL dengan cara berikut. Lihat di bagian kanan dari tempat mengetik artikel anda. Di situ ada satu menu bernama Tautan permanen. Klik menu tersebut, maka akan terbuka tampilan seperti di bawah ini.

Anda cukup mengetikkan bagian terakhir dari URL. Sebagai contoh, jika URL yang saya inginkan adalah http://trikmudahseo.blogspot.com/2012/08/bagaimana-cara-menulis-artikel-berkualitas-standar-seo.html, maka yang saya ketikkan adalahbagaimana-cara-menulis-artikel-berkualitas-standar-seo (jangan lupa tanda hubung - diikutkan dalam url). Dengan begini URL akan menjadi lebih SEO friendly.

#3 Gunakan Label Di Setiap Artikel

Sebaiknya menggunakan label untuk artikel-artikel saudara. Pilih label yang paling tepat untuk mendiskripsikan artikel yang dibuat. Untuk memasukkan label klik Menu Label di bagian kanan kolom mengetik artikel. Jika memakai lebih dari satu label pisahkan dengan koma. Jika blog anda bertema campuran dan tidak fokus pada satu topik, maka sebaiknya pasang gadget label pada sidebar untuk membantu aliran pagerank ke halaman-halaman artikel blog anda.

#4 Pastikan Memasang Meta Deskripsi

Meta deskripsi ini yang akan ditampilkan pada snippet hasil pencarian Google, jadi pastikan meta deskripsi ini juga menggunakan kata kunci yang ada di artikel anda. Panjang meta deskripsi itu tidak perlu terlalu panjang, 150 karakter itu sudah memadai. Tapi untuk mengaktifkan fitur input meta deskripsi di pembuatan artikel, silahkan ikuti panduan di artikel cara pasang meta description.

#5 Membuat Artikel Yang Teroptimisasi

Artikel yang saudara buat sebaiknya mengikuti beberapa aturan berikut ini:

• Panjang artikel minimal 500 kata
• Setiap kata kunci setidaknya diulangi 3 kali di dalam artikel, (harus menjaga kepadatan sekitar 3-6% itu hanya isu)
• Kata kunci yang muncul pertama kali harus di bold atau italic
• Gunakan bahasa yang baku agar kualitas artikel tidak berkurang
• Jika bisa, buat lagi satu frasa dengan kata kunci di dalam artikel dan beri tag Heading H2 atau H3.

#6 Memasang Gambar Di Dalam Artikel

Pastikan gambar yang anda pasang mengandung Alt tag. Alt tag ini bertugas memberitahu Google tentang isi gambar, karena Googlebot belum bisa mengenali gambar. Kalau bisa ukuran file gambar jangan terlalu besar, karena bisa mempengaruhi waktu loading halaman. Bagi pemakai blogspot, gambar sebaiknya diupload saat menulis artikel, dan jangan dihosting di image hosting yang lain. Karena kadang hosting lain tidak bisa mengimbangi kecepatan loading gambar dari blogspot pada jam-jam sibuk.

#7 Memasang Link Di Dalam Artikel

Jika anda benar-benar perlu memasang link di dalam artikel, maka ikuti beberapa aturan berikut:

• Pastikan semua link terbuka di tab baru
• Bedakan link yang keluar dan link yang menuju halaman blog anda sendiri. Untuk link yang keluar pastikan menggunakan rel="nofollow", sedangkan yang menuju artikel sendiri tidak perlu nofollow.
• Penting!!! Usahakan dalam artikel anda setidaknya ada dua link menuju artikel lain di blog anda jika memang ada kaitannya. Interlink seperti ini sangat penting untuk meningkatkan kemampuan robot mesin pencari mengindeks blog anda.

#8 Pastikan Artikel Anda Mampu Menyelesaikan Masalah Atau Menghidangkan Informasi yang dicari Pembaca

Tujuannya sederhana, agar pembaca tertarik membaca artikel lainnya, atau bahkan datang berkali-kali ke blog anda. Ini akan sangat baik untuk reputasi blog anda.

Delapan poin di atas bisa membantu saudara untuk meningkatkan kualitas artikel blog. Mudah-mudahan ini bisa membuat artikel blog anda terindeks lebih baik lagi.... Sebagai pelengkap pengetahuan saudara silahkan dibaca kelanjutan proses SEO ini pada tahap ke 4 dari 4 tahap SEO, yaitu cara mendapatkan backlink. Terima kasih sudah mau mampir dan membaca artikel cara menulis artikel berkualitas standar SEO.

CARA MEMBUAT BREADCRUMBS PADA POSTINGAN ARTIKEL

CARA MEMBUAT BREADCRUMBS PADA POSTINGAN ARTIKEL

Cara Membuat Breadcrumbs pada postingan artikel sebenarnya sangat mudah.Breadcrumbs ini adalah sebuah teknik yang mulai menjadi trend sejak tahun 2009. Breadcrumbs atau "remah roti" adalah istilah yang sering digunakan oleh orang barat untuk hal-hal yang membantu mereka menelusuri posisi mereka dari suatu titik awal.

Banyak pelaku SEO meyakini bahwa teknik breadcrumbs ini membantu googlebot untuk lebih cepat mengenali struktur dari blog, karena halaman-halaman yang berada pada hirarki atas akan mendapat lebih banyak aliran poin dibandingkan halaman-halaman yang lebih di bawah hirarki.

Secara teknis saya meyakini bahwa teknik breadcrumbs ini membawa efek positif bagi SEO, karena bagaimana pun link antar halaman itu selalu memberi efek positif dalam aliran pagerank. Bagi yang ingin memasang breadcrumbs bisa mengikuti prosedur berikut:

• Masuk ke akun blogger saudara
• Pilih menu TEMPLATE
• Simpan dulu Full Template saudara dengan mengklik tombol Cadangkan/Pulihkan
• Klik tombol EDIT HTML
• Buka semua kode template. Caranya, klik di sembarang tempat di dalam kode. Tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, dan terakhir paste dengan menekan CTRL+V.... Semua kode akan terbuka penuh....
• Klik di antara kode HTML, lalu tekan CTRL+F untuk membuka kotak pencarian. Cari kode ]]></b:skin
• Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
  

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}

• Setelah itu cari kode seperti di bawah:

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

• Ganti kode di atas dengan kode di bawah

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

• Simpan Perubahan. Breadcrumbs akan terlihat seperti contoh berikut (lihat gambar di bawah)

Dengan demikian selesai sudah pemasangan breadcrumbs pada halaman-halaman artikel blog saudara.

CARA MEMBUAT ARTIKEL TERKAIT VERTIKAL DENGAN THUMBNAIL

CARA MEMBUAT ARTIKEL TERKAIT VERTIKAL DENGAN THUMBNAIL

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail sangatlah mudah. Artikel terkait ini banyak digunakan untuk membantu blogger yang kesulitan melakukan interlink antar artikel. Manfaat lain penggunaan artikel terkait ini adalah membantu meningkatkan pageview blog anda dengan terus menawarkan artikel-artikel yang lain ke pengunjung blog.

Untuk membuat artikel terkait tampil di bagian bawah postingan cukup lakukan prosedur sederhana berikut ini:

• Login ke akun blogger saudara]
• Buka menu TEMPLATE lalu pilih EDIT HTML
• Centang EXPAND TEMPLATE WIDGET
• Copy kode di bawah ini dan paste tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

• Sekarang cari kode <data:post.body/> 
• Copy kode di bawah ini dan taruh tepat di bawah <data:post.body/> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

• Jika lebih dari satu coba saja pasang satu persatu. Jika tidak terjadi perubahan, pindahkan ke kode <data:post.body/> lainnya. Sebaiknya mulai dari <data:post.body/> yang paling bawah.... 

Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:

Ok, terima kasih sudah mau mampir di blog saya ini. Mudah-mudahan artikel ini bisa membantu anda.

BAGAIMANA CARA MEMBUAT TEXT AREA DI BLOG?

BAGAIMANA CARA MEMBUAT TEXT AREA DI BLOG?

text area HTML

Bagaimana Cara Membuat Text Area Dengan Highlight? - Text area adalah sebuah kolom yang dibuat sebagai kontainer tulisan atau kode html yang ingin kita hidangkan kepada para pengunjung blog. Selain sebagai kontainer text biasa, text area juga bisa dibuat dengan fungsi highlight agar memudahkan pengunjung melakukan copy isi text area

Langsung saja kita mempelajari bagaimana cara  membuat kode HTML untuk text area. Kode ini bisa saudara masukkan di website ataupun blog anda:

MEMBUAT TEXT AREA BIASA

<p align="center"><textarea name="mytextarea" rows="5" cols="40"readonly=""> ISI DENGAN KONTEN YANG DIINGINKAN </textarea></p> 

hasilnya akan terlihat seperti di bawah ini : 

Ada dua parameter yang perlu anda perhatikan, yang pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Parameter kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area, jika jumlah baris yang diketik lebih panjang dari yang disediakan makan text area akan menampilkan scrolling.

MEMBUAT TEXT AREA DENGAN TOMBOL HIGHLIGHT

Text area juga bisa dibuat dengan menambahkan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam text area. Ini akan membantu pengunjung blog jika ingin mengcopy isi dari text area yang terlalu panjang. Langsung saja kita lihat contoh kode html berikut ini:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks</textarea></p></div></form>

Sebagai contoh :

Kode di atas mempunyai dua bagian utama, yaitu yang membuat fungsi highlight dan yang membuat fungsi text area. Dari semuanya ada beberapa kode yang bisa diubah yaitu:

• Height: 100px yang menyatakan tinggi text area anda nantinya
• Width: 200px yang menyatakan lebar dari text area
• Value="Highlight All" adalah text yang akan ditampilkan pada tombol

Jadi silahkan diedit text area ini sesuai kebutuhan anda.

BELAJAR HTML DASAR DIV DAN STYLENYA

BELAJAR HTML DASAR DIV DAN STYLENYA

Belajar HTML dasar Div -- Div bisa dikatakan sebagai kontainer untuk kode HTMLapa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini

<div>

ISI DARI DIV HTML TAG

</div>

Jika anda membentuknya seperti ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat contoh yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Jadi ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Jadi mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background

Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

<div style="background: #9fc5e8">

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas adalah kode warna yang saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.computerhope.com/htmcolor.htm.

Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

<div style="background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalahpadding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px ">

ISI DARI DIV HTML TAG

</div>

Dari pengaturan di atas anda ingin menaruh "ganjalan" setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk seperti ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center ">

ISI DARI DIV HTML TAG

</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

Kalau anda ingin mengubah bentuk font, maka kode font-family: Nama Font harus anda tambahkan ke dalam kode ini. Adapun nama font yang bisa anda gunakan hanya yang disediakan oleh blogger seperti Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan penutup ; sebelum menambahkan style ini.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact">

ISI DARI DIV HTML TAG

</div>

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja kodefont-size: ukuran yang anda inginkan. Ukuran bisa dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat contoh di bawah.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px">

ISI DARI DIV HTML TAG

</div>

Hasilnya akan terlihat seperti di bawah ini.

ISI DARI DIV HTML TAG

Style Width

Mungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun persen(%). Kali ini saya akan memakai pixel saja.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

Hasilnya seperti ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda bisa mengapitnya dalam kode <center></center>. Seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style Border

Apakah anda ingin memberi garis pembatas pada kode ini? Jika ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal bisa anda isi dengan angka berapa saja dalam satuan px. Gaya anda bisa isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna bisa anda isi dengan kode warna dari situs di atas. Coba jika kita tambahkan kode seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6">

ISI DARI DIV HTML TAG

</div>

</center>

Maka hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam seperti di atas. Anda bisa menambahkan kode border-radius: value, di mana nilai value ini bisa diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak bingung lihat contoh di bawah saja.

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam kode di atas. Hasilnya seperti contoh di bawah ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc">

ISI DARI DIV HTML TAG

</div>
</center>

Hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Jika ada satu atau dua atribut di atas yang kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini bisa anda lakukan saat membuat artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini bisa membantu anda.

MENGGANTI DAN MENAMBAH STYLE FONT BLOG

MENGGANTI DAN MENAMBAH STYLE FONT BLOG

Mengganti Dan Menambah Style Font Blog -- Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT

• Buka halaman http://www.google.com/webfonts/#
• Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.

• Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik USE

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya....

• Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini

• Ketiga, copy kode yang diberikan untuk dipasang di blog

 

MENAMBAHKAN FONT PADA BLOG

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu TEMPLATE lalu EDIT HTML
• Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Perubahan

MENGGUNAKAN FONT
Setelah melakukan langkah di atas anda sudah menambahkan jenis font pada blog anda. Ada dua cara untuk mengganti font pada blog anda.
1. Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine

• Masuk ke menu TEMPLATE >> EDIT HTML
• Centang Expand Template Widget
• Copy semua kode yang muncul
• Buka notepad dan paste kode yang dicopy tadi
• Tekan Ctrl+H untuk membuka Tool Replace
• Isi kolom Find What dengan Arial
• Isi kolom Replace With dengan BenchNine
• Klik tombol REPLACE ALL
• Copy kode yang sudah berubah tadi.
• Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad
• Simpan Perubahan

2. Mengganti Font Elemen Tertentu Saja
Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template
Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:

• Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
• Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS...

.post h2 {

font-family: BenchNine;

}

.post h2 a, .post h2 a:visited, .post h2 strong {

font-family: BenchNine;

}

.post h2 strong, .post h2 a:hover {

font-family: BenchNine;

}

• Simpan Template 

font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

PERBEDAAN INLINE DAN EXTERNAL JAVASCRIPT

PERBEDAAN INLINE DAN EXTERNAL JAVASCRIPT

Perbedaan Inline dan External Javascript tentu saja terletak pada cara penempatannya. Inline javascript itu adalah kode yang diletakkan di antara tag <script> dan </script> dan ditaruh pada kode template. Lazimnya kode seperti ini biasanya bisa kita temukan tepat di atas </head> dan kode ini dibuat untuk menghasilkan efek yang cenderung lebih atraktif dari css biasa.

Berbeda dengan Inline, .... External javascript adalah kode yang sama dengan kode yang diletakkan di antara tag tadi. Bedanya, kode ini disimpan dalam file berekstensi .js dan dihost pada sebuah server berbeda. Kode ini kemudian "dimuat" dengan menggunakan kode <script type="text/javascript" src="URL extenal javascript"> </script>

Mana yang lebih baik? Jawabnya, tergantung blog anda seperti apa....

Kalau scriptnya pendek, sepertinya masih lebih baik jika script tersebut dibuat secara inline di dalam kode template anda. Berbeda jika kodenya cukup panjang, itu akan lebih baik jika dibuat sebagai eksternal java script.

Kenapa script yang panjang lebih baik digunakan sebagai external javascript? Karena kalau kodenya dipisah akan lebih mudah untuk dicache oleh browser pengunjung blog anda. Artinya jika pengunjung membuka blog anda berkali-kali, maka tidak perlu lagi dibebani dengan pemuatan script ini.

Jadi kalau blog anda memang dipenuhi dengan script yang cukup berat, ada baiknya anda memastikan script tersebut adalah external javascript. Seandainya script tersebut adalah inline javascript dan ternyata cukup panjang ada baiknya anda menjadikannya external. Bagaimana cara mengubahnya menjadi external javascript?

Mudah saja, copy semua kode di antara <script> dan </script> dalam inline javascript tadi. Paste ke dalam notepad dan simpan notepad dengan nama file berakhiran .js. Misalnya: mymenuscript.js. Setelah itu host file javascript ini pada sebuah server dan ambil URL nya. Pastikan anda menggunakan host yang handal dalam kecepatan.

Panggil URL javascript yang tadi sudah anda dapatkan dengan menggunakan kode external javascript. Kodenya seperti ini:

<script type="text/javascript" src="URL extenal javascript"> </script>

Letakkan kode baru ini sebagai pengganti kode <script>.......</script> tadi. Artinya anda harus menghapus kode sebelumnya dan dengan begini inline javascript sudah berubah menjadi external.

MEMBUAT AUTHOR RICH SNIPPET GOOGLE PLUS

MEMBUAT AUTHOR RICH SNIPPET GOOGLE PLUS

Membuat Author Rich Snippet Google Plus adalah salah satu cara untuk menampilkan identitas anda sebagai penulis pada snippet hasil pencarian. Snippet ini mengintegrasikan antara blog dengan akun google plus anda. Apa gunanya mengintegrasikan antara blog dengan akun Google Plus anda? Itu akan dibahas nanti.

Memasang Link Eksternal Pada Blog

• Sekarang masuk ke akun blogger anda
• Buka menu TEMPLATE dan pilih EDIT HTML
• Akan muncul pop up dan klik LANJUTKAN
• Cari kode </title>
• Taruh kode berikut ini tepat di bawah </title>
  <link href='https://plus.google.com/106723632594435066729/posts' rel='publisher'/>
  <link href='https://plus.google.com/106723632594435066729/about' rel='author'/>
  <link href='https://plus.google.com/106723632594435066729' rel='me'/>
• Pastikan anda memasukkan URL Profil Google Plus anda. Jadi ganti angka
  106723632594435066729 dengan angka unik URL GOOGLE PLUS ANDA
  Contoh URL Google Plus:

• Jika sudah, Simpan Perubahan

Integrasi Dengan Akun Google Plus

• Buka akun Google Plus anda
• Pada bagian header ada tombol biru EDIT PROFIL, silahkan diklik

• Scroll halaman edit profil ini ke bawah sampai anda menemukan KONTRIBUTOR UNTUK dan klik di situ.

• Akan muncul pop up. Klik TAMBAHKAN TAUTAN KHUSUS dan isi nama blog anda beserta URL dari blog anda

• Klik SIMPAN
• Kembali ke bagian atas halaman dan klik PENGEDITAN SELESAI

Verifikasi Data Kepengarangan (Authorship)

• Buka Google Plus Authorship
• Masukkan alamat email GMAIL anda pada tempat yang disediakan sudah itu klik DAFTARKAN KEPENGARANGAN

• Anda akan menerima email berisi link verifikasi, silahkan klik link tersebut.
• Proses verifikasi e-mail kepengarangan selesai

TEST AUTHOR RICH SNIPPET GOOGLE PLUS

• Buka link Google Rich Snippet Tool
• Masukkan URL salah satu artikel anda dan klik PRATINJAU

Jika pemasangan sebelumnya sudah benar anda akan melihat hasilnya seperti berikut ini

Semua proses pemasangan rich snippet kepengarangan ini sudah selesai, sekarang kita tinggal menunggu Google Robot untuk mampir dan melakukan pengindeksan ulang pada setiap halaman yang sudah kita buat tadi. Demikianlah cara membuat author Rich Snippet Google Plus.

ALEXA RANK SEMAKIN RAMPING, TERIMA KASIH BANYAK

ALEXA RANK SEMAKIN RAMPING, TERIMA KASIH BANYAK!

Minggu pagi ini saya baru sadar kalau blog ini 3 hari lalu baru saja masuk ke usianya yang ke 8 bulan. Jadi sebelum memikirkan apa lagi yang perlu saya ketik, saya mau mengucapkan terima kasih dulu buat teman-teman blogger yang telah berkunjung atau bahkan setia untuk datang berkali-kali ke blog ini. Karena kunjungan dari teman-teman telah membantu saya merampingkan alexa rank dari blog ini.

Ternyata di usianya yang ke 8 bulan, blog ini berhasil masuk ke ranking alexa 50 ribuan, walaupun dengan jumlah artikel yanng kurang dari 100. Hal ini harap dimaklumi karena kesibukan kerja, jadi saya benar-benar "merangkak" menambah materi SEO di blog ini. 

Dalam artikel ucapan terima kasih ini saya mau menjawab beberapa pertanyaan dari teman-teman blogger yang tidak saya terbitkan karena masalah bahasa yang tidak baku.... (walaupun ada sedikit yang juga saya terbitkan karena saya memberi sedikit ruang bagi bahasa yang tidak baku)....

Khusus untuk para blogger pemula, ternyata banyak yang masih bingung dengan penjelasan SEO di blog ini. Kalau penjelasan SEO sebenarnya bisa dibuat singkat, tapi tetap saja dalam prakteknya nanti akan panjang. Misalnya teman pemula bertanya "Apa tidak bisa dibuat lebih sederhana lagi biar bisa mudah dipahami?"

SEO itu sebenarnya terbagi 3 tahap. Tahap awal, membuat struktur blog anda baik supaya Google bisa dengan mudah memahami penekanan kata kunci di dalam setiap artikel anda. Tahap awal ini biasa kita sebut optimisasi SEO onpage. Tahap kedua adalah membuat artikel yang sesuai dengan standar SEO. Berbeda dengan optimisasi struktur yang hanya dikerjakan sekali saja di awal, optimisasi artikel ini dilakukan setiap kali kita posting. Terakhir itu Optimisasi Offpage untuk membuat blog semakin bereputasi, baik dengan cara promosi blog ataupun mencari backlink.

Tapi walaupun dibuat sederhana seperti di atas, eksekusinya tidak bisa ditutupi akan membuat banyak para pemula pusing. Jadi silahkan sederhanakan konsep SEO sesederhana mungkin di kepala kita, tapi jangan pernah berharap SEO itu mudah.

Kenapa SEO tidak akan pernah mudah? Karena untuk setiap kata kunci yangmendatangkan banyak pengunjung, persaingannya hampir pasti keras luar biasa. Kenapa keras? Karena ada puluhan ribu orang yang menginginkan posisi pertama, sedangkan posisi pertama selalu hanya ada 1. Pernah ikut tes CPNS? Saingan anda untuk satu posisi bisa jadi cuma 100 orang, apakah mudah mendapat posisi itu? Apalagi kalau saingannya ada puluhan ribu.... ini cuma masalah statistik saja.

Jadi lebih baik berburu kata kunci persaingan yang kecil saja.... Tidak apa-apa kalau artikel itu cuma bisa mendatangkan 10 orang per hari. Kalau anda buat 100 artikel dengan jumlah pengunjung yang sama, bukankah sudah mendapat 1000 orang per hari?

Selanjutnya, banyak juga yang bertanya kenapa komentarnya tidak diterbitkan? Jawabnya adalah saya berusaha menyaring kata-kata yang tidak baku dari komentar blog ini. Saya kasih bocoran kata-kata yang paling sering membuat saya menolak komentar teman-teman. Kata "Terima kasih" berada di urutan pertama. Sudah tidak terhitung bagaimana banyaknya variasi bentuk dari ucapan yang satu ini.... sampai-sampai dari 10 ucapan, hanya ada 1 yang menggunakan "Terima kasih". 

Selanjutnya, kata "tidak", tentu saudara juga tahu bagaimana banyaknya ragam kata untuk menyatakan "tidak"..... Setelah itu menyusul beragam "kata gaul" dan lain sebagainya....

Bukannya saya tidak mau gaul, tapi google yang tidak mau gaul. Google menetapkan standar bahwa jika anda membahas sesuatu secara profesional, maka bahasa gaul bukan cara yang baik melakukan itu. Saya sebenarnya cukup iri dengan blogger di barat, hampir semua yang berkomentar menggunakan bahasa inggris yang baik dan benar.... kurang dari 1% saja yang menggunakan bahasa tidak baku. Itupun biasanya berasal dari belahan benua Asia....

Seandainya blogger Indonesia bisa bangga sedikit saja dengan bahasa Indonesia, dan tidak latah memakai bahasa buatan temannya hanya untuk disebut gaul.... Pasti saya tidak perlu melakukan moderasi di blog ini. Jadi harap maklum jika komentar tidak diterbitkan,....tidak ada niat apa-apa....dan saya tetap sangat berterimakasih atas kunjungan teman-teman.

Oh iya, kalau bisa bantu saya juga di eksperimen Google Plus One Club.... Eksperimen ini bertujuan menguji kekuatan Google Plus untuk SEO. Baca artikelnya di sini

Sebagai penutup saya mau mengulangi tujuan saya membuat blog ini. Tujuannya sederhana, yaitu membantu teman-teman blogger pemula memahami bagaimana proses dasar SEO, dan menyadari sejak awal bahwa proses ini bukan sesuatu yang mudah dan instant.

DI MANA KODE SCRIPT GOOGLE ANALYTIC BISA DIDAPAT

DI MANA KODE SCRIPT GOOGLE ANALYTIC BISA DIDAPAT?

Di Mana Kode Script Google Analytics Bisa Didapat? -- Sudah banyak blogger yang bertanya seperti ini melalui komentar. Kebanyakan melewatkan kode script saat pemasangan, dan sebagian lagi kehilangan kode saat mengganti template blog. Jadi apakah kode Google Analytics bisa diambil kembali? Di mana kita bisa melihat lagiscript Google Analytics ini?

Memasang Kembali Kode Google Analytics

Tentu saja kode atau script dari Google Analytics ini bisa diambil lagi, hanya saja memang caranya agak rumit. Seharusnya Google bisa membuat kode script dari Google Analytics ini lebih mudah ditemukan. Bagi anda yang ingin memasang kembali kode ini bisa mengikuti cara berikut ini:

• Buka halaman Google Analytics dan masuk dengan menggunakan akun Google yang anda gunakan mendaftar.
• Setelah masuk anda akan masuk ke halaman BERANDA AKUN seperti di bawah ini

Jika anda sudah melihat halaman BERANDA AKUN silahkan klik link ADMIN seperti pada gambar di atas. Anda akan dibawa ke halaman ADMINISTRASI AKUN

Di halaman ini akan ditampilkan semua NAMA AKUN dari blog yang anda pasangkan Analytics
Pilih nama akun dari blog yang ingin anda ambil lagi kode script Google Analytics. Anda akan dibawa lagi ke halaman administrasi dari NAMA AKUN yang anda pilih tadi

Klik nama Akun seperti yang diperlihatkan panah kuning pada gambar di atas. Anda akan dibawa lagi ke halaman properti dari NAMA AKUN GOOGLE Analytics yang saudara pilih.

• Sekarang anda bisa melihat sebuat tab bertuliskan INFO PELACAKAN. Klik tab tersebut.
• Akan muncul sub page yang baru. Silahkan gulirkan halaman ke bawah, anda akan menemukan kalimat "Ini adalah kode pelacakan Anda. Salin dan tempel kode ini ke dalam kode dari setiap laman yang ingin Anda lacak."
• Tepat di bawah kalimat itu ada sebuah kolom berisikan kode yang kurang lebih terlihat seperti di bawah ini.... (kode XX-XXXXXXXX-X berbeda untuk setiap akun blog)

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'XX-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-Analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

• Masuk ke menu TEMPLATE dan pilih EDIT HTML
• Silahkan paste kode Google Analytics tersebut tepat di atas </head>
• Simpan perubahan pada template dan anda sudah selesai.

Ok, mungkin itu saja yang perlu saya bahas di artikel kode script Google Analytics ini. Mudah-mudahan membantu anda.

Tambahan dari saudara Eddy Wijaya pada komentar di bawah...

"Kalau memang sudah memasang ulang script google analytic tapi status pelacakannya masih "Not Installed".. Mungkin ditunggu saja beberapa waktu, mungkin google butuh waktu buat mengakses halaman kita...