Pasang Snaps Shots

Apakah sobat pernah mengunjungi blog yang apabila mouse menyorot link kemudian keluar screenshoot? (artikel yang aneh baru mulai sudah ada pertanyaan) , nah apabila sobat berkeinginan blognya mempunyai fasilitas seperti itu coba deh baca artikel ini sampai selesai.

Untuk mendapatkan tool screenshoot seperti itu, sobat bisa mendapankannya diberbagai situs di internet. Agar tidak berlama-lama mencari, saya ambil contoh salah satunya adalah http://www.snap.com. Berminat tapi masih bingung cara mendapatkannya? silahkan ikuti langkah-langkah berikut ini :

1. silahkan sobat kunjungi http://www.snap.com
2. Apabila sobat sudah berada dihalaman situs tersebut, klik tombol Get Started Now
3. Pilih warna yang di inginkan di bawah tulisan CHOOSE A COLOR THEME, klik saja warna yang tersedia
4. Pilih Snap shot icon dan trigger di bawah tulisan CHOOSE A SNAP SHOT AND TRIGGER, klik saja pada radio button yang ada
5. Apabila sobat ingin memasang logo milik sendiri, klik tombol Browse...., kemudian pilih gambar icon yang tersedia pada komputer sobat, apabila tidak mau ya biarkan saja
6. Pilih ukuran snap shots di bawah tulisan CHOOSE SNAP SHOTS SIZE, beri tanda pada radio button nya
7. Klik tombol Continue
8. Masukan alamat blog sobat pada kotak di bawah tulisan Enter Your Site URL. contoh : http://template-unik.blogspot.com
9. Masukan alamat email sobat di bawah tulisan Enter Your Email
10. Beri tanda centang pada kotak di samping tulisan I agree to the Terms and Conditions below (kalau mau dibaca, silahkan baca dulu TOS nya)
11. Klik tombol Continue
12. Apabila sobat memakai template baru, klik banner logo Blogger, silahkan sign in di blogger dan pilih nama blog yang di inginkan
13. Klik tombol MENAMBAH WIDGET, maka akan secara otomatis kode dari snaps shots akan di tambahkan
14. Pindahkan elemen yang baru di tambahkan pada tempat yang di inginkan, karena kode tersebut memuat pula banner dari snapshot
15. Klik tombol SIMPAN
16. Selesai.

Bagi sobat yang memakai template klasik, pada langkah yang ke 12, sobat klik lagi tombol Continue. Klik link READ MORE yang berada di bawah tulisan yang berjudul Put a Snap Shots Badge on your site. Copy kode yang di berikan dan paste pada notepad. langkah terakhir tinggal memasukannya kedalam kode template sobat.

Agar lebih asik, sobat bisa melihat contoh nyata nya pada blog saya yang lain, coba klik saja di sini ! arahkan mouse sobat pada Link yang ada pada blog tersebut, maka nanti akan keluar screenshot dari setiap link yang di sorot.

Selamat mencoba !

Leer más

Cara membuat Favicon

Cara membuat Favicon (2)

Pada zaman dahulu kala, kang rohman pernah membahas bagaimana cara menganti Favicon yang saya posting di sini. Karena zaman selalu berubah, maka postingan tersebut sudah tidak relevan lagi untuk di baca atau dengan kata lain sudah kadaluarsa. Walaupun begitu sebenarnya kang rohman sudah memposting artikel terbaru yang saya posting di sini, namun karena tidak semua orang suka berkunjung ke blog saya yang satu ini, maka artikel tersebut luput untuk di baca. Oleh karenanya, kali ini kang rohman coba posting saja di blog ini.

Bagi anda yang masih bingung apa sih Favicon itu? Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Berikut screenshot nya :









Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :

Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :
   
   
   
2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
   
3. Klik pada tombol Browse...
   
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
   
5. Klik pada tombol Generate Favicon.
   
6. Setelah proses selesai, klik pada Click Here to Download your favicon.
   
7. Save ke komputer anda.
   
8. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities. Belum tahu bagaimana cara meng upload gambar ke Yahoo! Geocities? heuheuheu... sok atuh di baca dulu postingan kang rohman yang ini!
   
9. Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :
   
   http://www.geocities.com/amn_tea/favicon.ico
   
10. Anda harus mengubah alamat URL favicon anda menjadi seperti ini :
    
    
    <link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
    
    
11. Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
    
12. Klik pada Tata Letak.
    
13. Klik Edit HTML.
    
14. Silahkan cari kode </head> (posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah dhenk).
    
15. Simpan kode favicon yang tadi persis di atas kode </head> . Contoh :
16. 
    
    
    <link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
    
    
17. Klik tombol Simpan Template.
    
18. Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di nikmati.

Leer más

Membuat Menu Dropdown

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:



Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

1. Login ke blogger.com dg id Anda
2. Klik Template
3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives> 


<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>



</BloggerArchives>

4. Nah, ganti kode di atas dg kode html di bawah ini:

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">



<option selected>- Archives -</option>



<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>



</select>

5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
6. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

1. login dulu, tentunya dengan id anda
2. klik LAYOUT
3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
4. Klik Edit pada kotak Blog Archive tadi
5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek
6. Klik Save Changes
7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>

</select></form> Hasilnya akan seperti ini :

Mudah bukan?   Selamat mencoba !

Leer más

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif" border="0" alt="Blog Tutorial" /></a>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </script>

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.

Leer más

Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik agar photo tersebut menjadi ada figuranya.

Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk photo frofile, contoh kode photo frofile untuk template lama seperti ini :

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

untuk template baru seperti ini :

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }


Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :

float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.

padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).

border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.


Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!

Untuk template klasik :

1. Sig in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
5. Cari kode yang mirip dengan kode di bawah ini :
.profile-img img { float:left; padding:4px; border:1px solid #ddd; margin:0 8px 3px 0; }
6. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :
.profile-img img { float:left; padding:4px; border:8px solid #ddd; margin:0 8px 3px 0; }
7. Klik tombol Pratinjau untuk melihat hasil perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template
9. Selesai.

Untuk template baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Cari kode yang mirip dengan kode di bawah ini :
.profile-img { float: left; margin: 0 5px 5px 0; padding: 4px; border: 1px solid $bordercolor; }
8. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :
.profile-img img { float:left; padding:4px; border:8px solid $bordercolor; margin:0 8px 3px 0; }
9. Klik tombol Pratinjau untuk melihat perubahan
10. Bila sudah OK, klik tombol SIMPAN TEMPLATE
11. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).

Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !

Selamat mencoba deh !

Leer más

Cara membuat Elemen Persis Di bawah Header

Seperti kang rohman tulis pada artikel " Menyimpan widget persis di bawah header ", bahwa tidak hanya cara tersebut saja yang bisa anda lakukan namun masih ada teknik yang lain untuk dapat meyimpan widget atau elemen persis di bawah header. Teknik yang kang rohman maksud adalah dengan membuat kolom baru langsung di bawah header, penasaran bagaimana caranya? yuk di lanjut mang!!!

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Belum tahu caranya? silahkan ikuti langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Elemen Halaman. Perhatikan struktur layout template anda. Biasanya bagian header akan seperti ini :
   
   
   
   
4. Sekarang kita akan membuatkan sebuah kolom baru persis di bawah header. Siap? yuk mulai.
5. Klik tab Edit HTML.
6. Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).
7. Copy kode berikut, lalu paste di atas kode ]]></b:skin>
   
   #under_header{
   margin:10px 0;
   padding:1%;
   width:98%;
   }
   
   
8. Cari kode yang mirip dengan kode di bawah ini :
   
   <div id='header-wrapper'> 
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
       </div>
   
9. Copy kode berikut lalu paste persis di bawah kode tadi :
   
   <div id="under_header">
   <b:section class='header' id='underheader' preferred='yes'/>
   </div>
   
   
10. Klik tombol SIMPAN TEMPLATE. Tunggu beberapa saat sampai template anda tersimpan.
    
11. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
    
    
    
12. Yihaa! sekarang anda sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan. Mau pasang iklan google adsense, klik saya.com atau apa saja atau mungkin mau pasang photo anda yang ganteng serta cantik di sana? silahkan wong blog anda.
13. Selesai.

Kode-kode yang saya tuliskan di atas tentunya tidaklah mutlak, itu hanya kode paling sederhana yang saya buat untuk membuat tutorial “Cara membuat Elemen Persis Di bawah Header ” menjelang mau kerja, jadi babay dulu ah, mo kerja dulu mo cari duit biar dapet dobel, dari internet OK dari kantor juga OK.

Leer más

Revisi: Cara Modifikasi Kotak Komentar

Sudah baca tutorial kemarin tentang cara modifikasi kotak komentar? Bagaimana hasilnya? dari komentar yang masuk dan setelah kang rohman kunjungi blognya, ternyata memang banyak yang sudah berhasil. Namun ada yang mengeluhkan bahwa hasilnya sedikit berbeda dengan yang di miliki kang rohman, yaitu di sebelah atas garisnya tidak rata sehingga mengurangi keindahan dari kotak komentar tersebut. Screenshotnya seperti ini :

Hiks…. kenapa ya bisa begitu? ternyata permasalahnya adalah gambar yang di upload ke blogger sebagai background kotak komentar tersebut mengalami penyusutan alias di perkecil oleh mesin blogger. So, gambar yang tadinya sudah pas menjadi tidak pas. Apakah ada solusi? tentu saja. solusinya anda harus menyimpan gambar background di server lain seperti di photobucket, google pages, imageshack, yahoo geocities atau di server lainnya yang biasa anda gunakan untuk menyimpan gambar. Tentunya sudah tahu kan cara menyimpan gambar dan mengambil alamat URL nya, belum tahu juga? sok atuh di baca postingan kang rohman tentang “upload gambar ke photobucket” atau tentang “google page creator”.

Trus bagaimana kelanjutan tentang kotak komentarnya? hiksss…lupa. Sekarang begini, silahkan anda save gambar di bawah ini! belum tahu caranya? tinggal sorot saja gambarnya, kemudian klik kanan lalu pilih Save Image As… (untuk fire fox) atau Save Picture As… (untuk internet explorer), kemudian simpan di komputer anda.




Sudah di simpan gambarnya? jika sudah, silahkan upload ke server tempat anda biasa menyimpan gambar, kemudian jangan lupa untuk mengcopy alamat URL nya.
Jika sudah dapat, silahkan ikuti tutorial berikut untuk memperbaiki kotak komentar yang kemarin.

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
5. Cari kode css yang seperti ini (kode yang kemarin hasil modifikasi).
   .commenttext {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj457WYIEIHx_915rARslZxh7Xz9fHWOot0Sp5NNSsodLdqumNh0gbBNXOjC2vR-DLoVYM8Fkn2VqeHBFZJQUvmYHVv0jQQaonXWyq3-DFLSwCFfg7XDK32feCIlN6ovuOmY1Pmz1I-CvWX/s320-r/comment.gif) no-repeat top left;
       }
   .commenttext-admin {
       clear: both;
       margin: 3px 0px 10px 0px;
       padding: 20px 10px 5px 10px;
       width: 490px;
       background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj457WYIEIHx_915rARslZxh7Xz9fHWOot0Sp5NNSsodLdqumNh0gbBNXOjC2vR-DLoVYM8Fkn2VqeHBFZJQUvmYHVv0jQQaonXWyq3-DFLSwCFfg7XDK32feCIlN6ovuOmY1Pmz1I-CvWX/s320-r/comment.gif) no-repeat top left;
       }
   
   
6. Gantilah alamat gambar yang saya beri warna merah dengan alamat gambar yang anda miliki. contoh ( ini contoh saja lho, jangan di pakai) :
   
   
   .commenttext {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 490px;
   background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
   }
   .commenttext-admin {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 490px;
   background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
   }
   
   
7. Klik Tombol SIMPAN TEMPLATE.
   
8. Selesai, silahkan lihat hasilnya.
   

Mudah-mudahan dengan tutorial ini, keluhan anda bisa jadi terobati. Satu lagi, pada posting berikutnya akan saya berikan altenatif warna lain dari kotak komentar hasil modifikasi ini. Jadi, jangan lewatkan seri berikutnya ya.

Selamat berkreasi.

Leer más