Showing posts with label Tutorial blog. Show all posts
Showing posts with label Tutorial blog. Show all posts

Cara Membuat Widget Footer Empat Kolom di Blog

footer widget empat kolom

Kolom widget di footer menjadi trend di situs-situs berita. Lihah saja misalnya republika.co.iddetik.com, dan okezone.com, juga situs pro lainnya. Nah, jika template blog Anda tidak menyediakannya, ini dia cara membuat Widget Footer empat kolom di bagian bawah blog Anda.

Fungsi Widget Footer ini untuk menampilkan link-link penting, seperti link internal (menu, label, posting terbaru, komentar terbaru, dll) atau link eksternal (blog list).

Fungsi lainnya kolom di footer blog ini adalah menjadi navigasi menu seperti halnya navigasi blog yang biasa ada di bawah atau di atas logo (judul blog).

Dengan adanya Footer Widget ini, pengunjung gak perlu scroll ke atas lagi untuk melihat menu apa saja yang disediakan blog kita.

Cara Membuat Widget Footer Empat Kolom di Blog

1. Template > Edit HTML
2. Cari kode ]]></b:skin> dan Copas kode berikut ini di atasnya:

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px; // Sesuaikan dengan lebar blog Anda
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%; // Sesuaikan
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

4. Cari kode </body> and Copas kode berikut ini di atasnya:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


<div style='clear: both;'/>
</div> </div>

6. Save template!

Setelah itu klik "Layout" dan akan muncul Footer Widget baru seperti ini:

kolom widget footer blog

CATATAN:
1. Untuk mengubah ukuran lebar ada di bagian "width: 960px;"
2. Untuk mengurangi jumlah kolom/widgets menjadi 3 saja, hapus kode ini:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. Untuk menambah jumlah kolom widget menjadi lebih dari empat, tambahkan kode di bawah ini di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

4. Kode lowerbar# adalah jumlah kolom. Jadi, untuk menambahkan kolom kelima, ganti lowerbar# dengan lowerbar5.

5. Jika menambah kolom kelima, ubah width: 23%; menjadi width: 17%;

Itu dia Cara Membuat Widget Empat Kolom di Footer Blog. Good Luck!
Sumber: My Blogger Trick
Hosting Indonesia

Custom Permalink - Tips SEO Posting Blog yang Sering Terlupakan

Custom Permalink - Tips SEO Posting Blog Custom Permalink yaitu menyusun permanent link alias URL posting blog secara manual. Ini menjadi salah satu tips SEO Posting alias Optimisasi SEO Onpage yang sering terlupakan oleh kita. Padahal, Google sudah memberi panduannya di posting ini: Custom Permalink.

Permalink posting kita akan tersusun secara otomatis oleh blogger. Kita bisa memilihnya menjadi manual sehingga bisa menjadikannya SEO Friendly, yaitu dengan cara: 
  1. Perpendek judul posting (maksimal 50 karakter).
  2. Masukkan kata kunci (keywords).
  3. Hapus kata-kata yang tidak perlu, seperti kata sambung di, ke, yang, sebuah, yang dikenal sebagai "stop words"..

Maksimal karakter Custom Permalink adalah 50 karakter. Itu pula maksimal judul posting yang bisa muncul dalam Permalink.
Tips SEO Permalink ini sangat penting guna mempercepat indeks posting blog, menaikkan peringkat di hasil pencarian (SERP), dan popularitas blog.

Penyebab sering terlupakannya tips blog untuk optimisasi mesin pencari ini karena ketidaktahuan dan terutama "keterburu-buruan" dalam posting blog.

Cara menjadikan "Custom Permalink" untuk SEO Posting blog kita sangat mudah, yaitu saat selesai menulis posting, lihat menu di sidebar kanan dan klik menu "Permalink" > "Custom Permalink". Copas judul tulisan Anda ke sana, hapus kata-kata yang tidak perlu, utamakan kata kunci, dan beri tanda sambung. 

Contoh Custom Permalink: Tips SEO Posting Blog

Lihat contoh berikut ini. Eh... tapi kalo posting ini mah, baik otomatis maupun customnya, sama... hanya kepotong tiga kata terakhir --"yang Sering Terlupakan". 

Custom Permalink - Tips SEO Posting Blog

Selain Custom Permalink, masih ada beberapa tips SEO Posting Blog yang sering kita abaikan, seperti mengisi menu "Search Description" dan "Optimisasi SEO Gambar/Image".

Ah, satu-satu aja, kita biasakan dulu Custom Permalink ini agar posting blog kita SEO Friendly sehingga memiliki Findability tinggi!
Hosting Indonesia

Tiga Kode Kecil yang Berpengaruh Besar pada SEO dan Loading Blog

seo blogADA tiga kode kecil tapi berpengaruh besar pada skor SEO dan Loading blog kita. Ketiga kode ini selalu Contoh Blog pasang di template yang sdh dimodifikasi (kecuali kalo lupa ^_^).

Tiga kode yang berkaitan dengan SEO dan kecepatan loading blog ini adalah terkait ikon "quickedit", link hidup alias link aktif di komentar spam, dan atribusi blogger (Powered by Blogger, Diberdayakan oleh Blogger).

Kode #1: Ikon Quickedit

Ikon Quickedit tidak Valid HTML dan memberatkan loading serta mengurangi skor SEO blog. Setiap kali kita membuat widget baru di sidebar (Add Gadget), ikon quickedit ini akan muncul di template dengan kode <b:include name='quickedit'/>.

Ikon Quickedit yang muncul di tampilan blog, saat kita sedang login, yaitu berupa gambar pinsil untuk edit cepat dan Wrench Icon (ikon obeng dan tang).

Bagaimana menghilangkan atau menyembunyikannya?  Gampang. Simpan aja kode
.quickedit {display:none} 
di atas kode </b:skin> di template Anda.

Cara lain: cari dan hapus semua kode <b:include name='quickedit'/> di template Anda!

Kode #1: Link Hidup, Link Aktif, Komentar Spam

Komentar spam atau spammy biasanya menyertakan link hidup (live link) atau link aktif. Biasanya, yang komentar spammy ini adalah blogger bisnis online yang tidak punya OpenID.

Bagaimana menghilangkan link aktif/link hidup secara otomatis di komentar spam? Gampang...! Simpan kode
.comment-content a {display: none;}
di atas kode </body> di template Anda.

Kode #1: Atribusi Blogger

Blogger membolehkan kita menghapus atribusi berupa widget atau link bertuliskan "Powered by Blogger" atau "Diberdayakan oleh Blogger".

saya memilih memasangnya di footer, dengan cara menambah link: Powered by <a href='http://blogger.com' target='_blank'>Blogger</a>

Bagaimana menghapus Atribusi Blogger? Gampang.......! Simpan kode
 #Attribution1 {height:0px;visibility:hidden;display:none} 
di atas kode ]]></b:skin> di template Anda.

Cara lain: Temukan dan hapus semua kode berikut ini di template Anda:


<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

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


Itulah tiga kode kecil di template blog yang berpengaruh besar pada SEO dan loading blog, karena mengurangi gambar dan kode yang tidak perlu di template kita.*
Hosting Indonesia

Format Posting Blog yang Baik

Format Posting Blog yang BaikFormat posting merupakan isu penting dalam desain blog atau website. Ini menyangkut aspek scannability dan readability. Bagaimana format posting blog yang baik? Salah satunya adalah gunakan rata kiri (text align left)!

Perhatikan tampilan posting blog Anda. Apakah tampilan teks (naskah tulisan)-nya rata kiri ataukah rata kiri-kanan (justify)?

Jika rata kiri-kanan (justify), sehingga tampilannya seperti format teks tulisan di koran, buku, atau surat resmi, itu artinya blog Anda menganut "aliran resmi-formal" dan "kaku".

Tampilan posting rata kiri-kanan alias full-justified tidak lazim. Selain membuat kaku, memperlambat user untuk membacanya, tampilan teks justify ini juga akan tampak buruk jika ada di kolom sempit.

Sebaliknya, tampilan posting atau teks rata kiri (align-left), akan lebih mudah dibaca, lebih enak dilihat (dipindai/scanned), dan ini artinya memenuhi aspek "readability naskah online".

Bandingkan kedua format posting ini

Contoh Text Align Justify

Contoh format posting blog dengan text align justify. Terkesan kaku dan formal. Tingkat keterbacaan rendah.

Format justify ini juga membuat jarak antar-kata jadi tidak beraturan, terkesan tidak rapi, meski dari segi rata kiri-kanan memang kompak, tapi perhatikan di bagian tengah ada jarak antar kata yang tidak sama.

Contoh format posting blog dengan text align justify. Terkesan kaku dan formal. Tingkat keterbacaan rendah.

Format justify ini juga membuat jarak antar-kata jadi tidak beraturan, terkesan tidak rapi, meski dari segi rata kiri-kanan memang kompak, tapi perhatikan di bagian tengah ada jarak antar kata yang tidak sama.
Contoh Text Align Left

Text alignment rata kiri lebih rileks, nyantai, informal, dan mudah dibaca dan dipahami. Ada banyak ruang putih yang menjadi tempat istirahat mata user di layar.


Format rata kiri ini memang tidak rata kiri-kanan, tapi bandingkan, jarak antar-kata jadi konsisten, kompak. Maka pilihlah rata kiri ini sebagai format posting blog Anda.


Text alignment rata kiri lebih rileks, nyantai, informal, dan mudah dibaca dan dipahami. Ada banyak ruang putih yang menjadi tempat istirahat mata user di layar.

Format rata kiri ini memang tidak rata kiri-kanan, tapi bandingkan, jarak antar-kata jadi konsisten, kompak. Maka pilihlah rata kiri ini sebagai format posting blog Anda.

Agak sulit mencari referensi soal text-alignment ini. salah satu yang "agak lengkap" di forum Stack Exchange: Best Way to Align Text on a Website.

Disebutkan, rata kiri digunakan secara umum di situs-situs populer, termasuk Google dan Facebook. User membaca dari kiri ke kanan, kecuali dalam bahasa Arab. Sehingga, jika posting blog kita tidak menggunakan rata kiri, maka itu akan mengurangi tingkat keterbacaan (decrease readability).

Kebiasaan user membaca format naskah rata kiri ini jangan diubah di blog kita. Maka, gunakan rata kiri di format posting blog Anda.

Cara mengeditnya, cari kode berikut ini atau yang mirip, lalu ubah justify menjadi left

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align:justify;
}

HURUF KAPITAL

Selain soal rata kiri, jangan gunakan ALL CAPS atau semua huruf kapital, baik buat judul posting (post title) maupun isi posting (post body).
Full capitalisation is more tiring and slower to read, because it reduces recognition by making all letters a similar size.

Banyak penulis hebat kurang memperhatikan soal format posting ini di blognya atau di media sosialnya. Tulisan mereka bagus, namun kurang diminati karena soal format naskahnya yang tidak scannable dan readable.

Hal penting lainnya

  • Gunakan alinea pendek. Hindari anak kalimat.
  • Perbanyak ruang kosong atau ruang putih (white space), yakni gunakan jarak antar alinea. 
  • Gunakan bullet-point dan/atau numbering biar lebih enak dibaca.
  • Gunakan huruf tebal (bold) untuk poin penting.
  • Gunakan subjudul (Subheading) untuk membagi isi posting panjang menjadi beberapa bagian
Format Posting Blog yang Baik disukai user. Apa pun yang disukasi user, disukai pula oleh mesin pencari. Dan apa yang disuka mesin pencari, itulah SEO Blog! Good Luck!
Hosting Indonesia

Cara Membuat Footer Statis (Melayang)

Footer Statis ini bisa diisi menu, iklan, atau informasi apa saja. Bebas! Tentu, memerlukan penyesuaian kalau mau diutak-atik lagi. 

Cara Membuat Footer Statis

Cara membuat footer statis ini hanya dua langkah, setelah Anda masuk dulu ke Template > Edit HTML seperti biasa.

1. Copy & Paste kode berikut ini  di atas kode ]]></b:skin>

<!--Static Footer Starts-->
#static-footer p {
float: center;
margin: 0px;
padding-top:10px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#
static-footer a {
color: #fff;
}

#
static-footer {
height: 40px;
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #111;
width: 100%;
left: 0px;
text-align: center;
color: #fff;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
<!--Static Footer End-->


2. Copy & Paste kode berikut ini di atas kode </body>

<!--static footer start-->
<div id='static-footer'>
<p>
Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='#' target='_blank'>CB Design</a>. Copyright 2014 All Rights Reserved: <a href='#'>CB Design™</a></p>
</div>
<!--static footer end-->


Catatan: tulisan atau kode yang berwarna orange bisa diubah sesuai dengan selera Anda. Di situ pula jika mau menyimpan gambar atau kode iklan. Tapi jangan lupa, atur atau sesuaikan ketinggian footer statisnya di kode pertama (kode: height: 40px;).
Setelah itu? Tentu saja.... Save Template! 
Hosting Indonesia

Easy News - Template Blog SEO Responsif Gratis Download

Apa saja fitur Easy News – Free Responsive Magazine Blogger Template? 
Tanpa banyak kata dan basa-basi.... lihat sendiri aja deh gambar-gambar screenshotnya berikut ini. One picture worths thousand words, does it?

Easy News – Free Responsive Magazine Blogger Template

Tampilan HOMEPAGE Easy News – Free Responsive Magazine Blogger Template

Tampilan Mobile Responsive Easy News

Tampilan Mobile Responsive Easy News
Auto Layout Easy News

Auto Layout Easy News
PENTING!!!

  1. Pastikan minimal ada 6 posting Anda yang menggunakan LABEL "Hot" agar tampil di bagian paling atas halaman depan. 
  2. Edit Subscribe dan Social Follow di "Layout"

Perhatian Area HOT News di bawah ini:




Admin Layout

Easy News – Free Responsive Magazine Blogger Template


PENTING!

  • Untuk mengubah jenis, ukuran, dan warna huruf (Font), Anda tinggal klik "Template" > "Customize" dan pilih >"Advance Editor". Ini Penampakannya:

Easy News – Free Responsive Magazine Blogger Template

Cara Edit Drop-Down Menu
1. Klik "Layout" > Edit "Dropdown Menu"
2. Di "Configure Link List", isi "New Site URL" dan "New Site Name"
3. Klik "Add Link" 
4. Gunakan level format dengan "_" sebeleum sub-menu.

SETTING MOBILE VERSION
1. Template
2. Mobile
3. Pilih "Yes"
4. Klik "Custom"
5. Save! Lihat gambar di bawah ini:

Easy News – Free Responsive Magazine Blogger Template

Mantap 'kan Easy News - Template Blog SEO Responsif  ini? Good Luck..!

DEMO 
Hosting Indonesia

Cara Menghapus Outbound Link QuickEdit Blog untuk SEO

ikon quickedit blogSEBELUM ke teknis cara menghapus Outbound Link ikon QuickEdit blog, mari kita pahami dulu istilah ini (bagi yang belum paham). Outbound Link adalah hyperlink atau link (tautan) dari blog kita menuju ke blog atau situs lain. Disebut juga External Link (tautan eksternal). 

Ketika pengunjung mengklik link tersebut, maka blog kita akan "tertutup" dan mereka akan meninggalkan blog kita, kecuali Outbond Link tersebut kita kasih kode target='_blank'.

Kode target='_blank' itu akan menjadikan ketika link diklik, ia akan membuka tab baru (new tab). Penerapan kode itu misalnya: <a href='http://namadomain.com' target='_blank'>Nama Link</a>

Kebalikan Outbound Link adalah Inbound Link, yaitu link di blog lain yang mengarah ke blog kita, yang dikenal dengan "Back Link".
Outbond Link dan SEO Blog
Terlalu banyak link yang keluar akan berdampak buruk bagi peringkat di mesin pencari. Sebaliknya, makin banyak Inbound Link (Back Link) maka akan makin bakin bagi SEO blog kita. 

Demikian pula Internal Link --yaitu link yang ditautkan ke posting lain dalam blog kita sendiri-- bagus buat SEO.

Outbond Link Widget
Blogger.com mengandung banyak outbound link. Para pengguna template default bawaan blogger tidak asing dengan ikon quikedit berupa gambar pencil ini. Biasanya ikon pencil ini berada di bawah postingan pada kelompok footer post.

Tiap kali kita menambah Widgets, maka Outbond Link QuickEdit akan muncul di template kita berupa kode <b:include name=’quickedit’/>

QuikEdit masuk dalam kelompok Outbond Link karena URL gambarnya "entah di mana".
Maka, untuk validasi HTML serta demi SEO dan loading blog, sebaiknya kode quickedit tersebut dihapus saja!

Cara Menghapus Outbound Link QuickEdit

Langkah ini dilakukan setiap kali kita menambah widget blog.
1. Template > Edit HTML
2. Temukan (Ctrl+F) SEMUA kode <b:include name=’quickedit’/> dan HAPUS!
3. Temukan (Ctrl+F) juga kode seperti di bawah ini dan hapus juga! Kalau gak ada, syukurlah...!

<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>


4. Cari lagi (Ctrl+F) kode <b:includable id=’postQuickEdit’ var=’post’> dan hapus!
4. Save Template!

Kenapa Harus Dihapus?

Kode-kode tersebut hanya memberatkan blog, juga mempengaruhi skor SEO. Setidaknya, itu kata Chkme dan GT Metrix. Kode tersebut juga tidak valid HTML.

Kode-kode yang mengandung kata "QuickEdit" itu akan menampilkan gambar "pensil" dan "obeng & kunci inggris" (screwdriver and wrench icon) saat kita membuka blog dalam keadaan login. 

Fungsinya QuickEdit hanya mempermudah kita kalo mau edit posting atau edit widget. Tapi kita bisa melakukan edit di Dashboard Blog kok!
Hosting Indonesia

Cara Membuat Tombol Balas Komentar Tanpa Popup Window

reply komentar popup window
Cara membuat tombol balas komentar tanpa jendela popup di blog blogspot. Threaded comments for blogger without popup window

DI kolom atau kotak komentar template blog yang "jadul", biasanya ada tombol reply (balas/jawab), yang ketika diklik, muncul tab atau jendela baru (new window popup), seperti dalam gambar. 

Kecil sih... tapi itu cukup mengganggu bagi sebagian user.
JIKA Anda menggunakan Johny Kena Banned, dan ingin popup-nya di tombol reply comment tetap muncul, maka ganti blogID di template dengan blogID Anda. 

Lihat address bar Anda saat di dashboard blog, akan ada url seperti ini:
https://www.blogger.com/blogger.g?blogID=120993737534566896#templatehtmlAngka 120993737534566896 adalah blogID
JIKA Anda ingin mengubah reply comment itu menjadi tanpa Popup Window, maka lakukan langkah-langkah di bawah ini.  Thanks to Artis Tutorial for this great codes!

Cara Mengubah Tombol Balas Komentar Tanpa Popup Window

1. Klik "Template"
2. Klik "Edit HTML"
3. Cari (Ctrl+F) atau temukan kode ]]></b:skin>. Copas kode di bawah ini di atas kode itu:

#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#ECF3F7;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#f0f0f0;
padding:10px;
font-size:13px;
font-weight:bold;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:2px;
}
.comment_body{
margin-top:-72px;
margin-left:66px;
background:#fcfcfc;
border:1px solid #ddd;
padding:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #f1f1f1;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-left:-5px;
padding: 1px 11px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
border: 1px solid #C3D7E2;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment-delete img{float:right;margin-left:10px;}
4. Ganti semua kode antara <b:includable id='comments' var='post'> hingga </b:includable> seperti di bawah ini:

<b:includable id='comments' var='post'> .... banyak banget kode lainnya di sini...ganti semuanya dengan kode di bawah.... </b:includable>
Nah, kode-kode di area yang dikasih warna merah itu, ganti semuanya dengan kode di bawah ini:

<div class='comments' id='comments'>
    <a name='comments'/>
 <b:if cond='data:post.allowComments'> 
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
                
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                        
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                              
   <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                      
     <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if> 
     
    <div class='comment_header'>
                               <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <data:comment.authorAvatarImage/>
                                 </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Reply</a>
     </div>
                          
     <div class='clear'/>
    </div> 
          
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>        
                  <span class='comment_service'>
                      <b:include data='comment' name='commentDeleteIcon'/>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span></div> 
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                       
     </b:if>
                                                       
    </div>                          
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
            
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>               
    </div>
   </b:loop>               
   </div>     
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>          
          
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
     <h3 id='comment-post-message'><data:postCommentMsg/></h3>
      <div class='comment_emo_list'/>                                                                                               
       <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

                    
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
      
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
       
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;
        Display_Emo = true;
        Replace_Youtube_Link = true;
        Replace_Image_Link = true;
                                Replace_Force_Tag = true;
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; Replace_Image_Link=true
       
        // Emoticon
        Emo_List = [
        ':)'  ,'http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
        ':('  ,'http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
        '=('  ,'http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
        '^_^'  ,'http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
        ':D'  ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif',
        '=D'  ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif',
        '|o|'  ,'http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif',
        '@@,'  ,'http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
        ';)'  ,'http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
        ':-bd'  ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif',
        ':-d'  ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif', 
                                                                 ':p'  ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif',      
        ]; 
       
                              
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
     
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))       
               
       //]]>
         </script>

5. Cari dan ganti juga semua kode: <b:include data='post' name='threaded_comments'/>
dengan kode berikut ini:
<b:include data='post' name='comments'/>
6. Save Template! Good Luck.....!

Memperbaiki kolom atau kotak komentar di blog merupakan bagian dari upaya memberikan kenyamanan kepada pengunjung. Pop Up selalu mengganggu bagi kebanyakan orang, maka... hilangkan!
Hosting Indonesia
kembali ke atas