Perbezaan sistem default comment dengan plugin comment

Jika di bandingkan dari segi fungsi, sistem plugin komen seperti Disqus dan Intense Debate menjadi pilihan pengguna blogspot kerana ia memudahkan pemilik blog dan komentar untuk memberi dan membalas komen. Berbeza dengan sistem default comment dari blogger.com yang di lihat kurang mesra kerana tiada sistem reply comment. Jika ada pun, ia terdapat kelemahan yang sangat ketara.

Walaupun begitu, kelebihan utama sistem default comment dari blogger.com adalah dari segi SEO. Ini kerana, bahagian komen juga akan di scan oleh Google dan hasil dari keyword yang berkaitan, URL blog kita mampu untuk tersenarai pada hasil carian Google. Blog akan mendapat backlink dari Google secara langsung.

Berbeza pula dengan sistem plugin, walaupun turut tersenarai pada hasil carian di Google, sistem ini tidak memberi backlink secara terus ke blog, sebaliknya terus ke akaun sistem plugin komen tersebut. Oleh yang demikian, pengguna sistem plugin comment digalakkan untuk memasang commentluv yang bertujuan, memberikan backlink secara langsung dan tersenarai dalam hasil carian di Google.

Bagi pengguna blogspot yang menggunakan sistem plug in seperti Disqus dan Intense Debate yang ingin memasang CommentLuv, sila layari blog Ariff. Beliau ada menunjukkan tutorial bagaimana untuk memasang Commentluv di blogspot.

Read More

3 tutorial buat simple header menggunakan Photoshop terbaik

Kepada blogger yang baru mengenali Photoshop dan dalam proses belajar menggunakan Photoshop, mungkin anda masih tercari-cari tutorial membuat header blog yang menggunakan Photoshop yang simple, mudah dan menarik.

Saya ingin kongsikan kepada anda 3 tutorial yang di tulis oleh 3 orang rakan blogger. Tutorial yang ditulis oleh mereka saya rasakan terbaik kerana mudah di fahami dan boleh di buat sebagai rujukan bagi orang baru untuk membuat header blog menggunakan teknik Photoshop yang simple tetapi menarik.

1.MelRomeo.com

Tutorial photoshop membuat banner header dan logo

2. Hannafauzann Story

Tutorial transparent header using Adobe Photoshop

3. Mohamadfaiz.com

Tutorial buat header blog

Read More

Cara pasang Image opacity effect

Image opacity effect adalah suatu kesan atau efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post.

Terdapat dua efek yang boleh anda pilih untuk digunakan pada blog.

Untuk Image opacity effect 1, image menjadi pudar apabila cursor mouse diletakkan ke atas gambar. Untuk demo, anda boleh lihat efeknya pada gambar di atas.

Untuk Image opacity effect 2, kesan adalah sebaliknya, iaitu image asal yang pudar bertukar terang dan jelas apabila cursor mouse diletak di atas image tersebut. Untuk demo, anda boleh lihat di sini.

Cara untuk memasang Image opacity effect ini sangat mudah. Hanya ikut beberapa langkah di bawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript

Langkah 2

Copy salah satu kod di bawahdan paste pada content HTML/Javascript.

Kod Image opacity effect 1

<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

Kod Image opacity effect 2

<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.post a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

Akhir sekali, klik Save.

p/s:Jika anda mahu meletak kod tersebut pada script template, sila paste kod tersebut di atas kod ]]></b:skin>

Read More

Cara pasang Jquery Slide Out Navigation di blogspot

Selain menggunakan cara float pada bahagian tepi blog untuk button-button seperti Facebook, Twitter, Youtube dan sebagainya seperti yang boleh anda lihat pada tutorial Cara pasang Floating Button di sisi blog, terdapat satu lagi cara yang sangat menarik iaitu Slide Out Navigation untuk anda cuba kerana ia menggunakan efek Jquery yang ringan.

Untuk memasang Jquery Slide Out Navigation pada sebelah kanan blog (blogspot), hanya ikut beberapa langkah yang mudah di bawah. Untuk melihat demo yang telah di pasang pada blogspot, sila klik di sini.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.

<style>

ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 120px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 120px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4leeH7ZYZhv0SEyog4ZYRFhasijfLAM9iiuoeXAJZLRlGu1DaSaUfkvN9jcK2AIc4gDYbM0wOpYNrS-ZYY6E5oca3Uj2Ok3YOkcnBIwNg06zRlWe2n4nqgcaH9FspH3iQIqKCsgLgkSE/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpeIQvA8AsZUcM7r6OlINASoIr-SbwRFC7muYBvwzn9B-lIVQ7TeN8PvxKVuo-WUaPpHyCgWPJE89jE5owoo3Ed-3Mn0l_mS-iJgR2R3mqxTMrvw99QI-Uu9TWYgN3kra1-L8LHrpg7Q/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAw_B7QM0HShP-a1TlaBdEuKs206oYCMynoccKT8VwaxHloSC92dDEYeh4H7xI4yM7aiilu7uLpHswG97HXSJt5VFuqZCUAuLkzhUJDzgWl-Zj3RFZ3Zh4mz5uENjCmnBYrJ239na8SI/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvekLcqbh3Tu8JTWEx-i0ZPzdUEPxT9FmLOlIRbg-wYH0xy2PkUbqgv_Cg5zhi6944dLxiIbO1Jgs1dDa1gIkfG8nqEIQz6uigiiqY0866X6pd2Zy3FVXSs97G1lMZCyYppXXn0_9Jbs8/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8zxRg7UUmu4sGWkpF2C7RSQvhECgWIOXgmh8O2ukTtI5HEVKGaQ0rpGuwc4udaZMJMRmr4W6YCyhBvmdkHDE4u6OZVTaCp8UTcRULYVV3f2k6-6TUX9GRjZPuEJ9MgyOYGB5uFRcDlMo/s400/mail_edit.png);
}

</style>


<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);

$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script>

<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"></a></li>
</ul>

P/s:

1.Untuk mengubah jarak ketinggian; sila edit angka pada kod top: 120px;

2. Untuk mengbah jarak tepi kanan jika efek terkeluar terlalu jauh, sila edit kod width: 120px;


3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, sila edit kod yang di bold dengan warna merah.

<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="My Facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="My Twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="My Profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="My Email"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>
</ul>

Akhir sekali, klik Save.

Sila Drag kotak Jquery Slide Out Navigation dan letakkan di bawah post jika terdapat tanda yang keluar pada efek tersebut.

Jika anda ingin mengubah icon, anda boleh dapatkan icon-icon yang menarik di Dryicons.com

Read More

Sumo Paint. Website online paling 'Superb' untuk Image Editor

Sumopaint.com adalah sebuah komuniti seni online yang membantu pengguna mencipta, berkongsi, menjelajah dan berkreatif menerusi aplikasi foto seakan Photoshop. Apa yang anda perlukan cuma Flash player untuk menggunakan aplikasi online ini.

Apabila anda mendaftar dengan Sumo Paint, ianya memberi kelebihan untuk anda menyimpan dan menyambung semula suntingan foto atau lukisan foto yang sedang anda lakukan. Ia juga membolehkan anda menggunakan lebih banyak ciri, tools dan servis. Sekiranya anda tidak mahu mendaftar sekalipun, ia tidak menjadi masalah kerana tools yang disediakan sudah cukup untuk anda berkreatif dengan foto digital anda.

Apabila anda klik pada butang Open Sumo Paint, window baru akan terpapar, di mana anda boleh memulakan kerja-kerja kreatif tanpa had. Antara tool yang disediakan seperti Filter efek 3D, Blur, Distort, efek cahaya, Stylize dan banyak lagi. Hanya klik dan ia dilakukan secara automatik. Seperti mana Photoshop, Sumo Paint turut menyediakan Swatches, fungsi Layers dan tentunya peralatan suntingan penting lain. Gambar yang dihasilkan juga boleh dimuat turun terus ke hard drive anda.

Selain itu, anda boleh melihat dan memuat turun imej yang dihasilkan pengguna lain di Sumo Paint atau mungkin anda sendiri ingin berkongsi imej yang anda hasilkan di Sumo Paint dan menerima komen terhadapnya. Ia turut dikelaskan mengikut kategori terbaharu, kegemaran dan undian terbanyak. Sumo Community juga turut membolehkan anda bersosial dengan pengguna lain.

Sumber: Majalah PC

Read More

Jquery Tab Menu Accordion versi 2

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript" src="http://javscript-code.googlecode.com/files/menuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini.

</div>
</div>

p/s:

Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff;  ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save.

Read More

Jawapan kepada masalah Reply To Comment

Pada entri yang lepas, ada di tunjukkan tutorial cara untuk memasang Reply To Comment pada bahagian Comment Layout. Daripada respon pada komen yang di terima, masih ramai lagi blogger yang gagal untuk memasang Reply To Comment tersebut. Hal ini terjadi kerana disebabkan oleh 2 perkara, iaitu:

1. Blogger tidak menukar setting bahagian Comment kepada Embedded below post.

2. Code yang di cari tidak ada pada script template kerana tidak di tick pada Expand Widget Template.

Jika anda mengikut segala langkah yang di tunjukkan dengan betul, insyaallah, Reply To Comment tersebut akan berjaya di pasang pada Comment Form blog anda.

Jika anda mahu meletakkan Reply To Comment pada bahagian bawah comment, seperti yang digunakan di blog ini, cari kod:

<dd class='comment-footer'>

dan kemudian paste kod:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukkan ID blog disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

selepas atau di bawah kod:

<dd class='comment-footer'>

Contoh:

<dd class='comment-footer'>
<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukkan ID blog disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

Jika anda mahu menukar teks [Reply to comment] kepada bentuk icon, gantikan teks yang di bold hijau tersebut kepada kod dibawah.

<img src="http://masukkan url icon di sini" />

Read More