Ada satu keluhan yang sering dialami Blogger saat membuat laman (terkait: Membuat Lebih dari 10 Static pages di Blogger) di Blogger. Seringkali URL/alamat Laman yang dihasilkan tidak sesuai dengan judul, tetapi malah menjadi blog_page kemudian diikuti angka 24, 16 atau angka-angka yang lain.

Misal saat Anda membuat laman berjudul Konfirmasi, seharusnya URL yang terbentuk adalah:
http://www.themasdoyok.com/p/konfirmasi.html

tapi kadang terjadi error, kemungkinan besar karena koneksi. Tapi terkadang koneksi lancarpun juga terjadi error seperti berikut ini, URL yang dihasilkan tidak sesuai dengan judul Laman, malah menjadi:
http://www.themasdoyok.com/p/blog_page24.html

atau URL sesuai dengan Judul Laman tapi diikuti dengan angka acak:
http://www.themasdoyok.com/p/konfirmasi2424.html

Nah, ada trik menarik untuk mengatasi hal ini adalah dengan cara:

- Saat menuliskan judul Laman jangan menggunakan huruf kapital semua
- Pada kolom isian postingan cukup ketikkan dahulu satu karakter saja, misalkan 'a'
- Kemudian publish. Jika URL yang dihasilkan sudah benar, maka baru edit Lamannya. Pengeditan ini tidak akan merubah URL yang sudah terbentuk. Semoga bermanfaat...

Terkait: Mengatasi Error Blank Edit HTML Blogger
Info: Alamat Laman / Pages Blogger Menjadi blog_page

Melengkapi Profil Google+ - Entah mengapa Google terus-terusan mempromosikan Google+. Mengintergrasikan semua layanannya dengan Google+, menampilkan link-link cepat ke Google+ di berbagai tempat dan menulis postingan-postingan pembaruan tentang Google+. Seperti kita tahu Google+ masih kalah (jauh) dalam hal kepopuleran dengan Facebook dan Twiiter. Lalu, apakah perjuangan keras Google ini untuk menggeser dominasi facebook dan twitter? Atau yang lain?

Yang jelas Google (sangat) merekomendasikan Google untuk Blogger. Bahkan Google mengatakan Google+ menjadi rujukan terpercaya untuk mengetahui kredibilitas seorang penulis. Ya, terserah lah apa mau-mau Google. Saya hanya akan menginformasikan saja pembaharuan-pembaharuan mereka sekaligus memberikan tutorial singkatnya.

Apakah Anda sudah tahu fitur terbaru Google: Profile in Search. Fitur ini memungkinkan Anda untuk mencari seseorang di Google+ dengan mudah. Cukup ketikkan nama nanti akan muncul rekomendasi orang, ya seperti ketika kita cari orang di facebook lah. Tapi, ini di hasil cari Google. Ini berkaitan dengan post saya dahulu: Mencari Berdasar Auhtor di Google

Nah, pagi ini saya iseng-iseng mempelajari lagi artikel-artikel lama sambil senyum-senyum sendiri. Tidak terasa sudah ada 950 an artikel lebih di blog ini :). Sambil iseng-iseng tes keyword, eh tanpa sengaja malah mendapat rujukan dari Google untuk melengkapi profil Google+

Bagi Anda yang pengen untuk melengkapi juga, Anda bisa iseng-iseng ketikkan keyword yang paling kuat dari blog Anda. Misalkan saya, keywordnya: Themasdoyok . Maka Google akan menampilkan hasil cari situs Anda dilengkapi dengan foto dan nama Anda (jika belum muncul silahkan baca: Tes Author Verification).

Klik nama Anda di hasil cari Google, maka akan muncul hasil cari artikel-artikel yang hanya ditulis oleh Anda.

Disamping kanan dilengkapi dengan profil singkat Anda di Google+. Akan muncul juga berepa persen keterisian data Anda di Google+. Jika belum cukup klik Update Profil dan ikuti langkah-langkahnya. Jika sudah komplet, akan ada jendela munculan pemberitahuan bahwa profil Anda sudah 100%.


Bagi yang namanya belum muncul di hasil cari Google, bisa melengkapi profil atau cek prosentase kelengkapan profil dengan link cepat berikut:
https://plus.google.com/u/0/102276605407576860455/posts
yang berwarna merah ganti dengan id Google+ Anda. Semoga bermanfaat.

Plus Plus
Resource: Google Inside Search
Tanya Jawab Blog: Gabung TheMasDoyok Answers
Blog Issue terbaru: TheMasDoyok Issues

Item info: Melengkapi Profil di Google+

TheMasDoyok memperkenalkan serial terbaru: BlogProject for Nuwbie. Pada serial ini saya akan menulis tutorial mengenai pembuatan suatu project blog untuk keperluan tertentu dari nol hingga jadi. Pada edisi pertama saya akan memperkenalkan pembuatan blog Download MP3 mudah di blogspot. Dann... bonus, di setiap serial blogproject akan dilengkapi dengan template gratis yang sesuai. :D Cekidot. Demonya: http://themasdoyokmp3.blogspot.com/
Fitur-fitur:
1. Tidak Usah Upload file MP3 Sendiri karena blog ini blog pencari mp3 otomatis
2. Template gratis yang sesuai kebutuhan
3. Loading cepet
4. Tambahan: Optimasi SEO dan Modifikasi Template harap dilakukan sendiri biar tambah joss hehe

Step by Step:
A. Membuat Blog Blogspot
B. Membuat Google Custom Search 2 Buah
C. Membuat Laman Download
D. Membuat Laman Search
E. Membuat Laman Chart
F. Membuat Postingan
G. Pemasangan Template dan Setting

A. Membuat Blog Blogspot
Hal yang pertama Anda butuhkan adalah membuat blog Blogspot.
Tutorial pembuatan blog blogspot: Pembuatan Blog di Blogger

B. Membuat Google Custom Search 2 Buah
Google Custom Search pertama untuk halaman download
- Buat Google CSE di http://www.google.com/cse
- Klik New Search Enginee
- Pada sites to search isikan www.4shared.com (agar pencarian link download otomatis hanya mencari di 4shared)

- Klik tombol Create
- Klik Edit Search Enginee > Look and Feel > Layout
- Pilih jenis tampilan Result Only
- Klik Save and Get Code (Akan muncul halaman kode, copy kode dan simpan ke notepad)

Google Custom Search kedua untuk halaman hasil cari
- Langkahnya sama, hanya pada point ke 2, sites to search isi dengan Alamat blog Anda.
- Langkah semua sama sampai Save and Get Code. Simpan juga kode yang ini ke notepad atau Ms Word.

C. Membuat Laman Download
- Klik Laman
- Buat Laman Baru

- Buat Laman Kosong
- Pada Judul Isikan 'Download'
- Pada kolom Isian isikan dulu satu karakter, misal 'A'
- Publish
- Coba Buka Halaman Download,

apakah URL sudah benar berformat:
http://alamatblog.blogspot.com/p/download.html
(kadang dalam pembauatan laman terjadi Eror sehinnga URl berakhiran /p/blog-page.html bukan /p/judul.html)
- Jika sudah benar, sekarang Edit halaman tadi. Masuk ke mode pengeposan Edit HTML.

- Copy Paste kode berikut:

<div style="text-align: center;">
Terima kasih atas kunjungan Anda. Silahkan pilih link download di bawah ini: (<b><a href="http://a lamatblog.blogspot.com/" target="">atau Kembali Ke Beranda</a></b>)</div>
<div style="text-align: center;">
<br /></div>
Script Google Custom Search 1 yang tadi Disimpen di Notepad, masukkan Kesini

- Publish Laman

D. Membuat Halaman Search
Sama dengan cara membuat Laman Download.
- Pada Judul isikan dulu 'search'
- Pada kolom isikan dulu satu karakter, misal 'a'
- Publish terlebih dahulu dan pastikan URL benar.
- Edit laman. Pada pengeposan mode EDIT HTML yang dimasukkan adalah Script Google CSE yang kedua.

E. Membuat Laman Chart
- Pada Judul isikan dulu 'chart'
- Pada kolom isikan dulu satu karakter, misal 'a'
- Publish terlebih dahulu dan pastikan URL benar.
- Edit laman. Pada pengeposan mode EDIT HTML yang dimasukkan adalah:

<div style="text-align: center;">
<b><span style="font-family: Verdana,sans-serif;"><span style="font-size: large;">Tangga Lagu Indonesia Terbaru Juni 2013</span></span></b>&nbsp;</div>
<br />
<br />
<div id="charthot">
<a href="#">Judul Lagu1</a></div>
<div id="chartup">
<a href="#">Judul Lagu 2</a></div>
<div id="chartdown">
<a href="#">Judul Lagu 3</a></div>
<div id="chartstop">
<a href="#">Judul Lagu 4</a></div>

Keterangan:
1. Setelah URL Laman terbentuk, Anda boleh gonta-ganti judul Laman dan tidak akan merubah URL
2. Cara Mengedit Chart:
- # isi dengan URL Lagu
- Judul Lagu silahkan ubah sesuai judul lagu di posisi tersebut
- pada id, ganti sesuai kebutuhan. charthot otomatis di bagian kiri judul lagu muncul gambar api yang berarti baru muncul/ngehits. chartup mengalami kenaikan peringkat. chartdown penurunan peringkat dan chartstop tidak mengalami perubahan peringkat.

F. Membuat Postingan
1. Agar postingan lebih baik di index Google, sebaiknya dilengkapi dengan liryc.
2. Agar lebih menarik pengunjung bisa dilengkapi dengan foto artist atau album.
3. Tulislah judul yang menarik tapi tidak menipu.
4. Jangan Lupa tentukan Label agar gadget Rekomendasi Artikel bekerja.
5. Tambahkan kode berikut ini paling atas dari isi postingan (ditambahkan melalui pengeposan mode Edit HTML)
<div id="downloadlink"><a href="#" target="_blank">Download </a></div>
6. # ganti dengan link download, format penulisan link download:
  http://alamatlamandownload.html?q=Artist Judul Lagu
  contoh: http://themasdoyokmp3.blogspot.com/p/download.html?q=Fatin Perahu Kertas
7. Agar tidak berulang-ulang menuliskan link download, Anda bisa menambahkannya ke template postingan. (Setiap membuat postingan baru, otomatis kode tersebut sudah ada di paling atas)
- Login Blogger > Setelan > Pos dan Komentar > templat Entri
- Isikan kode seperti pada poin nomer 4
- Tekan tombol Simpan Setelan

G. Pemasangan Template dan Setting
1. Download Template di: Download Theme TheMasDoyok MP3 v1
2. Pasang Template di Blog (Baca: Cara Ganti Template Terbaru)
3. Setting NavBar
- Login Blogger > Template > Edit HTML
- Cari kode berikut ini dan ganti sesuai kebutuhan:
<div class='topnav' id='topnav'>
    <ul id='topnav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Lagu Pop</a></li>
<li><a href='#'>Lagu Barat</a></li>
<li><a href='#'>Lagu India</a></li>
<li><a href='#'>Tips Download</a></li>
<li><a href='http://themasdoyokmp3.blogspot.com/p/chart.html'>Chart Lagu Indonesia</a></li>
        </ul>
    </div>

4. Setting Search Box
- Cari kode berikut
<div id='searchbox'> <form action='http://themasdoyokmp3.blogspot.com/p/search.html'>
      <div>
        <input name='cx' type='hidden' value='007737737555262419625:o8skn4r0k6a'/>
        <input id='searchform2' name='cof' type='hidden' value='FORID:10'/>
        <input id='searchform2' name='ie' type='hidden' value='UTF-8'/>
        <input autocomplete='on' id='searchform2' name='q' placeholder='tulis nama artist atau lagu, tekan enter' size='33' type='text'/>
             </div>
- Ganti yang berwarna hijau dengan URL/alamat Laman search yang telah dibuat pada langkah D.
- Ganti yang berwarna merah dengan id cx Google CSE Anda yang kedua (yang untuk halaman search)

5. Setting Halaman Download dan Halaman Chart
- Cari Kode Berikut
<b:if cond='data:blog.url == &quot;http://themasdoyokmp3.blogspot.com/p/download.html&quot;'>
<style>
  #header-wrapper, #searchbox{display:none;}
  body {background:#000}
#main-wrapper, #outer-wrapper {
    width: 600px;
}
</style></b:if>
<b:if cond='data:blog.url == &quot;http://themasdoyokmp3.blogspot.com/p/chart.html&quot;'>
<style>
  #header-wrapper, #searchbox{display:none;}
  body {background:#000}
#main-wrapper, #outer-wrapper {
    width: 600px;
}
- ganti yang berwarna hijau dengan URL/alamat laman download seperti telah dibuat pada langkah C.
- ganti yang berwarna merah dengan URL/alamat laman chart seperti telah dibuat pada langkah E.


 Item info: Cara Membuat Blog Download MP3 di Blogspot

Sudahkah Anda menggunakan Google Custom Search di Blog Anda? Jika belum, yang pertama harus Anda lakukan adalah segera memasangnya karena ini berarti peningkatan segalanya untuk blog Anda. Pencarian yang lebih mudah, hasil yang lebih relevan dan mendongkrak SEO Anda.

Baca:
- Cara Membuat Google Custom Search
- Hasil Cari Google Custom Search di Halaman Baru
- Dapat Uang dari Google Custom Search
- Mengubah Tampilan Google Custom Search
- Index Manual di Google Custom Search
(Keterangan: Artikel-artikel tersebut adalah artikel yang dipost mungkin setahun lalu, Google CSE melakukan sedikit perubahan pada desain dashboard. Screenshoot yang ditampilkan akan sedikit berbeda)

Kembali ke laptop, kembali ke judul...
Mungkin Anda mengalami keluhan serupa. URL Pada hasil cari Google Custom Search menampilkan terlalu banyak karakter. Termasuk di dalamnya karakter unik CSE cx, ford dan UTF. Misalkan di blog ini script CSE diletakkan di halaman:
http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.html
kemudian kita search dengan keyword: tips blog
maka alamat pada address bar yang akan muncul adalah:
http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.html?cx=007737737555262419625%3A5hrz_kthoju&cof=FORID%3A10&ie=UTF-8&q=tips+blog

Terlalu panjang bukan?
Lalu bagaimana jika kita ingin karakter yang berwarna merah hanya menampilkan keyword saja (?q=keyword , tidak menampilkan cx, cof dan UTF). Caranya gampang. Anda cukup menggunakan script dari Google Developers berikut ini pada pemostingan mode HTML.

<script>
(function() {
  var cx = '123:456'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>

Ganti yang berwarna merah dengan id cx (custom search enginee ID) Anda.
Bisa Anda temukan di: Setup > Basic > Search Enginee Id (Perhatikan gambar)

Dengan cara di atas, maka format URL yang akan muncul di address bar:
www.alamatblog.blogspot.com/-/....html?q=keyword


Tips & Keuntungan
- Masukkan script di atas pada laman blogspot, bukan postingan biasa. URL menjadi lebih pendek lagi.
- Menggunakan script di atas menunjukkan hasil cari yang lebih profesional karena memuat lebih sedikit karakter di Address Bar.
- URL singkat bahkan memudahkan pengunjung untuk ketik keyword langsung di address bar. Pengunjung cukup mengganti karakter yang berada di belakang ?q=


Semoga bermanfaat. Salam Blogging...


Update
Google CSE sekarang sudah menggunakan susunan sript seperti di atas. Jika ingin lebih simple, bagi pengguna CSE lama bisa ambil ulang code di Google CSE.

Item Info: Google CSE, Hanya Menampilkan ?q=

Seperti kita tahu Blogger memperkenalkan sistem komentar Google+ di blog blogspot (Baca: Memasang Komentar Google+ Di Blogger). Tapi ternyata masih sangat banyak kekurangan. Termasuk soal penggunaan Iframe yang berarti tidak terindeks dengan baik oleh Google dan hal-hal lain yang masih menjadi bahan uji (Baca: Komentar Google+ Banyak Kekurangan).

Nah, lepas dari semua itu, mungkin Anda ada yang sudah terlanjur ngebet seperti saya ingin menggunakan Komentar bergaya Google+. Sambil menunggu blogger mengembangkan komentar Google+ nya, mari kita bermain CSS saja agar komentar Blogger default kita bergaya Google+.

Langsung saja saya bagi-bagi CSS untuk komentarnya:
.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comments-content .user {
    color: #262626;
        font-style: normal;
    font-weight: bold;
font-size: 13px;
font-family: arial;
}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;
}
.comments .comments-content .comment-content {
    color: #262626;
    font-family: arial;
padding-right: 25px;font-size:13px;
text-align: left;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;
}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime {
    color: #999999;
    font-family: arial;
    font-size: 11px;
    margin-left: 6px;
}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {
  background: none repeat scroll 0 0 #EEEEEE;
    color: #262626;
    font-size: 16px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 25px;
font-style:normal;
font-family:arial;
}

#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
    display: none;
}
#comments-block dd p {
  margin: 0 0 .75em;
}
.comment-form {clear: both;
    margin-left: 20px;
    margin-top: -60px;
width: 550px;}
.comments .avatar-image-container img {
    max-width: 50px;
}
.comments .avatar-image-container {
    float: left;
    max-height: 50px;
    overflow: hidden;
    width: 50px;
}
.avatar-image-container {
    background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 50px;
    margin-left: 20px;
    text-align: center;
    width: 50px;}
.comments .avatar-image-container img {
   width: 50px;}

#comments-block.avatar-comment-indent {
    margin-left: 4px;
    position: relative;
}
ol #comments-block li {
    border-bottom: 1px solid #EEEEEE;
    list-style:none;
    margin: 20px 0;
    z-index: -100;
min-height:90px;
}
#comments-block .comment_content {
    width: 500px;
}
.deleted-comment {
  font-style:italic;
  color:gray;
}

Silahkan di copy-paste menggantikan CSS komentar yang sudah ada di blog Anda. Met pagi, sedulur...

Artikel Info: Membuat Komentar Blogger Bergaya Google+

Banyak keluhan dari temen Blogger mengenai domainnya yang gagal diakses tanpa www. Yup tentu saja ini kerugian besar dari banyak sisi. Kredibilitas, SEO, traffic dan banyak hal lain. Berdasar pengalaman pribadi saya pun pernah mengalami karena perubahan yang dilakukan Google tentang alih domain. (Baca: Cara Alih Domain Harus Verifikasi)

Nah, ternyata banyaknya kasus yang menyebabkan suatu domain gagal diakses tanpa WWW adalah karena kita masukkan A record baru selain 4 list angka yang telah ditentukan Google. Seperti kita tahu dulu kita biasa menambahkan A record IP blog manual. Kita mengetahuinya dengan cara:
- Buka CMD (Command Prompt)
- Ketikkan Ping www.alamatblog.blogspot.com
- Kemudian akan kita dapatkan susunan angka unik IP Adress Blog.

Sekarang, jangan lagi tambahkan A record dengan angka IP seperti cara di atas. Jika Anda pernah menambahkannya, sebaiknya dihapus terlebih dahulu, dan kemudian cukup masukkan A record yang diperintahkan Google.

Susunan angka untuk blog Anda akan berbeda. Silahkan baca artikel lengkap mengenai penambahan A Rercord dan CNAME Record terbaru dari Google,di: Cara Alih Domain terbaru Google, harus Verifikasi.

Item info: Memperbaiki Alamat Gagal Diakses Tanpa WWW

Utak-atik tampilan blog memang gak ada puasnya. Setiap saat kita pasti nyoba dan nyoba lagi. Biar gak bosen. Biar blog tetep fresh. Salah satu bagian yang wajib dimodifikasi adalah kotak komentar. Alasaannya serderhana, karena dibagian ini kita akan berinteraksi dengan banyak blogger lain. Jadi mereka harus bisa nyaman dong di blog kita.

Pada contoh di atas, ukuran foto pengomentar utama dan ukuran font komentar  lebih besar ketimbang reply, warna stabilo author pun juga beda.

Nah, kali ini kita akan memodifikasi agar tampilan/style komentar utama berbeda dengan komentar reply. Standard bawaan blogger CSS-CSS komentar reply akan sama dengan komentar utama. Jika Anda pengen membuatnya berbeda Anda bisa tambahkan CSS seperti contoh berikut:

CSS Komentar utama (sudah ada):
.comments .comments-content .comment-content {
background: #FFFFFF;
}

CSS Komentar reply (untuk ditambahkan):
.comment-replies .comment-content {
background: #EEEEEE !important;
}

Keterangan:
- Perhatikan yang berwarna merah dan hijau adalah perbedaannya.
- Pada CSS Komentar reply tambahkan !important agar CSS bekerja (Baca: Fungsi dan Pengertian !important)

Contoh CSS jadinya adalah seperti kode berikut ini. Anda bisa copy semuanya untuk mengganti CSS komentar yang ada di Blog Anda.

.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {  background: none repeat scroll 0 0 #EEEEEE;color: #262626;
    font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px;
font-style:normal; font-family:arial;}
#comments-block dt { margin: .5em 0;}
#comments-block dd { margin: .25em 0 0;}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%; display: none;}
#comments-block dd p {
  margin: 0 0 .75em;}
.comment-form {clear: both;
    margin-left: 20px; margin-top: -60px;width: 550px;}
.comments .avatar-image-container {
    float: left; overflow: hidden;}
.avatar-image-container {
background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block; float: left;font-size: 20px;
 margin-left: 20px;text-align: center;}
#comments-block.avatar-comment-indent {
    margin-left: 4px; position: relative;}
ol #comments-block li {border-bottom: 1px solid #EEEEEE;
    list-style:none;margin: 20px 0;
    z-index: -100;min-height:90px;}
#comments-block .comment_content {
    width: 500px;}
.deleted-comment {font-style:italic; color:gray;}

.comments .comments-content .comment-content {
color: #071585;font-size: 18px;margin-top: 10px;
line-height: 1em;text-align: left;}
.comment-replies .comment-content {
font-size: 13px !important; color:#000 !important;
margin-top:0px !important;}

.comments .comments-content .datetime {
font-size: 15px;}
.comment-replies .datetime {
font-size: 10px !important;} 

.comments .comments-content .user {
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comments .comments-content .user a,
.comments .comments-content .user a:link{
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comment-replies .user, .comment-replies .user a,
.comment-replies .user a:link {
font-size: 12px !important; padding:0pc !important;
background:#eee !important; color: #000 !important;}

.comments .comment-block {margin-left: 100px;}
.comment-replies .comment-block {
margin-left: 75px !important;}

.comments .avatar-image-container img {
width: 70px;}
.comment-replies  .avatar-image-container img {
width: 40px !important;} 

.comments .avatar-image-container {
max-height: 70px; width: 70px;}
.comment-replies  .avatar-image-container {
max-height: 40px !important; width: 40px !important;
}
 
.comments .avatar-image-container img {
max-width: 70px;}
.comment-replies .avatar-image-container img {
max-width: 40px; !important} 

.avatar-image-container {height: 70px;}
.comment-replies .avatar-image-container {height: 40px !important;}


Semoga bermanfaat dan mempercantik blog Anda :D
Item Description: Membuat Komentar Utama dan Reply Berbeda Gaya

Seringkali banyak pertanyaan dari blogger mengenai template, gadget atau SEO. Saya jawab sebisanya dan kadang-kadang saya posting agar bisa kita pelajari bersama. Nah, atas dasar itu, saya membuka kembali layanan lama yang dulu bernama MasDoyok Answers (baca: Memperkenalkan MasDoyok Answers) yang ikut hilang karena domain lama di banned. Sekarang TheMasDoyok Anwers hadir kembali dengan pengelolaan yang lebih baik.

Jadi... Ketika Anda memiliki masalah atau pertanyaan menyangkut blogging, Anda dapat dengan mudah akses TheMasDoyok Answers, tidak harus menunggu saya online di fb atau twitter. Saya akan berusaha menjawab secepatnya, dan mungkin beberapa teman yang ada disana juga bisa ikut membantu memberikan jawaban.

Sekarang juga, bisa dicek di alamat:
http://www.themasdoyok.com/p/answers.html

Bahan pembelajaran yang masuk juga akan saya arsipkan untuk kemudian diposting setiap minggunya. Semoga kedepannya semakin memudahkan dan banyak manfaat.

Juga mengenalkan, papan informasi TheMasDoyok di alamat:
http://www.themasdoyok.com/p/informasi.html

Kadang-kadang saya tidak mempunyai waktu untuk posting panjang mengenai info penting atau isu tertentu, Anda bisa cek terlebih dahulu disini dalam format info singkat dan padat. Sekali lagi, semoga bermanfaat.

NB: Tips Berinteraksi di TheMasDoyok Answers
Deskripsi Item: Tanya Jawab Blog di THEMASDOYOK Answers

Gadget HTML memang bermasalah ketika harus mengalami lintas template. Mungkin Anda sering mengalami, backup template Anda, namun ketika dipasang di blog lain template tidak se normal yang Anda duga. Banyak gadget hilang atau berantakan. Nah, biasanya ini terjadi pada gadget-gadget HTML (Gadget yang ditambahkan melalui tata letak, Add gadget > HTML gadget.)

1. Bisakah Mempertahankan Isi Gadget HTML?
Beberapa kali melakukan percobaan tetap saja saya kehilangan isi pada gadget HTML, ketika backup-an template digunakan di blog yang lain. Yang bertahan hanyalah title gadget, sementara isinya hilang atau berpindah acak ke kolom gadget HTML yang lain. Ini menjawab pertanyaan mengapa ketika Anda menggunakan template-template super custom bergaya magazine atau news dari simplex misalnya, maka para penyedia template akan melengkapinya dengan tutorial manual pengisian gadget-gadget HTML.

Intinya isi gadget HTML tidak bisa bertahan, jadi jika Anda ingin back-up template, untuk gadget-gadget HTML sebaiknya di back-up manual. Dengan cara pergi ke tata letak > Edit gadget HTML yang Anda inginkan, kemudian copy dan save isi gadget tersebut ke notepad, ms word atau program lainnya.

2. CSS Tertentu Untuk Gadget HTML
Gadget-gadget HTML memiliki id HTML1, HTML2, HTML3 dan seterusnya. Misalkan Anda meletakkan gadget HTML di sidebar, maka Anda dapat melakukan kustomisasi CSS khusus pada gadget HTML tertentu agar berebeda dengan gadget-gadget lain di sidebar. (Gadget-gadget pada sidebar akan mengikuti CSS sidebar, misalkan title akan otomatis mengikut CSS .sidebar h2, isi akan mengikuti .sidebar .widget dan lain-lain)

Nah, untuk membuat CSS tertentu Anda bisa menambahkan CSS selector #HTML1 atau #HTML2 atau #HTML3 dan seterusnya. Letakkan di atas ]]></b:skin>.

Contoh penulisannya sebagai berikut:
#HTML1 {font-size: 12 px; background:  #fff}
#HTML1 h2 {font-family: Arial}

Untuk mengetahui ID Widget silahkan baca: Cara Mudah Mengetahui ID Widget

3. Mempertahankan CSS Gadget HTML
Selanjutnya, pertanyaannya adalah bagaimana mempertahankan CSS dari gadget HTML?.
Misal kita membuat CSS untuk gadget HTML1 pada blog A, kemudian kita backup/download template kita. Template tadi ingin kita terapkan di blog yang lain, misal blog B. Padahal di blog B sudah ada gadget HTML1-nya. Ini berarti bisa terjadi tabrakan dua gadget HTML1.

Karena hal ini, maka otomatis gadget HTML1 pada template backup-an ketika dipasang di blog B akan berubah menjadi HTML2. Padahal seperti kita tahu CSS-nya menggunakan selector #HTML1. Alhasil, CSS selector salah sasaran akan mengatur gadget HTML1 yang asli ada di blog B, padahal yang kita inginkan CSS tersebut mengatur HTML1 pada template back-up yang knii sudah berganti id menjadi HTML2.

Permasalahan seperti ini tidak akan kita temukan jika kita tidak akan menggunakan template editan kita untuk banyak blog. Untuk mengatur Gadget HTML tertentu, cukup gunakan cara seperti pada poin nomer 2. Namun, jika kita ingin membagikan template editan kita kepada umum atau akan digunakan untuk beberapa blog kita, maka gunakan pengaturan CSS seperti berikut:

Pada Kolom Edit HTML Template, gadget HTML akan berbentuk kode seperti berikut:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

- Tidak usah mengedit ID gadget HTML1
- Untuk pengaturan judul gadget HTML, ubahlah 'title' menjadi id unik terserah Anda, misalkan 'toptabview'. Berarti baris title menjadi: <h2 class='toptabview'><data:title/></h2>.
- Untuk pengaturan gadget HTMl, seperti background gadget dll, ubahlah 'widget-contet' menjadi id unik misalkan 'toptabview'. Berarti baris widget-content menjadi: <div class='toptabview'>
- Terakhir tambahkan CSS dengan format:
.toptabview h2 {font-size:.......;}
.toptabview {background:...;}

Dengan cara tersebut, meski id gadget HTML berubah, maka CSS tidak akan salah sasaran. Hanya berbagi pengetahuan, jika Anda mengetahui lebih, tolong di share ya di kolom komentar...

NB: Jiak belum mengenal CSS, bisa dipelajari di: Belajar CSS.

Info ArticleBackup Gadget HTML Blogger - Blog Konsultasi

Interface blogger yang baru memang lebih mantap, tapi effect-nya adalah loading lebih lama dan kadang-kadang terjadi blank, seperti halaman yang tidak merespon dan berhenti loading. Salah satu yang paling sering kita alami adalah di bagian Edit HTML Template. Pasti sering mengalami kan? Apalagi jika koneksinya lambat. Kadang ini bikin kita badmood sendiri padahal kita ingin cepet-cepet memperbaiki template. Di load ulang kadang juga terjadi blank lagi... Uhhhh...

Nah, jangan khawatir, semoga tips ringan berikut ini membantu Anda yang mengalami masalah sama, yakni terjadi blank pada editor HTML template seperti gambar berikut:

 

Trik mudah adalah dengan memperkecil tampilan di layar browser, silahkan klik CTRL dan - secara bersamaan. Otomatis layar akan mengecil, kemudian pada editor HTML tampil sebagian kode. Jangan khawatir itu bukan kodenya yang rusak, tapi hanya karena efek load yang belum sempurna.

Selanjutnya, klik CTRL dan 0 secara bersamaan. Maka ukuran jendela browser kembali normal kode akan tampil penuh. Tapi masih ada gangguan sedikit yakni tepi kiri kode hilang sebagian karena tertutup kolom angka urutan kode. Untuk mengatasinya cukup klik tombol Lompat ke Widget, kemudian pilih terserah.

Dan cling! Otomatis editor HTML akan tampil normal.
Mungkin pada saat koneksi lancar ini tidak membantu, tetapi jika Anda sering mengalmi blank pada editor HTML Template Blogger cara ini ampuh.

Jika sudah terbiasa maka tangan Anda akan cepat meresepon begitu terjadi blank. Cukup tekan berurutan
- CTRL dan - bersamaan 
- CTRL dan 0 bersamaan
- Tekan tombol lompat ke widget. Pilih Widget terserah. :D

Semoga bermanfaaat....

Deskripsi: Mengatasi Editor HTML Blank di Blogger

Posting kedua malam ini. gak ada gunanya ditunda-tunda besok daripada lupa. :D Lagi-lagi berkaitan dengan webmaster tools. Masih ingat postingan tentang Rich Snippet? (Baca: Muncul Foto Author di Hasil Cari Google). Nah, ini mirip-mirip. Kali ini logo blog yang akan kita sertakan juga dalam tag-tag penelusuran Google.

Mungkin selama ini kita sudah memasang logo di blog kita, namun Google tidak bisa membedakan logo tersebut dengan gambar-gambar lain yang ada di blog kita. Nah, kali ini kita akan memberikan mark up pada gambar tertentu yang berfungsi memberi tahu bahwa google bahwa kita menunjuk gambar tertentu di blog sebagai logo.

Google di blog resmi webmaster tools memperkenalkan markup logo dengan schema.org (Baca: Using Schema.Org markup for organization logos).

Untuk pemasangan logo di blog Anda, gunakan format seperti berikut:
<div itemscope itemtype="http://schema.org/Organization"> 
<a itemprop="url" href="http://www.alamatblog.com/">
 <img itemprop="logo" src="http://../alamatgambar.png"/></a></ div>

Keterangan:
- Format di atas bisa disisipkan di template lewat EDIT HTML Template atau lewat penambahan gadget HTML lewat tata Letak
- Ganti yang berwarna biru dengan alamat blog Anda
- Ganti yang berwarna hijau dengan alamat logo Anda

Semoga bermanfaat. Selamat Malam...

Deskripsi Artikel: Logo Blog Muncul Di Hasil Cari

Hm, lama sekali ya saya tidak ulik webmaster. Ternyata sudah ada beberapa perubahan penting. Ada alat-alat baru yang khas webmaster tools, berkaitan dengan optimasi blog. Kali ini saya akan bahas mengenai Google Disavow Links. Pernah dengar? Tapi belum tahu maksudnya? Mari belajar bareng.

Keterkaitan. Tentu blog kita terkait dengan blog-blog atau situs-situs lain melalui suatu link. baik itu link masuk (link pada blog lain yang menuju ke blog kita), atau link keluar (link pada blog kita yang menuju ke blog lain). Kita semua sudah tahu betapa berbahayanya jika kita sembarangan memasang link keluar pada blog kita dengan link-link spam atau link-link jahat. Tapi mungkin kita belum tahu jika link masuk yang tidak sehat pun juga bisa menjadi masalah bagi Google. Misalkan link blog kita terpasang di forum-forum spam, atau kita pernah bertukar link dengan blog yang ternyata sekarang menjadi daftar hitam google. Itupun juga dipermasalahkan Google. Intinya, kita berhubungan dengan siapa, dengan situs jahatkah, itu bisa di simpulkan Google lewat link-link keluar ataupun masuk dari dan ke blog kita.

Jika ada link-link keluar spam tentu dengan mudah kita bisa hapus link tersebut dari blog kita, tapi bagaimana jika link masuk dari blog spam? Apakah kita bisa menghapus suatu link dari blog orang lain? Tentu tidak. Nah, disinilah manfaat Google Disavow Links. Sederhananya, dengan tools ini seakan-akan kita bilang pada Google bahwa kita tidak menghendaki adanya link masuk menuju blog kita dari satu blog tertentu.

Buat Daftar Situs SPAM
Pertama-tama yang Anda butuhkan adalah daftar situs yang Anda anggap spam. Dalam membuat list sebaiknya berhati-hati, pastikan situs yang akan anda block adalah situs yang kemungkinan merugikan blog Anda, bukannya situs yang menguntungkan blog Anda. Jika tidak yakin, sebaiknya jangan dimasukkan list. Hanya masukkan situs-situs yang jelas jahat, spam dan sejenisnya.

Untuk membuat daftar situs jahat yang ingin di block, gunakan notepad. Simpan file dalam format .txt
Penulisannya:

#Hapus backlink saya dari situs-situs ini
http://www.alamatsitus1.com
http://www.alamatsitus1.com.com/content.html
http://www.alamatsitus2.com.com

Tulis setiap alamat situs pada baris yang baru. Baris yang diawali dengan # hanya bersifat keterangan.
(Untuk mengetahui link-link masuk ke blog Anda bisa di cek lewat Webmaster Tools > Traffic > Link to Your Site)

Menggunakan Disavow Links
- Silahkan buka: Google Disavow Links di Webmaster Tools
- Pilih blog yang Anda inginkan pada list, kemudian klik tombol Disavow Links.

- Akan muncul peringatan yang intinya agar Anda berhati-hati menggunakan tools ini. Karena ketika situs baik yang Anda block maka otomatis akan menurunkan performa blog Anda di hasil cari Google. Tapi sebaliknya jika Anda berhasil menyingkirkan blog buruk, maka tools ini membantu meningkatkan performa Anda di hasil cari Google. Tapi jangan takut karena pada langkah ini belum terjadi efek apa-apa, sampai Anda upload file .txt Anda yang berisi list situs buruk.
- Klik Disavow Links.

- Upload file .txt Anda dengan tombol Choose File. Kemudian klik Submit.


Sebatas pengetahuan tentang webmaster tools. Semoga bermanfaat.
Deskripsi Artikel: Serial Webmaster Tools: Google Disavow Link