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

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>

Tips SEO - 3 cara meningkatkan Page View dan klik pada link.

Ramai blogger sememangnya sudah maklum bahawa, terdapat berbagai teknik dan cara bagaimana untuk kita tingkatkan SEO dalam sesebuah blog. Mengubah Meta tag, menggunakan keyword, menggunakan template yang mesra SEO dan mengharapkan Backlink dari blog yang mempunyai Page Rank tinggi adalah dari beberapa teknik dan cara untuk kita mengejar SEO. Teknik dan cara yang kita gunakan itu sebenarnya hanyalah ikhtiar kita untuk cuba mendapat kedudukan terbaik dalam search engine.

Perkara yang paling utama sekali jika anda seseorang yang mengejar SEO adalah Linking. Lingking sebenarnya adalah segala-galanya dalam SEO. Ini kerana untuk tersenarai di search engine, seseuatu title atau keyword memerlukan jumlah klik yang sangat tinggi. Semakin tinggi link itu di klik, semakin mudahlah untuk title atau keyword link tersebut terindeks atau tersenarai pada kedudukan yang teratas dalam result carian bagi sesuatu keyword.

Cara yang paling mudah sekali untuk kita meningkatkan Page View dan klik pada link adalah seperti:

1. Membuat sambungan link pada post yang berkaitan.

Kita boleh menggunakan perkataan ataupun ayat pada tulisan yang akan di publish ke entri atau post yang sebelumnya.Cara ini sangat berkesan untuk meningkatkan Page View.

2. Memasang Read More pada post.

Read More adalah salah satu vara yang terbaik untuk anda meningkatkan klik pada link dan juga page view. Walaupun ada segelintir visitors yang mungkin kurang senang dengan Read More ini, tapi ia sebenarnya dapat meningkatkan Page View pada post tersebut.

3. Meletakkan widget Blog Archive, Recent Posts, Related Posts, Popular Posts dan Recent Comments.

Dengan memasang Blog Archive, Recent Posts, Related Posts, Popular Posts dan Recent Comments, ianya dapat meningkatkan lagi klik pada link dan juga Page View dengan lebih berkesan.

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(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/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

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

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.

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" />