Berbagi Tutorial Bloggies

Memasang Domain CO.VU Gratis Selamanya

2015-05-14T00:03:00.000+07:00

Contoh Domain (dot)CO(dot)VU

Memasang Domain CO.VU Gratis Selamanya - Layanan pemberi domain gratis ini sangat membantu blogger yang menyukai hal yang simple tanpa mengeluarkan biaya. Domain ini membuat link blog menjadi lebih pendek contohnya bertubies.blogspot.com menjadi www.bertubies.co.vu sehingga blog pun terlihat lebih professional. Untuk menambah sedikit pengetahuan tentang co.vu ini, saya akan memberitahu arti vu yang ada dibelakang domain. Jadi, kata "VU" merupakan singkatan dari Vanuatu, sebuah negara yang berada di kawasan lautan pasifik dekat Australia.

Cara Mendaftarkan Domain dan Akun

1. Kunjungi CODOTVU
2. Isi kotak "Enter a Domain Name" dengan nama domain yang diinginkan. Contoh: bertubies
3. Klik Search.
4. Kalau alamat tersedia, klik Register Now. Kalau tidak tersedia, coba buat nama lain.
5. Isi Username, Email, dan Password Anda di kotak formulir. Jika ingin cara cepat, Anda bisa daftar dengan menggunakan akun facebook.
6. Klik Create Account.
7. Kemudian, Anda buka Email Anda untuk verifikasi akun tersebut.
8. Selesai. Sekarang Anda sudah punya akun dan domain baru.

Tapi, belum seluruhnya selesai. Sekarang Anda harus mengarahkan domain tersebut untuk mengganti domain lama Anda.

Custom Domain Blogger: Cara Mengganti Blogspot ke CO.VU

1. Masuk ke akun Blogger Anda. Tapi jangan tutup website CODOTVU nya.
2. Klik blog yang akan dirubah.
3. Klik Settings/ Setelan.
4. Pada tab Basic terdapat menu Penerbitan/ Publishing, klik +Set up a third-party URL for your blog
6. Masukkan alamat co.vu Anda. Contoh: www.bertubies.co.vu
7. Klik Simpan.
8. Akan ada pesan error. Tapi, jangan khawatir. Terdapat 2 kolom yang berisi kode-kode, Copy kode-kode tersebut kemudian kembali ke website codotvu (Lihat Gambar)

9. Pada website codotvu, Paste kode-kode tadi di kolom yang disediakan (Lihat Gambar)

10. Kemudian Klik Create Verification CNAME.
11. Anda kembali lagi ke Blogger.
12. Klik Simpan.
13. Jika sudah tersimpan, klik Edit.
14. Centang kotak check box dengan tulisan Redirect bertubies.co.vu to www.bertubies.co.vu.

15. Klik Simpan. Selesai.

===

Cara Memasang Scroll Untuk Blog Archive

2015-03-26T11:40:00.000+07:00

Cara Memasang Scroll Untuk Blog Archive - Melalui Blog Archive, pengunjung dapat dengan mudah menelusuri postingan/ artikel suatu blog karena semua artikel yang telah dibuat akan secara otomatis ditampilkan pada Blog Archive. Jadi pemakaian widget Blog Archive bisa dikatakan cukup penting sebagai navigasi bagi pengunjung.

Blog Archive merupakan salah satu widget yang sudah disediakan oleh Blogger, jadi untuk memasang Blog Archive itu sangat mudah. Berikut ini adalah Cara Pemasangan Blog Archive Blogger di Sidebar.

1. Log in akun Blogger Anda.

2. Masuk ke Layout.

3. Klik Add A Gadget.

4. Pilih Blog Archive.

5. Save.

Setelah memasang Blog Archive, Anda bisa lihat hasil tampilan widget tersebut di sidebar Anda. Jika Anda memiliki postingan artikel yang cukup banyak setiap bulannya maka semua judul akan ditampilkan dan akan membuat tampilan sidebar dipenuhi oleh deretan judul artikel. Nah, untuk membuat tampilan Blog Archive menjadi lebih rapi dan ringkas, Anda dapat memasang scroll box ini. Silakan ikuti Cara Memasang Scroll Untuk Blog Archive.

Tampilan Sebelum dan Sesudah memakai Scroll Box

1. Masuk ke Template Blog Anda.

2. Klik Edit HTML.

3. Dengan menggunakan fungsi find pada keyboard (tekan ctrl + F serentak), cari kode.

<div id='ArchiveList'>

4. Lihat kode yang ada tepat di atas <div id='ArchiveList'>, Anda akan menemukan kode di bawah ini.

<div class='widget-content'>

5. Gantikan kode <div class='widget-content'> yang Anda temui di langkah 4 dengan kode di bawah.

<div class='widget-content' style='overflow:auto; height:200px'>

Anda dapat mengatur ketinggiannya dengan mengganti 200 dengan ukuran yang dibutuhkan.

Preview Kode

Sebelum :

<div class='widget-content'>
<div id='ArchiveList'>

Setelah memasang scrollbox :

<div class='widget-content' style='overflow:auto; height:200px'>
<div id='ArchiveList'>

6. Save. Lihat hasilnya.

===

Membuat Daftar Isi atau Sitemap Blog Responsive

2015-03-08T22:09:00.000+07:00

Demo

Cara Membuat Daftar Isi atau Sitemap Blog Responsive dan Keren - Tutorial ini akan menampilkan semua judul artikel berdasarkan label blog Anda secara terurut dari huruf A-Z. Selain itu, tutorial ini akan sangat berguna untuk saat ini karena sudah banyak sekali para blogger yang menggunakan template yang sudah responsive pada smartphone android dan tablet. Jadi, ini akan sangat cocok untuk dipasang pada blog Anda yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan saya share.

Kenapa harus responsive? tentunya agar daftar isi (sitemap) Anda bisa tampil dengan sempurna saat pengunjung mengunjungi laman daftar isi Anda melalui smartphone. Jadi, dengan menggunakan Daftar Isi Responsive ini, Anda dapat menyajikan daftar isi blog Anda sesuai dengan keadaan pengguna dan pembaca blog Anda agar lebih nyaman dan mudah dalam membaca artikel di blog Anda.

Langsung saja ikuti tutorial Membuat Daftar Isi atau Sitemap Blog Responsive.

1. Masuk ke akun Blogger Anda.

2. Terdapat dua pilihan tempat untuk memasang script daftar isi ini.

Klik "New Post" > Klik tab "HTML" bukan Compose. (Pasang di Halaman Postingan)
Klik "Pages" > Pilih "New Page" > Klik tab "HTML" bukan Compose. (Pasang di Halaman Statis)

3. Copy kode berikut.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #FF427E;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#F9D7E3 0%,#FA8AA8 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#FA8AA8),color-stop(1,#F9D7E3));
border:1px solid #FF427E;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#F83777;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#F9D7E3 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#F9D7E3));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://bertubies.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

4. Ganti tulisan berwarna merah dengan URL blog Anda.
5. Simpan dan lihat hasilnya.

===

Widget Random Post Untuk Blogger

2015-03-08T15:49:00.000+07:00

Pengertian

Widget random post untuk blogger adalah widget yang akan menampilkan daftar postingan secara acak yang akan berubah setiap kali Blog dimuat (reload). Biasanya widget ini ditempatkan pada bagian Sidebar Blog. Saya pun memasang widget ini di sidebar blog, silakan lihat sidebar saya yang berjudul Random Post.

Keuntungan menggunakan Widget Random Post di Blog

Widget ini sangat ringan dan sederhana sehingga tidak akan mengganggu kecepatan Loading Halaman Blog. Walaupun sederhana namun Widget ini bermanfaat untuk tetap menampilkan semua postingan sesuai batas yang dtentukan dan daftar postingan yang ditampilkan akan berubah setiap kali halaman dimuat.

Widget ini dapat membantu Anda untuk tetap menghidupkan postingan-postingan Anda yang sudah lama sekalipun, selain itu Internal Link yang memudahkan pengunjung untuk melihat postingan lain yang mungkin mereka minati akan meningkatkan PageView blog Anda. Jika PageView blog meningkat maka Rank Alexa dan Kualitas Blog Anda di mata mesin pencari juga akan semakin baik.

Cara memasang Widget Random Post Untuk Blogger

1. Login ke Blogger.

2. Copy Kode di bawah ini.

<script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function randomposts(json){var total = parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";document.write(item);}}}document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<div style="clear: both;font-size: 8px;text-align:right;"><a target="_blank" href="http://bertubies.blogspot.com/2015/03/widget-random-post-untuk-blogger.html">Random Po</a><a href="http://bertubies.blogspot.com/">sts</a></div>

3. Paste-kan di Widget HTML/JavaScript (Layout > add a gadget > HTML / JavaScript).
4. Kode yang berwarna merah (numofpost=10;) angkanya bisa Anda ganti. Itu menentukan jumlah postingan yang akan muncul.
5. Simpan dan Selesai.

===

Widget Timeline Twitter

2015-03-08T15:12:00.000+07:00

Cara memasang Widget Timeline Twitter di blog sangatlah mudah, karena Twitter sudah menyediakan fasilitas Widget. Jadi, kita tidak perlu menulis scriptnya sendiri. Kita hanya perlu mengisi Form dan mengikuti beberapa langkah sederhana dan Twitter akan secara otomatis mengenerate script widgetnya sehingga kita cukup perlu mencopy scriptnya di HTML/Javacript blog kita. Lihat juga: Widget Burung Twitter Terbang di Blog. Jangan lupa juga klik tombol follow di bawah ini :D

Preview

Tweets by @YuliaaargH

Berikut Langkah - langkahnya.

Langkah Pertama, membuat Script Widget Timeline Twitter.

1. Login ke Akun Twitter Anda.

2. Klik "Setting".

3. Pilih "Widgets" (biasanya ada di tab paling bawah)

4. Selanjutnya klik tombol "Create New".

5. Pilih Source Widget Timelinenya, isi Formnya dan atur sesuai dengan keinginan Anda.

Penjelasan :

Pilih Apa yang akan Anda tampilkan di widgetnya nanti, apakah itu Timeline, Favorite, List atau Search.
Pada form configuration Anda dapat mengatur Tinggi (Height), Tema (Theme), Warna Link (Link Color), dll.
Kenapa cuma ada setting Height? karena Width (Lebar) widget Timeline Twitter ini akan secara otomatis menyesuaikan.

6. Setelah Anda selesai mengatur konfigurasi widgetnya, Klik tombol "Create Widget" untuk membuat Script widgetnya.

7. Lalu Copy Scriptnya yang akan muncul di bawah "Preview".

Langkah Kedua, Memasang widget Timeline Twitter di Blog.

1. Pilih Menu Tata Letak (Layout)

2. Selanjutnya Klik Tambah Gadget (Add a Gadget) di tempat dimana Anda ingin memasang widget Timeline Twitter.

3. Pilih Widget HTML/JavaScript.

4. Lalu Pastekan kode Script dari Twitter yang sudah dibuat tadi.

5. Klik tombol Simpan.

===

Widget Burung Twitter Terbang

2015-03-08T14:28:00.002+07:00

Cara memasang Widget Burung Twitter Terbang atau Flying Twitter Bird di blogger, mungkin tutorial ini sudah tidak asing lagi karena sudah banyak yang mengulas tentang pemasangan widget ini. Namun, tidak ada salahnya jika saya mencoba mengulas kembali cara membuat widget burung twitter ini dengan berbagai style dan warna yang berbeda-beda. Lihat juga: Cara Memasang Widget Timeline Twitter di Blog. Dan jangan lupa follownya ya :D

Pertama-tama Anda harus memiliki akun Twitter. Jika sudah punya, silakan ikuti tutorial di bawah ini.

1. Login ke akun blog Anda.
2. Klik Layout > Add A Gadget > HTML/ JavaScript
3. Copy/ Paste kode berikut.

<!-- floating twitter Bird -->
<script type="text/javascript" src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/YuliaaargH";
var tweetThisText = "Twitter - UserID http://bertubies.blogspot.com/";
tripleflapInit();
</script>

4. Ganti tulisan berwarna pink dengan Username Twitter dan Link Blog Anda.

5. Anda dapat mengganti warna burung twitter ini. Silakan ganti kode berwarna biru dengan kode di bawah ini sesuai dengan warna pilihan Anda.

Warna Merah

http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Warna Putih

http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png

Warna Ungu

http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png

Warna Hijau

http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png

Warna Coklat

http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png

Warna Biru

http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png

Warna Hitam

http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png

Warna Kuning

http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png

6. Save dan lihat hasilnya.

===

Cara Membuat Tombol DEMO DOWNLOAD Valid HTML5

2015-02-11T23:42:00.000+07:00

Cara Membuat Tombol DEMO dan DOWNLOAD yang Valid HTML5 - Sudah banyak tutorial yang menyajikan cara membuat tombol "Demo" dan "Download" dengan berbagai tampilan yang berbeda. Berhubung blog saya memakai tutorial yang akan saya sampaikan ini, maka saya ingin membagikannya juga kepada Anda yang belum tahu cara membuat tombol ini.

Preview

Ikuti langkah-langkah berikut ini.

1. Masuk ke akun blog Anda.

2. Pada Dashboard, klik Template > Edit HTML.

3. Cari kode ]]></b:skin>
4. Tambahkan kode di bawah ini diatas ]]></b:skin>

/*Download Demo Button*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222}
.download:hover { background: #454242; text-shadow: 0 0 1px #222}

5. Untuk penggunaannya, copy kode berikut di postingan pada mode HTML bukan Compose.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="URL yang dituju" target="_blank">Demo</a></li>
<li><a class="download" href="URL yang dituju" target="_blank">Download</a></li>
</ul>
</div>

6. Simpan. Selesai.

===

Menampilkan Postingan Menjadi 1 Halaman Penuh

2015-02-11T22:47:00.000+07:00

Tutorial ini hanya sebuah trik yang membuat sidebar dan kotak komentar dihilangkan, sehingga tampak seperti 1 halaman penuh. Triknya sangat sederhana, Anda hanya perlu menyisipkan script ke dalam template blog dan halaman posting 1 halaman penuh pun siap diperlihatkan. Silakan klik Demo jika ingin melihat hasilnya.

Demo

1. Masuk ke akun Blogger Anda

2. Masuk ke Dashboard > Template > Edit Html

3. Jika diperlukan backup dulu template Anda, klik Download Template Lengkap

4. Tekan Ctrl + F , lalu cari kode </head>

5. Masukkan kode dibawah ini tepat diatas kode </head>


<b:if cond='data:blog.url == &quot;http://bertubies.blogspot.com/p/tentang-bertubies.html&quot;'>


    <style>


.sidebar{display: none !important;}#sidebar-wrapper{display:none !important}.comment-form{display:none !important}.comments{display:none !important}


#main-wrapper,.post{width:700px;}


    </style>


    </b:if>

6. Ganti kode berwarna sesuai kebutuhan.

Ganti http://bertubies.blogspot.com/p/tentang-bertubies.html dengan alamat url halaman posting yang ingin ditampilkan 1 halaman penuh, bisa juga halaman utama Anda.
Ganti tulisan berwarna biru sidebar,#sidebar-wrapper,#main-wrapper dengan kode CSS sidebar dan tempat utama Anda. Jika sama, tidak perlu diganti.

Jika masih bingung, coba cari kode ini lsidebar, rsidebar, lsidebar-wrapper, rsidebar-wrapper, sidebar, sidebar-wrapper, main-wrapper, main, mainwrapper . Jika salah satu diantara kode tersebut ada yang cocok, gunakan kode tersebut menggantikan kode yang berwarna biru.

Ganti ukuran lebar 700 dengan ukuran lebar blog Anda.

7. Terakhir, simpan template dan lihat hasilnya

===

HTML Parser Tool

2015-02-06T22:37:00.000+07:00

HTML Parser adalah tool yang digunakan untuk mengurai kode html/ javascript menjadi susunan text yang dapat terbaca sebagai text yang kita inginkan. Jadi, bagi Anda yang banyak menulis atau posting artikel menggunakan kode html/ javascript maka perlu di parse atau konvert sebelum dipublish agar tidak ada problem error.

Contoh Parse Kode HTML
Secara sederhana contoh parse kode HTML dapat digambarkan sebagai berikut.

Kode script sebelum di parse.

 <b> HTML Parse Tool<b>

Kode script setelah di parse.

 &lt;b&gt; HTML Parse Tool&lt;b&gt;

Dari contoh di atas bisa dilihat kode yang berubah setelah di parse :

< menjadi <
> menjadi >

Langkah untuk menggunakan HTML Parser

Silahkan Anda copy kode script Anda (Contoh: kode script Google Adsense, Chitika, BidVertiser, PPC Lokal dan lain-lain).
Lalu Anda paste kode script tersebut di dalam kotak HTML parser tool di bawah ini.
Klik tombol Convert Your AdCode, lalu silahkan copy hasil script kode yang sudah dikonversi dan Paste-kan pada bagian HTML di postingan atau template blog Anda.
Selesai.

Jangan lupa Bookmark laman ini, jadi Anda tidak perlu repot mencari-cari tool ini
jika ingin memparse kode HTML/ Javascript.

===

Penjelasan Fungsi dan Cara Kerja HTML Parser Tool

2015-02-06T22:31:00.000+07:00

Nama lain dari HTML Parser Tool yaitu HTML Converter, HTML utilities, Adsense parser, Ad Code Converter.

HTML Parser Tool adalah sebuah tool yang digunakan untuk merubah atau mengkonversi kode Javascript agar kompatibel dan dapat diterima oleh platform Blogger.

Tools ini biasanya digunakan para blogger untuk mengkonversi kode javascript dari iklan seperti script iklan AdSense, karena kode asli javascript tidak bekerja jika dipasang langsung di postingan melalui edit html, jadi harus dilakukan proses konversi script yang biasa disebut Parse HTML.

Demikianlah penjelasan singkatnya. Untuk memperdalam pemahaman Anda, silakan simak penjelasan di bawah ini.

Pengertian Parse

Pengertian arti kata Parse dalam bahasa indonesia adalah Urai, atau didefinisikan dalam pengertian yang lebih dalam berarti mengurai kata. Dalam hal ini memparse kode Javascript/ HTML adalah bertujuan untuk merubah kode tersebut sehingga menjadi hasil yang tanpa merubah kode aslinya, jadi lebih jelasnya ketika kode javascript itu diparse maka fungsinya tidak akan berubah meski kode parse yang dihasilkan berbeda atau berubah dengan kode javascript aslinya.

Jadi, Parse HTML adalah sebuah cara untuk mengurai kode script html/ javascript dengan menggunakan alat/ tool online (web) maupun off line (aplikasi) .

Fungsi Parse HTML

Teknik ini banyak digunakan oleh para desainer web, sebagai contoh pembuat template untuk tampilan sebuah website/ blog. Mereka menggunakan cara tersebut agar kode HTML/ JavaScript dari template yang dibuat tidak dijiplak seutuhnya oleh para pemakai.

Fungsi berikutnya yaitu apabila Anda akan memposting sebuah artikel dimana artikel tersebut terdapat kode script HTML/ JavaScript maka, cara untuk memposting kode script tersebut tidak bisa secara langsung Anda masukkan ke dalam kolom postingan, karena jika Anda memasukan secara langsung kode script tersebut, maka nanti tidak akan muncul kode yang sama dengan kode yang Anda inginkan, sehingga diperlukan kode-kode pengganti untuk memunculkan kode script tersebut agar sesuai dengan kode aslinya.

Selain fungsi tersebut yaitu ketika Anda mencoba meletakkan iklan adsense pada template blog. Google adsense tidak memperbolehkan merubah desain hasil kode adsense yang didapat dari akun adsense. Jika hal itu terjadi maka Anda akan dibanned. Dan solusinya adalah dengan menggunakan cara ini yaitu memparse kode javascript iklan adsense sehingga dapat diterima ketika kita tempelkan di HTML blog.

Dan terakhir, tool ini berguna untuk memudahkan Anda menulis Tag <pre> pada artikel.

Cara kerja dari HTML Parser

Cara kerja dari HTML Parser Tool ini adalah mengkonversi simbol:

Konversi & menjadi &
Konversi ' menjadi '
Konversi " menjadi "
Konversi < menjadi <
Konversi > menjadi >

Cara Memasang HTML Parser Tool

Saya sudah pernah membagikan tutorial untuk memasang tool ini. Silakan kunjungi Kumpulan Kode Script HTML Parser Tools untuk mengetahui caranya.

Langkah-langkah menggunakan HTML Parser Tool

Untuk mengetahui langkah-langkah menggunakan alat ini silakan kunjungi HTML Parser Tool. Anda dapat langsung mempraktekkan langkah-langkahnya.

===

Cara Memasang HTML Color Picker

2015-02-06T22:00:00.000+07:00

HTML Color Picker adalah sebuah perangkat lunak untuk mencari kode warna HTML. Kode warna HTML sangatlah banyak dan saya rasa untuk menghafal semua kode tersebut merupakan hal yang cukup sulit. Namun, tak perlu khawatir karena blog ini menyediakan aplikasi sederhana untuk menemukan kode warna HTML dengan mudah, yang dinamakan HTML Color Picker. Aplikasi ini cukup keren untuk mendeteksi suatu warna untuk diambil kodenya. Anda dapat bereksperimen mencari kode warna yang diinginkan dengan mengikuti cara penggunaannya. Selain itu, blog ini menyediakan kode script aplikasi HTML color picker untuk memudahkan Anda menyimpan aplikasi ini di blog.

Berikut ini adalah langkah untuk memasang tool HTML Color Picker.

1. Login ke akun Blogger Anda.
2. Copy kode script di bawah ini. Silakan pilih salah satu.

Kode Aplikasi HTML Color Picker

Kedua versi berikut ini adalah kode tool html color picker yang sudah umum digunakan.

Versi 1

<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="420" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

Versi 2

<div style="text-align: center;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" height="350" width="350"><param name="movie" value="http://e-infotainment.com/applications/color-code-

    generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"

    quality="high" bgcolor="#cccccc"

    width="400"

    height="400"

    name="flash" align="middle" play="true" loop="false" quality="high"   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>

3. Anda dapat memasang tool ini di dalam postingan, caranya:

Klik New Post > Klik HTML bukan Compose > Paste kode script tool

Atau Anda dapat memasang tool ini di dalam laman, caranya:

Klik Laman/ Pages > Klik Laman Baru/ New Pages > Paste kode script tool

4. Save dan lihat hasilnya.

UPDATE! Jika ingin mendapatkan tool kode warna (HTML Color Picker) seperti di atas tapi yang Valid HTML5 dan Responsive silakan coba tutorial cara Membuat Tool Kode Warna Valid HTML5 dan Responsive Semoga bermanfaat.

===

Membuat Tool Kode Warna Valid HTML5 dan Responsive

2015-02-03T00:19:00.000+07:00

Kode warna sangat dibutuhkan oleh seorang blogger yang senang mendesain tampilan blog. Kode warna itu sangatlah banyak karena warnanya saja sudah bermacam-macam jadi, apalagi kodenya. Saya sendiri pun sering lupa dengan kode warna yang sering saya pakai sehingga saya harus bolak-balik mencari tool aplikasi kode warna. Hingga pada suatu saat saya ~~lelah~~ dan timbul keinginan untuk memiliki tool tersebut. Singkat cerita, akhirnya saya bisa memasang tool HTML Color Picker di blog saya. Tool ini untuk mendapatkan kode warna yang dicari.

Anda ingin memasang tool kode warna (HTML Color Picker)? penasaran dengan bentuknya? ingin mencoba aplikasinya? oke, silakan coba dulu dan cek validasi HTML5 dan responsivitas Aplikasi HTML Color Picker disini jika sudah, Anda bisa melanjutkan membaca postingan ini.

Untuk membuat tool tersebut menjadi Valid HTML5 Anda hanya perlu menggunakan kode embed object dan file .swf serta style untuk menentukan ukurannya. Kode warna yang valid HTML5 sangatlah sederhana. Silakan Copy kode di bawah ini dan Paste di kotak JavaScript/ HTML blog Anda.

<div style="text-align:center">
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px;border:0" data="http://www.2createawebsite.com/build/col.swf"></object>
</div>

Eits, tawaran saya belum sampai disitu, Anda ingin juga kan punya tool kode warna yang Responsive? Jika ingin tool kode warna responsive, silakan gunakan kode di bawah ini.

<div style="text-align: center;">
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCc01fUWNaNGNHbjQ/"></object> </div>
</div>
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCNDVYN2tlcFF1b3c/"></object> </div>
</div>
</div>

Dan jangan lupa tambahkan kode CSS berikut di atas ]]></b:skin> agar toolnya benar-benar Responsive.

.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}

Selesai.
Silakan lihat juga Cara Memasang HTML Color Picker Semoga Bermanfaat.

===

Pembahasan Tentang Halaman Statis

2015-02-02T21:59:00.000+07:00

Kali ini saya akan membahas tentang pengertian halaman statis, fungsi dan perbedaannya dengan halaman posting. Berikut ini adalah pembahasannya. Silakan disimak.

Pengertian Halaman Statis

Pada dasarnya pengertian dari Halaman Statis (Static Page) adalah suatu halaman dimana halaman tersebut berdiri sendiri, tidak terikat oleh waktu dan bukan bagian dari posting walaupun cara penggunaannya sama seperti kita membuat artikel pada halaman post. Itu artinya bahwa apabila kita membuat halaman statis maka halaman tersebut tidak akan muncul di bagian homepage layaknya halaman postingan artikel pada umumnya. Namun, jika kita ingin Memasang Halaman Statis Menjadi Homepage kita harus mengkonfigurasikannya dahulu agar halaman statis muncul di homepage, tenang saja karena Blogger telah menyediakan fitur untuk hal ini. Fitur ini ditambahkan pada Blogger sekitar awal 2010 untuk mendukung kebutuhan user akan halaman statis.

Untuk implementasinya sendiri mungkin sudah tidak asing lagi buat kita yakni dalam pembuatan halaman statis biasanya berisi form contact me, about us, about me, sitemap atau daftar isi blog, desclaimer, privacy police dan lain sebagainya.

Halaman statis hanya terdiri dari satu judul postingan saja, tidak seperti halnya Halaman Post yang mempunyai urutan waktu tertentu dan bisa berisi dari beberapa judul postingan dalam satu halaman. Judul halaman statis pun tidak akan muncul di Archive Blog.

Perbedaan antara Halaman Statis dengan HalamanPosting.

Agar lebih mudah dipahami, berikut ini adalah rangkuman perbedaan antara Halaman Statis dengan Halaman Posting.

1. Masalah Konten :

Halaman Statis tidak terikat oleh waktu, artinya halamannya berdiri sendiri dan pemasangannya bisa kita atur sesuai keinginan kita seperti letak, posisi penempatan dan kapan kita mau memunculkan halaman statis ini terserah kita.
Halaman Posting terikat oleh waktu, artinya sesuai aturan yakni setiap kita update artikel maka artikel yang terbaru akan menggeser artikel yang sebelumnya, seperti kita update artikel pada umumnya.

2. Struktur URL :

Halaman Statis http://bertubies.blogspot.com/p/kontak-bertubies.html - dimana p ini merupakan singkatan dari kata page atau halaman. setelah itu diikuti oleh judul page.
Halaman Posting http://bertubies.blogspot.com/2015/02/pembahasan-tentang-halaman-statis.html - dimana 2015 merupakan tahun terbit artikel dan 02 merupakan bulan terbit artikel, setelah itu diikuti oleh judul artikel, karena bersifat timeless jadi, tidak mengandung URL waktu dan tidak diarsipkan berdasarkan waktu.

Fungsi Halaman Statis

Seperti yg telah dibahas di atas, halaman statis bukan bagian dari posting blog. Maka sudah sangat jelas bahwa halaman statis bukan difungsikan sebagai halaman untuk menampilkan posting artikel. Halaman statis sangat cocok digunakan untuk memuat berbagai informasi yang langsung berkaitan dengan blog dan berbagai jenis fitur blog yang ingin ditonjolkan namun tidak diinginkan menjadi bagian posting.

Jadi intinya, Halaman statis atau static page difungsikan untuk memuat suatu informasi yang berhubungan dengan blog yang dikelola, misalnya seperti kontak, daftar isi (sitemap) atau keterangan mengenai pemilik blog atau about me.

Cara Membuat Halaman Statis
Silakan klik artikel Membuat Halaman Statis di Blogger. Semoga Bermanfaat.

===

Memasang Halaman Statis Menjadi Homepage Blog

2015-02-01T23:39:00.002+07:00

Sebelum mengikuti tutorial kali ini, Anda harus membuat sebuah halaman statis terlebih dahulu. Membuat halaman statis di Blogger itu sangatlah mudah karena Blogger pun sudah menyediakan fitur untuk membuat halaman statis. Di dashboard Blogger yang versi Bahasa Indonesia, Halaman Statis ini bernama Laman. Sedangkan, untuk yang versi Bahasa Inggris halaman statis ini bernama Pages.

Tapiii, apa itu Halaman Statis? Silakan pahami dulu Pembahasan Lengkap Tentang Halaman Statis Setelah itu, silakan mencoba tutorial ini.

Dengan memasang halaman statis menjadi homepage (beranda) blog, setiap pengunjung yang membuka homepage blog Anda akan diarahkan menuju halaman statis Anda. Untuk menerapkannya, Anda perlu mengkonfigurasikannya. Oleh karena itu, saya akan berbagi cara untuk menampilkan 1 halaman statis pada homepage blog tanpa ada jejeran postingan yang lain. Dengan begitu, homepage blog Anda akan terlihat lebih rapi.

Langsung aja ikuti langkah-langkahnya.

1. Anda diharuskan Membuat Halaman Statis di Blogger terlebih dahulu.
2. Sudah selesai membuat halaman statisnya? sekarang saatnya mengetahui bagaimana agar homepage blog Anda hanya menampilkan sebuah halaman statis yang tadi Anda buat.
3. Pada dashboard blog, pilih Layout > Add a Gadget (di bawah Header) > Pages > centang 1 page/ laman yang ingin ditampilkan di home > klik Save (lihat gambar untuk lebih jelasnya)

4. Selanjutnya merupakan bagian yang penting agar semua postingan tetap bisa diakses dengan mudah oleh pengunjung. Caranya Anda klik lagi Layout > Add a Gadget (di Sidebar) > Pages > Isi judul > Klik +Add external link > isi Page Title > isi Web address (URL) > Klik Save Link > Klik Save.

Silakan liat gambar untuk lebih jelasnya

5. Belum selesai sampai disitu saja, tetap pada dashboard blogger.

Pilih Settings > Search Preferences > Pada Custom Redirects klik Edit > Selanjutnya ikuti langkah di bawah:

From: Anda hanya perlu ketik garis miring slash / saja. Ingat ya, hanya ketik /
To: Anda ketikkan seperti ini: /p/tentang-bertubies.html (ini diisi dengan laman yang ingin ditampilkan)
Permanen: centang box.
Klik Save

Kemudian Anda klik New Redirect/ Pengalihan Baru, kemudian ikuti langkah di bawah:

From: Berdasarkan web address yang di langkah no. 4 Anda hanya perlu ketik: /artikel
To: Anda akan diarahkan menuju homepage asli blog Anda misalnya: http://bertubies.blogspot.com/ Untuk mencapai itu ketikkan /index.html
Permanent: centang box
Klik Save.

6. Sudah mengikuti semua langkah di atas? selesai. Klik Save Changes.

7. Dan sekarang setiap pengunjung mengklik URL blog Anda (masuk ke Home) yang muncul adalah halaman statis Anda. Jika ada yang masih bingung. Perhatikan gambar di bawah:

Tampilan Layout saya setelah ditambahkan widget Pages dengan fitur External link.

Tampilan Sidebar Blog Saya

8. Untuk mengetes apakah Anda berhasil atau tidak. Silakan Anda tulis domain blog Anda contoh: http://bertubies.blogspot.com/ atau masuk ke home blog Anda, apakah yang muncul halaman statisnya? trus pada widget pages yang ada di sidebar coba Anda klik kedua linknya, apakah hasilnya sudah sesuai dengan langkah-langkah di atas?

Semoga berhasil dan bermanfaat untuk Anda. Silakan klik Untuk mendapatkan artikel terkini/ terupdate dari blog ini. Mohon bantuan kliknya ya. Terima Kasih.

===

Cara Membuat Halaman Statis di Blogger

2015-02-01T18:37:00.002+07:00

Saya akan sedikit bercerita dulu. Sebenarnya, saya pernah dipusingkan oleh halaman statis ini. Jadi ceritanya, pada suatu saat, saya blogwalking dari buku tamu blog yang satu ke yang lainnya untuk menyapa pemilik blog supaya blog saya dikunjungi balik ~~(jujur banget)~~. Nah, disitulah saya menemukan link seperti ini: http://namablogdisamarkan/p/buku-tamu. Trus saya berpikir, wah gimana caranya bikin artikel menggunakan link seperti itu dan saya heran mengapa judul artikel buku tamu tersebut tidak ada di Archive Blognya. Saya jadi tertarik untuk membuatnya juga. Kemudian saya cari di google dengan berbagai macam keyword (pada saat itu saya belum tau kalo itu namanya halaman statis). Alhamdulillah ketemu tutorialnya dan sekaligus membuat saya bengong "Apa? Blogger sudah menyediakan fitur halaman statis ini? Jadi, gue selama ini kemana aja? masa baru tau hal ini" Itulah suara batin saya. ~~hehehe~~

Inilah contoh LINK Halaman Statis

Berdasarkan pengalaman saya tersebut, saya ingin berbagi Cara Membuat Halaman Statis di Blogger. Mungkin sudah banyak yang mengetahui cara ini. Tapi, semoga artikel ini bermanfaat bagi yang belum mengetahui tutorial ini. Fiturnya saya tulis dalam bahasa Indonesia dan Inggris. Silakan simak caranya.

1. Login ke akun Blogger Anda.

2. Pada Dashboard Blog, pilih Laman/ Pages.

3. Kemudian klik Laman Baru/ New Page.

Preview: Cara membuat halaman statis

4. Akan muncul kotak untuk mengisi artikel, isilah sesuai kebutuhan Anda. Biasanya kebanyakan blogger menggunakan halaman statis sebagai tempat untuk memasang buku tamu (chatbox), profil blog, kontak blog. Sebaiknya Anda ketik judul artikelnya dulu karena kalimat pertama yang Anda ketik akan menjadi link addressnya. Jadi, agar judul dan linknya sama, saran saya isi kotak judul dulu.
5. Jika sudah, lihat tab sebelah kanan, silakan Anda isi Search Description. Isilah dengan keyword yang menggambarkan isi artikel halaman statis Anda.
6. Kemudian lihat pada tab Options >> Reader Comment >> Pilih don't allow, hide existing. Pilihan ini untuk menutup kotak komentar sehingga pengunjung tidak bisa memberikan komentar pada artikel halaman statis Anda.
7. Simpan klik Save.

Jika Anda ingin Memasang Halaman Statis Menjadi Homepage, silakan klik linknya karena sudah saya jelaskan secara detail disana.

Semoga berhasil dan bermanfaat untuk Anda. Silakan klik Untuk mendapatkan artikel terkini/ terupdate dari blog ini. Mohon bantuan kliknya ya. Terima Kasih.

===

Menampilkan Judul Postingan Artikel Berdasarkan Label

2015-02-01T01:44:00.000+07:00

Bagi para pengunjung yang sedang mencari sebuah artikel, tentu membutuhkan informasi detail tentang artikel tersebut. Sangat menguntungkan sekali jika Anda menyediakan semua artikel yang berkaitan dengan artikel yang dicari oleh pengunjung. Menguntungkan untuk Anda dan juga pengunjung blog Anda. Kenapa menguntungkan untuk Anda? Karena Anda akan memiliki pengunjung tetap, bagaimana juga, seorang pengunjung akan kembali lagi ke blog Anda jika sudah merasa nyaman berselancar di blog Anda.

Preview: Menampilkan Judul Postingan Artikel Berdasarkan Label

Salah satu hal yang dapat mempermudah pengunjung dalam melakukan navigasi untuk mendapatkan informasi yang dibutuhkan yaitu dengan memasang widget yang dapat Menampilkan Judul Postingan Artikel Berdasarkan Label. Jadi, dengan pemasangan widget ini, semua judul postingan yang memiliki label yang sama akan ditampilkan. Tapi dalam pemasangannya semua tergantung Anda, ingin menaruh script ini dimana (di postingan, sidebar, footer, dll), ingin menampilkan label apa, dan berapa judul yang dikehendaki untuk ditampilkan. Untuk lebih jelasnya silakan coba langkah-langkah di bawah ini.

1. Login ke akun Blogger Anda.

2. Pada Dashboard Blogger, pilih Layout >> Add A Gadget >> HTML/JavaScript

3. Selanjutnya masukkan script di bawah ini.

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://bertubies.blogspot.com/feeds/posts/summary/-/SEO?max-results=15&alt=json-in-script&callback=recentpostslist"></script>

Keterangan:

Tulisan warna merah: Ganti dengan URL blog Anda
Tulisan warna pink: Ganti dengan label artikel yang ingin Anda tampilkan
Tulisan warna biru: Jumlah judul artikel yang ingin ditampilkan

4. Simpan klik Save.

5. Jangan lupa untuk memeriksa halaman blog Anda dan pastikan widget ini telah berhasil ditampilkan.

Semoga berhasil dan bermanfaat untuk Anda. Silakan klik Untuk mendapatkan artikel terkini/ terupdate dari blog ini. Mohon bantuan kliknya ya. Terima Kasih.

===

Kumpulan Kode Script HTML Parser Tools

2015-01-31T20:45:00.000+07:00

Kumpulan Kode Script HTML Parser Tools - Kode-kode yang dibagikan di dalam postingan kali ini dapat digunakan untuk membuat HTML Parser Tool di postingan atau laman Anda. Apa itu HTML Parser Tool? Untuk mengetahuinya silakan kunjungi Penjelasan Fungsi dan Cara Kerja HTML Parser Tool. Jika sudah paham, silakan ikuti tutorialnya berikut ini.

Cara Memasang Kode Script HTML Parser Tool di Blog

1. Login ke akun Blogger Anda.
2. Copy kode script. Disini telah disediakan 5 versi, silakan pilih salah satu kode script HTML Parser Tool di bawah ini.

Kode Script HTML Parser Tool Versi 1

<style type="text/css">
#codes {
  border:1px solid #666;
  background: #CFF099;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
}

.button-group {
  margin:20px auto;
  text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik &#039;Konversi&#039;"></textarea>
<div class="button-group">
    <button onclick="cdConvert();">Konversi</button>
    <button onclick="cdClear();">Bersihkan</button>
</div>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
}

function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value;
    cv = cv.replace(/&/g, "&amp;");
    cv = cv.replace(/'/g, "&#039;");
    cv = cv.replace(/"/g, "&quot;");
    cv = cv.replace(/</g, "&lt;");
    cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
}
</script>

Kode Script HTML Parser Tool Versi 2

<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;"><tbody>
<tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /></td></tr>
</tbody></table>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small;"><span style="line-height: 20px;"><br /></span></span>

Kode Script HTML Parser Tool Versi 3

<div align="center">
<iframe frameborder="0" height="400" id="myfr" marginheight="0" marginwidth="0" scrolling="no" src="http://www.skyafar.net/wp-content/uploads/freetools/adsensecodeconverter.html" width="500"></iframe></div>

Kode Script HTML Parser Tool Versi 4

<script type="text/javascript">function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}</script><br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody>
<tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /></td> </tr>
</tbody></table>
<br /></div>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small; line-height: 20px;"> HTML Parser Tool |&nbsp;<a alt="kumpulan kode script HTML parser Tool" href="http://bertubies.blogspot.com/" style="color: #0b5394; text-decoration: none;" title="HTML Parser Tool">Get This Widget</a></span>

Kode Script HTML Parser Tool Versi 5

<form method="POST">
<table border="0" cellpadding="0" cellspacing="1" style="margin-left: 0px; margin-right: 0px; text-align: left; width: 550px;">
<tbody>
<tr><td valign="top" width="550"><textarea id="htmlparse" name="html" style="background: #00FFFF repeat scroll 0% 0% rgb(236, 236, 236); border-color: rgb(104, 104, 104) rgb(214, 213, 213) rgb(214, 213, 213) rgb(104, 104, 104); border-style: solid; border-width: 1px; height: 250px; width: 550px;"></textarea>
<input onclick="parse();" type="button" value="Parse HTML Code" />
<input onclick="javascript:this.form.html.focus();this.form.html.select();" type="button" value="Block All" />

<input type="reset" value="Reset" /></td></tr></tbody></table></form>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small; line-height: 20px;"> HTML Parser Tool | <a alt="kumpulan kode script HTML parser Tool" href="http://bertubies.blogspot.com/" style="color: #0b5394; text-decoration: none;" title="HTML Parser Tool">Get This Widget</a></span>

3. Anda dapat memasang tool ini di dalam postingan, caranya:

Klik New Post > Klik HTML bukan Compose > Paste kode script tool

Atau Anda dapat memasang tool ini di dalam laman, caranya:

Klik Laman/ Pages > Klik Laman Baru/ New Pages > Klik tombol HTML > Paste kode script tool

4. Save dan lihat hasilnya.

===

Cara Setting Fitur Komentar yang Baik di Blogger

2015-01-31T16:20:00.003+07:00

Masih dalam tahap awal memulai sebuah blog baru, kali ini saya akan share Cara Setting Fitur Komentar yang Baik di Blogger. Yang dimaksud "Setting Fitur Komentar yang Baik" adalah pemakaian fitur untuk kolom atau kotak komentar blog yang membuat nyaman pembaca yang akan berkomentar, memudahkan, tidak ribet, juga aman bagi blog kita. Terutama aman dari komentar spam yang akan merugikan blog.

Untuk berinteraksi dengan pengunjung blog keberadaan kolom komentar ini cukup berguna. Kolom komentar ini bisa Anda setting sesuai dengan kebutuhan Anda. Mungkin bagi master-master yang sudah ahli dalam dunia blogger, ini merupakan hal yang mudah, tapi bagi newbie seperti saya mungkin akan mengalami sedikit kesulitan.

Jika selama ini, kolom komentar hanya dianggap sebagai fitur pelengkap dalam sebuah blog, maka saat ini, saya merasa fasilitas yang sejatinya diperuntukkan bagi visitor itu mempunyai peran penting untuk kesehatan blog. Aktifitas di kolom komentar sangat berpengaruh terhadap masa depan blog. Bisa positif atau malah negatif.

Seorang kepala tim webspam di Google inc., Matt Cutts mengatakan jika Anda berkomentar pada sebuah blog hendaklah menggunakan nama Anda (Profil Google), jangan menggunakan nama dengan link atau url (anchor text) semisalnya url blog Anda bila tidak ingin dianggap SPAM. Dan ini tentunya akan berdampak buruk juga terhadap blog yang Anda komentari.

Menanggapi persoalan sistem komentar agar di setting hanya untuk user Google saja, itu karena untuk menghindari, jika suatu saat para komentator, blognya dihapus atau expire yang menyebabkan dead link. Dead link sangat berpengaruh di SERP. Selain itu, jika terdapat sebuah blog dengan banyak outbound link yang datang dari komentar, ini akan berakibat buruk pada kesehatan blog. Dan lebih parahnya lagi blog akan disingkirkan dari SERP bahkan dibanned.

Jadi, salah satu cara untuk menghindari pemakaian anchor text dengan url ini yaitu dengan menggunakan setting komentar User with Google Account atau Anda bisa mengaktifkan fitur komentar Google+ pada blog Anda.

Namun pertanyaan lain akan muncul, bagaimana jika linknya disimpan pada komentar bukan pada nama komentator? Semua Blogger tentunya telah sependapat bahwa komentar yang menggunakan link hidup adalah komentar spam yang wajib dihapus. Kita bisa menghapus manual komentar spam ini melalui dashbord blog atau kita bisa menggunakan script yang secara otomatis akan menghilangkan link hidup pada komentar. Silahkan baca "Menghapus Link Aktif Pada Kotak Komentar Secara Otomatis" dijamin ampuh.

Sebelum Anda melakukan penyettingan kotak komentar, akan lebih baik jika mengetahui fitur-fiturnya yang telah disediakan oleh Blogger. Berikut penjelasan dari masing-masing fitur yang ada.

LOKASI KOMENTAR/ COMMENT LOCATION

Merupakan pengaturan untuk lokasi kotak komentar pada blog sobat. Ada 4 pilihan yang tersedia.

Tersemat (Embedded): Komentar bisa dilakukan pada halaman yang sama di bawah postingan.
Halaman penuh (Full Page): Kotak komentarnya berada pada halaman yang berbeda dari artikel, dan kotak komentarnya akan muncul apabila Anda klik post a comment.
Jendela pemunculan (Pop-up window): Kotak komentar berada pada jendela lain, kotak komentar akan muncul pada jendela baru apabila kita klik post a comment.
Sembunyikan (Hide): Kotak komentar tidak ditampilkan. Opsi ini tidak menghilangkan komentar yang sudah ada sebelumnya. Anda bisa memunculkan lagi dengan memilih opsi yang lain.

SIAPA YANG DAPAT KOMENTAR/ WHO CAN COMMENT
Fitur ini bertujuan untuk menyaring siapa saja yang bisa memberikan komentar di blog Anda. Ada 4 pilihan.

Semua orang - termasuk pengguna tanpa nama (Anyone - Includes Anonymous Users): Siapa saja bisa memberikan komentar termasuk pengguna tanpa nama atau anonymous.
Pengguna terdaftar - termasuk openID (Registered User - Includes OpenID): Pilihan ini hanya mengizinkan orang yang terdaftar pada Google Account, Live Journal, WordPress, TypePad, AIM dan OpenID dan user harus log in ke salah satu account terlebih dahulu jika ingin berkomentar.
Pengguna dengan Akun Google (User With Google Accounts): Hanya pengguna yang mempunyai Akun google saja yang dapat memberi komentar.
Hanya anggota blog ini (Only Members Of this Blog): Hanya pengguna yang terdaftar di blog Anda saja yang bisa memberi komentar.

MODERASI KOMENTAR/ COMMENT MODERATION

Merupakan cara bagaimana Anda menampilkan sebuah komentar. Terdapat 2 pilihan.

Selalu dan kadang-kadang (Always atau Sometimes): Komentar harus menunggu persetujuan Anda untuk ditampilkan. Anda bisa memilih komentar mana yang ingin Anda tampilkan.
Tidak pernah (Never): Komentar akan langsung ditampilkan pada kotak komentar.

TAMPILKAN VERIFIKASI KATA/ SHOW WORD VERIFICATION

Untuk menghindari komentar otomatis dengan robot, Anda bisa pilih Ya/ Yes. Maka setiap ingin berkomentar, pengguna harus memasukkan kode captcha untuk verifikasi agar komentarnya bisa ditampilkan.

TAMPILKAN TAUTAN BALIK/ SHOW BACKLINKS
Apabila ada user yang berkomentar dan memberikan link balik ke alamatnya maka link itu akan ditampilkan di kotak komentar, sehingga kita bisa mengunjungi balik orang yang berkomentar tadi, atau biasa disebut dofollow. Ada 2 pilihan.

Sembunyikan (Hide): Anda bisa pilih sembunyikan jika tidak ingin menampilkan link hidup. Hal ini bukan berarti link tersebut terhapus, jadi hanya disembunyikan.
Tampilkan (Show): Anda bisa pilih tampilkan untuk menampilkan link hidup.

Cara Setting Fitur Komentar yang Baik (Blogger/Blogspot)

1. Login ke akun blogger Anda.
2. Di Dashboard Blog klik menu Setting
3. Klik menu Posts and comments
4. Comment Location > "Embeded"
5. Who can comment? > "Anyone"
6. Comment moderation > "Always"
Isi kolom email dengan email yang akan menerima notifikasi dari Blogger jika ada komentar baru. Jika tidak mau ada notifikasi ke email, kosongkan saja.
7. Show word verification > "No"
8. Show Backlinks > "Hide"
9. Comment Form Message > Add > Anda dapat mengisi form ini dengan kalimat peringatan yang ditujukan kepada pengunjung yang ingin berkomentar.

Contoh Comment Form Message:

10. Save Setting.

Demikian cara setting fitur komentar yang baik di blogger, khususnya bagi blogger pemula (newbie). Semoga Bermanfaat.

===

Tutorial Lengkap Membuat Threaded Comment di Blog

2015-01-30T23:43:00.000+07:00

Pada kesempatan kali ini saya akan menyampaikan beberapa cara agar blog memiliki kotak komentar yang bertingkat atau istilah asingnya yaitu threaded comment. Tutorial Lengkap Membuat Threaded Comment di Blog yang akan saya ulas disini terdiri dari dua cara. Apa saja? silakan simak caranya di bawah ini. Oh iya sebelum melanjutkan membaca tutorial kali ini, ada baiknya jika Anda mempelajari Cara Setting Fitur Komentar yang Baik di Blogger, disitu juga akan dijelaskan fungsi dari fitur-fitur untuk kotak komentar yang disediakan oleh Blogger.

Cara 1. Membuat Threaded Comment dengan Mengedit Template

1. Login ke akun Blogger Anda.
2. Masuk ke dashboard lalu klik tab Settings >> Posts and Comments
3. Pada Comment Location klik dropdownnya lalu pilih Embedded.
4. Setelah itu klik pada Template >> Edit HTML
5. Cari semua kode di bawah ini. Untuk memudahkan pencarian klik Ctrl+F pada keyboard. (kode seperti ini biasanya ada 4-5 kode).

<b:include data='post' name='comments'/>

6. Ganti semua kode di atas tadi dengan kode ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

7. Save.

Cara 2. Membuat Threaded Comment Tanpa Mengedit Template.

Dengan cara di bawah ini memang lebih mudah, tetapi kadang-kadang merubah beberapa tampilan widget Anda. Untuk cara yang lebih aman, ikuti cara yang pertama yaitu dengan Edit Template.

1. Login ke Blogger

2. Backup dulu template Anda (Untuk berjaga-jaga, takut gagal). Untuk memback-up template caranya: klik Template >> klik Cadangkan/Pulihkan (sebelah kanan atas) >> Unduh template lengkap.

3. Setelah itu, klik Edit HTML >> Kembalikan template widget ke default >> klik OK.
4. Selesai.

Jika Anda telah berhasil memasang threaded comment, silakan menerapkan tutorial Menghapus Link Aktif di Kotak Komentar Secara Otomatis agar spammer jera dan tidak menaruh link aktif di kotak komentar blog Anda sehingga kesehatan blog Anda tetap baik dan blog Anda tidak sampai dibanned Google.

===

Menghapus Link Aktif di Kotak Komentar Secara Otomatis

2015-01-29T17:32:00.000+07:00

Sebenarnya Blogspot/ Blogger telah menyediakan fitur anti-spam (secara otomatis komentar para anonymous masuk ke tab spam) dan menyediakan fitur moderasi kotak komentar dengan tujuan agar kita dapat menyeleksi komentar yang masuk sehingga, jika ada link aktif yang masuk, kita tidak perlu mempublikasikan komentar tersebut. Namun cara tersebut kurang memuaskan karena kita masih harus menganalisis komentar satu per satu, sangat kurang efisien jika komentar terdiri dari puluhan bahkan ratusan komentar.

Perlu diketahui, Salah-satu algoritma pagerank blog didasarkan pada perbandingan link-in dan link-out, bila suatu postingan artikel blog Anda miliki lebih banyak link-out nya dibandingkan dengan link-in nya, maka artikel blog tersebut susah untuk bisa mendapatkan pagerank yang bagus. Biasanya para spammer sengaja menyisipkan link aktif di komentar dengan tujuan mencuri backlink dari blog Anda, link aktif ini tentu saja sangat mempengaruhi kesehatan blog Anda.

Yang dimaksud dengan link aktif di sini adalah sebuah anchor-text (yang mengarah pada sebuah blog) yang sengaja dipasang oleh pengunjung pada kotak komentar blog Anda dengan tujuan untuk mendapatkan backlink bagi blog yang dimilikinya. Cara seperti ini termasuk golongan cara-cara curang atau dapat dikatakan sebagai praktek spam.

Oleh karena itu, pada kesempatan kali ini saya akan memberikan cara Menghapus Link Aktif di Kotak Komentar Secara Otomatis atau dapat disederhanakan dengan istilah mematikan link aktif pada kotak komentar. Sehingga, Anda tak perlu menyeleksi satu per satu komentar secara manual.

Ikuti langkah mudah berikut ini.

1. Masuk ke akun blog Anda.

2. Klik Template > Edit HTML
3. Untuk langkah berikutnya, saya akan memberikan beberapa cara, diantaranya dengan CSS dan JavaScript. Silakan pilih salah satu.

Dengan kode CSS

Copy kode di bawah ini dan Paste-kan di atas kode ]]></b:skin>

#comments p a {display:none;}

Perhatian! Cara seperti ini tidak direkomendasikan karena masih terbaca di browser dan secara otomatis mesin pencari masih membacanya sebagai link. Untuk mengecek apakah link masih terbaca di browser atau tidak, Silakan klik F12 pada keyboard.

Dengan Kode JavaScript

Untuk menghapus atau mematikan link aktif dengan menggunakan kode JavaScript lebih direkomendasikan karena efektif untuk memberantas spammer. Saya akan membagikan 3 cara yang menggunakan kode JavaScript.

Silakan pilih salah satu cara. Simpan kode JavaScript yang Anda pilih di atas </body>

Cara 1. Link aktif secara otomatis akan berubah menjadi kalimat Peringatan seperti dibawah ini (tulisan biru)


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>


<script type='text/javascript'>


jQuery(document).ready(function(){


 jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Link aktif otomatis terhapus</span>");


});


</script>

Keterangan:

Jika di blog Anda sudah ada script mirip kode berwarna pink diatas, maka script berwarna pink diatas tidak usah dipakai, dihapus saja.
Tulisan berwarna biru dapat diganti sesuai kebutuhan Anda.

Cara 2. Link aktif akan diubah menjadi text biasa yaitu tulisan tanpa link. (Text yang ditulis Spammer tidak berubah).

<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

Cara 3. Semua isi komentar (bukan hanya link aktifnya saja) akan diganti dengan kalimat Peringatan.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script>

Kalimat peringatan yang berwarna biru dapat diganti sesuai kebutuhan Anda.

4. Simpan. Klik Save.

Catatan. Jika Anda mengalami kendala atau cara di atas tidak berhasil, silakan coba solusi di bawah ini. Namun, jika Anda berhasil, silakan skip catatan ini:

Jika tombol di pesan komentar ikut di block maka, ganti kode JavaScript yang ada di atas yaitu kode #comments p diganti menjadi .comments .comments-content .comment-content
Jika Blog Anda tidak menggunakan Threaded Comment Blogger, ganti kode JavaScript yang ada di atas yaitu kode blockLinks('comment-holder', 'p'); dengan kode blockLinks('cm_block', 'p'); atau blockLinks('comment-body', 'p');

Atau, Anda ingin memasang Threaded Comment (komentar bertingkat) pada blog Anda? silakan tengok Tutorial Lengkap Membuat Threaded Comment di Blog. Selamat Mencoba.

===

Cara Mendapatkan Kode Verifikasi Bing Webmaster

2015-01-29T00:34:00.000+07:00

Anda tentu ingin bukan blognya populer di mesin pencari selain google? Nah, ini merupakan salah satu caranya yaitu dengan cara memasang kode verifikasi Bing webmaster. Sebelumnya saya sudah mengulas cara mendapatkan kode verifikasi Google Webmaster dan Alexa Terbaru. Trus kenapa harus Bing? Bukannya mesin pencari terbesar selain Google itu Yahoo?

Perlu diketahui, sekitar 4 tahun yang lalu, Yahoo webmaster telah menutup layanannya dan bergabung dengan Bing. Jadi, sekarang Yahoo sudah tidak menyediakan tool webmasternya tapi kita cukup daftar di Bing Webmaster maka otomatis terdaftar di Yahoo.

Bing adalah Mesin Pencari ke empat yang dikeluarkan oleh salah satu perusahaan raksasa dunia Microsoft setelah MSN Search, Windows Live Search, dan Live Search. Bing sengaja dikeluarkan oleh perusahaan Microsoft untuk mendongkrak popularitasnya yang tenggelam selama ini oleh keberadaan Google Search.

Berikut ini fitur yang dimiliki oleh Bing: Best Match, Interface Features, Media Features, Instant Answer, Bing Maps dan Bing Travel.

Oke, inilah Cara Mendapatkan Kode Verifikasi Bing Webmaster.

1. Silakan kunjungi situs Bing Webmaster
2. Lalu, Sign In menggunakan akun email @outlook.com atau @hotmail.com. Namun, jika Anda belum memiliki akun tersebut silakan klik Sign Up with Microsoft Account.
3. Isilah form yang ditampilkan. Jika sudah terisi semua, klik tombol biru Create Account.
4. Kemudian lakukan proses Sign In menggunakan akun email yang terdaftar.
5. Klik My Site (ada di sebelah kiri paling atas).
6. Masukkan URL blog Anda di kotak My Site kemudian klik ADD.
7. Kemudian, isikan data blog Anda, perhatikan catatan dibawah ini.

Pada Add A Sitemap (memasukkan peta situs), Anda bisa menggunakan salah satu dibawah ini :

- http://bertubies.blogspot.com/feeds/posts/default.
- http://bertubies.blogspot.com/sitemap.xml.
- http://bertubies.blogspot.com/feeds/posts/default?redirect=false.
Gantikan tulisan warna pink dengan nama blog Anda.

Pada tulisan When do you receive the most traffic to this site for your local time of the day?

Pilih All day (default). Jika sudah klik ADD.

8. Anda akan disajikan form input untuk melengkapi profil situs Anda, adapun data yang harus dilengkapi, meliputi:

URL, berisi url blog atau situs Anda.
Add sitemap, silahkan masukan peta situs blog Anda. Ikuti langkah nomor 7 untuk add sitemap.
First Name, Last Name, isi dengan nama depan dan nama belakang Anda
Email, diisi dengan email hotmail atau email outlock anda
Job role, Isi dengan pekerjaan anda (opsional: boleh diisi boleh tidak)
Company Organization Name dan Company Organization Size, isi dengan nama perusahaan Anda atau silahkan isi sembarang.
Industry, pilih jenis perusahaan (Opsional)
Contact phone, isi dengan no telepon (Opsional)
State/Province dan Zip postalcode, diisi dengan nama provinsi tempat tinggal dan kode pos.
Country region, diisi dengan nama negara tempat tinggal.
Centang pilihan Im An Agency not site owner, jika Anda bukan pemilik situs.
Biarkan pilihan yang lainnya apa adanya, dan tekan tombol Save untuk menyimpannya.

9. Pada tahap berikutnya, Lihat pada tulisan Option 2: Copy and paste a <meta> tag in your default webpage. Sudah ketemu tulisannya? disitu diberikan kode verifikasi. Ini adalah contoh kode verifikasi Bing (milik saya):
<meta name="msvalidate.01" content="FC4F3E7589B6C4A0447459066589CF3B" />
10. Copy kode verifikasi yang diberikan oleh Bing.
11. Buka akun blog Anda masuk ke template > Edit HTML tapi jangan tutup situs Bingnya dulu.
12. Paste kode Bing Anda di bawah kode <head>
13. Jika sudah, masuk ke situs bing tadi. kemudian klik Verify.
14. Selesai.

Datangnya aliran visitor dari sumber search engine Bing/ Yahoo cukup bisa diandalkan selain dari Google. Inilah salah satu keuntungan memasang kode verifikasi Bing pada situs web/ blog yang kita miliki. Selain itu, kita juga dapat mengontrol jumlah tayangan seperti statistik pada blog, kecenderungan pembaca, dan lainnya menggunakan Bing layaknya pada google webmaster.

Akhir kata, Selamat!! Blog Anda sudah terdaftar dan terverifikasi di Bing webmaster.

===

Cara Mendapatkan Kode Verifikasi Google Webmaster

2015-01-28T21:27:00.001+07:00

Verifikasi Website/Blog adalah cara agar Website/Blog Anda memiliki kepemilikan yang sah di mata search engine/ mesin pencari. Verifikasi Website/ Blog tentunya sangat bermanfaat bagi Blog Anda, diantaranya Blog Anda akan terindex dengan maksimal oleh mesin pencari.

Kali ini saya hanya membahas tentang cara verifikasi Website/Blog di mesin pencari Google. Pada google, hal ini dilakukan dengan alat Google Webmaster Tools. Webmaster tools atau sering disebut dengan istilah google webmaster tools, adalah salah satu produk google yang sering digunakan untuk memonitor interaksi di antara robot pencari google terhadap blog atau situs yang kita miliki. Fasilitas yang dimiliki oleh alat ini cukup lengkap dan cukup ampuh untuk meningkatkan trafik dan untuk memelihara situs atau blog yang kita miliki. Namun, sebelum kita bisa memanfaatkan google webmaster tool untuk memonitor situs kita, langkah pertama yang harus dilakukan adalah melakukan pendaftaran blog atau situs yang kita miliki ke google webmaster tools.

Robot pencari google akan lebih mengenali blog atau situs yang telah terdaftar di google webmaster tools sehingga setiap halaman blog yang kita miliki lebih cepat muncul dipencarian google dan cepat mendapatkan pengunjung.

Berikut adalah Cara Mendapatkan Kode Verifikasi Google Webmaster Tools. Langkah ini dilengkapi dengan versi yang berbahasa inggris dan bahasa indonesianya.

1. Masuk ke https://www.google.com/webmasters/tools/

2. Anda akan diminta memasukan username dan password, maka isi sesuai dengan akun Google Anda.

3. Setelah Login, maka biasanya akan tampil daftar Blog Anda. Jika ada Blog yang belum ditampilkan, maka klik tombol merah Add Site/ Tambahkan Situs.

4. Sampai tahap tersebut berarti Anda telah mendaftarkan blog yang Anda miliki ke google webmaster tools.

5. Tahap berikutnya adalah cara mendapatkan kode verifikasinya dengan menggunakan cara yang paling mudah yaitu dengan metode copy paste meta tag.

6. Pilih Blog yang akan diverifikasi, klik tombol Manage Site/ Kelola Situs dan pilih Add or Remove Users/ Tambahkan atau Hapus Pengguna.

7. Pada laman selanjutnya, Sorot kursor pada box yang bertuliskan Owner/ Pemilik. Akan muncul menu dropdown dan klik Owner Verification Page/ Halaman Verifikasi Pemilik.

8. Klik Verify using a different method/ Verifikasi dengan menggunakan metode yang berbeda.

9. Klik pada HTML tag, Add a meta tag to your site's home page/ Tag HTML, Tambahkan tag meta ke beranda situs Anda.
10. Anda akan diberikan kode Meta Tag, Berikut ini adalah contoh kode Meta Tag Google webmaster: <meta name="google-site-verification" content="4s6_H7EDRrPGu2HfQbVdh097-CKjVLk1RZkbsKAASz4" />
11. Kemudian, Copy kode yang diberikan oleh Google Webmaster tools.
12. Buka akun blog Anda tapi, jangan tutup dulu situs Google webmasternya.
13. Buka template > Edit HTML.
14. Paste kode meta tag tepat di bawah kode <head>. Cari kode <head> dengan tombol Ctrl+F. Setelah selesai, klik simpan Template.
15. Kembali ke situs google webmaster tools kemudian klik tombol Verify/ Verifikasi.
16. Jika Anda melakukan langkah-langkah di atas dengan benar, maka akan muncul keterangan Success.

Langkah di atas merupakan salah satu trik SEO yang simpel dan gampang dilakukan dan manfaatnya sangat besar karena google webmaster tool dapat memberikan informasi rinci dan statistik tentang bagaimana mereka bisa melihat dan menjelajahi blog Anda. Setelah Blog Anda diverifikasi, kini Google dapat mengakses sebagian besar fitur di blog Anda.

===

Cara Mendapatkan Kode Verifikasi Alexa Terbaru

2015-01-28T18:22:00.002+07:00

Alexa Rank adalah sebuah peringkat yang diberikan kepada sebuah blog atau website berdasarkan banyaknya traffic atau pengunjung, penghitungan ini dilakukan oleh Alexa.com. Peringkat ini dihitung dari terbesar sampai yang terkecil, jadi semakin kecil alexa rank maka semakin bagus kualitas blog tersebut.

Pada bulan Maret 2014, Situs Alexa mengubah tampilan/ template websitenya. Dengan perubahan tersebut membuat banyak blogger bingung bagaimana cara untuk melakukan verifikasi blog disana. Proses verifikasi ini dilakukan untuk mendaftarkan blog Anda di Alexa.com sehingga kita bisa mengakses fitur gratis yang disediakan oleh Alexa.com contohnya fitur pagerank dan dapat menaikkan pagerank blog kita. Jadi, jika kita sudah mendapatkan kode verifikasi dan melakukan verifikasi atas kode tersebut, itu tandanya blog/ web kita sudah diclaim oleh Alexa sebagai blog yang terdaftar.

Saya pernah mendengar bahwa untuk mengklaim atau verifikasi blog di alexa harus berbayar. Akhirnya saya coba verifikasi blog saya di Alexa ternyata, tidak bayar sepeserpun. Alexa memang menyediakan fitur berbayar tapi tak perlu khawatir karena ada fitur gratis juga.

Daripada penasaran, langsung saja saya jelaskan Cara Mendapatkan Kode Verifikasi di Alexa Terbaru. Silakan disimak.

1. Kunjungi alexa.com

2. Tuliskan URL blog Anda misal: bertubies.blogspot.com lalu klik Continue.
3. Selanjutnya, Silakan daftar dahulu. Anda dapat daftar melalui Email atau Facebook. Namun, saya sarankan untuk Daftar lewat Facebook saja biar cepat. Klik tombol Facebook.
4. Setelah selesai mendaftar, lakukan verifikasi blog dengan metode meta tag.
5. Silakan pilih Method 2 - Add an Alexa Verification ID to your homepage. Method 2 ini yaitu metode verifikasi blog dengan meta tag.
6. Akhirnya kita mendapatkan Kode Verifikasi Alexa. Lihat bullet yang bertuliskan:

If you have access to your HTML code:

<meta content='0dwCtJzzw2AFs-HvokwjvD_kZ1k' name='alexaVerifyID'/>

contoh tampilan kodenya

7. Sudah lihat tulisan If you have access to your HTML code. Tepat dibawah tulisan tersebut adalah kode verifikasi Alexa. Kemudian, Copy kode tersebut.
8. Paste kode tersebut di bawah kode template <head> Ingat! jangan tutup situs Alexanya sebelum klik verify my id.
9. Jika sudah, klik tombol Verify my ID. Akan muncul tulisan "Your site is successfully claimed"
10. Belum selesai sampai disitu, Klik My Dashboard >> Site Management >> Edit Site Listing
11. Silakan isi data - data blog Anda pada formulir tersebut :
Site Title : Isi dengan judul blog Anda
Site Description : Isi dengan deskripsi blog Anda
Site Owner : Isi dengan nama pemilik blog
Addres : Isi dengan alamat pemilik atau blog
City : Isi dengan kota Anda
State / Province : Isi dengan Provinsi Anda tinggal
Postal / Zip Code : Isi dengan kode pos di daerah Anda
Country : Isi dengn negara Anda
Public Email : Isi dengan email yang akan dipublikasikan dan bisa dilihat orang lain.
Select the country for your rank : Silakan isi dengan di negara mana Anda ingin menampilkan rangking blog Anda. Misalnya: pilih Indonesia.
12. Selanjutkan klik Save Changes lalu klik Ok dan selesai.

Semoga berhasil dan bermanfaat bagi Anda.

===

Pembahasan Lengkap Tentang Pengertian Meta Tag

2015-01-27T18:06:00.000+07:00

Kenapa sih diperlukan Meta Tag? Memang Meta Tag itu apa? Sebelumnya, saya sudah mengulas sedikit mengenai Meta Tag pada postingan saya Pasang Meta Tag Meningkatkan Score SEO dan Cara Pasang Meta Tag Blogspot. Sebenarnya tanpa Meta Tag ini, blog kita tetap bisa eksis di internet dan search engine, namun ini dimaksudkan memudahkan Robot Search Engine mengenal blog dan artikel kita.

Secara Umum Meta Tag itu ada 4, yaitu Meta Tag Title, Deskripsi, Keyword, dan Robots, namun tidak menutup kemungkinan masih banyak meta tag yang lain terdapat pada sebuah Blog ataupun Website. Seperti yang akan saya ulas kali ini yaitu beberapa Meta Tag yang berguna buat blog Anda, tidak hanya sebatas 4 Meta Tag yang tadi disebutkan.

Berikut adalah penjelasan beberapa Meta Tag yang umumnya digunakan pada blog/ website.

1. Title

Meta Tag Title berfungsi sebagai tanda pengenal. Meta tag ini diisi dengan judul blog Anda.

Codenya :


<b:if cond=’data:blog.pageType == “item”‘>


<title><data:blog.pageName/> | <data:blog.title/></title>


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


</b:if>

Atau


<b:if cond=’data:blog.pageType == &quot;index&quot;’>


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


<b:else/>


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


</b:if>

2. Deskripsi

Meta Tag ini menjelaskan deskripsi mengenai isi dari halaman blog Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar deskripsi ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan.

<meta name= “description” content=”Deskripsi blog atau web Anda” />

3. Keyword

Meta Tag ini menjelaskan kata kunci atau Keyword sebuah artikel/ postingan.

<meta name=”keywords” content=”keyword1, keyword2, keyword3,dst” />

4. Rating

Menjelaskan website atau blog Anda boleh diakses untuk usia berapa.

Contohnya : general (semua usia), mature (dewasa), restricted (terlarang) dan 14 years (remaja)

<meta name=”rating” content=”general” />

5. Copyright

Meta tag ini menjelaskan hak cipta website atau blog Anda.

<meta name=”copyright” content=”2010, Nama blog/website Anda” />

6. Author

Meta tag ini menjelaskan pemilik dan pengelola website atau blog.

<meta name=”author” content=”Nama Anda” />

7. Distribution

Meta tag ini menjelaskan distribusi blog atau website Anda apakah global, everyone, local, regional, maupun Internal Use.

<meta name=”distribution” content=”global” />

8. Robots

Meta tag ini menjelaskan perintah dan ijin yang diberikan kepada robot/spider yang akan mengakses halaman blog atau website Anda. Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika suatu web/blog memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

Format dasar dari meta tag robots adalah sebagai berikut :
<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :
```
<meta name="robots" content="index, follow" />
```

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.

<meta name="robots" content="noindex, nofollow" />

9. Language

Meta tag ini menjelaskan bahasa yang dipakai di website atau blog Anda.

<meta name=”language” content=”id” />

10. Geo Country

Meta tag ini menjelaskan asal website atau blog Anda.

<meta name=”geo.country” content=”id” />

11. Geo Placename

Meta tag ini fungsinya hampir sama dengan geo country namun lebih spesifik. Ini adalah Meta Tag untuk memberitahu asal negara blog anda. Indonesia bisa anda ganti dengan nama negara blog anda.

<meta name=”geo.placename” content=”Indonesia”/>

12. Expires

Meta tag ini menjelaskan apakan halaman website atau blog Anda punya tenggang waktu ditampilkan di search engine atau tidak ada batasan waktu.

<meta name=”expires” content=”never”/>

13. Target

Meta tag ini hampir sama dengan distribution namun lebih menekankan pada tujuan website Anda untuk diindeks.

<meta name=”target” content=”global”/>

14. Spiders

Meta tag ini menjelaskan spider dan bot apa saja yang boleh mengakses website atau halaman blog.

<meta name=”SPIDERS” content=”ALL”/>

15. Verifikasi
Kode - kode meta tag verifikasi digunakan sebagai bukti bahwa Anda sudah mem-verifikasi blog kepada masing-masing mesin pencari seperti Google, Bing, Msn, Yahoo, dan Alexa. .

<meta content='Kode Verifikasi Google' name='google-site-verification'/>
<meta content='Kode Verifikasi Google Analitics' name='verify-v1'/>
<meta content='Kode Verifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Verifikasi Blog Catalog' name='blogcatalog'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>

16. Content Type (Charset)
Meta Tag yang satu ini berguna untuk menyatakan encoding website Anda. Fungsi sebenarnya adalah agar Browser yang dipakai tidak salah menampilkan halaman blog Anda. Meta Tag ini tidak terlalu penting karena tidak berpengaruh terhadap peringkat artikel anda di Google. Meta Tag ini bisa saja membuat tampilan blog Anda berantakan jika Anda salah dalam pemasangannya.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

17. Refresh
Ini adalah Meta Tag yang sangat tidak dianjurkan untuk dipakai. Keuntungan memasang Meta ini hanyalah untuk meningatkan Pageviews blog. Tapi ini tidak akan membawa manfaat, malah bisa saja akan dianggap Web Spam oleh Google. Meta ini akan mengganggu pengunjung blog anda. Mengapa demikian? Karena pengunjung akan dibingungkan dengan Refresh halaman yang otomatis selang beberapa waktu yang telah ditentukan.

Bayangkan saja jika Anda membaca artikel kemudian halamannya melakukan refresh, kesal? Anda harus mencari bacaan terakhir yang anda baca, terlebih lagi jika informasi yang anda butuhkan itu sangat penting. Jadi sebaiknya jangan gunakan Meta ini.

<meta http-equiv='refresh' content='10'/>

18. Revisit After
Meta tag ini menjelaskan kapan robot harus kembali mengindeks halaman website atau blog Anda. Meta ini berguna untuk mengatur tingkat perayapan Google terhadap situs Anda. Meta Tag ini sudah diabaikan google, dan justru Meta Tag ini tidak SEO Friendly dan kurang baik jika dipasang pada blog Anda. Mengapa demikian? karena Google sudah menentukan tingkat perayapan sebuah blog, jadi kenapa harus susah-susah memang Meta Tag ini?

<meta content='1 days' name='revisit-after'/>

Kode-kode Meta Tag di atas juga ampuh untuk menaikkan score SEO. Cara Mudah Agar Score Blog 100% SEO.

Catatan:

Sangat disarankan! untuk tidak menggunakan Meta Tag yang berwarna merah.

===

Cara Pasang Meta Tag SEO di Template Blogspot

2015-01-26T01:04:00.000+07:00

Cara Pasang Meta Tag SEO di Template Blogspot - Meta tag pada blog berfungsi untuk memberikan informasi kepada search engine mengenai gambaran dan isi suatu blog/website. Blogspot atau Blogger dengan template bawaan/ default biasanya belum memiliki meta tag ini, oleh karena itu, untuk mengoptimalkan pencarian di search engine, meta tag perlu ditambahkan. Sebelum menambahkan Meta Tag, ada tahapan dasar yang perlu diketahui untuk menunjang blog agar SEO Friendly. Tahapan tersebut dirangkum dalam artikel Cara Mudah Agar Score Blog 100% SEO Friendly.

Perlu diingat! Meta tag selalu berubah dari waktu ke waktu sesuai dengan perkembangan algoritma mesin pencari. Meskipun demikian, kita tidak perlu selalu mengganti meta tag pada blog kita setiap muncul meta tag yang baru. Hal ini disebabkan meta tag bukanlah satu-satunya faktor yang membuat blog mudah ditelusuri mesin pencari, melainkan ada faktor lain yang juga penting seperti pendaftaran blog pada mesin pencari, Teknik SEO on Page, dan Teknik SEO off Page.

Langsung saja akan saya jelaskan cara pasang Meta Tag di template bawaan blogspot/ blogger.

1. Login ke akun blogger Anda.
2. Masuk ke Template >> Edit HTML
3. Klik Ctrl+F untuk memudahkan pencarian, lalu Copy/ Paste kode <b:include data='blog' name='all-head-content'/> dan klik Enter.

Jika Anda tidak menemukan kode tersebut, Anda bisa menaruhnya di bawah kode <head> Hal ini wajar karena setiap template memiliki kode yang berbeda-beda.

4. Sudah ketemu kodenya? Copy kode berikut ini dan Paste-kan tepat di bawah kode yang tadi dicari. Ini adalah kode-kode Meta Tag terbaik yang super SEO, bagus untuk mendongkrak posisi blog Anda di search engine terutama google.

<meta content='Kode Verifikasi GoogleWebmaster' name='google-site-verification'/>
<meta content='Kode Verifikasi Google Analitics' name='verify-v1'/>
<meta content='Kode Verifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Verifikasi BlogCatalog' name='blogcatalog'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='NOINDEX, NOFOLLOW' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<meta content='global' name='distribution'/>
<meta content='2015, Berbagi Tutorial Bloggies' name='copyright'/>
<link href='https://plus.google.com/106194501759316423332' rel='author'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Deskripsi tentang blog Anda' name='description'/>
<meta content='keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6' name='keywords'/>

</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://bertubies.blogspot.com/atom.xml' rel='alternate' title='Berbagi Tutorial Bloggies - Atom' type='application/atom+xml'/>
<link href='http://bertubies.blogspot.com/rss.xml' rel='alternate' title='Berbagi Tutorial Bloggies - RSS' type='application/rss+xml'/>

5. Ganti tulisan berwarna pink sesuai dengan data yang Anda miliki. Jika sudah, Klik Save.
Untuk mengetahui fungsi dari setiap Meta Tag, silakan kunjungi Pembahasan Lengkap Mengenai Pengertian Meta Tag.

===