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

Cara pasang Facebook share button di blog

Untuk memasang Facebook Share Button pada setiap post di bawah post title,seperti yang boleh anda lihat pada blog ini, hanya ikut beberapa langkah yang mudah di bawah.

Langkah 1

Pergi ke http://www.facebook.com/facebook-widgets/share.php dan pilih style button yang ingin anda pasang pada blog. Anda juga boleh memilih button dengan counter.

Langkah 2

Log in blog = Dashboard => Design => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 3

Dengan menggunakan keyboard, tekan kekunci F3. Seterusnya taip atau paste kod <div class='post-header-line-1'/> pada kotak Find dan seterusnya, klik Find. Jika kod tersebut tiada, anda boleh menggantikannya kod <div class='post-header-line-1'> atau <data:post.body/>

Langkah 4

Salin kod yang telah siap pada Langkah 1 dan paste kod tersebut di bawah atau selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> atau <data:post.body/>

Akhir sekali klik Preview, dan jika tiada mesej Error yang terpapar, klik saja Save.


P/s: Jika anda ingin mengubah kedudukan button tersebut, anda boleh gunakan kod ini untuk memaparkan button pada sebelah kanan atau kiri

<div style="float:right;padding:4px;">
Masukkan kod Facebook Share Button di sini
</div>

Gantikan right kepada left pada float jika anda ingin memaparkan button pada sebelah kiri

Contoh:

<div style="float:right;padding:4px;">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Read More

Cara kesan IP address visitor blog

Statscounter.com adalah salah satu site yang menyediakan perkhidmatan visitor counter  yang mempunyai ciri-ciri yang sangat menarik. Dengan mendaftar dan memasang widget statscounter secara paparan ataupun di sembunyikan(hide) pada blog, kita sebenarnya dapat mengesan dari mana datangnya visitor beserta IP address. Dengan memaparkan maklumat pelawat secara detail, kita juga mungkin dapat mengesan IP address visitor yang memberi komen berdasarkan masa yang tercatat pada komen tersebut.

Untuk mengesan IP address visitor yang masuk ke blog kita, hanya perlu klik icon Real-Time Stats and Visitor Reports (rujuk gambar) dan kemudian klik pada Recent Visitor Activity. Pada paparan Recent Visitor Activity, kita dapat melihat maklumat yang menunjukkan lokasi, ISP provider, IP address visitor, entry page, exit page dan refering URL visitor yang melawat ke blog kita.

Untuk mencubanya, anda boleh mendaftar di statscounter.com

Read More

Website terbaik untuk edit gambar secara online percuma

Picnik.com adalah satu site photo editing yang memberi kemudahan kepada anda untuk membuat suntingan terhadap gambar sebelum memaparkannya pada blog. Editing tools yang disediakan juga adalah sangat menarik dan mudah untuk di gunakan. Satu kelebihan yang ada pada site ini ialah, anda tidak perlu untuk mendaftar seperti kebanyakkan site yang lain.

Pelbagai effect disediakan oleh Picnik.com seperti khas seperti Go Pink (menjadikan gambar berwarna anda menjadi merah jambu) dan Focal B&W (memberikan fokus warna pada bahagian yang anda kehendaki, sementara bahagian lainnya pula berwarna hitam dan putih). Pilih Orton-Ish untuk memberikan sentuhan kecantikan kepada gambar anda dan Posterize untuk menjadikan gambar anda seolah-olah dilukis dengan cat air.

Anda juga boleh membuat suntingan gambar supaya menjadi lebih jelas, memotong bahagian gambar yang tidak dikehendaki atau mengecil dan membesarkan gambar. Setelah selesai anda bolehlah save ke hard drive anda.

Read More

Cara buat logo dan banner blog percuma secara online

Ada diantara kita yang tertanya-tanya bagaimana cara untuk mencipta logo sendiri untuk diletakkan di dalam blog sebagai header ataupun untuk dijadikan sebagai banner exchange.

Dengan Online Logo Maker, kini kita boleh membinanya secara online tanpa memerlukan kemahiran yang tinggi seperti seorang Designer. Hanya gunakan kretiviti sendiri untuk menngunakan icon dan style font yang sesuai.

Online Logo Maker adalah sebuah site yang menyediakan perkhidmatan untuk membina dan merekabentuk logo secara percuma. Kelebihan yang terdapat pada site ini ialah, tools yang di sediakan sangat mudah untuk di gunakan dan anda tidak perlu membuat sebarang pendaftaran.

Untuk mencubanya, sila lawat:

Onlinelogomaker.com

Read More

Tips untuk memilih template blogspot

Dalam memilih template blog, kita perlu sedar, sesuaikah template yang di pilih itu dengan isi yang ingin kita sampaikan. Sebagai contoh, kita ingin menggunakan blog sebagai platform perniagaan atau business, template yang mungkin sesuai adalah template yang berstail elegant dan magazine. Mungkin sedikit janggal jika menggunakan theme yang gelap. First impression adalah satu aspek yang tidak boleh kita pandang ringan dan abaikan jika ingin menarik lebih ramai lagi visitors.

Begitulah juga dengan template blog yang berkategori personal yang biasanya dipilih berdasarkan minat, bermotif dan berbunga oleh pemilik blog tersebut.

Tips memilih template blogspot.

1.Template yang terbaik adalah template yang mesra SEO. Ini kerana template tersebut di bina khas yang bertujuan untuk mendapatkan rank yang baik dalam search engine dan friendly pada visitor. Biasanya, loading untuk template yang mesra SEO ini adalah sangat cepat.

2.Semasa kita melihat preview template yang handak di pilih itu, pastikan semasa proses loading template tersebut, bahagian post akan muncul dahulu dan di ikuti bahagian sidebar. Ini kerana, jika berlaku error pada widget di sidebar semasa proses loading, ia tidak akan mengganggu bahagian post.

3.Jika anda memilih untuk menggunakan template 3 colum, anda di cadangkan supaya menggunakan template yang mempunyai 2 sidebar yang di letak di sebelah kanan secara bersebelahan. Ini kerana, jika berlaku masalah ataupun error dari hosting widget-widget yang telah di pasang pada sidebar, ia tidak akan menggangu proses loading bahagian post.

4.Dari segi warna, putih adalah warna yang terbaik sekali. Putih dilihat lebih mesra dengan visitors. Jika anda ingin menggunakan warna yang gelap ataupun hitam, pastikan font adalah sesuai dan pastikan juga saiz dan jenis font tidak menyukarkan visitors untuk membacanya.

5.Pilih template yang kurang menggunakan image. Walaupun template yang menggunakan image Nampak lebih cantik dan menarik, tetapi ia mempunyai kelemahan dari segi loading. Biasanya image yang digunakan untuk template tersebut berformat png.

6.Pilih template yang kurang menggunakan javascript yang di host dari luar. Ini kerana, ia akan mengganggu proses loading blog kita jika terdapat masalah atau error yang berpunca dari hosting tersebut.

Read More

Web site terbaik untuk download template blog secara percuma

Sites terbaik untuk download template blog

Selain daripada template yang disediakan oleh blogger.com ataupun yang terdapat di Template Designer, anda juga boleh menggunakan template yang menarik dan percuma.

Jika anda ingin mendapatkan template-template blog yang menarik dan tidak tahu di mana untuk mendapatkannya, di bawah ini tersenarai 12 sites yang menyediakan template blog secara percuma. Anda boleh memilih template mana yang di rasakan menarik dan sesuai mengikut citarasa anda sendiri.


http://www.bietemplates.com

http://www.finalsense.com

http://btemplates.com

http://www.dantearaujo.net/search/label/Free%20Template

http://www.ourblogtemplates.com

http://www.mytemplatebox.com

http://www.forfreebloggertemplates.com

http://www.bloggertemplatesfree.com

http://www.eblogtemplates.com/templates/blogger-templates

http://www.deluxetemplates.net

http://www.bloggerblogtemplates.com

http://www.chethstudios.net/2009/01/roundup-of-best-blogger-templates.html

Tambahan:

http://www.bloggerstyles.com/

http://lenatoewsdesigns.blogspot.com/

http://www.bloggerthemes.net/

http://leelou-freelayouts.blogspot.com

Credit: www.my-bittersweetlife.com

Read More

Sebab apa blog jadi berat

Banyak faktor yang menyebabkan sesebuah blog itu lambat untuk melalui proses 'loading page'. Kebiasaannya, punca utama adalah kerana blog tersebut dibina menggunakan banyak image.

Paparan image pada post yang saiz 'file'nya terlalu besar.Untuk mengecilkan saiz 'file' image tersebut, sila baca di sini.

Penggunaan banyak widget javascript juga menjadi salah satu punca utama mengapa blog menjadi berat.

Sebab lain, kenapa blog menjadi berat.

1. Widget berbentuk flash (.swf): contohnya widget seperti jam, visitor counter,  gambar slide, games, iklan dan sebagainya.

2. File Javascript (.js); contohnya marquee text, photo slider dan jquery .

3. File Image bersize besar (.jpg, png, gif dan sebagainya); Contohnya seperti gambar atau ikon yang boleh bergerak, Lebih-lebih lagi image berformat .gif (animation) yang bersaiz besar.

4. Terlalu banyak post di muka depan(front page). Tekan Ctrl + - pada keyboard sebanyak empat kali. Anda boleh lihat sama ada blog sukar untuk di scroll atau pun mudah. Kemudian, bandingkan dengan blog lain.

5. File audio atau video yang di mainkan secara auto.

Tips dibawah mungkin dapat membantu anda.

~Timbang berat blog.
~Tips meringankan blog dan loading page.
~Ringankan blog dengan jquery lazy load.

p/s: Jika ada lagi, sila sambung dibahagian komen.

Read More

Cara buat flash banner dengan Aleoflash Software

Pada entri yang lepas,terdapat tutorial bagaimana untuk membina image, banner atau header beranimasi dengan Aleoflash(sila klik). Mungkin penerangan tentang Aleofalsh tersebut yang terlalu ringkas menyebabkan ada yang kurang faham. Jika anda masih kurang faham apa itu aleoflash, sila rujuk semula entri Cara mudah membina image, banner atau header beranimasi dengan software AleoFlash. Anda juga boleh download software Aleoflash pada link yang diberi.


Cara buat Flash Header dengan Aleoflash

Klik pada Panel Size and sound yang terdapat disebelah kiri.Ubah nilai width dan height mengikut saiz header blog anda. Contohnya width: 800px dan height: 600px (saizheader untuk template classic minima). Pada background sound, untick pada kotak Play background sound in Flash movie jika tidak mahukan ada efek bunyi. Pada bagahian Options pula, untick kotak Generate compressed Flash movie dan Add preloader to Flash movie.

Panel Background=  Anda boleh memilih sama ada menggunakan transparent background ataupun Solid color ataupun background berstail dengan Gradient color. Anda juga boleh masukkan image atau flash dibahagian Background image and flash movie.

Panel Effect = Anda boleh memilih efek yang dirasakan bersesuaian untuk background. Terdpat 37 jenis efek untuk background yang boleh di cuba. Bahagian Key dan Value juga boleh diedit mengikut kesesuaian.

Panel Text and image= anda boleh masukkan teks yang sesuai ataupun  tajuk blog. Untuk mengubah font,klik pada tab Edit font style dan kemudian klik pada icon Edit selected font style. Anda boeh memilih jenis font, saiz, style dan warna. Anda juga boleh memasukkan image yang sesuai dengan klik pada Add image.

Untuk memasang efek pada teks, klik pada tab Effect dan anda boleh memilih sehingga 57 jenis efek. Jika anda mahu menambah lagi image atau teks, hanya klik pada Add image atau Add text.

Untuk mengubah kedudukan teks atau tajuk blog, anda boleh mengubahnya pada tab Positition.Untuk lebih mudah, gunakan Use relative position. Edit nilai pada bahagian Offset untuk vertical dan horizontal sehingga anda berpuas hati dengan kedudukan teks tersebut.

 Pada tab Web Link, anda boleh masukkan URL pada teks tersebut. Tick pada Open web page when user click on the text. MAsukkan URL blog anda pada ruang URL address

Jika anda ingin mengubah speed atau delay teks tersebut, ada boleh mengubahnya pada bahagian Display as dynamic text. Jika inginkan teks tersebuat berkeadaan statik tanpa efek, tick pada Display as static text on background.

Panel Publish= Setelah selesai dan berpuas hati dengan header tersebut, klik pada Panel Publish dan seterusnya klik butang Publish. Pada pop up window yang muncul, tick pada Publish as Flash movie(.swf). seterusnya klik Ok. Namakan dan Save file tersebut.

Untuk memasukkan flash header yang telah siap itu, anda boleh rujuk entri Cara upload dan masukkan file swf (flash) pada blog(sila klik)

Read More

Cara pasang Sitemap pada blogspot

Sitemap adalah halaman atau page yang perlu ada pada sesebuah blog.Tips dan tutorial mengenai cara memasang sitemap ini adalah khas untuk pengguna blogspot.Untuk pengguna wordpress kebanyakan sudah sedia maklum mengenai sitemap dan cara memasangnya.

Apakah Itu Sitemap?

Sitemap adalah page atau halaman pada blog yang akan menunjukkan struktur yang ada pada blog kita yang mana akan memudahkan laluan search engine atau enjin carian untuk crawl atau melawat page sesebuah blog.Disamping ianya berguna untuk meningkatkan SEO sesebuah blog,sitemap juga membantu dan memudahkan pembaca untuk merujuk atau mencari sesuatu maklumat di blog kita.Kebiasaannya page ini akan diletakkan dibahagian menubar seperti yang boleh dilihat pada menubar pada blog ini.(atas sebelah kanan)

Untuk tutorial cara memasang sitemap pada blogspot, sila klik link di bawah.

Penulis: Neo
Blog : http://neodmarco.blogspot.com
Entri asal: Cara Pasang Sitemap Pada Blogspot | SEO Tips.Tutorial

Read More

Cara pasang jump link Klik untuk komen di blogspot

Jump link Klik untuk komen seperti yang boleh di lihat di bahagian bawah post ini sangat sesuai untuk di pasang pada blog yang mempunyai jumlah komen yang banyak ataupun jika kita ingin memudahkan pembaca untuk membuat komen tanpa perlu membuat scroll yang panjang. Anda juga boleh menggantikan teks Klik untuk komen kepada icon seperti yang boleh di lihat pada blog Liyanaa.com dan Rojakstory.blogspot.com

Untuk memasang jump link Klik untuk komen, sila ikut beberapa langkah mudah di bawah.

p/s: Save script template anda terlebih dahulu.

Langkah 1

Login Blogger Dashboard --> Design --> Edit HTML. Seterusnya tick pada Expand Widget Templates.

Langkah 2

Pada script template, cari kod <b:if cond='data:post.commentPagingRequired'>

Langkah 3

Salin kod di bawah dan kemudian, paste di atas atau sebelum kod <b:if cond='data:post.commentPagingRequired'> (rujuk langkah 2)

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>

Contoh:

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><b>Klik untuk komen</b></a>
</div>
<b:if cond='data:post.commentPagingRequired'>

Akhir sekali, klik Save.



p/s:

1. Anda boleh menggantikan teks Klik untuk komen kepada icon, dengan menggantikan kod <b>Klik untuk komen</b> kepada <img src='masukkan URL icon disini'/>

Contoh:

<div style='margin: -30px 0px 0px 250px;'>
<a href='#comment-form'><img src='masukkan URL icon disini'/></a>
</div>

2. Untuk mengubah kedudukan, edit pada margin: -30px 0px 0px 250px;

Read More

Tips meringankan blog dan loading page

Seperti yang kita semua maklum, punca utama kenapa blog kita menjadi berat dan loading menjadi lambat adalah disebabkan oleh penggunaan widget ataupun plugin yang banyak dan tidak praktikal yang kita letakkan pada sidebar. Paparan jumlah entri di frontpage(muka depan) juga merupakan punca utama kenapa blog tersebut menjadi berat.

Pada info kali ini, aku nak kongsi satu tip bagaimana untuk mengurangkan beban pada blog dengan mengurangkan jumlah entri pada front page supaya blog tersebut dapat loading dengan lebih cepat dan pantas.

Apa yang perlu anda lakukan adalah dengan mengira bebanan blog anda di sini.

Sebagai contoh,untuk blog maribinablog.blogspot.com, apabila memaparkan 6 entri pada frontpage, bebanan adalah sebanyak 90.16kb . Kemudian paparan entri dikurangkan kepada 5 dan apabila di buat timbangan untuk kali yang kedua, bebanan berkurangan menjadi 83.1 kb. Apabila entri di kurangkan kepada 4, bebanan juga semakin berkurangan menjadi 79.39 kb.

Untuk blog maribinablog.blogspot.com, jumlah paparan terbaik adalah tidak melebihi daripada 6 entri. Jadi, aku hanya letakkan 4 entri kerana aku merasakan jumlah tersebut adalah yang terbaik jika diambil kira pada kelajuan internet di Malaysia, terutamanya bagi pengguna broadband yang berkelajuan rendah.

Read More

Tips memilih template dan dekorasi pada blog

Kalau kita lihat sekarang ni,dah banyak template-template bagi pengguna Blogger yang sangat menarik. Di tambah pula, Blogger dah berjaya masukkan Template Designer sebagai feature yang di nanti-nantikan oleh penggunanya. Penambahbaikan pada widget-widget yang disediakan oleh Blogger dan yang dibina untuk Blogger juga semakin baik fungsinya.

Apa yang telah di sediakan kepada pengguna Blogger, sepatutnya  sudah memenuhi citarasa. Hanya kretiviti sendiri yang akan membuatkan sesebuah blog itu nampak menarik. Template Minimalist dengan dekorasi yang ringkas juga sebenarnya mampu membuatkan sesebuah blog itu menarik perhatian jika pemiliknya kreatif.

Tips memilih template

Template-template yang menarik biasanya menggunakan banyak image yang bersaiz besar. Ianya sebenarnya akan memberi kesan semasa page loading. Di tambah pula jika image tersebut di hosting pada Photobucket ataupun Flickr.

Untuk memilih template yang mempunyai banyak image yang bersaiz besar, pilih template yang imagenya di hostingkan di Blogger. Biasanya, URL image tersebut adalah seperti  contoh di bawah:

http://2.bp.blogspot.com/_LZtXSNcp76A/SyF0Zwxv-FI/AAAAAAAAAuE/yzF3mpL-OsI/s320/Cord_Texture_BG.jpg

Dekorasi pada blog

Bagi pengguna Blogger yang ingin membuat dekorasi pada blog, kita seharusnya faham, semakin banyak widget pada blog, semakin lama masa yang di ambil untuk  blog kita loading. Ini kerana, widget-widget tersebut berasal dari hosting yang pelbagai. Ini  sangat mempengaruhi kelajuan dan masa page blog kita untuk loading pada Internet Browser.

Untuk mengelakkan blog menjadi berat, gunakan widget yang kita rasakan sesuai dan perlu sahaja untuk di pasang di dalam blog.

Read More

Cara pasang Jquery lava-lamp navigation menu

Untuk memasang jquery lava-lamp navigation menu (klik untuk demo), ikut beberapa langkah di bawah.

Salin dan paste kod di bawah pada HTML/Javascript(rujuk gambar dibawah).

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

p/s:

1.Untuk mengubah warna button, edit kod yang di bold berikut.

background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kod yang di bold berikut.

background: #32312E;

3.Untuk mengubah URL dan Title, edit kod yang di bold berikut.

<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>

3.Untuk mengubah jarak background (rujuk gambar di bawah), edit kod yang di bold berikut.

padding: 8px 430px 10px 0px;

Read More

Jquery Lava-Lamp navigation menu

Pada info kali ini, aku nak kongsi satu jquery navigation menu yang di panggil Lava lamp. Demo boleh dilihat pada bahagian atas posting ini ataupun dari demo asal yang boleh anda lihat di sini (sila klik). Tutorial yang aku cuba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang pada template blogspot. Aku cuba implement pada blogspot dan berjaya. Walaubagaimanapun, sedikit ubahsuai telah dilakukan bertujuan supaya navigation menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus pada HTML/Javascript. Background asal di ubah mengikut warna background pada template. Warna button,warna teks dan saiz juga di ubah kerana saiz asal yang terlalu besar.

Jika anda semua berminat untuk  mencubanya, sila dapatkan tutorial asalnya di entri How to Build a Lava-Lamp Style Navigation Menu atau untuk cara yang termudah, tunggu tutorial aku yang akan datang.

Read More

Cara pasang Breadcrumb pada blogspot

Tips dan tutorial blog kali ini aku nak berkongsi mengenai apakah itu breadcrumb dan cara memasangnya.Untuk meningkatkan SEO sesuatu blog,breadcrumb adalah salah satu dari perkara yang perlu kita praktikkan.Breadcrumb pada sesuatu blog ibarat seperti peta atau sitemap yang akan memudahkan pembaca mengenal pasti kedudukan mereka di dalam page yang ada pada blog kita.

Apakah itu breadcrumb?

Secara ringkasnya breadcrumb adalah salah satu dari blog navigasi atau site navigation yang perlu ada pada sesebuah blog.

Contoh breadcrumb korang boleh lihat di blog ini (pada ruangan di atas tajuk entri ini.) Home > blog > info >S.E.O > Tips > Tutorial

Apakah kaitannya breadcrumb dengan seo?

Untuk soalan ini aku tunjukkan sedikit artikel yang didapati dari Google Search Engine Optimization Starter Guide.

note : klik link ini untuk membaca artikel penuh dari Google Search Engine Optimization Starter Guide. [klik sini]

Sila klik pada link di bawah untuk tutorial  memasang Breadcrumb pada blogspot.

Penulis: Neo
Blog : http://neodmarco.blogspot.com
Entri asal: SEO.Blog Tips.Tutorial | Cara Pasang Breadcrumb Pada Blogspot

Read More

Button back to top versi 3

Back to top button versi 3 yang boleh anda lihat pada bahagian bawah post (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.

Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>

Langkah 2

Salin kod di bawah dan paste pada ruang content HTML/Javascript (rujuk langkah 1) dan Save.

<style type="text/css">

#scrolltotop a

{

display: block;

display: none;

z-index: 999;

opacity: .6;

position: fixed;

top: 100%;

margin-top: -20px;

left: 50%;

margin-left: -150px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

width: 68px;

line-height: 1px;

height: 15px;

padding: 10px 3px;

background-color: #000;

font-size: 12px;

font-weight: bold;

text-align: left;

color: #fff;

}

</style>

<div id="scrolltotop"><a href="#">Scroll to top</a></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

var scroll_timer;

var displayed = false;

var $scrolltotop = $('#scrolltotop a');

var $window = $(window);

var top = $(document.body).children(0).position().top;

$window.scroll(function () {

window.clearTimeout(scroll_timer);

scroll_timer = window.setTimeout(function () {

if($window.scrollTop() <= top)

{

displayed = false;

$scrolltotop.fadeOut(500);

}

else if(displayed == false)

{

displayed = true;

$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });

}

}, 100);

});

});

</script>

p/s:

1.Warna button boleh di edit dengan menukar kod warna bagi background-color: #000;

2.Kedudukan boleh di edit dengan mengubah nilai margin-left: -150px;

Akhir sekali, klik Preview. Jika tiada mesej Error terpapar, klik saja Save.

Read More

Sorokkan komen di blogspot

Ada reader tanya aku kat Fan Page Rojakstory, macam mana nak sorokkan kotak komen. Ha! Itu gunanya ada Fan Page tu. Untuk senang aku baca soalan korang instead of Formspring atau by e-mail. Sebab aku MALAS nak buka e-mail atau Formspring ok. Entah apa lah fungsinya Contact Me tu kan. Mesti ada yang cakap macam tu. Maaf aku tak ada jawapan untuk itu.haha.

Baiklah. Tutorial ini hanya untuk blogspot yang memakai embedded comments. Kalau pop up pun boleh tapi kotak komen akan hilang. ;). Btw, trick ni tak jalan kat blog yang pakai comment form dari third party contohnya Disqus Comment yang slow nak loading tu!

Tutorial ni aku dapat dari Teratak Muncet. Template blog ni pun aku cekau dari dia dan dengan SUKA SUKInya aku edit jadi theme lollipop.haha.

Untuk teruskan membaca, klik pada link di bawah.....

Penulis: Amoi
Blog : http://rojakstory.blogspot.com
Entri asal: Sorokkan Komen (blogspot)

Read More

Site Map

Read More

JQuery animated share button

Untuk memasang JQuery animated share button pada blog seperti yang boleh anda lihat di bahagian sidebar blog ini, hanya iku beberpa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Page Element => Add A Gadget => HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan paste pada ruang content HTML/Javascrpit(rujuk gambar di bawah) dan Save.

<style>

#stage{

position:relative;

width:110%;

height:140px;

padding-left:15px;

background:transparent;

}

.btn{

background:transparent;

height:90px;

left:0;

top:0;

width:20px;

position:relative;

margin:20px 0 0 0px;

float:left;

}

.bcontent{

position:absolute;

top:auto;

bottom:20px;

left:0;

}

span.fb_share_no_count {

display:block;

}

span.fb_share_count_top.fb_share_no_count {

line-height:54px;

}

span.fb_share_count_nub_top.fb_share_no_count{

display:none;

}

span.fb_share_no_count span.fb_share_count_inner {

background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;

display:block;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/jquery01/script.js"></script>

<div id="share">

<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>

<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>

<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>

<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>

<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script</div</div>

</div>

</div>

Read More

Blogger Stats, feature terbaru dari Blogger.com

Blogger.com kini telah melancarkan Blogger Stats sebagai feature terbaru. Walaubagaimanapun,jika anda sedang atau pernah menggunakan Google Analytics, ciri-ciri yang ada pada ke dua-duanya adalah hampir sama.

Feature terbaru ini masih lagi dalam percubaan dan ianya boleh anda lihat di dashboard Blogger In Draft. Blogger Stats ini memaparkan maklumat dan analisis tentang view pada pages, lokasi pengunjung dan juga jenis browser yang di gunakan oleh visitors.

Read More

Cara pasang Tab menu Jquery versi 4

Pada tutorial sebelum ini, ada di tunjukkan beberapa tutorial untuk memasang jquery tab menu. Anda boleh membaca tutorial tersebut pada beberapa tajuk entri di bawah.

Tab menu Jquery versi 1
Tab menu Jquery versi 2
Tab menu Jquery versi 3

Untuk tutorial tab menu Jquery pada kali ini (sila klik untuk melihat contoh), mungkin cara ini mudah untuk anda cuba berbanding dengan cara pada tutorial yang sebelum ini kerana memerlukan anda untuk meletakkan kod tab menu jquery tersebut pada script template. Apa yang perlu anda lakukan adalah dengan membuat sedikit penambahan pada kod dan paste terus ke ruang content HTML/Javascript.

Untuk mencubanya, sila ikut beberapa langkah di bawah.

p/s: Mungkin cara ini tidak sesuai untuk beberapa jenis template kerana ianya memerlukan anda untuk masukkan kod di dalam script template. Harap maklum.

Langkah 1

Salin dan edit kod biru di bawah. Tukarkan kod yang di bold dengan menggantikan nama blog anda.

<style>

/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,

font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,

tfoot, thead, tr, th, td {

vertical-align:baseline;

}

#container{

width: 100%;

line-height:12px;

font-size: 12px;

font-family: Arial;

margin:0pt;

cursor:pointer;

overflow: hidden;

}

.clear{

clear: both;

height: 0;

visibility: hidden;

display: block;

}

a{

text-decoration: none;

}

#container ul{

list-style: none;

list-style-position: outside;

}

#container ul.menu li{

float: left;

margin:0 0px 0 0px;

}

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png)repeat-x 0 0;

margin-bottom: -1px;

margin-left:2px;

-moz-border-radius-topleft:6px;

-moz-border-radius-topright:6px;

border: 1px solid #d0ccc9;

border-width: 1px 1px 1px 1px;

position: relative;

color: #898989;

cursor: pointer;

}

#container ul.menu li.active{

background: #fff;

top: 1px;

border-bottom: 0;

color: #5f95ef;

}

.content{

margin: 0pt auto;

background: #efefef;

background: #e5e5e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png)repeat-x 0 0;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

border: 1px solid #d0ccc9;

text-align: left;

padding: 10px;

padding-bottom: 20px;

font-size: 11px;

}

.content h1{

line-height: 1em;

vertical-align: middle;

height: 26px;

padding: 10px 10px 10px 35px;

font-size: 15px;

}

.content.news h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSCUBuGUHqO9sOyoGLjf1tkI_7ryBO9ZM2xsymD6Gnmt4nAQa4l2exeHpyftVx-ws7OHnysY3gxmlv1adtdTmepqcE3-hxnuoKmQpNsJwC7gDM6PrG2eyZo3vR1MZ6ZuQt-iyAxOoV88/s320/favorite.png) no-repeat scroll left top;

}

.content.news{

display: block;

font-size: 11px;

color: #000000;

text-align: justify;

}

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

}

.content.tutorials h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKWRIDgLOyOwMvp-Pg2L2xgMNgK21RjYB24grLWnw53xWXGr-VOrLpDJnUZUGGtJRnz8NZ5JXO_ReaPI-KHZfWyGykWyHG-JnXwX5peSZTp0c2fliHen8soY58Skxu9cfQ54ls5wur7M/s320/heart.png) no-repeat scroll left top;

}

.content.tutorials{

display: none;

color: #000000;

text-align: justify;

}

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

}

.content.links h1{

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ644K7ldgtzafYUGc9AAqyH_HXb6YJB28vmr4bosQ-37P3Q8fbwb1JwiyTWztjy5e2IUAh70lUb8AKFFDkLEzPIA_-J1TXUpwkiA1cg5g0l6HS6A6TvyNCE7KSwwSUxyJZeZ1wlBik1I/s320/comment.png) no-repeat scroll left top;

}

.content.links{

display: none;

color: #000000;

font-size: 11px;

text-align: justify;

}

.content.links a{

color: #5f95ef;

text-align: left;

}

</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/javascript10/tabs.js"></script>

<div id="container">

<ul class="menu">

<li id="news" class="active">Recent</li>

<li id="tutorials">Popular</li>

<li id="links">Comments</li>

</ul>

<span class="clear"></span>

<div class="content news">

<h1>Recent Posts</h1>

<ul>

<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://maribinablog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>

</ul>

</div>

<div class="content tutorials">

<h1>Popular Posts</h1>

<ul>

<script language='javascript'>

aBold = false;

numposts=1000;

maxshowresult=5;

home_page = "http://maribinablog.blogspot.com/";

</script>

<script src='http://sites.google.com/site/testingsahaja/toppost.js' type='text/javascript'></script>

</ul>

</div>

<div class="content links">

<h1>Recent Comments</h1>

<ul>

<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://maribinablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

</ul>

</div>

</div>

Langkah 2

Log in blog => Dashboard => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 3

Paste kod yang telah siap di edit(rujuk langkah 1) dan paste pada ruang content HTML/Javascript dan Save.

Gunakan kod <h2></h2> untuk mengosongkan bahagian Title.

Langkah 4

Klik Preview, dan jika bahagian button atas ataupun Link jadi seperti gambar di atas, edit semula pada kod yang di bold hitam pada kod yang berwarna merah di bawah.

Button:

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

Tukarkan angka 2px kepada 15px atau 20px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Link:

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

dan

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

Tukarkan padding 0px kepada 10px atau 15px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Read More

Plugin chatroom terbaik dari Plugchat.in

Widget dari Plugchat.in adalah satu aksesori blog yang patut anda cuba. Widget ini merpuakan sebuah mini chat room di mana, para pelawat yang datang ke blog yang menggunakan plugin ini, boleh berinteraksi secara berkumpluan. Widget ini juga di interaksikan kepada laman Facebook dan Twitter.

Plugin Plugchat.in berbentuk bar seperti yang boleh anda lihat di blog ini. Terdapat sebanyak 25 theme yang boleh anda pilih untuk di sesuaikan dengan warna blog anda.  Saiz window dan bar juga boleh di minimakan mengikut kesesuaian.Plugin ini juga tidak membebankan masa loading blog.

Kelebihan untuk proses memasang plugin ini, kita juga boleh untuk tidak mendaftar untuk menggunakannya.Ianya amat mudah untuk di pasang. Hanya dengan menyalin kod script yang di beri dan kemudian, ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget => HTML/Javascript.

Langkah 2

Paste kod yang ada salin dari Plugchat.in pada ruang Content HTML/Javascript.

Masukkan kod <h2></h2> untuk mengosongkan bahagian Title.

Akhir sekali, klik Save.


p/s: Sila paste kod chatroom di atas atau sebelum kod </body> pada script template anda dan save, jika tiada perubahan yang berlaku selepas anda masukkan kod chatroom tersebut pada ruang Content HTML/Javascript.

Credit:  http://www.jejaktrend.com/2010/06/groups-chat.html

Read More

Cara pasang Facebook Like Button di Blogspot

Untuk memasang Facebook Like Button pada setiap post, hanya ikut beberapa langkah yang mudah di bawah.

p/s: Sila save script template anda terlebih dahulu.


Langkah 1

Log in blog = Dashboard => Design => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci F3. Seterusnya taip atau paste kod <div class='post-header-line-1'/> pada kotak Find dan seterusnya, klik Find. Jika kod tersebut tiada, anda boleh menggantikannya kod <div class='post-header-line-1'> atau <data:post.body/>

Langkah 3

Salin kod biru di bawah dan paste kod tersebut di bawah atau selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> atau <data:post.body/>

p/s: Anda boleh menukar saiz button dengan mengedit width dan height pada kod di bawah.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/>

Akhir sekali klik Preview, dan jika tiada mesej Error yang terpapar, klik saja Save.


P/s: Jika anda ingin mengubah kedudukan button tersebut, anda boleh gunakan kod ini untuk memaparkan button pada sebelah kanan atau kiri

<div style='float:right;padding:4px;'>
Masukkan kod Facebook Like Button di sini
</div>

Gantikan right kepada left pada float jika anda ingin memaparkan button pada sebelah kiri

Contoh:

<div style='float:left;padding:4px;'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height::80px'/>
</div>

Read More