Cara mengganti poskan komentar dengan gambar

Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.

Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pengaturan Template.
2. Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
3. Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
<img src="URL gambar kalian" />
4. Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
5. Save template, selesai.

Saya beri contoh gambar dan kodenya.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgd6EwbvrCPaKDKyGiyZgxJTLVK_qLdxpTfjMqD714nRIk6B1PmGN1AGGi3RHRkFG9B0p_CjVZDonJMLeyN33ZPD2YCNGRWaXzPTSq2rO6so0zpCKOxgwZlxrdITeKnZDC0JQ8grnXlm-i/s1600/KOMENTAR+1.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGLoTKTJMiyKaddW1Q9-UeCMoOVF6D6I0wsnoREuA3FyIps4B5ftIWJMNBuJ_jmnf7Eu1weB6sCH_Ztfjr5wZNXK3NzXlYHJYl3NWccNatjGCfZjgDTtn9OQmPx6BufhTWu_c9HB8vZqe/s1600/Poskan+Komentar+02.gif" />

Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>

.comments h4 img{
float:right;
margin:-42px  -35px 0px 0px;
}

Ketarangan kode:

• float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
• margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.

Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

Cara memasukan kode HTML, Css, Script diposting blog

Untuk memasukan kode html, css, script diposting blog sebenarnya bisa dapat ditulis secara langsung seperti kita menulis artikel seperti biasa. Tapi dibeberapa blog ada yang tidak dapat menuliskannya secara langsung, seperti menulis kode ]]></b:skin>. Pada saat diketik mungkin bisa, tapi pada saat dipublikasikan, yang tampil hanya kode ]]> ini saja.

Kejadian ini saya alami pada saat menggunakan template simple. Terus saya cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada saat kita menulis artikel. Jika kamu mengalami hal yang sama. Buka entri baru/atau entri lama kamu, lalu klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode² yang kita tulis secara langsung diposting blog akan terlihat.

Selanjutnya, agar tampilan kode html, css, script diblog kita terlihat rapi. Kita dapat memasukannya ke dalam satu kotak script. Berikut caranya.

Pembuatan kotak script

1. Pertama, copi kode dibawah ini, lalu pastekan diatas ]]></b:skin>  
.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMzPDK3JTED1UOsyyEW8gE23Sr64hG8vA1m4Ey0Nj9iQu9L4CwXJbQXbRMvHPz0XJVfcIkUMv6ZtQ5ARoBC8IDQc4sd2vbSzkLNxXdPde9R2DtXGlUaDZf9xmvqJ3K3l8ptQd9Bj0RK-z/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
2. Save template. Selesai.

Cara membuat kotak script didalam posting blog

1. Buatlah entri baru atau edit artikel lama kamu. 
2. Lalu klik bagian HTML disebelah Compose.
3. Lalu ketikan kode ini.
<div class="kotak">
klik disini dan ganti dengan kode script yang ingin kalian masukan
</div>
4. Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan 
5. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

 Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll

1. Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style="overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.
<div class="kotak" style="overflow: auto; height: 80px;" >
Contoh kotak dengan scroll
</div>


2. Cara membuat kotak scroll kesamping.
Contoh penggunaan kotak denga scroll kesamping. Copi kode dibawah ini dan tempatkan dibagian HTML seperti cara diatas.

<div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
<p style="width:450%;">Masukan kode disini.
</p></div><br />

Pada saat kita menulis artikel warna dari kotak script tidak terlihat, api pada saat kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada saat menuliskan kode kotak di HTML(sebelah compose), tambahkan juga tulisan dimana tempat memasukan kodenya. Contoh:

<div class="kotak">
Tempat memasukan kode script, html, css dan lain-lain.
</div>

Dengan begitu, tulisan yang akan tampil dihalaman Compose adalah tulisan Tempat memasukan kode script, html, css dan lain-lain. Tinggal kita klik lalu ganti dengan kode yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel tentang fungsi border dan penggunaannya diblog yang dapat digunakan untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.

Read More

Cara merubah tampilan blockquotes diblog

Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.

Untuk lebih jelasnya tentang cara merubah tampilan blockquotes. Ikuti langkah-langkah dibawah ini.

Cara merubah tampilan blockquotes.

---

Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.

.post blockquote {
background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }

Setelah itu, klik Terapkan ke blog, Selesai.

Cara menggunakan blockquotes di halaman posting blog.

---

Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda T_x) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.

Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IwbtNVFsaulJZ_sB-Naw76kpXaOSLl82Ea-mMUa55tfMNDHwEgxiXQtu8Zv0bOXjU-_2iQkruyv2kobMPFlzqmoHMKyr8q9seNEG4OfOsz5aAZU52rVETp8LlfEWZrGvORnvgPbOTfwV/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VHguOfQ1KOwFqpqyTbuCSjRH3waNdlCLuQijtx_21V4TVeCRT3W9ZKsG6jjDCk7vXH0boq1ZyUH8nOz-eun2JxRkMrGKmC1DPWd6cDmt0DXoRIeLj8rF85WuLfEMXDUl4Yz0MLx3xgv1/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }

Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

Cara mengganti background blog dengan gambar

Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bagian yang ada diblog. Contoh background menggunakan gambar bisa dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
2. Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
body {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
3. Terapkan ke blog selesai.

Keterangan kode:

• background: url( adalah url dari backgorund gambar yang akan digunakan.
• repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
• fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
• top center posisi gambar. Top bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
• jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode content. Contoh:

.content {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kamu gunakan, sudah menggunakan background warna.

Contoh: Misalkan kamu pasang background gambar, tapi pada bagian headernya tertutup background warna putih, agar background warna putih itu hilang dan terganti dengan gambar. Gunakan kode #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya: 

---

 Untuk bagian header

---

#Header { background:transparent; }
.header h1  { background:transparent; }
.body-fauxcolumn-outer .cap-top { background:transparent; }

---

Untuk bagian posting

---

.post-body { background:transparent; } hanya pada bagian tulisan posting.
.post { background:transparent; } bagian posting keseluruhan.
.post-outer { background:transparent; }  bagian posting sampai keluar
.main-inner { background:transparent; } bagian posting dan sidebar
#blog-pager { background:transparent; } pada bagian tulisan beranda, posting lama, posting lebih baru

---

Untuk bagian tab

---

.tabs-outer .PageList { background:transparent; }

---

Untuk bagian sidebar

---

.sidebar .widget { background:transparent; } hanya pada bagian widgetnya saja.
.sidebar { background:transparent; } seluruh bagian sidebar

---

Bagian footer.

---

.footer-fauxborder-left { background:transparent; }
.footer-outer { background:transparent; }

---

kode-kode lainnya, jika diperlukan.

---

.content-outer { background:transparent; } bagian halaman blog. dari header sampai ke footer.

.content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.

.body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }

.body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }

Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.

Read More

Merubah tampilan sidebar dan posting blog

cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

Langsung saja, cara merubah tampilan bagian sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. lalu masukan kode dibawah ini.
.sidebar .widget h2{
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}

.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
4. Terapkan ke blog. Selesai.

Keterangan kode:

• .sidebar .widget h2{ mengatur judul pada bagian sidebar.
• .sidebar .widget { mengatur isi dari bagian sidebar.
• text-align:center; membuat tulisan ditengah.
• border garis kotak 
• margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur tulisan dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
h2.post-title{
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}

.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
2. Terapkan ke blog. Selesai.

Keterangan kode:

•  h2.post-title{ untuk mengatur bagian judul posting
• .post{ untuk mengatur isi dari bagian posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Read More

Cara mempercepat loading blog lanjutan

Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah² dibawah ini.

Menambahkan attribute width dan height.

Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:

1. Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnyp40Sno04iAkvg7xdwbRS8Vsg6g30y6StRBalwX3KawJ-aHfk6s3-OAK18RRKoegMq7NmQX47qVXILVGMtFpmOylB5qiyYdxw98e0g0mKoeg-5JFgcCpFvXcAqR5pLfT_A1SEl608GG/s128/fandra-juani.jpg' width='32' height='32' />


2. Untuk kode CSS width:70px;height:70px;

Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.

Merubah ukuran asli dari sebuah gambar.

Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.

Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.

Mengganti server gambar blogger dengan google.

1. Buatlah entri baru, lalu masukan gambar ke posting.
2. Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.

3. Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
4. Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
5. Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.  
6. Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
7. Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkPEy0_Ur-CGu9a6lMIMQIor2hXrZ-FjjAU43mzzZhg7fXl65bakzNUdSZxVIxWZwsMnZmc4u3zex7KxXqs-ODNSqVgjFZYGZIbQ-LCh9wAxO7uwWiZqud_tkhdwzkCIJN9aVmQCB4J9z/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkPEy0_Ur-CGu9a6lMIMQIor2hXrZ-FjjAU43mzzZhg7fXl65bakzNUdSZxVIxWZwsMnZmc4u3zex7KxXqs-ODNSqVgjFZYGZIbQ-LCh9wAxO7uwWiZqud_tkhdwzkCIJN9aVmQCB4J9z/s1600/loading.jpg" /></a></div>

URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutQwgqXt9mYsuaWohByIh8HWedeq7Z63Vgkb6e_gDd1zVby2opd2ACLVGgMKY0oJFZ8tGAfN2W8FfDSWX4S-8dEN-5-WEwCSzRli5g2pGWOjUIdeo4R5dtvHz2x3lPOG4m-mmH-zoLRId/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutQwgqXt9mYsuaWohByIh8HWedeq7Z63Vgkb6e_gDd1zVby2opd2ACLVGgMKY0oJFZ8tGAfN2W8FfDSWX4S-8dEN-5-WEwCSzRli5g2pGWOjUIdeo4R5dtvHz2x3lPOG4m-mmH-zoLRId/s300/loading.jpg" /></a></div>
8. Selesai.

Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.

Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.

Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.

Read More

Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/author dikotak komentar blog. Seperti gambar dibawah ini. Tanda penulis berupa gambar, yang akan muncul ketika penulis memberikan komentar. Sehingga mudah untuk dibedakan yang mana author/pemilik blog dengan pengunjung yang memberikan komentar.

Untuk lebih jelasnya tentang cara membuat tanda penulis atau author dikotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Klik edit HTML dan cari kode ]]></b:skin> dan tempatkan kode berikut ini diatasnya.
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png);
background-position: top; float:right;width:125px;height:32px;margin:-16px 0px 0px 0px;
}
3. Save template, selesai.

Keteranga kode diatas:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png merupakan url dari gambar yang akan ditampilkan.
• float:right; posisi gambar disebelah kanan.
• width:125px;height:32px; tinggi dan lebar gambar.
• margin:-16px 0px 0px 0px; mengatur posisi gambar agar tidak terkena komentar. Pengaturan kode: -16(kanan), 0(atas), 0(bawah), 0(kiri).

Gambar diatas menggunakan format PNG, dan background dibuat transparant. Jadi background gambar akan mengikuti warna background dari kotak komentar. Untuk membuat gambar transparan, baca di cara membuat gambar dengan background transparan. Dan silakan baca juga cara upload dan ambil url gambar, untuk memasukan gambar anda yang akan dijadikan tanda penulis.

Itulah sedikit cara desain blog yaitu tentang membuat tanda penulis dikotak komentar blog, agar pengunjung mengetahui siapa penulis atau pemilik dari blog. Silakan baca juga artikel lainnya, yang berhubungan dengan gambar. Seperti cara menambahkan gambar disamping judul posting atau cara memasang icon berbeda disetiap judul widget. Dan juga artikel lainnya.

Semoga bisa bermanfaat untuk anda.

Read More