Tampilkan postingan dengan label Modif. Tampilkan semua postingan
Tampilkan postingan dengan label Modif. Tampilkan semua postingan

Related Posts Slide Out Boxes

0 komentar Sabtu, 07 April 2012
Berhubung postingan kali ini permintaan dari teman blog saya, karena fitur ini dari Tympanus.net dan di tutorial tersebut tidak dijelaskan bagaimana cara menerapkanya di Blogger jadi disini saya akan membahas bagaimana cara memasang Related Posts Slide Out Boxes di Blogger. 

Baiklah, fitur kali ini menurut saya sedikit kurang pengunaan feed jadi proses pengantian related posts harus secara manual, Berikut screenshot dari Tympanus silahkan lihat Demo di blog Sahabat Metal-XP Demo

1. Pergi ke Template/Rancangan > Edit Html
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>
  <link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/> 

3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>


4. Sekarang letakan struktur HTML ini juga diatas kode  </body>



Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut

<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>


Anda bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, Anda harus mengganti teks berwana dengan link dan judul Anda.
5. Terakhir Klik Save Template
Read On

Memasang Buku Tamu Tersembunyi di Menu Navigasi

4 komentar Rabu, 29 Februari 2012
Trik Blogger kali ini akan membuat buku tamu tersembunyi di sebuah link pada navigasi bar blog kita. contohnya bisa anda lihat di bagian navbar blog Trik Blogger Ini. jika anda klik "Buku Tamu"  di  lis menu navigasi, maka si buku tamu tersebut akan muncul tiba tiba. :D
pada umumnya, Navbar Blog digunakan untuk mengalihkan sebuah link alamat url. Tapi bisa juga kita ubah fungsinya menjadi seperti tutorial kali ini.
langsung saja kita mulai tutorialya.

Langkah Pertama yang harus anda lakukan adalah, download template yang anda gunakan sekarang, guna menjaga dari kesalahan saat mempraktekan tutorial ini. kemudian


Login - dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas
Beri tanda centang pada tulisan Expand Template Widget




kemudian anda cari deretan link navbar yang akan di rubah fungsinya. contoh pada blog ini  "Buku Tamu" gunakan ctrl+f untuk mempermudah pencarian.
<div id='nav-bar'>
<a href='trik-bloger.blogspot.com' title='This Blog Address'>Home</a>
<a href='mailto:sanieride@gmail.com'>Contact me</a>
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>
<a href='trik-bloger.blogspot.com'>Feeds RSS</a>
keterangan
(merah)alamat pengalihan Menu Navigasi
(biru) teks yang akan ditampilkan

pada baris
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>

ganti alamat pengalihan (warna merah) dengan
javascript:void(0)' onclick='showHideAT()' title='Click here to open Guest Book'

perhatikan tanda kutip [ ' ] jangan sampai ikut terganti
jika sudah silahkan save template anda

kemudian pasang widget baru,
Blogger - Tata Letak - Tambah Gadget - pilih HTML/Java Script

<style type="text/css"> #at{ position:fixed; left:-160px; z-index:+1000; } * html #at{position:relative;} .attab{ height:300px; width:180px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #000000; background:#FFFFFF repeat-y center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding:10px; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"><div class="attab" onclick="showHideAT()"></div><div class="atcontent"><div align="center"><div style="#000000 no-repeat;">
KODE BUKU TAMU ANDA
</div></div> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXYUby6w_ZUgWdoXI85ULl3vvAyMG8OeBal031hUL7-ISqT06girDQMKRmCxfFsNS8N8zVJQPEWqWa7xcdjeM6G7iPVJTJYyPopCMYJt2JfYam-lOg9mfFS_PWLZTjxSZVxpH5NQOYoUl/s1600/moblin-close.png" alt="close" title="Click here to Close Cbox" /></a></div></div>  <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script>  <a href="javascript:void(0);"onclick="showHideAT()"/><img alt="WEARCREAF"  style="display:scroll;position: fixed; top:62px;right:-200px; height="120px" width="38px" /></a></div> <div class='clear'></div><span class='widget-item-control'> <span class='item-control blog-admin'>  </span> </span> <div class='clear'></div><div id='rsidebar-wrapper'><div style='height:10px;clear:both;'></div><div class='sidebar section' id='sidebarright'></div></div>
ganti KODE BUKU TAMU ANDA dengan script buku tamu anda miliki. Jika belum mempunyai kode buku tamu kunjungi www.cbox.ws  silahkan mendaftar untuk mendapatkan kode.

jika ada pertanyaan, silahkan tanyakan lewat form komentar dibawah.
Semoga bermanfaat..
Read On

Cara Membuat Navigasi Halaman, Seperti pada Blog ini

0 komentar Kamis, 19 Januari 2012
Tips dan triks blog yang ingin Trik Bloger bagikan hari ini adalah bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit.

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
  • Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
  • Mempercantik tampilan

Login ke dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas

Beri tanda centang pada tulisan Expand Template Widget

  • Cari Kode ]]></b:skin> gunakan CTRL+F
  • Copy lalu paste kode CSS berikut diatas ]]></b:skin>
 
  /* Page Navigation styles */
.showpageNum a
{   padding: 3px 8px;
   margin:0 4px;
   text-decoration: none;
   border:1px 1px 1px 1px solid #CEE3F6;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   background: #CEE3F6;   } 

.showpageOf
{   margin:0 8px 0 0; }

.showpageNum a:hover
{   border:1px 1px 1px 1px solid #81BEF7;
   background: #58ACFA;   }

.showpagePoint 
{   color:#fff;   text-shadow:0 1px 2px #333;
   padding: 3px 8px;
   margin: 2px;
   font-weight: 700;
   -webkit-border-radius:3px;-moz-border-radius:3px;
   border:1px 1px 1px 1pxsolid #01DF01;
   background: #088A08;
   text-decoration: none;   }


  • Kemudian  cari kode  </body> dan letakkan kode dibawah ini, diatas kode </body>
 
<!--Page Navigation Starts-->
<script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=4; var numshowpage=6; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://salingsharing.googlecode.com/files/trik%20bloger%20navbar.js' type='text/javascript'/> 
<!--Page Navigation Ends -->
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.

Read On

Membuat Border dan Modifikasinya

3 komentar

Untuk memberikan kesan lebih indah dalam warna dan tampilan blog khususnya kode HTML/Script yang akan diletakan didalam posting pada saat menulis artikel, Anda bisa meletakan kode Script di dalam kotak dengan border dan warna background yang berbeda sesuai dengan warna pilihan, baik itu dengan border yang garis tipis, tebal atau garis putus-putus.

Ada beberapa jenis border yang saya ketahui yaitu :
  1. Ridge Border
  2. Groove Border
  3. Solid Border
  4. Insert Border
  5. Outset Border
  6. Double Border
  7. Doptted Border
  8. Dashed Border

Langkah membuat dengan border sangat mudah
  • Copy kode Script dibawah ini
  • Kemudian letakan pada posting Anda

Contoh Dashed Border
 <div style="border: 2px #006400 dashed; padding: 10px; background-color: #F2F5A9; text-align: left;"> TEKS ANDA DISINI.. </div> 

Contoh Ridge Border 
 <div style="border: 5px #006400 ridge; padding: 10px; background-color: #F5A9D0; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Dotted Border
 <div style="border: 2px #006400 dotted; padding: 10px; background-color: #FFFF00; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Double Border
 <div style="border: 3px #006400 double; padding: 10px; background-color: #A9F5A9; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Groove Border
 <div style="border: 5px #006400 groove; padding: 10px; background-color: #F2F5A9; text-align: left;">  TEKS ANDA DISINI.. </div> 

Contoh Solid Border
 <div style="border: 3px #1627A7 solid; padding: 10px; background-color: #61FFF6; text-align: left;">  TEKS ANDA DISINI..  </div> 

Demikian adalah beberapa sample border ala Trik Bloger. Semoga Bermanfaat.
Read On

Cara memasang Breadcrumb Navigasi di Blog

1 komentar Minggu, 15 Januari 2012
Cara memasang Breadcrumb Navigasi di Blog - Menu navigasi breadcrumbs
Sebelum melanjutkan Trik Bloger hendak menjelaskan dahulu apa itu Breadcrumb Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini,
apakah anda melihat 

 
nah.. itulah yang Trik Bloger akan ajarkan kali ini.

Kembali ke langkah, trik berikut merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.
  • Masuk ke akun Blogger Anda.
  • Klik tanda panah di sebelah tombol "lihat blog" > Template

  • Pilih Edit HTML
  • Jangan lupa Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).
  • Copy kode Breadcrumb di bawah ini dan paste di atas kode tersebut :

  • Selanjutnya cari kode  <a expr:name='data:post.id'/>
Kemudian copy kode berikut ini dan paste di bawah kode tersebut.


Kalau <a expr:name='data:post.id'/> tidak ketemu, cari kode yang ini <b:if cond='data:post.title'>. Kemudian copy kode tadi dan paste di atasnya.
  • Langkah Terahir klik Simpan Template
Coba lihat hasilnya.. jika ada pertanyaan silahkan tanyakan kepada admin Trik Bloger lewat kolom komentar di bawah.
Read On

Cara Memasang Related Post di Blogger

0 komentar Jumat, 13 Januari 2012
Related post yang terdapat di bawah posting pada blog Trik Bloger ini cuma sebuah tulisan yang saling berkaitan dan berhubungan terhadap sebuah posting. Fitur ini tentu sangat penting untuk SEO 'katanya'. Dengan adanya “Related Post” ala Trik Bloger ini tentu akan memudahkan para pengunjung untuk mendapatkan sebuah posting yang berkaitan. Misalkan ada sebuah posting tentang "Edit Template Blogger Agar Lebih SEO" maka related post yang muncul adalah :
(jika yang ditampilkan cuma 5 post) Baik kita memulai cara memasangnya
1. Pastikan anda sudah Login di Blogger.com jika sudah, langsung saja Pilih Template
Klik Gambar Untuk Memperjelas


2. Pilih »» edit HTML
Klik Gambar Untuk Memperjelas

3. Beri tanda centang pada tulisan Expand Template Widget

4. Cari kode <data:post.body/> caranya tekan Ctrl+F, jika sudah ketemu copy kode
    dibawah ini lalu paste di bawah <data:post.body/>


5. Dari Kode diatas cari kode var numofpost=5  gantilah angka untuk mengatur jumlah 
   postingan yang akan ditampilkan secara acak ,bisa diganti sesuai dengan kebutuhan anda.
6. Langka selanjunya adalah menyimpan template, klik Simpan Template. selesai. lihat hasilnya
   pada blog anda.
 Hasilnya bisa anda lihat sendiri di bagian bawah halaman posting Trik Bloger.
Read On

Membuat Scroll Pada Widget Label Blog

0 komentar Kamis, 12 Januari 2012
Membuat scroll Pada Label, Blog Archive atau widget, Blogroll atau Daftar Blog Daftar Link neh Buat sobat" yang pengen ngirit tempat.... hehehehehehe...

Nih ane baru dapat Tutorial tips dan Trik Cara Memberi Scroll pada Label Blog. tips ini ane dapet dari sobat blogger ane... n ternyata juga blogger blitar juga... hehehehe.....

ok langsung aja ya sob.... bagi sobat" yang berminat memberi scroll pada label Blog nya...

1. login blog
2. Rancangan >> edit HTML >> centang 'Expand Template Widget'
3. Cari kode dibawah ini ( NB: Harus ada widget labelnya terlebih dahulu )
4. Tekan Ctrl + F untuk memudahkan mencari
5. Cari kode seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:300px;'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div> </div>
kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya. Angka 300px adalah tinggi kotak scroll. bisa sobat ganti sesuai selera sobat...


Gak ada kode yang seperti  <div class="widget-content"> ????
Tenang gak usah khawatir, mungkin pada template sobat yang ada hanya kode




yah kalau adanya kode di atas ini maka taruh
<div style='overflow:auto; width:ancho; height:300px;'>
diatas kode tersebut jangan lupa diahiri dengan penutup  </div>


Jika langkah - langkah diatas dilakukan dengan benar maka widget label anda akan seperti widget label di blog ini Blog Sample 

Terimakasih telah berkunjung di Trick Bloger semoga tutor diatas dapat bermanfaat. jika ada pertanyaan silahkan tinggalkan pertanyaan anda pada kolom komentar yang sudah tersedia.
Read On

Memasang Meta Tags di Blogger

0 komentar
Pasang Meta Tags di Blogger
Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web atau blog. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web atau blog, untuk menjelaskan mengenai kata kunci (keyword) yang terkait. Trik ini sangat bagus bagi para Blogger yang ingin blognya lebih SEO, cara pasangnya ikuti cara berikut.


  1.  Pastikan anda sudah Login di Blogger.com. Klik Rancangan
  2. Klik Edit Html
  3. Tekan Ctrl + F cari kode <title><data:blog.pageTitle/></title> ganti kode tersebut dengan kode berikut ini
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni, kata,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni, kata,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <meta expr:content='&quot;Download &quot; + data:blog.pageName + &quot;. deskripsi tentang blog anda&quot;' name='description'/>
    <meta expr:content='data:blog.pageName + &quot;, kata kunci, kata kucni, kata,&quot;' name='keywords'/>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    </b:if>
    </b:if>
    <meta expr:content='data:blog.title' name='author'/>
    <meta content='index, follow' name='robots'/>
    <meta content='2 days' name='revisit-after'/>
    <meta content='id' name='language'/>
    <meta content='id' name='geo.country'/>
    <meta content='Indonesia' name='geo.placename'/>
    <meta content='global' name='distribution'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>

    Bagian teks yang berwarna Merah anda ganti dengan Deskripsi Singkat Blog Anda, misalnya Tutorial SEO. Bagian teks yang berwarna Kuning anda ganti dengan Deskripsi tentang blong anda, misalnya Kumpulan artikel SEO, yang membahas tentang tips dan trik mengenai Blogger, Facebook, Friendster, dan Yahoo Messenger dari Donor Ilmu. saya sarankan jangan panjang-panjang tidak lebih dari 200 karakter sudah cukup. Bagian teks yang berwana Hijau anda ganti dengan Kata Kunci misalnya blogger, blogger seo, blogger tutorial, facebook, facebook modif, facebook tutorial, Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming.
  4. Setelah menggantinya klik Simpan Template. semoga berhasil
Read On

Modifikasi Komentar Blog

4 komentar Rabu, 11 Januari 2012
Bisa di bilang Sistem Komentar kali ini sungu Fantastis, Exotis dan Boombastis. Karena sistem komentar ini sudah saya edit dengan baik dan sempurna, dengan berbagai fitu seperti.
Komentar Fantastis
  • Styel Elegan dan Simpel
  • Image Avatar
  • Tombol Reply
  • Styel Reply WP
  • Highlight Blog Owners
  • Pesan Ucapan "Terimakasi"
  • Emoticon Onion (Kucing)
Saya juga mengunakan Sistem Komentar ini? Seperti anda lihat Fantastis, Exotis dan Boombasti Bukan! Baiklah kita mulai.

1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>
/* Comments
----------------------------------------------- */
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNaU_zj40UiWIJ9lxZK6F3o-shFRFU4BCeGckOP9t5sVdyVnXFzOfo6PYfgsbm6EerXa9FaQvxOVh6n_eFcpM0iUmknCnd10CPLRI0Hfiy20YNnl5AA-ZwQyaNKolIoP8J2sKp19eJhY/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
}
.cm_reply a: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%);;
}
.cm_entry {
padding: 16px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrvSMg-roWxu6gY6dzB9mP5KETWQBZNSY0BghYwUG02ypyQKIhTIdPMb0xpR3h1m0tBkTP4neUkHgOjrG3hMDW9KDTnAi66Lxsc_9VDzsJHhxr9jSeS7dUPi-0GGl6p9vPA9kmXBr_WA/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color:  #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
/* Comment Admin  */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}
Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry

3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/>
<script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
</b:if>

4. Selanjutnya cari kode
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan.

<div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'>
  <b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:))
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;))
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;)
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;)
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:((
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:)
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:(
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=((
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-*
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:|
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-}
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)]
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x(
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-(
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x(
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-p
  <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=))
  </b>
  </div>

5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>

<b:includable id='comments' var='post'>

Kode yang harus di ganti

</b:includable>
Ganti kode dia antara b:includable dengan kode di bawah ini

<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments &gt; 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
  <b:if cond='data:post.numComments == 1'>
  <span id='cm_total'>1</span> <data:commentLabelPlural/>
  <b:else/>
  <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
  </b:if>
  </b:if>
  </h4>
 
  <div id='cm_reply_css'/>
 
  <div class='cm_pagenavi' id='cm_page'/>
 
  <div id='cm_block'>
  <b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.isDeleted'>
  <b:else/>
 
  <div expr:id='data:comment.anchorName'>
  <div class='cm_wrap'>
  <a expr:name='data:comment.anchorName'/>
  <div class='cm_head'>
  <div class='cm_avatar'>
  <b:if cond='data:blog.enabledCommentProfileImages'>
  <data:comment.authorAvatarImage/>
  </b:if>
  </div>
  <div class='cm_reply'>
  <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
  </div>
  </div>
  <b:if cond='data:comment.author == data:post.author'>
  <dd class='cm_entry'>
 <span class='cm_arrow'/>
  <div class='cm_info_a'>
  <div class='cm_name_a'>
  <b:if cond='data:comment.authorUrl'>
  <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWNeSYcEtOybny08oKy9Hu3vDFB0_uTTQn3b1vlNwRgD1OOWEYK2-knGF9jLJ8PO_t73lN49Xkti-v5lI5cXDvnhivddPqxgdI0xQNkld5fWXZNeVathkMIafcrnizvgzPfB1nDJ5R0LY/s1600/adminstar.png' title='Admin' width='20px'/>
  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
  <data:comment.author/>
  </a>
  <b:else/>
  <b><data:comment.author/></b>
  </b:if>
  </div>
  <div class='cm_date_a'>
  <data:comment.timestamp/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <div class='clear'/>
  </div>
 
  <div class='comment-body-author'>
  <p><data:comment.body/></p>
  </div>
  </dd>
  <b:else/>
  <dd class='cm_entry'>
  <span class='cm_arrow'/>
  <div class='cm_info'>
  <div class='cm_name'>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
  <data:comment.author/>
  </a>
  <b:else/>
  <b><data:comment.author/></b>
  </b:if>
  </div>
  <div class='cm_date'>
  <data:comment.timestamp/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <div class='clear'/>
  </div>

 <p><data:comment.body/></p>
  <span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
  </dd>
  </b:if>
  </div>
  </div>
  </b:if>
  </b:loop>
  </div>
 <div class='cm_pagenavi' id='cm_page_copy'/>
 
  <b:if cond='data:post.embedCommentForm'>
  <b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='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>
 </b:if>
  </div>
Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.

6. Langkah terakhir simpan template, Klik Save Template.


Read On
Langganan: Postingan (Atom)