Memasang password pada post atau membuat private post .

Untuk memasang password pada post atau membuat private post seperti yang boleh anda lihat di sini, anda hanya perlu ikut beberapa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Add a Gadget. Klik pada HTML/Javascript.

Langkah 2

Salin kod berwarna biru di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1).

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

Langkah 3

Masukkan password pada kotak di bawah. Pastikan anda ingat password yang akan anda gunakan.

Langkah 4

Taip atau paste teks anda pada kotak di bawah. Setelah selesai, klik pada butang Encrypt.

 

Abaikan kod pada kotak di bawah.

Langkah 5

Salin kod HTML di bawah dan paste pada post.

Standard   Inline  ***
 

Langkah 6

Anda boleh menguji kod HTML dan password sama ada ianya berfungsi ataupun tidak dengan klik pada teks Show encrypted text di bawah.

Read More

Memasang page views counter pada post

Untuk memasang page view counter pada setiap posting, sila ikut beberapa langkah yang di tunjukkan di bawah.

Langkah 1

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

Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+F dan taipkan atau copy kod <div class='post-body entry-content'> dan paste pada ruang Find. Setereusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di bawah atau selepas kod <div class='post-body entry-content'> (rujuk langkah 2)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hit-counter'>
&lt;a href=&#39;http://csharpdotnetfreak.blogspot.com&#39; rel=&#39;follow&#39;&gt;
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> &lt;/a&gt;
</div></b:if>

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

Read More

Memasang Social Bookmark ( sharing is sexy! ) di bawah post.

Social Bookmark  dibina untuk pengguna internet untuk menyimpan, menyusun, mencari dan mengawal bookmark di internet dengan bantuan metadata. Ramai pembangun web social bookmark menggunakan alamat feed untuk mengklafikasikan bookmark, termasuk yang telah disusun dengan tag.

Untuk memasang Social Bookmark (sharing is sexy!) seperti yang boleh anda lihat di sini,sila ikut beberapa langkah yang ditunjukkan dibawah.

p/s:
1. Social bookmark ini hanya sesuai untuk template yang lebar bahagian postingnya 400px ke atas sahaja.
2.Save dahulu script template sebagai backup.


Langkah 1

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


Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+F. Seterusnya, taipkan atau salin kod ]]></b:skin> pada ruang Find dan tekan Enter.


Langkah 3

Salin kod berwarna biru di bawah dan paste di bawah atau selepas kod ]]></b:skin>

<style type='text/css'>

div.sexy-bookmarks {

height:54px;

background:url(http://i43.tinypic.com/2ueii3t.png;) no-repeat left bottom;

position:relative;

width:540px;

}

div.sexy-bookmarks span.sexy-rightside {

width:17px;

height:54px;

background:url(http://i43.tinypic.com/2ueii3t.png;) no-repeat right bottom;

position:absolute;

right:-17px;

}

div.sexy-bookmarks ul.socials {

margin:0 !important;

padding:0 !important;

position:absolute;

bottom:0;

left:10px;

}

div.sexy-bookmarks ul.socials li {

display:inline-block !important;

float:left !important;

list-style-type:none !important;

margin:0 !important;

height:29px !important;

width:48px !important;

cursor:pointer !important;

padding:0 !important;

}

div.sexy-bookmarks ul.socials a {

display:block !important;

width:48px !important;

height:29px !important;

font-size:0 !important;

color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {

background:url(http://i44.tinypic.com/1znbj83.png;) no-repeat !important;

}

.sexy-furl {

background-position:-300px top !important;

}

.sexy-furl:hover {

background-position:-300px bottom !important;

}

.sexy-digg {

background-position:-500px top !important;

}

.sexy-digg:hover {

background-position:-500px bottom !important;

}

.sexy-reddit {

background-position:-100px top !important;

}

.sexy-reddit:hover {

background-position:-100px bottom !important;

}

.sexy-stumble {

background-position:-50px top !important;

}

.sexy-stumble:hover {

background-position:-50px bottom !important;

}

.sexy-delicious {

background-position:left top !important;

}

.sexy-delicious:hover {

background-position:left bottom !important;

}

.sexy-yahoo {

background-position:-650px top !important;

}

.sexy-yahoo:hover {

background-position:-650px bottom !important;

}

.sexy-blinklist {

background-position:-600px top !important;

}

.sexy-blinklist:hover {

background-position:-600px bottom !important;

}

.sexy-technorati {

background-position:-700px top !important;

}

.sexy-technorati:hover {

background-position:-700px bottom !important;

}

.sexy-myspace {

background-position:-200px top !important;

}

.sexy-myspace:hover {

background-position:-200px bottom !important;

}

.sexy-twitter {

background-position:-350px top !important;

}

.sexy-twitter:hover {

background-position:-350px bottom !important;

}

.sexy-facebook {

background-position:-450px top !important;

}

.sexy-facebook:hover {

background-position:-450px bottom !important;

}

.sexy-mixx {

background-position:-250px top !important;

}

.sexy-mixx:hover {

background-position:-250px bottom !important;

}

.sexy-script-style {

background-position:-400px top !important;

}

.sexy-script-style:hover {

background-position:-400px bottom !important;

}

.sexy-designfloat {

background-position:-550px top !important;

}

.sexy-designfloat:hover {

background-position:-550px bottom !important;

}

.sexy-syndicate {

background-position:-150px top !important;

}

.sexy-syndicate:hover {

background-position:-150px bottom !important;

}

.sexy-email {

background-position:-753px top !important;

}

.sexy-email:hover {

background-position:-753px bottom !important;

}

</style>

Langkah 4

Salin atau taipkan kod <data:post.body/> pada ruang Find dan tekan Enter.


Langkah 5

Salin kod berwarna merah di bawah dan paste di bawah atau selepas kod <data:post.body/> . Edit teks YOUR-FEEDBURNER-ID yang di bold kepada ID Feedburner anda.

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='sexy-rightside'/></div>

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

Read More

Trim bucu gambar dengan Cut My Pic! secara percuma

Edit gambar image yang berformat bmp,gif,jpeg ataupun png daripada bentuk yang biasa seperti terpapar di bawah

kepada bentuk  image yang telah trim pada bahagian bucu image di pada site cutmypic.com  yang seperti dapat dilihat pada paparan di bawah

Hanya dengan 3 langkah yang sangat mudah iaitu upload image, edit image dan save image pada hard drive atau hosting.

Read More

Memindahkan visitor secara auto daripada URL blog lama kepada URL blog yang baru

Apabila kita membina sebuah blog yang baru, akan timbul sedikit kesulitan kepada visitor yang masih belum lagi mengetahui URL blog kita yang baru. Cara yang biasa digunakan untuk memaklumkan kepada visitor yang melawat blog kita yang lama adalah dengan meletakkan nota berserta URL blog yang baru.

Terdapat satu cara yang lebih mudah, iaitu dengan memasang kod 'auto direct link' yang mana, apabila visitor melawat ke blog kita yang lama, secara automatik visitor tersebut akan dipindahkan ke blog kita yang baru. Anda boleh melihat contohnya di sini ataupun taipkan URL akutestlagi.blogspot.com pada adress bar browser anda.

Untuk membina 'auto direct link', anda hanya perlu meletakkan satu kod yang ringkas dan mudah pada script template blog yang lama.


Langkah 1

Salin dan edit kod berwarna biru dibawah pada notepad. Gantikan teks yang di bold dengan URL blog yang baru.

<meta content='0;url=http://gantikan URL blog anda pada teks ini' http-equiv='refresh'/>

Langkah 2

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


Langkah 3

Dengan menggunakan keyboard, tekan Ctrl+F dan taipkan atau paste kod <head> pada ruang Find. Seterusnya tekan Enter.


Langkah 4

Salin kod yang telah siap di edit (rujuk langkah 1) dan paste di bawah atau selepas kod <head> (rujuk langkah 3)

Akhir sekali, klik preview dan jika tiada mesej error yang terpapar, klik saja Save.

p/s: Apasal tajuk entri ni dah macam karangan pulak dia punya panjang.

Read More

Membina muka surat selak (Page Peel) pada bahagian penjuru atas blog

Apa itu Page Peel?

 Page Peel adalah efek yang memaparkan muka surat yang boleh di selak (page peel) yang  biasanya di pasang pada penjuru kanan bagi sesebuah blog. Hanya dengan meletakkan kursor mouse pada penjuru page yang di lipat, layout blog akan terselak dan memaparkan imej yang di pasang di sebalik layout blog. Efek ini sememangnya amat menarik dan mudah untuk di buat. Contoh Page Peel boleh anda lihat di sini. Anda boleh menukarkan URL dan imej yang terpapar pada contoh tersebut kepada imej pilihan anda.


Langkah 1

p/s: Save dahulu script template sebagai backup.

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

Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod  ]]></b:skin> dan seterusnya tekan Enter.


Langkah 2

Salin kod yang berwarna biru di bawah dan pastekan di bawah atau selepas kod ]]></b:skin> pada script template (rujuk langkah 1).

p/s: Anda boleh menukar image 'Page Subscribe' kepada image pilihan sendiri dengan menukarkan URL image yang di bold.

<style type='text/css'>
    img { behavior: url(iepngfix.htc) }
    #pageflip {
    position: relative;
    right: 0; top: 0;
    float: right;
    }
    #pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .msg_block {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0HbXVDZ_LnKSaBuACoAq2NyijK9PV7A1XikEAeeoBy7J0ia39DY59kn2zDtfsvscEOQWca0lgCxjpTCnv1LbVkae7PkgCYN50vFCc3oCUjK9z8VauPBtkDyKqVs6NAQaOgMhFpFVuods/s320/PageSubscribe.png) no-repeat right top;
    }
    </style>

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){

    //Page Flip on hover

    $(&quot;#pageflip&quot;).hover(function() {
    $(&quot;#pageflip img , .msg_block&quot;).stop()
    .animate({
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
    $(&quot;.msg_block&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
    });


    });
    </script>

Langkah 3

Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod  <body> dan seterusnya tekan Enter.


Langkah 4


Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template (rujuk langkah 3).


p/s: Tukar URL yang di bold dengan URL pilihan anda.

<div id='pageflip'>
<a href='http://larikudaku.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbkRcsIqCfOOcLKBD1B1CmvKv4-5mGMaelkz-Q-_vRiHh2PFir-WT7ILfMg0wwhYSr3rf2_1jUIDAdF9h9LDQGuta1d2Yy9u_splOZtWQAeAzibi0ZCVCILtZJKhVJ6cYigx9sayd-wk/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>

Akhir sekali klik Preview. Jika tiada sebarang mesej error yang terpapar dan anda berpuas hati dengan hasilnya, klik saja Save.

Read More

Membuat image atau widget terapung (floating) pada blog dengan mudah

Untuk membuat image yang berformat jpg, gif atau png dan juga widget menjadi terapung (floating) di awang-awangan di setiap penjuru blog seperti yang boleh anda lihat contohnya di sini, anda hanya perlu menggunakan kod HTML yang sangat mudah dan terdapat satu lagi kelebihannya iaitu, anda boleh meletakkan URL anda sendiri pada image terapung (floating image) . Tidak perlu untuk anda menggunakan javascript seperti yang disediakan oleh beberapa sites kerana javascript yang disediakan itu telah di pasang dengan backlink.


Langkah 1

Salin dan edit kod yang berwarna biru dan merah di bawah ini pada notepad. Pilih pada bahagian mana yang ingin di float.

Kod:

Bahagian atas penjuru kiri.

<div style="position: fixed; top: 0px; left: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian atas penjuru kanan.

<div style="position: fixed; top: 0px; right: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian bawah penjuru kiri.

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Bahagian bawah penjuru kanan.

<div style="position: fixed; bottom: 0px; right: 0px;"><a href="Gantikan teks ini dengan URL blog anda">Gantikan teks ini dengan kod image atau script widget</a></div>

Langkah 2

Bagi kod image, anda hanya perlu edit kod berwarna merah di bawah dengan memasukkan URL bagi image yang ingin di float. Salin kod yang telah siap di edit dan gantikan pada teks Gantikan teks ini dengan kod image atau script widget.(rujuk langkah 1).

 Kod image

<img src="masukkan URL image"/>

 Contoh:

<img src="http://efair.globecampus.ca/static/gmShow/WebUpload/Content/en_CA/Image/Twitter_FollowMe.png"/>

 Kod yang telah siap.

<div style="position: fixed; bottom: 0px; right: 0px;"><a href="http://larikudaku.blogspot.com"><img src="http://efair.globecampus.ca/static/gmShow/WebUpload/Content/en_CA/Image/Twitter_FollowMe.png"/></a></div>

-----------------------------------------------------------------------------------

Bagi kod widget pula, anda hanya perlu gantikan teks Gantikan teks ini dengan kod image atau script widget.(rujuk langkah 1) dengan script widget yang ingin di float.

Contoh script widget.

Widget jam.

<embed width="130" src="http://www.clocklink.com/clocks/0023-orange.swf?TimeZone=PST&amp;" wmode="transparent" height="130" type="application/x-shockwave-flash"></embed>

Kod yang telah siap

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="http://larikudaku.blogspot.com"><embed width="130" src="http://www.clocklink.com/clocks/0023-orange.swf?TimeZone=PST&amp;" wmode="transparent" height="130" type="application/x-shockwave-flash"></embed></a></div>



Langkah 3

Log in blog => Dashboard => Layout => Add A Gadget. Klik pula pada HTML/Javascript. Seterusnya, salin kod yang telah siap di edit itu dan paste pada ruang Content HTML/Javascript.

Akhir sekali klik preview. Jika anda berpuas hati dengan hasilnya, klik saja Save.

Read More

Mengubah saiz lebar column template classic

Kepada anda yang menggunakan template classic yang biasanya mempunyai 2 column, ukuran bagi lebar column tersebut sebenarnya boleh di ubah mengikut kehendak anda. Untuk mengubah siaz kelebarannya, anda perlu mengikut beberapa langkah dibawah.

p/s: Sila save script template terlebih dahulu sebagai backup.

Langkah 1

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


Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+F. Seterusnya taipkan kod #header-wrapper { pada kotak Find. Kemudian, tekan Enter. Anda akan lihat kod yang mungkin hampir sama dengan kod yang dipaparkan di bawah.

#header-wrapper {
width:660px;
margin:0 auto 10px;

Edit angka 660px kepada 900px .


Langkah 3

Taip kod #outer-wrapper { pada kotak Find dan tekan Enter. Anda akan lihat kod yang mungkin hampir sama dengan kod yang dipaparkan di bawah.

#outer-wrapper {
  width: 660px;
  margin:0 auto;

Edit angka 660px kepada 900px.


Langkah 4

Taip kod #main-wrapper { pada kotak Find dan tekan Enter. Anda akan lihat kod yang mungkin hampir sama dengan kod yang dipaparkan di bawah.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Edit pada angka 410px kepada 660px.


Langkah 5

Taip kod #sidebar-wrapper { pada kotak Find dan tekan Enter. Anda akan lihat kod yang mungkin hampir sama dengan kod yang dipaparkan di bawah.

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

pada angka 220px kepada 230px.


Langkah 6

Akhir sekali klik preview. Jika tiada mesej error yang terpapar dan anda berpuas hati dengan hasil yang telah di edit itu. Klik Save

Read More

Bina tulisan berstail web 2.0 secara online.

web2.0stylr.com adalah satu site yang menyediakan perkhidmatan untuk anda membina tulisan yang berstail web 2.0 secara online. Tulisan ini sesuai untuk dijadikan banner blog.Contoh tulisan tersebut boleh anda lihat pada image yang dipaparkan di atas.

Ia sangat mudah untuk di bina kerana tools yang di sediakan oleh site tersebut adalah ringkas. Anda boleh memilih jenis font dan juga warna yang dirasakan sesuai mengikut citarasa sendiri.

Setelah selesai, anda boleh simpan image yang telah siap itu di hard drive atau hosting sebelum di uploadkan ke dalam blog.

Read More

Cara pasang Scroll Box pada blog

Tajuk 1
Tajuk 2
Tajuk 3
Tajuk 4
Tajuk 5
Tajuk 6

Scroll box seperti yang boleh anda lihat pada contoh yang di paparkan di atas sangat berguna jika anda ingin menjimatkan penggunaan ruang pada blog terutamanya pada bahagian side bar. Banyak benda yang boleh kita masukkan pada scroll box seperti, teks, link, image dan widget. Blog kita sendiri pun boleh dimasukkan pada scroll box.

Untuk membina scroll box seperti yang dipaparkan pada contoh di atas, sila ikut beberapa langkah yang di tunjukkan di bawah.

Langkah 1

Teks dan URL

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Gantikan kod-kod yang berwarna merah dengan URL dan tajuk yang berkaitan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">
<a href="http://masukkan url tajuk 1">Tajuk 1</a>
<a href="http://masukkan url tajuk 2">Tajuk 2</a>
<a href="http://masukkan url tajuk 3">Tajuk 3</a>
<a href="http://masukkan url tajuk 4">Tajuk 4</a>
<a href="http://masukkan url tajuk 5">Tajuk 5</a>
<a href="http://masukkan url tajuk 6">Tajuk 6</a>
</div>

Image dan URL

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Gantikan kod-kod yang berwarna merah dengan URL anda dan kod yang berwarna hijau dengan URL bagi  image yang hendak di paparkan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 1"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 2"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 3"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 4"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 5"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 6"></a>
</div>

Widget

Contoh: Widget top commentators

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Script untuk widget top commentators berwarna merah. Gantikan kod yang berwarna merah dengan script widget yang ingin anda paparkan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">

<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=15&filter=nescafe ais" type="text/javascript"></script>

</div>


Langkah 2

Log in blog => Dashboard => layout => Add A Gadget. Seterusnya, klik HTML/Javascript. Salin kod yang telah siap di edit (rujulk langkah 1) dan paste pada ruangan content HTML/Javascript.

Akhir sekali, klik save.

Read More

Memasang status online dan offline Yahoo Messenger !

Pada anda yang masih belum tahu bagaimana untuk memasang widget status online offline Yahoo Messenger, anda bolehlah mencubanya dengan mengikut beberapa langkah di bawah.

Langkah 1

Salin kod dibawah dan paste terlebih dahulu pada notepad. Seterusnya edit pada kedua-dua perkataan nescafeaissatu yang di boldkan dengan ID Yahoo Messenger anda. Anda boleh memilih ikon status yang tersenarai dibawah dengan menggantikan angka 2 yang di bold kepada angka ikon pilihan.

Kod:

<a href="http://messenger.yahoo.com/edit/send/?.target=nescafeaissatu">
<img src="http://opi.yahoo.com/yahooonline/u=nescafeaissatu/m=g/t=2/l=us/opi.jpg" border="0" alt="Status YM" /></a>

Ikon:






1



2



3



4



5


6



7



8



9



10



11



12



13



14


15


Langkah 2

Log in blog => Dashboard => Layout => Add A Gadget. Klik pada HTML/Javascript. Salin kod yang telah siap di edit (rujuk langkah 1) dan paste pada ruang content HTML/Javascript.

Akhir sekali, klik save.

 Anda juga boleh mendapatkannya di site Ymgen.com

Read More

Terbalikkan teks atau perkataan pada blog

Taipkan teks atau perkataan yang ingin anda terbalikkan pada table ' Tuliskan teks di sini'. Hasilnya akan terpapar pada table 'uʍop ǝpısdn'. Salin dan paste pada blog anda.

Taipkan teks atau perkataan yang ingin anda terbalikkan pada table ' Tuliskan teks di sini'. Hasilnya akan terpapar pada table 'uʍop ǝpısdn'. Salin dan paste pada blog anda.

Read More

Membina costum search bar pada blog

Untuk membina search bar secara kostum seperti yang bolah anda lihat di atas, hanya ikut beberapa langkah di bawah:

Langkah 1

Salin dan paste kod yang berwarna merah di bawah. Edit pada perkataan yang di boldkan itu kepada perkataan dan teks anda sendiri.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Nak cari apa?" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"/> <input id="searchButton" value="Pergi" type="submit"/></form>

Langkah 2

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript. Kemudian, salin kod yang telah siap di edit tadi (rujuk langkah 1) dan paste pada Content HTML/Javascript itu.

Akhir sekali, klik save.

p/s: Seelok-eloknya, search bar diletakkan di bahagian atas (header) ataupun pada sidebar.

Read More

Edit gambar menjadi lebih menarik secara online

Satu lagi site photo editing yang patut di lawati oleh blogger yang tidak mahir menggunakan Photoshop. Funphotobox.com adalah satu site photo editing yang memberi kemudahan kepada anda untuk membuat suntingan terhadap gambar menjadi lebih menarik dengan mudah. Satu kelebihan yang ada pada site ini ialah, anda tidak perlu untuk mendaftar seperti kebanyakkan site yang lain

Photo effect yang disediakan juga amat menarik dan anda hanya perlu memilih effect  yang dirasakan sesuai untuk di padankan dengan gambar yang di upload.Anda boleh mengubah gambar tersebut menjadi  greeting card, photo effect yang sangat menarik, gambar berbentuk animasi dan muka depan majalah.

Hanya perlu lakukan 3 langkah yang sangat mudah. Pertama, pilih effect, kedua upload gambar yang hendak di sunting dan akhir sekali simpan di dalam hadr drive atau hosting.

Read More