CARA MEMBUAT BLOG KEREN DI BLOGSPOT

Jumat, 31 Juli 2015

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>

Senin, 30 Maret 2015

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 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 == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'>  <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'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'>  <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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 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 == "item"'>

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

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

CARA MEMBUAT BLOG KEREN DI BLOGSPOT

Pages

Blogger news

Blogroll

About

Mengenai Saya

Jumat, 31 Juli 2015

melacak nomer hp seseorang

Senin, 30 Maret 2015

BAGAIMANA CARA MENULIS ARTIKEL BERKUALITAS STANDAR SEO

BAGAIMANA CARA MENULIS ARTIKEL BERKUALITAS STANDAR SEO

CARA MEMBUAT BREADCRUMBS PADA POSTINGAN ARTIKEL

CARA MEMBUAT BREADCRUMBS PADA POSTINGAN ARTIKEL

CARA MEMBUAT ARTIKEL TERKAIT VERTIKAL DENGAN THUMBNAIL

CARA MEMBUAT ARTIKEL TERKAIT VERTIKAL DENGAN THUMBNAIL

BAGAIMANA CARA MEMBUAT TEXT AREA DI BLOG?

MEMBUAT TEXT AREA BIASA

MEMBUAT TEXT AREA DENGAN TOMBOL HIGHLIGHT

BELAJAR HTML DASAR DIV DAN STYLENYA

BELAJAR HTML DASAR DIV DAN STYLENYA

MENGGANTI DAN MENAMBAH STYLE FONT BLOG

MENGGANTI DAN MENAMBAH STYLE FONT BLOG

Popular Posts

Blogger templates

Blog Archive