Desember 2012 ~ SOFtwareTEKnologi Go 2 Blog Tutorial

Minggu, 23 Desember 2012

Membuat Menu Floating Fixed Diatas Header

05.04 Unknown No comments

Assalm..Wr..Wb..Selamat Malam kita bersua lagi dimalam yang pekat ini..penyakit lama kambuh kembali..Gak bisa tidur..Insom bro..Mending bikin postingan biar bisa tidur dengan nyenyak. Semoga anda juga selalu diberi kesehatan yach..dan selalu diberi kemudahan dalam menjalankan hidup..Amin...Amin...Ya..Rabb.. Okey tak perlu lama foreplay...kita langsung pada mainset nya ajah.. Langkah awal...Buka celana anda...wuuupss...template..(ngaco)..dibackup dulu ya biar aman..Trus..expand template widget..( Langkah Standar ) Cari Tag berikut : ]]></b:skin> Kemudian letakan scripting berikut diatasnya:

/* Menu Horizontal Dropdown ----------------------------------------------- */ 
#menuwrapperpic{ /* This will make your menu stay where it is */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NE36UNsXH4U_-7K-EtxVHaueCVhlplwuYr1O1vYjiBJDcJEgo_arsIfC9nOdS2RFPHtMUh0RiDVDbPLDvq8BY7h1O2MoSA7uS-_tORe-lgHhKcFDgTbXXc2vOMk5361d2M51LnUx0vCz/s0/menu-secondary-bg.png)
 repeat-x;
<blink>width:100%;</blink>
<blink>position: fixed;</blink>
margin:0 auto;
padding:0 auto
} 
#menuwrapper{width:100%;
;height:20px;margin:0 auto} .
menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} 
#menubar{width:100%} #menubar,
#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} 
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#FFFFFF;border-right:1px solid #D1D1D1;padding:12px 10px 8px} 
#menubar a.trigger{background-image:url();background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} 
#menubar li{float:left;position:static;width:auto} 
#menubar li ul,#menubar ul li{width:170px} 
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} 
#menubar li ul{z-index:100;position:absolute;display:none;background:#FF9900;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} 
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#ff9900;color:#fff} #menubar li:hover ul,#menubar li.hvr ul{display:block} 
#menubar li:hover ul a,
#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} 
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} 
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
</div>
</div>
</div>

Sekarang anda ingin meletakannya dimana, disini ada beberapa opsi yang saya sarankan Pertama diatas header yaitu tempat teratas pada template ( Lihat Template ini ) Kedua dibawah header Ketiga mungkin anda senang dengan meletakannya floating dibawah.. (Terserah anda, sesuai selera aja ) Kita bahas yang pertama dulu yach... Cari Tag <header> atau Tag <head> ( Ada template yang tidak memiliki Tag Header, maka bisa juga dengan Tag Head ) Letakan Script dibawah ini diatas Tag <header> atau Tag <head>

<span style="font-family: "Trebuchet MS",sans-serif;"><span style="font-size: small;"><span style="color: white;"><span style="background-color: red;"><div id='menuwrapperpic'>
<br /><div id='menuwrapper'>
<br /><ul id='menubar'><br />
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZipa85dGu4cDfLaxl6LsF9C3Crjh5j1dK1txoAgskQV08SiqIZNwDkrOqzjyabXKljjOG3h4mCGnhZhDbJA7TTj2GiJV6dlXEl-gj-QFBnXmwp5ACy_iP1kDCmYvMyILHpkMnQQ0cdVE/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<br />
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Masakan</a></li>
<br />
<li><a href='#'>Masakan Tradisional</a></li>
<br />
<li><a href='#'>chinese food</a></li>
<br />
<li><a href='#'>western food</a></li>
<br />
<li><a href='#'>Softdrink</a></li>
<br />
<li><a href='#'>Dessert</a></li>
<br />
<li><a href='#'>Kue</a></li>
<br /></ul>
<div class='menusearch'>
<br /><div style='float:right;padding:8px 8px 0 0;'>
<br /><form action='http://bakulnusantara.blogspot.com/search' method='get' target=''>
<br /><input name='sitesearch' style='display:none;' value='http://bakulnusantara.blogspot.com'/><br /><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdk_HGx81JCqSdh0vwurj7QSlR5yWdKAB_GKdx6tYbwf8koWYQmXmT8ol46lQBt4C16eCAZ8sCI7-Hzux3Ewmw3Ejt_G87R-IZmkWE1arM5qGk1WdMvRzdoUs-q8GbbW0pxEvOJVgAWI/s1600/field-bg.gif) no-repeat;' type='text' value='Cari...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYroPVaSgiseAeapBLmYpLCTLHGlwUUeOqI2G_dceSMetd86yc6RLyP2owPQXKxkx4b88aHuMNcCHNphyphenhyphenrECKPRbgbwY3UeNhawKhFL6PpbdWKxfjfmDrc6Ec4h09tEBVvsIzBgCwAng/s1600/bg_search.gif' type='image' value='Search'/><br /></form>
</div>
</div>
<br class='clearit'/></div>
<div style='clear:both;'/>
</div>
</span></span></span></span>
</div>
</div>
</div>

Membuat Menu Animasi Dengan CSS3

04.31 Unknown No comments

Cara Membuat Auto Zoom Dengan CSS Pada Web dan Blog

02.34 Unknown No comments

Selamat Sore kita berjumpa lagi hari ini untuk mengulas beberapa fitur yang dapat diterapkan pada web dan blog anda..Kebetulan hari ini hujan deras disertai petir yang menyambar-nyambar sepulang kerja sehingga membuat diri saya berhasrat menorehkan jejak di internet agar bermanfaat untuk anda semua. Assalm..Wr..Wb..Semoga anda sehat semua yach..Amin..Kali ini kita akan mengulas tentang Auto Zoom, ini bukanlah sebuah widget tapi sebuah scripting sederhana menggunakan script CSS dimana sebuah gambar akan membesar secara otomatis jika cursor menghampiri gambar tersebut.. Tidak perlu terlalu lama kita berbasa-basi, kita langsung Ke TKP aja yukz... Langkah awal buka template anda, jangan lupa centang expand template widget dulu dan cari tag dan letakan script dibawah ini diatas Tag ]]></b:skin>

Klik Disini Untuk Membuka

Simpan template anda..Selesai... Sesederhana itukah? Wait...
Untuk memanggil kode diatas anda harus membuat tag perintah agar scripting diatas dapat bekerja.
Dimana anda dapat membuatnya? Anda dapat membuat tag perintah untuk memanggil script diatas pada gambar yang ingin anda berikan efek css auto zoom
Sabar yach...biar lebih mudah anda mengertinya..
Pada saat anda membuat postingan atau membuat halaman pada blog biasanya anda menyisipkan gambar yang terkait dengan konten artikel yang anda tulis. Nah pada saat itulah setelah gambar anda sisipkan anda dapat memberikan efek auto zoom. Pilih Tab Html ( Jangan Tab compose Ya ) kemudian pada gambar yang telah di upload pada artikel biasanya ada link URL. Kita buat Perintah pemanggilannya ya....

<div class="zoomsoftekgoblogtutorial">
<img src="URL GAMBAR YANG ANDA SISIPKAN / UPLOAD" /></div>

Atau anda dapat juga meletakan Perintah pemanggilnya diantara script URL gambar yang cukup panjang diantara
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" /></a>

Diantara script URL Gambar tersebut anda dapat meletakan Tag Pembuka <div class="zoomsoftekgoblogtutorial"> dan disertai Tag Penutupnya </div>

Contoh :

<div class="zoomsoftekgoblogtutorial"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkL3ET9YlGUPJ1amwS7pkoVq-zFHBpbqzRm94JSwgcyBG0qawRuHmJt2Givt6Qzi7PqgvltVUdb9C5JkSZOkPLcr-i8YMy8lNMhehIc0aFlVn7kmWNAgfKlnvjs7vC__7Rolk2DfcVAt-/s1600/zoom.png" /></a></div>

( Pengerjaannya pada Tab HTML ya bukan Tab Compose )

Okey sekian dulu tutorial dari saya semoga akan menjadi manfaat yang banyak untuk anda semua. Dikarenakan hari menjelang magrib saya harus menjalankan ibadah terlebih dahulu. Untuk yang kurang mengerti...come on...trying again lah..pasti bisa koq...tergantung niat untuk berusaha..Selamat mencoba...Wassalam..Wr..Wb..

Cara Membuat tombol back to top pada Web dan Blog

15.59 Unknown No comments

Back button atau disebut juga Back to top Button atau bahasa kerennya tombol kembali keatas adalah sebuah tombol yang akan menggiring pengunjung scroll kembali kehalaman atas setelah mereka membaca artikel terbawah pada halaman web.
Tombol ini sangat useful sekali...widih...so english banget

agar tampilan lebih ciamik bin cantik bin beautiful..bin..titan..Ditambah dengan tombol yang sangat cantik akan mempercantik lagi penampilan web atau blog anda.

. Tombol ini memiliki efek yang sangat halus loch saat scrolling ke atas ( Tidak tiba-tiba muncul diatas ) tapi meluncur dengan smooth.
Okey kita langsung ke TKP bersama OVJ....86 Bos...

Buka widget HTML/JAVASCRIPT , di blank atau dikosongkan aja tidak perlu diberi nama, lalu masukan script berikut kedalamnya.. Lalu Save...

Catatan Ya...Buat yang templatenya sudah memiliki JQUERY versi berapapun tidak perlu menambah JQUERY yang saya sertakan ini...
Kenapa demikian?? Coz nantinya jquery akan double yang satu di template yang satu lagi yang baru anda tambahkan pada widget HTML/JAVASCRIPT.. Akan menjadikan keduanya konflik, dan salah satu fitur blog ataupun web anda akan menjadi tidak berfungsi dengan baik.
Saya sertakan JQUERY jika template anda belum memilikinya. Lebih baik setelah anda menekan tombol dibawah ini dan meng copy nya...jangan campur susu yach..

letakan pada nampan...widih ngacoo...Notepad. Kemudian anda buang jauh-jauh script ini
<script src='http://softekgoblogtutorial.googlecode.com/files/jQuery%20v1.7.1.js' type='text/javascript'></script>
Jangan buang sampah sembarangan ya...

jadi tinggal sisanya aja yang anda gunakan pada widget HTML/JAVASCRIPT ( Khusus yang telah memiliki JQUERY pada templatenya )

Okey..that's all..Semoga artikel ini bermanfaat buat anda semua..Semoga hari ini hari yang indah dan menyenangkan untuk anda..Have a nice day..harap periksa kembali barang bawaan anda...Seperti dompet...kunci...Hp...kondom...wuupsss...

KONcian DOMpet maksudnya..untuk bayar parkir
( Buat yang main diwarnet ).
Untuk yang kurang jelas dan kurang paham atau ada yang mau menambahkan kami persilahkan untuk meninggalkan uang atau hp

kirim komentar aja yach untuk pertanyaan dan sarannya, saya siap membabu dengan senang hati..
Kasih applause dulu dunk..

Semoga kita semua selalu diberi kesehatan dan keselamatan..Amiin..Ya Rabb..Wasslm..Wr..Wb

Membuat Tulisan Berjalan atau Marquee Pada Website atau Blog

08.26 Unknown 11 comments

Tulisan berjalan atau lebih dikenal dengan MARQUEE adalah satu cara untuk menarik perhatian pengunjung pada sebuah halaman web atau blog. Efek Marquee biasanya disisipkan pada sebuah halaman web atau blog sebagai sebuah Salam Pembuka saat web atau blog tersebut dikunjungi. Bisa juga Efek Marquee tersebut disisipkan untuk sebuah pemberitahuan atau pengumuman kepada pengunjung.

Banyak juga yang melakukannya dengan menyisipkan efek marquee sebagai sebuah Promo dari Produk yang ditawarkan, biasanya ini dilakukan oleh sebuah website store atau Toko Online. Misalnya Promo Gratis Buy One Get Three Free... hehehhehe....kaya janda atau duda aja yach...Beli satu dapat tiga berikut turunannya..

Okey kita langsung ke TKP aja yuks ikut Mas Parto

Seperti biasa efek ini bukanlah sebuah widget, tapi hanya scripting biasa yang bisa dilakukan saat anda menuliskan postingan atau membuat halaman Blog dimana anda harus melakukannya pada Tab HTML

Scriptnya:

<marquee behavior="scroll" scrollamount="1" scrolldelay="32">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Tulisan berjalan seperti Melompat-lompat, efek marquee ini lebih menarik lagi jika anda berminat melakukannya lakukan langkah berikut

Scriptnya:

<marquee behavior="alternate" direction="up" height="50px"><marquee direction="right"> Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee></marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Efek Marque Bola Pantul ( Pinball ) efek ini sangat menarik sekali karena tulisan akan berjalan seperti bola pantul seperti pinball, namun membutuhkan ruang yang cukup dan extra teliti dalam melakukannya

Scriptnya:

<marquee behavior="alternate" direction="up" height="100" width="450"><marquee behavior="alternate" direction="right">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee></marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Selalu Perhatikan tinggi dan lebar dari efek marquee yang ingin anda terapkan, seperti style bola pantul ini dimana kita harus menghitung jumlah karakter tulisan yang ingin anda tampilkan dan sesuaikan dengan lebar pantulannya. Dalam contoh diatas jumlah karakter yang saya gunakan berjumlah 49 karakter (Silakan Anda Ketik Apa Yang Anda Inginkan Disini). Tentunya 49 karakter cukup lebar, untuk memberikan efek pantulan yang bekerja dengan baik diperlukan lebar yang sesuai sehingga menampilkan efek pantul yang diinginkan.

Disini saya menggunakan lebar sesuai dengan main-wrapper saya selebar 450px

Efek Marquee berikutnya yaitu bergaya pantul bolak-balik ( Mentok sana..Mentok sini ) kaya nasib aja yach...he..he...he...

Scriptnya:

<marquee behavior="alternate" width="450">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Efek Marquee berikutnya adalah Efek Mouse Hover Stop, yaitu sebuah efek dimana tulisan yang berjalan akan berhenti saat mouse mendekati

Scriptnya:

<marquee onmouseout="this.start()" onmouseover="this.stop()">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Efek Marquee berikutnya adalah Scrool Up Style, dimana tulisan berjalan keatas

Anda dapat merubah stylenya menjadi scrool down atau tulisan berjalan kebawah sesuai keinginan anda.

Scriptnya:

<marquee behavior="scroll" direction="up" height="30">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Efek Marquee lainnya adalah berjalan ke kanan, dimana tulisan akan selalu bergerak dari arah kiri menuju ke arah kanan

Tentu anda juga dapat merubah arahnya sesuai dengan keinginan anda.

Scriptnya:

<marquee behavior="scroll" direction="right">Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Silakan Anda Ketik Apa Yang Anda Inginkan Disini

Efek Marquee yang terakhir adalah With Image Style dimana tulisan berjalan seiring dengan gambar

Scriptnya:

<marquee behavior="scroll"><Tentukan Gambar Anda Disini>Silakan Anda Ketik Apa Yang Anda Inginkan Disini</marquee>

Hasilnya :

Hemmm…Lezatt…

Anda dapat memodifikasi sendiri style yang anda inginkan, dengan memodifikasi script-script diatas sesuai dengan selera anda. Setiap style dapat di sisipkan LINK URL jika anda menginginkan tulisan yang berjalan memiliki link..

Bila ada yang ingin menambahkan tutorial diatas hasil modifikasinya silakan dikirimkan pada kolom komentar. Dan bila ada yang belum jelas atau kurang mengerti coba ketok-ketok kepalanya

....

.....kidding....kirim pertanyaannya yach dikolom komentar dengan senang hati saya akan membabu..

Terima kasih sudah berkunjung ke goblogtutorial..Semoga bermanfaat untuk anda semua..dan kita selalu dikasih sehat agar dapat terus melanjutkan aktifitas...Ciaow...Wassalm...wr...wb..

Cara Membuat Tulisan atau Link Berkedip Atau Blink-Blink

07.16 Unknown No comments

Tulisan Berkedap-kedip seperti cursor banyak kita temui dalam sebuah web...Biasanya tulisan berkedip tersebut digunakan untuk menarik perhatian pengunjung atau pembaca agar tertarik untuk mendekati tulisan berkedip tersebut. Tulisan berkedip tersebut dapat berupa link atau juga tulisan biasa yang berisi penawaran yang menarik perhatian.

Oke kita langsung saja ke TKP, cape klo bicara kronologi mulu....hehhehhe....

Tag <blink> adalah tag pembuka
Tag </blink> adalah tag Penutup

Okey kita coba...Pada saat anda membuat posting blog atau membuat halaman terdapat dua pilihan yaitu Compose dan HTML.. Jika anda menuliskan tag <blink>Coba-Coba</blink> pada Compose, maka tidak akan memberikan efek apapun. .Perhatikan Tulisan ini, jika saya menuliskan tag <blink> Coba-Coba</blink> pada HTML maka hasilnya Coba-Coba.
Anda dapat juga menyisipkan sebuah link dari tulisan berkedap-kedip tersebut untuk mengarahkan ke URL tertentu contoh ;<blink><a href="http://softekgoblogtutorial.blogspot.com/" target="_blank">Go Blog Tutorial</a></blink> yang kemudian saya tuliskan link berkedip ini pada HTML menjadi seperti ini ; Go Blog Tutorial

Cara Membuat Tombol Hide Show atau Spoiler

04.42 Unknown No comments

Tombol Hide and Show atau lebih dikenal dengan Spoiler adalah sebuah widget untuk menyembunyikan sebuah konten pada sebuah halamana. Fungsinya adalah agar artikel pada sebuah halaman tidak terlihat terlalu penuh, sampai-sampai pengunjung harus meng scrool halaman lebih dalam lagi.
Tentu saja selain untuk menyembunyikan sebuah konten pada sebuah artikel juga berfungsi sebagai estetika pada sebuah halaman. Sehingga pengunjung lebih tertarik untuk terus membaca artikel yang anda tulis.

Oke kita langsung saja mencoba ke TKP;

Ketika anda membuat sebuah artikel tentu anda masuk pada posting atau membuat halaman.. Pilihlah Tombol HTML ketika anda ingin membuat Hideshow / spoiler, lalu masukan script berikut :

Klik Disini Untuk membuka

Cara Merubah Tampilan Kolom Komentar Blog Agar Lebih Menarik

00.10 Unknown No comments

Kolom Komentar bawaan blog cenderung membosankan, serasa tampilannya kurang menarik. Bagaimana bila sebuah kolom komentar pada blog berpenampilan berbeda, sehingga para pembaca atau pengunjung blog yang kita miliki lebih tertarik untuk berkomentar pada blog tersebut.
Tampilan blog yang menarik pun akan terasa kurang bila kolom komentar masih bawaan standar, sehingga para pengunjung blog kita kurang bergairah dalam mengirimkan komentar atas artikel yang telah kita buat. Ibarat makanan kurang garamlah...atau ibarat kopi kurang gula..dan lain sebagainya.
Kali ini kita akan membuat kolom komentar blog agar lebih menarik lagi, sehingga dapat merangsang pengunjung blog untuk berkomentar.

Langkah awal : Seperti biasa...download terlebih dahulu template anda sebagai backup, kemudian centang expand template widget.. Anda cari script ]]></b:skin> kemudian letakan script dibawah ini diatasnya.

/* 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/AVvXsEgibOcbUqdbXBKr4SjvrvAXCKB9Yla_88xW4Gx5oqHcOb2vbQCF_tlIPUlNbxOqoRzxfKrHpRn3ko_tHw1KaBGobyyI4h2gYWnYG8QAikf_q1vAzkMEbCqLzgIr8QPiuBQkowglzN2Dep0/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/AVvXsEjwSsFWG_lxviA7SoW_pvKmwEf6JQTzg3sgaEkRj0pG9fdXPP9t77QKHLNyxkfMqrwCcSsdL3pg3nzD7juiMZn2CZT_CMcMhY4eINbh9VvD-MLsmD58uDY-MhrRoaX3x6YS-v7Euzy0fCc/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;
}

Langkah selanjutnya letakan script berikut diatas script </body>

Langkah ketiga adalah menambah widget yahoo emoticon, penambahan yahoo emoticon akan lebih mempercantik tampilan kolom komentar anda. Anda dapat mengabaikan langkah ini, namun jika anda tertarik membuatnya lakukan langkah ini ;

Letakan script berikut diatas ]]></b:skin>

Kemudian letakan script berikut diatas </Body>

Langkah selanjutnya adalah cari script berikut <h4 id='comment-post-message'><data:postCommentMsg/></h4> dan letakan script berikut dibawahnya ;

<b:if cond='data:blog.pageType == "item"'>
<div class='netoopsblogysmile' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div>
<a href="http://netoopsblog.blogspot.com"></a></b:if>

Langkah terakhir...Yang ini anda harus extra hati-hati dan teliti. Anda cari script berikut <b:includable id='comments' var='post'> setelah anda menemukan script tersebut anda telusuri element dibawahnya hingga anda menemukan script berikut </b:includable>

<div>
<div style="margin-bottom: 2px;">
<b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments > 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='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); 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/AVvXsEjoXsXuGVKTJGP0zVk0-bSciOH_gpewGU4-hSGe2g42zkq7_15nof72vAS9u63hKHUhgCgl-O038JxtrHFmZodyeRjwkyCxzmAUQUZuMMi6DPlhr27OdLgNg7F7r-thHTT7nJ4mn6KSr1s/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>
<br/>
<br/>

Jadi Element-element diantara script <b:includable id='comments' var='post'> dan script </b:includable> haruslah anda ganti dengan element diatas.

Klik show untuk melihat

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
   <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == "item"'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='20' width='470'/>
    </b:if>
    </div>

    <div class='comments comments-page' id='blogger-comments-page'>
    <a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 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='"https://www.blogger.com/comment.g?blogID=__3139601324000981722__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=500"); 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/AVvXsEjoXsXuGVKTJGP0zVk0-bSciOH_gpewGU4-hSGe2g42zkq7_15nof72vAS9u63hKHUhgCgl-O038JxtrHFmZodyeRjwkyCxzmAUQUZuMMi6DPlhr27OdLgNg7F7r-thHTT7nJ4mn6KSr1s/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>
</b:includable>

Tulisan yang berwarna Merah disorot Orange adalah Script yang harus anda CARI. Sedangkan Script yang berwarna Biru disorot Grey adalah script pengganti. Jadi anda harus mengganti elemen-elemen diantara script <b:includable id='comments' var='post'> sampai dengan script </b:includable>

Tulisan yang disorot hijau num_posts='20' adalah jumlah posting yang akan ditampilkan pada blog. Tulisan yang disorot kuning width='470' adalah lebar kolom komentar pada blog. Sebaiknya lebar kolom ini disesuaikan dengan main-wrapper anda.
Jangan lupa untuk mengganti BLOGID yang disorot Ungu, ganti dengan blogid anda.
Untuk pertanyaan dan tambahan untuk artikel ini, mohon tinggalkan komentar anda. Kami akan membantu dengan senang hati.
Semoga artikel ini bermanfaat untuk anda semua..Terima kasih telah berkunjung ke blog tutorial kami.