Ubahsuai layout ruangan comment

Bahagian post comment adalah sebahagian dari layout yang perlu diberi penekanan kerana ia mampu menarik minat pembaca untuk meninggalkan komen. Kebanyakkan blog mempunyai layout yang hampir sama pada bahagian comment.

Untuk mengubahsuai bahagian comment pada main page seperti yang boleh anda lihat pada bahagian comment pada blog saya ( lihat di sini ), apa yang perlu anda lakukan ialah dengan mengikut beberapa langkah di bawah.

p/s: Save dahulu template asal sebelum membuat editting.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada Expand Widget Templates.

Langkah 2

Tekan Ctrl + F dan taipkan ]]></b:skin>

Langkah 3

Salin kod di bawah dan pastekan di atas/sebelum kod ]]></b:skin>( lihat langkah 2 ).

p/s: Anda boleh mengedit kod warna yang berwarna biru mengikut kesesuaian warna pada blog anda jika mahu.

#comments-block{

margin:0;
padding:0;

}
#comments-block .comment-author{

background:#000 !important;

padding:5px;

font-size:15px;

font-weight:bold;

border:1px solid #191919;

}
#comments-block .comment-body{

margin: 0;

font-size: 12px;

border-left: 1px solid #191919;
border-right: 1px solid #191919;
margin-top: -5px; /*position*/

padding: 5px;

}
#comments-block .comment-footer{

margin:0;

font-size: 10px;

font-weight: normal;

margin-bottom: 20px;

border-left: 1px solid #191919;
border-right: 1px solid #191919;
border-bottom: 1px solid #191919;
margin-top: -12px; /*position*/

padding: 5px;

}
#comments-block .deleted-comment{

font-style:italic;
color:gray;

}
#comments-block .comment-author a{

color:#fff !important;

}
#comments-block .comment-footer a, .comment-body a{

color:#39cb43 !important;

}

Seterusnya klik preview dan jika tiada mesej error yang keluar, klik saja save.

Membina widget top commenters

Untuk membina widget top commenters seperti yang anda dapat lihat pada footer ( column bawah ) blog saya, terdapat satu cara yang sangat mudah. Apa yang perlu anda lakukan ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Salin kod berwarna merah di bawah pada notepad. Edit tulisan yang berwarna biru kepada url blog dan nama anda.

<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Fmaribinablog.blogspot.com&num=10&filter=nescafe ais" type="text/javascript"></script>

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik HTML/Javascript.

Langkah 3

Paste kod yang telah di edit ( lihat langkah 1), dan paste pada ruangan content.

Akhir sekali, klik save.

Membina effect bayang-bayang pada gambar

Untuk membina efek bayang-bayang pada bahagian kanan dan bawah gambar seperti yang anda dapat lihat pada gambar di atas, hanya perlu mengikuti beberapa langkah di bawah.

p/s: Sila save dahulu script template anda sebelum membuat editting.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada Expand Widget Templates

Langkah 2

Tekan Ctrl+F dan taipkan kod .post img { dan seterusnya tekan enter.

Langkah 3

Salin kod di bawah dan pastekan di bawah kod .post img { ( lihat langkah 2)

background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

Contoh:

.post img {
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

Akhir sekali, klik save.

Membina poll atau survey pada blog

Untuk membina poll pada blog, caranya cukup mudah. Hanya ikut beberapa langkah dibawah ini.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada Poll ( rujuk gambar dibawah ).


Langkah 2

Lengkapkan maklumat ( soalan dan jawapan ) yang anda rasakan sesuai dan perlu untuk poll yang ingin anda bina. ( rujuk gambar dibawah ).


Akhir sekali,klik save.

Membina widget recent comments (komen terkini )

Untuk membina widget recent comment seperti yang anda dapat lihat pada sidebar blog saya(respon terkini), terdapat satu cara yang sangat mudah. Apa yang perlu anda lakukan ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Salin dan edit kod berwarna biru di bawah pada notepad. Tukarkan kod yang di bold dengan warna merah dengan url blog anda. Anda juga boleh menukar angka yang di bold dengan warna merah dengan bilangan comment yang ingin di paparkan.

<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://Masukkan URL disini/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik HTML/Javascript. Langkah 3 Paste kod yang telah di edit ( lihat langkah 1), dan paste pada ruangan content.

Akhir sekali, klik save.

Membina widget recent posts

Untuk memaparkan 5 posts yang terkini pada sidebar blog seperti yang anda dapat lihat pada sidebar blog saya (entri terkini), anda boleh melakukannya dengan beberapa langkah yang mudah.

Langkah 1

Salin dan url di bawah ini.

http://masukkan url blog anda/feeds/posts/default

Contoh: http://maribinablog.blogspot.com/feeds/posts/default

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik pada Feed.

Langkah 3

Paste url yang telah di edit (lihat langkah 1) pada ruangan Feed url. Seterusnya klik Continue. Edit bahagian Title dan pilih berapa tajuk posting yang ingin anda paparkan. Maksimum ialah 5.

Akhir sekali, klik save.