Belajar Blogspot
Belajar Blogspot
Ihsan Magazine
BAB I Apa Itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Keuntungan Penggunaan CSS Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis! Kekurangan Penggunaan CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
CSS font style menentukan kemiringan font di bagian tertentu. Ada 3 macam style yaitu: normal : default; browser menampilkan font secara normal Italic : browser menampilkan font miring oblique : browser menampilkan font oblique. Perbedaan italic dan oblique:
Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu
trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique. Cara penulisan: property -> font-style value -> normal, italic, oblique Contoh penulisan: h1 { font-size: font-style: } h2 font-size: font-style:oblique; } Hasil: 14px; italic; { 12px;
Ini adalah Heading 1 (H1) menggunakan style italic Ini adalah Heading 2 (H2) menggunakan style oblique
CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya. CSS Font Family Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah
mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family. Cara penulisan: property -> font-family value -> nama-nama font, disarankan menggunakan hanya nama-nama font default Contoh penulisan: h1 font-family: } h2 font-family: } Hasil: { verdana; times new { roman;
Ini adalah Heading 1 (H1) menggunakan font Verdana Ini adalah Heading 2 (H2) menggunakan font Times New Roman Pengenalan HTML Pengertian singkat tentang HTML HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video. Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html". Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini: <html> <head> <title>Titel Websiteku</title> </head> <body> Ini adalah dokumen HTML pertamaku </body> </html> Preview Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <>"dan diakhiri dengan tag penutup " </>". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML. Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor="0000ff">, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value). Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " <html>" dan tag penutup " </html>" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar
maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama. Baca juga Update dari Pengenalan HTML ini di Tutorial HTML. Tag Dasar HTML Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut: <html> <head> <title>Disini titel websiteku</title> </head> <body> Disini adalah konten yang tampil di browser </body> </html> Preview Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html></html>. Kemudian tag " <head></head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser. Tag berikutnya adalah " <title></title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".
Tag "<body></body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia). Baca juga Update dari Tag Dasar HTML ini di Tutorial HTML. Format Font HTML Tag HTML untuk font adalah <font></font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini: <html> <head></head> <body> Untuk membuat jenis font (face): <h1><font face="Verdana">Judul dengan font Verdana</font></h1> <p><font face="Times">Konten dengan font Times</font></p> Untuk membuat ukuran (size): <h1><font size="5">Judul dengan size 5</font></h1> <p><font size="3">Konten dengan size 3</font></p> Untuk membuat warna font (color): <h1><font color="blue">Judul dengan warna biru</font></h1> <p><font color="red">Konten dengan warna merah</font></p> Contoh komplit untuk membuat jenis font (face),size dan color: <h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1> <p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br> tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p> </body> </html> Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size: Atribut face="Jenis font yang digunakan", contoh: face="Tahoma" size="Ukuran dari font (1-7)", contoh: size="3" size="Memperbesar ukuran font", contoh: size="+1" size="Memperkecil ukuran font", contoh: size="-1" color="Warna dari font", contoh: color="blue" color="Warna dari font", contoh: color="#FF0000" Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaannya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemenelemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets: <html> <head></head> <body> Untuk membuat jenis font (face): <h1 style="font-family:verdana">Judul Menggunakan font verdana</h1> <p style="font-family:tahoma">Konten menggunakan font tahoma</p> Untuk membuat ukuran (size): <h1 style="font-size:150%">Judul dengan ukuran 150%</h1> <p style="font-size:80%">Konten dengan ukuran 80%</p> Untuk membuat warna font (color): <h1 style="color:blue">Judul dengan warna Biru</h1> <p style="color:red">Konten dengan warna merah</p> Contoh komplit untuk membuat jenis font (face),size dan color: <p style="fontfamily:verdana;font-size:80%;color:green"> Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br> menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p> </body> </html> Preview Untuk mengetahui lebih lanjut tentang CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.
Baca juga Update dari Format Font HTML ini di Tutorial HTML. Format text HTML Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini: <html> <head> <title>Selamat Datang di Websiteku</title> </head> <body> Ini adalah halaman HTML pertamaku. <p>Aku sedang membuat paragraf dan ini contohnya.</p> <p>Ini contoh paragraf yang lainnya.</p> <p>Ini juga paragraf mm...tapi de-<br> ngan baris baru.<br> Ini baris baru yang lain.</p> </body> </html> Preview Untuk membuat suatu paragraf, tag elemennya adalah <p></p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini: <html> <head> <title>Selamat Datang di Websiteku</title> </head> <body> <hr> <h1>Ini adalah halaman HTML pertamaku.</h1> Dikerjakan oleh: <!-- Tolong isikan dengan nama anda --> <hr> <p>Aku sedang membuat paragraf dan ini contohnya.</p> <p>Ini contoh paragraf yang lainnya.</p> <p>Ini juga paragraf mm...tapi de-<br> ngan baris baru.<br> Ini baris baru yang lain.</p> </body> </html> Preview Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup dapat dilihat di artikel tentang tagtag html tanpa tag penutup. Selanjutnya tag <h1></h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab
lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6. Preview Selanjutnya tag <!----> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikan oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal. Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML : <html> <head></head> <body> <hr> <h1>Ini adalah halaman HTML pertamaku.</h1> Dikerjakan oleh: <!-- Tolong isikan dengan nama anda --> <hr> <p>Aku sedang mempelajari format-format teks.<br> Contoh-contohnya adalah sebagai berikut:</p> <p>Teks Normal<br> <tt>Teks mesin ketik</tt><br> <b>Teks tebal (bold)</b><br> <strong>Teks tebal dengan perintah Strong</strong><br> <i>Teks dengan italic (miring)</i><br> <em>Teks miring dengan perintah Emphasized</em><br> <u>Teks bergaris bawah (underline)</u><br> <strike>Teks tercoret (strike)</strike><br> <big>Teks lebih besar dari normal</big><br> <small>Teks lebih kecil dari normal</small><br> Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br> Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p> </body> </html> Preview Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre></pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi: <html> <body> <pre> <b>PUITUIS ASA</b> Hari ini... Aku sedang belajar... Belajar tentang HTML. Sulit 'ntuk dimengerti, Karena banyaknya teks-teks aneh. Tapi biarlah... Akan kucoba... Sampai berhasil. </pre> </body> </html> Preview
Baca juga Update dari Format text HTML ini di Tutorial HTML. Hyperlink HTML Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url: <html> <head></head> <body> <p>Aku sekarang sedang membuat hyperlink</p> Jika anda ingin mengunjungi Microsoft <a href="http://www.microsoft.com/">Klik disini</a><br> <a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com <p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p> <a href="http://www.mp3.com/" target="_blank">Website Musik</a> <p>Agar hyperlink tidak bergaris bawah:<p> <a href="http://www.mp3.com/"target="_blank" style="textdecoration: none">Website Musik</a> <p>Hyperlink ke suatu halaman tertentu dalam web:<p> <!--dengan catatan anda harus tau nama halaman tujuan tersebut--> <a href="http://htmlcssguides.com/belajarcss/">Link ini</a> akan membawa anda ke halaman belajar css. </body> </html> Preview Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka : <a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>
Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda ""sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="", left= kiri, center= tengah dan right= kanan. <a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a> Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi: <a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a> Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x. <a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a> Dalam contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya ditampilkan, maka hasilnya adalah: Baca juga Update dari Hyperlink HTML ini di Tutorial HTML.
Background HTML Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar). Sekarang kita mulai dengan menggunakan pilihan warna: <html> <head></head> <body bgcolor="#FF99FF"> <p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p> <p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p> </body> </html> Preview Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut. Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini: <body bgcolor="#FFFF00"> <body bgcolor="rgb(250,250,0)"> <body bgcolor="yellow"> Hasilnya akan sama. Ikuti link berikut ini untuk mengetahui Kode Hexadecimal dan Nilai RGB dari suatu warna, tapi maaf untuk nama warnanya cari sendiri aja deh Selanjutnya membuat latar belakang dengan grafik atau gambar. Pertama anda harus punya gambar yang ber-extention .gif, .jpg atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg <html> <head></head> <body background="background.jpg"> <font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2"> <p><font face="Verdana" size="4" color="black">Hai... Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br> Biar
bagaimanapun anda diwajibkan harus menyukainya...</font></p> </body> </html> Preview Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http: <html> <head></head> <body background="http://i52.tinypic.com/nmm2cz.jpg"> <p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p> <p>Mudahmudahan yang punya website ngamuk sekalian deh...siapa takut!!</p> </body> </html> Atribut Tag HTML Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn HTML. Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=nilai. Atribut selalu dicantumkan pada awal tag elemen HTML. Contoh Atribut 1: <h1> mendefinisikan awal sebuah judul. <h1 align=center> memiliki informasi tambahan tentang perataan baris. Contoh Atribut 2: <body> mendefinisikan badan/isi halaman HTML kita.
<body bgcolor=red> akan membuat background layar menjadi merah. Contoh Atribut 3: <table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut). <table border=1> memiliki tambahan informasi mengenai ketebalan garis pada tabel. Selalu Gunakan Tanda Kutip pada Nilai Atribut Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering digunakan, tapi sebenarnya tanda kutip tunggal juga boleh ko. A. Kode link biasa : <a href="URL Tujuan">Anchor Text</a> Misalnya : <a href="http://zicblogger.blogspot.com/">Blog Tentang SEO</a> dan hasilnya seperti dibawah ini : Blog Tentang SEO
Sedangkan untuk membuat link yang SEO Friendly anda hanya perlu menyisipkan kode title kedalam kode link tersebut, untuk mengetahui bagaimana caranya, anda bisa melihat langkahlangkah berikut ini : Cara Menghilangkan lambang obeng dan tang
Login ke blogger dengan ID anda tentunya. Tata Letak. Edit HTML. erti ini : ]]></b:skin>
.quickedit{ display:none; } B. Kode Link yang sudah dioptimalkan <a href="URL Tujuan" title="Judul Link">Anchor Text</a> Misalnya : <a href="http://zicblogger.blogspot.com/" title="Blog Tentang SEO" >Blog Tentang SEO</a> dan hasilnya seperti dibawah ini : Blog Tentang SEO
BAB II
Cara Ganti Background/Latar Belakang Blog 1. Login ke blogger 2. Dari Dasbor ->> Pilih Template. 3. Lalu Klik "Edit HTML", Cari Kode seperti di bawah ini. body { background:#ffffff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#222222; } 4. Ganti kode warna #ffffff di atas dengan warna sesuai yang anda inginkan, anda dapat memilih kode warna html DISNI.
2). Background blog yang menggunakan gambar lalu ingin diganti dengan warna lain. Caranya: a. Masuk ke dashbor blog sobat >> Rancangan >> Edit HTML (centang expand template widget). b. Cari kode berikut (gunakan F3 untuk mempermudah). body { c. Cari dibawah kode tersebut kata background. Contoh: body { background: #000000 url(http://themes.googleusercontent.com/image?id=19aLMMHIWXcxsojpERe8MlodYlS7yd1qQU1wcTStU21I3bbY7bmlrvVCWE474_XXw Wjd) no-repeat scroll top center; Ket: kode di atas adalah blog yang menggunakan background
dengan url= http://themes.googleusercontent.com/image?id=19aLMMHIWXcxsojpERe8MlodYlS7yd1qQU1wcTStU21I3bbY7bmlrvVCWE474_XXw Wjd. Nah, jika sobat ingin mengganti hanya dengan warna, sobat tinggal menghapus url tersebut dan mengganti kode #000000 dengan kode warna lain. Cari kode-kode warna lain di Google ada banyak sekali. Misal saya ingin menggantinya dengan warna biru, maka jadinya nanti seperti ini: body { background: #fff; d. Simpan template sobat. Cara Membuat Readmore Otomatis Berikut langkah langkah dalam membuat read more otomatis : 1. Silahkan login ke blogger terlebih dahulu. 2. Klik Tata Letak. 3. Kemudian klik Edit HTML. 4. Centang Expand Template Widget. 5. Letakkan kode berikut ini tepat diatas kode </head> : <script type='text/javascript'> var thumbnail_mode = "no-float" ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks ********************************************/ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary;
} //]]> </script> 6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda : <div class='post-header-line-1'/> <div class='post-body'> <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/></p> <a expr:href='data:post.url'>Readmore</a> </b:if> <div style='clear: both;'/> sehingga sekarang hanya ada satu <data:post.body/> 7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p> 8. Ganti kode tersebut dengan kode berikut 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:left'><a expr:href='data:post.url'>Read More <data:post.title/></a></span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> 9. Kemudian Simpan Template. Keterangan : summary_noimg = 450 -> untuk tinggi postingan tanpa gambar.
summary_img = 360 -> untuk tinggi postingan dengan gambar. img_thumb_height = 120 > tinggi gambar. img_thumb_width = 150 > lebar gambar. Read More > bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan. Cara Membuat Read more Manual
klik Rancangan dan klik Edit HTML Jangan lupa untuk mencentang Expand Template Widget Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan. Kemudian Cari kode </head>. Dan untuk mempermudah pencarian kode nya anda tekan aja ( CTRL + F ) Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.
<script type='text/javascript'> var thumbnail_mode = "no-float" ;
Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, kamu tinggal merubah di bagian-bagian kode yang berwarna merah bawah ini, dan Ubahlah angkanya sesuai dengan keinginan. summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar summary_img = 340; adalah tinggi potongan artikel dengan gambar img_thumb_height = 100; adalah ukuran tinggi thumbnail img_thumb_width = 120; adalah ukuran lebar thumbnail langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script 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<dat a: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> dan untuk tulisan " READ MORE " bisa diganti sesuai dengan selera anda. setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya. Meta TAG
Cara Memasang Meta Tag SEO Friendly di Blog 1. Pertama, Login ke dashboard blog dan masuk ke Template. 2. Kemudian pilih edit HTML. 3. Jangan lupa Centang Expand Widget Template. 4. Lalu cari kode berikut ini <b:include data='blog' name='all-head-content'/> atau <title><data:blog.pagetitle/></title> atau <title><data:blog.pageName/> - <data:blog.title/></title> atau <title><data:blog.title/></title> 5. Sudah dapat kan kodenya, kalau sudah silakan masukkan kode berikut dibawah nya. <b:if cond='data:blog.url == data:blog.homepageUrl'> <title><data:blog.pageTitle/></title> <meta content=' ISI DENGAN DESKRIPSI BLOG SOBAT ' name='DESCRIPTION'/> <meta content=' ISI DENGAN KEYWORD BLOG SOBAT ' name='KEYWORDS'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/></title> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/> </b:if> <meta content='index, follow' name='robots'/> <meta content=' NAMA PENGGUNA BLOG ' name='author'/> <meta content='2013, ISI DENGAN JUDUL BLOG ANDA ' name='copyright'/> <meta content='1 days' name='revisit-after'/> <meta content='id' name='language'/>
<meta content='id' name='geo.country'/> <meta content='Indonesia' name='geo.placename'/> <meta content='all-language' http-equiv='Content-Language'/> <meta content='global' name='Distribution'/> <meta content='global' name='target'/> <meta content='Indonesia' name='geo.country'/> <meta content='all' name='robots'/> <meta content='all' name='googlebot'/> <meta content='all' name='msnbot'/> <meta content='all' name='Googlebot-Image'/> <meta content='all' name='Slurp'/> <meta content='all' name='ZyBorg'/> <meta content='all' name='Scooter'/> <meta content='ALL' name='spiders'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <meta content='general' name='rating'/> <meta content='never' name='Expires'/> 6. Simpan template, dan tunggu hasilnya. INI tidak instant, karena anda harus menunggu google untuk mengindex dan menelusuri blog anda terlebih dulu. Demikianlag cara memasang Meta TAG SEO Friendly Untuk Blogspot, silakan di aplikasikan di template blogger sobat. Semoga berhasil Cara Membuat Breadcrumbs 1. Login ke blogger (Sebaiknya Back-up dulu templat anda jadi jika nanti gagal tinggal Upluad lagi) 2. Masuk Kedalam Menu TEMPLAT Anda 3. Pilih Edit HTML. 4. Centang tulisan "expand template widget".
5. Lalu cari kode ]]></b:skin> : ( untuk mempermudah pencarian Gunakan CTRL dan F Sebagai Bantuanya.) 6. Silahkan Anda Copy kode CSS untuk Breadcrumbs di bawah ini dulu dan paste tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
7. . Lanjutkan cari kode seperti ini lagi <b:includable id='main' var='top'> Jika sudah Ketemu Ganti kode tersebut dengan kode di bawah ini
<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"'> <!-- 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'> » <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"'> <!-- breadcrumb for the label archive page and search pages.. --> <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'/>
8.Dan Yang Terakhir simpan template anda. Hasilnya : Home >> Nama Label >> Judul Postingan
Dan ada juga yang seperti ini Log-in ke akun blogger sobat dulu. 2. Klik Rancangan > Edit HTML > Klik Download template lengkap dulu sebelum merubah template aslinya agar sewaktu - waktu ada kesalahan kita dapat memperbaikinya. 3. Letakkan kode berikut diatas kode ]]></b:skin>. (gunakan CTRL + F untuk dapat mencari lebih mudah) .breadcrumbs { padding: 5px 5px 5px 0; margin:0; font-size:90%; line-height:1.4em; border-bottom:1px solid black; } 5. Sobat cari kode seperti ini. <b:includable id='post' var='post'> 6. Pastekan kode berikut ini tepat dibawahnya. <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> You are Here > <a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> > <data:post.title/> </div>
</b:if> </b:if> 7. Simpan template dan coba buka postingan sobat apakah sudah ada breadcrumbsnya diatas postingan. Kalau sudah ada selamat sobat baru saja membuat breadcrumbs navigasi diatas postingan blog. BAB III SEO onpage adalah teknik mengoptimalkan website atau blog agar disukai oleh mesin pencari. Disebut onpage karena yang dioptimalkan adalah website itu sendiri, bukan dengan cara dari luar website seperti mencari backlink atau memasukkan artikel ke social bookmark. Mesin pencari akan mencari halaman-halaman yang paling cocok dengan istilah pencarian yang dimasukkan pengguna. Itu sebab, penting untuk membidik kata kunci yang dicari setidaknya lebih dari 1000 kali dalam sebulan. 1. Membeli nama domain yang sesuai dengan frase atau kata kunci yang Anda bidik. Misalnya, jika kata kunci yang Anda bidik adalah pose yoga maka nama ideal domain Anda adalah poseyoga.com. Jika tidak bisa mendapatkan nama yang sama persis, coba gunakan tanda hubung atau menambahkan sebuah kata sebagai akhiran seperti poseyogaplus.com. Anda bisa menambahkan kata awalan tetapi kata akhiran cenderung memiliki peringkat lebih baik di mesin pencari. 2. Pastikan kata kunci muncul dalam URL halaman.
Hal ini telah tertangani jika nama domain telah mengandung kata kunci. Namun jika tidak, Anda dapat melakukan SEO onpage pada sub-halaman. Jadi misalnya Anda akan memiliki URL seperti domainanda.com/pose yoga.
3. Pastikan kata kunci muncul dalam nama website dan dalam meta tag keyword. Jika tidak tahu apa artinya ini, Anda perlu memastikan bahwa web developer Anda memahami tentang hal ini. Tag keyword mungkin tidak sepenting dulu tapi masih layak digunakan sebagai bagian dari strategi SEO onpage Anda. 4. Masukkan kata kunci ke dalam headings (judul dan sub judul artikel). Jika Anda dapat menempatkan kata kunci ke dalam berbagai tingkatan heading seperti heading 1 (h1), heading 2 (2), dll, ini akan menarik perhatian mesin pencari. Idealnya, tempatkan kata kunci setidaknya ke heading 1, heading 2 dan heading 3. 5. Buat kata kunci menonjol. Buat kata kunci menonjol dengan membuatnya menjadi huruf tebal, huruf miring, atau garis bawah. Mesin pencari menganggap katakata dengan format khusus sebagai sesuatu yang penting. 6. Jika Anda memiliki sebuah gambar pada halaman web, masukkan kata kunci ke dalam tag alt . Jika tidak memiliki gambar, Anda mungkin ingin menemukan gambar yang relevan untuk artikel Anda. Anda tidak hanya dapat menggunakannya untuk SEO onpage tetapi juga dapat menambah daya tarik artikel bagi pembaca.
7. Membuat kata kunci muncul dalam kalimat pertama dan kalimat terakhir pada artikel Anda. Mesin pencari sering lebih memperhatikan awal dan akhir konten artikel. Hal ini penting untuk meningkatkan SEO onpage Anda SEO OFFPAGE . SEO OFF Page merupakan jenis atau teknik OPTIMASI SEO yang kamu lakukan dibelakang layar. Tidak ada seorangpun yang tahu apa yang kamu lakukan untuk meng-optimasi seo off page blog. Tujuan dari optimisasi Offpage adalah membuat robot merasakan blog kamu berautoritas, dan membuat semakin banyak orang yang menemukan blog kamu. Adapun unsur yang dioptimasi dalam SEO OFFPage hanya satu, yakni Mencari dan mendapatkan backlink berkualitas dan Relevan. Engine. Google sangat suka backlink yang berkualitas dan relevan. Tetapi Google tidak suka apabila backlink yang kamu dapatkan berlebihan. Misalnya, kamu mempunyai blog baru, lalu kamu beri 5000 backlink ke blog baru tersebut, maka Robot akan menandai blog tersebut dan bisa-bisa sudah dicap buruk oleh Robot. Jadi carilah backlink secara natural, minimal 50-100 backlink berkualitas perharinya. Lalu bagaimana cara mendapatkan backlink yang berkualitas? - Submit blog ke web directory - Submit blog ke social bookmark - Berkomentar pada blog dofollow - Berkomentar di blog/situs high pagerank Mencari dan mendapatkan "Backlink Relevan" Bagaimana dengan "backlink yang relevan"? Backlink yang relevan maksudnya adalah misalnya blog kamu bertema teknologi, dan blog kamu mendapat backlink dari situs bertema makanan, maka Google
menilai backlink tersebut tidak relevan. Jadi cari lah backlink dari situs yang sejenis atau seniche agar reputasi blog kamu bagus di SERP. Dan sebagai hadiahnya, blog kamu akan mendapatkan Page Rank. Seo off page merupakan ruh dalam mengangkat popularitas sebuah situs. Daftar Backlink Luar Negeri : http://www.quantum-controls.co.uk/blog/tech-zone/soft-starters/whatis-the-difference-between-a-vsd-and-a-soft-start-starter-2 http://www.veredictotv.cl/consultorioenlinea/?p=31 http://burnmovement.com/?p=124 http://videosarchive.org/music/music/bruno-mars-the-lazy-song-cover http://dietsolutionreview.w-website.com/q-a/what-is-the-dietsolution-program http://throughourlens.asianweek.com/?p=21 http://www.thetradecartel.com/excuse-the-mess http://www.sleekpreview.com/2011/execflyer-and-pinnacle-riskmanagement-team-up-to-provide-air-charter-with-extra-security-3 http://www.stodcentral.com/slovenia-and-austria-2 http://nerag01.byethost7.com/?p=22 http://www.veri-tesalon.com/470.html
http://fememe.pl/index.php/smieszne-obrazki/zarcie-z-wielkanocy http://www.piekna-miejscowka.pl/xbox-360-slim-halo-reach-edycjaprzegladu http://arrowshopping.com/classifieds/for-sale/ge-black-microwaveabove-stove-laguna-hills-100 http://medicalmarijuanatexas.org/2011/04/21/fed-threat-leaveswashington-dispensary-bill-in-peril http://365webmarket.com/2011/10/05/lg-26ld350-26-inch-720p-60-hzlcd-hdtv http://blog.cesaraparato.com/?attachment_id=423 http://www.womanheels.com/blog/cheap-heels-for-women-pumpsshoes-boots-thick-high-heeled-shoes-the-necessary-item-for-girls-togo-shopping http://laws.lawsnow.com/2011/01/16/laws-the-bone-garden-a-novel http://www.f1.menert.pl/jak-grac-na-gitarze-strojenie-gitary-porad http://jyzj.waqn.com/?p=923 Trik Mudah Seo Offpage : share di ping.sg share di lintas.me dan infogue.com share populerkan.com share m.thecrowdvoices.com membuat blog dummy di blogdetik dan myopera Buat Postingan di forum detik,kompas,kaskus dengan link sumber blog anda Share Di Debuk.com share di pastebin.com
buat blog di opera dan di http://www.lautanindonesia.com/ dan di blog.ca trus copas aja artikel blog ente yang mana saja membuat mirror text di http://textmirror.net shorting url di http://urlarea.com bikin iklan di messiklan.com share di http://sumbawanews.com bikin iklan di iklanterpopuler.com daftar http://pressabout.us/ submit di http://www.negeriku.info/ bikin iklan di http://jawaraiklan.om-onny.com
BAB IV CARA PASANG IKLAN List Publisher Iklan Indonesia yang disarankan 1.Sitti.co.id 2.Adsensecamp 3.PPCindo 4.Idblognetwork
Cara pasang iklan DI SAMPING ATAS 1.Log in ke blogger dengan akun yang anda punya. 2.Pergilah ke rancangan edit Html centang kotak Expand Template Widget. 3.Carilah kode <data:posts.body/> jika ada dua pilih yang ke-dua. 4.Letakkan kode di bawah ini sebelum kode <data:post.body/> yang ke-dua tadi. Untuk iklan adsense atau PPC tampil di sisi kiri postingan :
<b:if cond='data:blog.pageType == "item"'> <div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'> <--Simpan Kode Iklan Disini--></div></b:if> Untuk iklan adsense atau PPC tampil di sisi kanan postingan : <b:if cond='data:blog.pageType == "item"'> <div style='float:right;width:300px;height:250px;padding:0 0px 0px 0;'> <--Simpan Kode Iklan Disini--></div></b:if> Catatan :
Anda harus memparse dulu kode iklan/ adsense anda. Anda bisa mengunjungi situs ini untuk memparse kode iklan/ adsense anda http://www.blogcrowds.com/resources/parse_html.php .Jika sudah di parse ganti kode <--Simpan kode iklan disini--> dengan kode iklan/ adsense yang sudah anda parse tadi.
Penting !
kode widht:300px, dan height:250px .itu Adalah ukuran dari iklan anda, anda bisa mengubahnya sesuai keperluan anda. Saran saya pasang iklan header aja teman, soalnya katanya sih peluangnya juga banyak untuk mendapatkan klik dari pengunjung blog anda. DIBAWAH POST
1. Login ke Blogger.
5. Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>, maka letakkan kode script yang tadi sudah sobat parse tepat dibawah kode<data:post.body/> yang pertama.
<div style='float:center'> LETAK KODE IKLAN YANG SUDAH DI PARSE </div> Maka iklan akan terpasang di bagian bawah tengah, untuk rata kiri tinggal sobat ganti saja dari center ke left.
7. Jika sobat sudah menggunakan read more dan juga artikel terkait seperti blog saya, maka letakkan kode script iklannya setelah kode artikel terkait.
Untuk mencoba tampilan review yang anda buat secara online,coba saja di : http://w3schools.com/
BAB V Tips dari saya adalah anda harus sering-sering main di forum ads-id.com Dan anda harus sering terupdate pikiran anda untuk menelurkan posting berkualitas dan mampu mebaca kebutuhan para netter Jika anda blog-blog yang sangat terkenal yang anda ketahui atau sering anda buka,jangan sungkansungkan untuk berkomentar dan tinggalkan link disana. Terima Kasih.
Biodata Penulis
Muhammad Ihsan,Lahir di Jakarta 17 juli 1995, adalah pelajar yang cinta pada game,tergila-gila dengan musik dan bisa main bass,dia juga seorang yang up-todate dalam dunia jurnalistik dia adalah pemuda yang agak pintar,tinggi,dan dikenal baik hati kepada temannya, dia slalu serius kalau bicara tentang game, ia terinspirasi oleh Radityadika,karna novelnya yaitu:kambing jantan bisa terkenal lewat blog, dia berpikir :kalau ia bisa mengapa saya tidak?lalu ia membuat blog dengan judul:ihsangamerz.blogs,karna ia sangat mencintai game,dan blog nya sekarang masih aktif adalah yang "Ihsan Magazine" dan ia percaya kalau suatu saat nanti,gamer akan jadi profesi terkenal dan tidak dianggap sebelah mata. begitu juga blogger,ia percaya nanti akan ada dimana akan ada profesi utama proffesional blogger dan juga ada sarjana blogger. Situs Resmi : http://ihsan-magazine.blogspot.com Fanpage : http://www.facebook.com/IhsanMagazine