Membuat Keterangan Teks Plus Gambar Diatas Kotak Komentar
Menambahkan keterangan diatas kotak komentar sangat mudah, kita bisa menambahnya melalui menu Settings - Comments - dan mengisi keterangan pada Comments Form Message, dengan melalui menu setting tersebut kita hanya bisa menampilkan keterangan berupa teks saja tanpa bisa menambah dengan keterangan berupa gambar (image).
Script yang akan kita pasang adalah script untuk menampilkan keterangan gambar dan teks diatas kotak komentar, pada dasarnya script ini juga bisa untuk menambahkan atau untuk menampilkan widget diatas kotak komentar, untuk ruang diatas kotak komentar akan lebih bagus hanya diberi keterangan teks plus gambar (itu menurut saya terserah kalian untuk memilih dan mendesign tampilan), hasil dari keterangan teks plus gambar seperti screenshot dibawah ini :
Pada dasarnya script ini adaptasi dari script untuk Membuat Kotak Admin atau Author Box hanya yang membadakan dari segi penempatannya, Untuk membuat keterangan teks plus gambar (image) diatas kotak komentar kalian copy kode css dibawah ini dan letakan diatas kode
]]></b:skin>
caranya :
- Masuk Design - Edit HTML - Ceklis Expand Template Widget
- Untuk menghidari resiko, lakukan backup template terlebih dahulu
- Copy code css dibawah ini dan letakan diatas kode
]]></b:skin>.keterangan-komentar {
margin: 5px 0 5px 0;
padding: 0 5px 0 0;
width: 490px;
height: 100px;
}
.keterangan-komentar p {
margin: 0;
padding: 5px 0px 5px 5px;
border:1px solid #9999FF;
background: transparent;
}
.keterangan-komentar img {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
Kemudian cari kode
<p><data:blogCommentMessage/></p>dan letakan kode dibawah ini dibawahnya
<div class='keterangan-komentar'>
<p><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_lFR6u1_6D-1bkxj4F9kbx3qA_flufXST_Imw5mrqqtQv_uPvqG6JRQsAR4FmWcFYda_CmOS89tuGldw6vEjazXp9QzkUbxtXXrLOtgpPxk8pxMnn7SIAJfC5m_5GAZGSW8m6RAVioSh/s1600/provil+komentar+gue-galau.blogspot.com+size+75X75.png' width='60'/><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif; font-size: normal;'>Terima kasih telah membaca <b><a expr:href='data:post.url'><data:post.title/></a></b>, jika ada yang kurang faham, kalian bisa bertanya melalui komentar, Terima kasih<a href='http://gue-galau.blogspot.com/'>.</a></span></p>
</div>
Merah bisa kalian ganti dengan URL gambar kalian sendiri
yang jelas berukuran 75X75
Save template kalian dan lihat hasilnya
Biasanya kode
<p><data:blogCommentMessage/></p> ada 3, pilih yang pertama atau yang diatasnya ada kode <h3><data:postCommentMsg/></h3> jangan yang mobile, jika ukuran kotak keterangan komentar berbeda dengan kotak komentar, kalian bisa rubah pada bagian ccs bagian di beri warna putih.Semoga bermanfaat,
Slide Out Floating Share Buttons For Blogger
DEMO >> http://gue-test.blogspot.com/
Cara Membuat dan Menambahkan Widget ini ke Blogger !
Instalasi widget ini sangat mudah, Anda dapat menambahkan widget ini hanya dalam dua langkah saja!
- Pergi ke Dashboard Blogger> Template
- Klik Edit HTML
- Lalu letakkan kode pada tag yang di sebutkan
<script src='http://gue-galau.googlecode.com/files/shareThispage.js' type='text/javascript'/>
Letakkan di atas tag </body>
<!-- gue-galau.blogspot.com slideout widget : BEGIN --> <div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style"> <a class="addthis_button_more">Share</a> <ul> <li><a class="addthis_button_preferred_1"></a></li> <li><a class="addthis_button_preferred_2"></a></li> <li><a class="addthis_button_preferred_3"></a></li> <li><a class="addthis_button_preferred_4"></a></li> </ul> </div> <!-- gue-galau.blogspot.com slideout widget : END -->
- Akhirnya menyimpan widget Anda dan Anda selesai.
Langganan:
Postingan (Atom)
