Sabtu, 12 September 2015
Minggu, 12 Juli 2015
Cara Setting Robots.txt di Blogger / Blogspot
![robots.txt robots.txt](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfv84gZZmml8rnxe1OoWxXsdc2jkuIgjUWxlZIv7Dzf7y8EwUq3irtv2j5xlub5r_6l-9_35IGuULCT_c9Ew5W16igBLrc-OMaYG5fx6wzOvsuCipFhG7drdeAARCN0Q5bzMwYIucu1n0/s1600/robots-txt.jpg)
Untuk lebih memahami pengertian dan cara kerja robots.txt, supaya lebih difahami, akan saya buat soal jawab seperti pada artikel Seputar Algoritma Hummingbird.
Apa itu robots.txt?
Robots.txt adalah perintah bagi robot mesin pencari untuk menelusuri atau tidak menelusuri halaman pada blog kita. Boleh dikatakan robots.txt adalah filter blog kita dari mesin pencari.Apakah setiap blog mempunyai robots.txt?
Ya, semua blog sudah mempunyai robots.txt yang diberikan oleh blogger. Secara default robots.txt pada blog seperti ini :User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://namablog/feeds/posts/default?orderby=UPDATED
Untuk melihat robots.txt default, silahkan ketik dibrowser http://namablogsobat.blogspot.com/robots.txtApa arti dari kode-kode di atas?
User-agent: Mediapartners-GoogleRobot Google Adsense merayapi blog
Disallow:
Yang tidak diperbolehkan tidak ada
User-agent: *
Semua robot Search Engine / mesin pencari
Disallow: /search
Tidak diperbolehkan merayapi folder search dan setrusnya, seperti ..../search/label dan ... search/search?updated...
Allow: /
Mengizinkan semua halaman untuk dirayapi, kecuali yang tertulis pada Disallow di atas. Tanda (/) kurang lebih artinya nama blog.
Sitemap: http://namablog/feeds/posts/default?orderby=UPDATED
sitemap atau alamat feed blog kita.
Kenapa label tidak dimasukan ke pencarian?
Dengan penulisan kode default Disallow: /search, artinya perayapan untuk label seperti alamat http://namablog.com/search/label/Tutorial, nantinya tidak akan dirayapi oleh mesin pencari karena Label bukan URL yang real menuju satu halaman tertentu.Bagaimana cara mencegah robot pada halaman tertentu?
Untuk mencegah google merayapi halaman tertentu di blog sobat, katakan sobat tidak ingin halaman about me diindex oleh mesin pencari. Untuk URL about me pada blog sobat misal : http://namablogsobat.blogspot.com/p/about.htmlMaka untuk robots.txt, silahkan copy kode defaut di atas, tambahakan halaman yang tidak diperbolehkan, hasilnya seperti ini :
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Disallow: /p/about.html
Allow: /
Sitemap: http://namablog/feeds/posts/default?orderby=UPDATED
Dimana cara edit robots.txt?
Untuk menambahkan atau editing robots.txt, masuk ke Setelan > Preferensi Penelusuran, pada Robots.txt klik Editkemudian klik Ya, kemudian tulis kode robots.txt yang diinginkan > Simpan PerubahanSaya tidak pernah utak atik robots.txt, bagaimana?
Tidak apa-apa, blog sobat tetap akan dirayapi oleh robot-robot mesin pencari karena seperti saya sebutkan sebelumnya, setiap blog sudah mempunya robots.txt default.
Hati2 dengan penggunaan robots.txt, apabila salah penulisan bisa jadi blog sobat diabaikan oleh mesin pencari.
Widget Label dengan Counter Box
![widget label widget label](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBsJDa4a0z-Lp2QvRHOLF_p-qey-TvBw0xmsDxBTsr4RXVm_nb9CrnVDjvkQq6Oir5VvbddPoVRKWpV5bjJvCGc2mbWpq84UIcexyu7lxPCbMz4nOHBqJyPUo5Aw1eW3kDVaA95svBFk/s1600/label-block-counter.png)
Mungkin sobat sering melihat Widget Label dengan counter seperti itu. Saya pribadi pertama menemukan di DeluxeTemplates.net, kemudian di PremiumBlogTemplates.com dan di DTE.
Bagi sobat yang mau menerpkannya, berikut langkah-langkahnya :
Langkah 1 : Buat widget Label, centang Tampilkan jumlah entri per label.
Langkah 2 : Simpan kode ini di atas
]]></b:skin>
atau </style>
#Label1 li a {color: #2c3e50;text-decoration:none;}
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
#Label1 li .label-counter {float:right;background-color:#20aea6;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}
#Label1 li:hover .label-counter {background-color:#255e96;color:white}
Silahkan atur kembali warna sesuai keinginan sobat.
CSS di atas tidak mutlak pada
#Label1
, apabila ada beberapa label pada template sobat silahkan pilih dan edit menjadi#Label2
atau #Label3
dst.Langkah 3 : Pada Label terpilih, cari kode :
<span dir='ltr'>(<data:label.count/>)</span>
ganti mejadi
<span class='label-counter'><data:label.count/></span>
Pada hasil akhir, apabila jumlah postingan lebih banyak maka akan lebih lebar seperti ini 123 dibanding yang lebih sedikit seperti ini 32. Untuk membuat ukuran yang sama, pada
silahkan sesuaikan ukuran pixel sesuai selera sobat.
#Label1 li .label-counter
tambahkan ukuran fixed :width:25px
silahkan sesuaikan ukuran pixel sesuai selera sobat.
Mengenal Tag Pre
Pre Tag - Ada beberapa pertanyaan yang diajukan oleh +Fajri Andaviar seputar tag
Pertanyaan2 itu nantinya akan coba saya jawab satu per satu, walaupun sudah saya tulis dikolom komentar. Akan tetapi sebelum itu, saya ajak sobat mengenal lebih jauh apa itu tag
Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag
Untuk lebih memahaminya coba sobat copy kode ini pada postingan (mode HTML).![html](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaClYkAFPlbcNDGNIzQymeB6CwNxgbY8IdABEs80SyeJtX8t1oXgwo8YPthVDbaNl4_zw1FxVC0Psmr4LjCrpEWrLDMBa91hEhKwFw2sP3J0S9gWNDhvHWcnf8-1JROWse32lUICnkug/s1600/compose-html.png)
kemudian lihat hasilnya pada mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag
Banyak yang menggunakan
Kalau melihat pengertian
Tapi kalau dibandingkan, lebih baik menggunakan tag
1. Struktur HTML lebih mudah difahami, lihat gambar :
Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Sobat akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan
2. Standar huruf menggunakan monospace.
Artinya, tanpa CSS pun tag
3. Bisa disisipi SyntaxHighlighter (Kode warna warni).
Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.
Mungkin masih banyak kelebihan lainnya, silahkan bisa sobat cari dan temukan.
apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :
Mana yang bagus antara keduanya?
Dua-duanya bagus, kalau kecepatan PRISM lebih cepat loadnya dibanding Highlight.js dari Software Maniac. Saya pribadi menggunakan Highlight.js supaya bisa digunakan pada kolom komentar.
Tag
1. Browser Support :
2. Atribut
3. Contents:
Teks. Beberapa tag yang valid pada tag
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
4. Valid Context :
blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.
Selengkapnya : Disini
pre
. Diantara pertanyaan yang diajukan adalah: Apa bedanya PRE dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode? Bagaimana Cara membuat kode warna-warni?saya suka menggunakan blockquote, bagaimana?Pertanyaan2 itu nantinya akan coba saya jawab satu per satu, walaupun sudah saya tulis dikolom komentar. Akan tetapi sebelum itu, saya ajak sobat mengenal lebih jauh apa itu tag
pre
.
PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre
maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.
Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag
pre
, spasi akan tetap.Untuk lebih memahaminya coba sobat copy kode ini pada postingan (mode HTML).
![html](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaClYkAFPlbcNDGNIzQymeB6CwNxgbY8IdABEs80SyeJtX8t1oXgwo8YPthVDbaNl4_zw1FxVC0Psmr4LjCrpEWrLDMBa91hEhKwFw2sP3J0S9gWNDhvHWcnf8-1JROWse32lUICnkug/s1600/compose-html.png)
<pre>
ini adalah contoh
tag pre
coba tulis
seperti
ini di
blog sobat
</pre>
<p>
ini adalah contoh
tag pre
coba tulis
seperti
ini di
blog sobat
</pre>
kemudian lihat hasilnya pada mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag
pre
, spasi akan dipertahankan, berbeda dengan penggunaan tag p
hasilnya akan lurus atau berjejer ke bawah.
pre
dan blockquote
Banyak yang menggunakan
blockquote
untuk berbagi kode. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? blockquote
atau pre
?" Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote
.Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. sobat akan lebih tertarik pada paragraf ini, daripada di atasnya.
Kalau melihat pengertian
blockquote
, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeriblockquote
merupakan 'blok kutipan'. Menurut saya sah2 saja menggunakan blockquote
sebagai tempat kode.Tapi kalau dibandingkan, lebih baik menggunakan tag
pre
daripada blockquote
untuk kode. Berikut ini kelebihan tag pre
dibanding blockquote
:1. Struktur HTML lebih mudah difahami, lihat gambar :
![pre dan blockquote](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHBCcgaV12CJYuPU8WtetX0UYD9Vq4xIaslyoEPLjSIn8ltREqwlCVGFRam1VCO6wLYAQrF9REGy3muwRXrZBOcmAw1MahGPPAIsU0N5YJRKtLr6qGw0ZTOm41RcWr81JXImeIuWjPkec/s1600/pre-dan-blockquote.png)
Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Sobat akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan
blockquote
, rada susah untuk memahami struktur htmlnya.2. Standar huruf menggunakan monospace.
Artinya, tanpa CSS pun tag
pre
akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.3. Bisa disisipi SyntaxHighlighter (Kode warna warni).
Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.
Mungkin masih banyak kelebihan lainnya, silahkan bisa sobat cari dan temukan.
Bagaimana Cara Menulis Kode dengan Tag PRE?
Untuk penulisan standar seperti ini<pre>
isi kode
</pre>
apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :
<pre><code>
isi kode
</code></pre>
atau
<pre lang="css">
isi kode
</code>
dan lain-lain
Apabila ingin menggunakan syntaxhighlighter, mana tutorialnya?
Di blog ini saya sudah share 2 SyntaxHighlighter berikut cara penulisannya, yaitu PRISM dan Highlihgt.jsMana yang bagus antara keduanya?
Dua-duanya bagus, kalau kecepatan PRISM lebih cepat loadnya dibanding Highlight.js dari Software Maniac. Saya pribadi menggunakan Highlight.js supaya bisa digunakan pada kolom komentar.
Tag pre
Details
1. Browser Support :
- Netscape 2, 3, 4, 6, 7 dst
- Chrome 1 dst
- Firefox 1 dst
- Internet Explorer 2, 3, 4, 5, 6 dst
- Opera 3, 4, 5, 6, 7, 8 dst
- Safari 1 dst
- WebTV / MSNTV
- AvantGo Palm OS
- AvantGo Windows CE
- HTML 3.2, 4.0
- XHTML 1.0
- XHTML Text Module, XHTML Legacy Module
2. Atribut
- align (optional)
- class (optional)
- dir (optional)
- id (optional)
- lang (optional)
- onclick (optional)
- ondblclick (optional)
- onkeydown (optional)
- onkeypress (optional)
- onkeyup (optional)
- onmousedown (optional)
- onmousemove (optional)
- onmouseout (optional)
- onmouseover (optional)
- onmouseup (optional)
- style (optional)
- title (optional)
3. Contents:
Teks. Beberapa tag yang valid pada tag
pre
tag: a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
4. Valid Context :
blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.
Selengkapnya : Disini
Membuat Nomor Otomatis pada Blockquote
![penomoran pada blockquote](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienPd3wXTPYoSXP7X5ehtVML5vXEboUSMQB9M0utSvTXi0IEgH0v1XAb3dsP8BooowL4v8OrRgKznkoOH0F2cLCycVIDotXXCTV4cfmsDxt6jwWQ0lfXzJYLJ8m5dND0ihzw-k4yJjXfE/s1600/penomoran-otomatis.png)
blockquote
untuk berbagi kode. Walaupun sebenarnya saya lebih menganjurkan penggunaan tag pre
dibandingblockquote
. Selengkapnya sobat bisa baca : Mengenal Tag PRE.Bagi sobat yang masih setia dengan penggunaan blockquote, saya coba membuat penomoran otomatis pada Blockquote. CSS nya saya modifikasi dari tutorial DTE dalam 'membuat penomoran otomatis pada tag PRE'.
Simpan kode ini di atas
]]></b:skin>
atau </style>
blockquote {
background-color:#eee;
font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
color:#444;
overflow:auto;
margin:0 0 1em;
padding:1em;
}
blockquote,
blockquote .line-number {
/* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */
font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
display:block;
white-space:pre;
}
blockquote .line-number {
float:left;
margin:-1em 1em -1em -1em;
text-align:right;
background-color:#f1f1f1;
color:#acacac;
padding:1em .2em 1em .2em;
border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}
blockquote .line-number span {
display:block;
padding:0 .7em 0 1em;
}
blockquote .cl {
display:block;
clear:both;
}
Simpan kode ini di atas
</body>
<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j+1) + '</span>';
}
}
//]]>
</script>
Semoga bermanfaat...
Membuat Judul Pada Tag Pre
![Membuat Judul Pada Tag Pre Membuat Judul Pada Tag Pre](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJNCVs74o6p4OyqtuDUzdbkgOb9zsuj6ILRA5P45cRFXmTGcRAamxzGGI6s46fkiKr29jW9hmW5Zb33vsnFliuhRJXQ0uXgQmQDmS3OHqRuZf7BqmS5PKzQXiTxJ1zb1umEvBjeagI9Vw/s1600/code-icon.jpg)
Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi sobat yang ingin menggunakan nya, silahkan simpan kode ini di atas
]]></b:skin>
atau </style>
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype="CSS"]:before{background-color:#5fbbba}
pre[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre[data-codetype="JQuery"]:before{background-color:#99c262}
Bagi sobat yang menggunakan tag
blockquote
apabila ingin menggunakan cara ini, tinggal mengganti CSS diatas daripre
menjadi blockquote
.Untuk penulisan, tambahkan
data-codetype="JenisKode"
seperti contoh di bawah ini
Langganan:
Postingan (Atom)