Pages

Klik gambar ini untuk ke Blog Utama.

Thursday, December 23, 2010

Cara pasang Slide out navigation floating di atas header


Untuk memasang Slide Out Navigation floating pada sebelah atas blog seperti yang boleh anda lihat pada blog ini, hanya ikut beberapa langkah yang mudah di bawah.

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#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzUzdKJ46bzZAD_eyqI-f_FJwzf_ujtLNAJPC8WwJ2YglqQ8fUXJr0pbSAIZns28nj9NRDn5QHFOdRmlkAJpcOUjLgtL8BQRMnQ5Ll9R-EeBjkIX6swwNOFk2jnWfRIItoYk-CDCJOavs/s400/rss.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuL457KAhqa8vZ1qUv9936-BCYKaFUUMpiBC9vNijM9AAQ1K8lwJJ0jXX-1h8pcuOyOLdubn9Gsx6VywPTcamDzzjHkfuHPwU9aNfJNdVDwtLcK2hPCGHF6kKDAcGr91ljhjiSISP0Fss/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoc-NKhgPHyZbg2eQ7Hu5TIHCeHqi33SOKZ_53YQUVe9fhVFORnt_kE66oyPIg666s4ZCWt2YE0VeUR0FnzEbpRbCZvvXSAKi3uw51ea617YIAzD1EX-_emawqqSkgDDWl_XUSulQnYs/s400/twitter.png);
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nwZJh9etPSQcGCx4K4NfklpiPZ4f5d1GAbwM8iETplDqInhyphenhyphenB744x3NDnjxYNWYUhe-uX_LpXG8BEVsZNnubzdWw10sd-87gRa-lyUjaAq04BQKk1-OfWoA72-rZcYkzFhaZoa5x3JU/s400/photo.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BV_VOyuQ1A8djx1UE9D5wLgZC0Hf4HU5m746hnTMRnTCU8GacTolBu5FQLGKoSSFIaGukgmLI_uA_tg7vvgWqfQOE3aBbtmbAExEhnBZcwjzh7XBq1MMFkfHumbx6MPyH83qdSB7M1k/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() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

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

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

p/s:

1.Untuk mengubah warna background, sila edit kod background-color:#E7F2F9;

2. Untuk mengubah warna tulisan, sila edit kod color:#60ACD8;

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

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

Falling Star Pada Blog



Klik Gambar untuk lihat lebih jelas

Dulu saya post mengenai Floating bubble di blog ,Kali ini bintang di blog anda.Mesti cantik apabila letak di blog.Bagi sesiapa yang berminat boleh ikuti langkah-langkah dibawah ini.

Langkah 1
Copy kode dibawah ini.

<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/fallingstar.js"></script>

Langkah 2
Cara Pemasangan.

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

Monday, December 20, 2010

Ringankan blog dengan jQuery Lazy Load


Lazy Loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading bagi image yang terdapat pada blog. Efek Lazy load hanya akan berfungsi apabila page di scroll. Image selepas page yang di scroll akan terpapar dengan menggunakan efek jQuery Lazy Load. Untuk melihat Demo, sila klik di sini.

Lazy Load membantu meringankan blog dengan mengurangkan tempoh masa proses loading page pada sesebuah blog terutama pada blog yang banyak memaparkan image gambar ataupun image yang bersaiz besar.

Untuk memasang jQuery Lazy Load di blogspot, ikut beberapa langkah di bawah.

Langkah 1

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FoJn6E0DkscWgj8FrjtOvu8BkOA-cW1TIYG2WSFUzauT4D02IXfiFTDkSj2dtGBYagwOG9CV5LMSQiE9VuYLyaSKmjuf9OJtSNPWiEKZeIMShqiHV_715ZcKDR4s6Cjois_LMqn6Xz4/s1600/grey.gif"
});
});
</script>

Akhir, sekali, klik Save.


p/s:

1. Jika tiada sebarang efek berlaku selepas kod di Save, sila paste kod tersebut sebelum atau di atas kod </body> pada script template.

2. Jika tiada seberang perubahan selepas kod di paste di atas atau sebelum kod </body>, sila paste kod tersebut sebelum atau di atas kod </head>

Google Translate Widget





Gadgets powered by Google

Draw pembaca lebih ke blog anda dengan google's menterjemah widget! Tambah alat Terjemahan ke laman web anda, dan menawarkan akses cepat ke penterjemahan automatik dari laman tersebut. Salin dan tampal kod di bawah ini ke blog atau website anda.
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

Icon Top of Page terapung

Beberapa blog dan laman web yang telah obnoxiously laman yang berlangsung selamanya ... dan di sanalah widget ini akan menolong. Seperti yang dapat anda lihat, ada panah mengambang kecil di bahagian-bahagian kanan bawah halaman ini. Selalu mempertahankan kedudukan yang sama. Tatal ke bawah sedikit di template anda, maka jika anda mengklik, itu akan membawa anda ke bahagian paling atas halaman.

Mengapa hal yang baik?

* Menjimatkan pengunjung anda dari kerumitan yang tidak perlu bergulir ke atas.
* Ikon tidak mengganggu dengan kandungan anda.
* Anda boleh menggunakan gambar anda sendiri untuk berbaur dengan blog anda sendiri.

Dapatkan Widgets Ikon Terapung

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif" /></a>


* Jika anda ingin menukar gambar anak panah untuk sesuatu yang lain, kemudian cari baris ini di bawah ini dan menggantikannya dengan yang lain url gambar

http://img119.imageshack.us/img119/8589/arrowupcx2.gif

Daun berguguran di Blog anda

Selamat sejahtera,entry yang lepas Beautiful Following Star Blog,kali ini saya akan buat satu lagi daun berguguran diblog anda.Setelah saya mencuba ada sesetengah templates yang tidak boleh guna dan Template Designer New! .Siapa nak ikut tutorial dibawah.

1. Anda Perlu Login.

2.Copy kode dibawah ini dan paste di HTML widget.

<script type="text/javascript" src="http://nikbir09.ws/jeritanblog/daunberguguran.js"></script></div>

Langkah 21. Login ke Blogger, Klik Design :



2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;



Kemudian Masukkan kode yang telah anda copy tadi.
P/S: Kalau ada masalah komen kat bawah nie.http://freecutemsn.com/wp-content/uploads/2010/01/bubble-bear-cute-yoyo.gif

Beautiful Following Star Blog

Ini akan follow anda punya tetikus.

1.Anda perlu login blogger.

2.Pilih mana-mana yang anda ingin dan copy kodenya

Star Warna-Warni
<div style="text-align:center;font-size:8px;width:150px"><script type="text/javascript" src="http://nikbir09.ws/jeritanblog/warnawarni.js"></script></div>

Star Unggu
<div style="text-align:center;font-size:8px;width:150px"><script type="text/javascript" src="http://nikbir09.ws/jeritanblog/starungu.js"></script></div>

Star Biru
<div style="text-align:center;font-size:8px;width:150px"><script type="text/javascript" src="http://nikbir09.ws/jeritanblog/starbiru.js"></script></div>

3.Setelah itu anda tekan add widget.
4.Apabila sudah add anda perlu bawakkan widget itu ke bawah post.
5.Habis.Semoga Berjaya.http://freecutemsn.com/wp-content/uploads/2008/04/animated-love-cool-monkey-emoticons.gif

P/S: Kalau ada masalah komen kat bawah nie.http://freecutemsn.com/wp-content/uploads/2010/01/bubble-bear-cute-yoyo.gif

Headline Widgets

 

Menambahkan beberapa tajuk untuk laman web anda mempunyai pembaca anda dengan-cepat scan cara untuk mengetahui secara langsung apa yang entri terbaru blog anda adalah tentang. Ini juga merupakan cara yang baik untuk menarik perhatian dan untuk mendorong membaca posting terbaru.


Headlines Widget

Kod


Untuk menyalin tekan Ctrl + C.
 
<br /><span class="caps"><script style="text/javascript" src="http://www.presssalad.com/filecab/headlines.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 80;var standardstyling = true;</script><script src="http://YourOwnB1og.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script><scriqt><br /><ul><span>↑ <a href="http://jeritanblog.blogspot.com/2010/06/headline-widgets.html" title="Grab This Widget">GRAB THIS HEADLINES </a><a href="http://jeritanblog.blogspot.com" title="HEADLINES WIDGET">WIDGET</a></span></ul><br /><br /><!--NoEdit--></scriqt></span><br />

Pemasangan

1. Pergi ke Dashboard Blogger anda> Layout blog anda> Elemen Laman> Tambah Gadget> HTML / JavaScript
2. Salin dan tampal kod tersebut ke dalam HTML yang baru / JavaScript.
3. Dalam kod tersebut, cari baris ...

... Src = "http://YourOwnB1og.blogspot.com/feeds/posts/default ....

... Dan mengganti alamat blog (dipaparkan dalam warna biru di bawah ini) dengan alamat blog anda sendiri

... Src = "http://YourOwnB1og.blogspot.com/feeds/posts/default. ...

(Untuk diri-host blog) ...

... Src = "http://www.YourOwnB1og.com/feeds/posts/default ....

4. Tambah tajuk (pilihan). Dan Simpan.
Susunan

Judulnya biasanya ditempatkan di bahagian atas laman web. Untuk blog Blogger anda, pergi ke Layout blog anda, tarik judulnya Widgets anda dan letakkan di atas tempat Posting Blog. Sila lihat laman Blogger Demo.

Jangan lupa klik SAVE.

Posts Rating untuk setiap post




Outbrain Rating Widget
Berikan pilihan pembaca anda untuk mengadar posting blog anda.
Adakah anda penasaran ingin tahu apa yang pembaca anda berfikir tentang isi halaman anda? Dengan menambah widget rating outbrain anda akan mendapat jawapan terus dari pembaca anda, dan mereka akan mendapat akses mudah dan cepat untuk kandungan anda terbaik. widget ini berfungsi untuk Blogger, Wordpress, Drupal, sebuah laman web / javascript, dan Feedburner.

Hanya pergi ke outbrain.com untuk memulakan dengan platform blog.

Tambah Ratings Outbrain ke blog Blogger anda

Langkah-langkah:

1. Klik "Template"

2. Klik "Tambah elemen halaman"

3. Klik "HTML / Javascript"

4. Salin dan tampal kod di bawah ini

<script language="JavaScript">var OB_platformType = 1; var OB_demoMode = false;var OB_langJS ='http://widgets.outbrain.com/lang_en.js';</script><script src="http://widgets.outbrain.com/OutbrainRater.js" type="text/javascript"></script>

5. Klik "Save"

Membina fungsi auto read more pada setiap post


Berbeza dengan fungsi read more versi lama, di mana kita terpaksa meletak kod <span class="fullpost"></span> pada setiap entri yang kita tulis, fungsi auto read more yang boleh anda lihat pada blog ini sememagnya memudahkan lagi tugas kita. Tidak perlu lagi untuk kita letakkan kod <span class="fullpost"></span> pada setiap entri. Fungsi ini telah di set secara auto dengan javascript di mana setiap entri akan di di set kepada read more. Image yang ada pada entri akan di resizekan kepada saiz yang kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan menghadkan secara auto jumlah teks yang akan dipaparkan pada satu entri.

Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah.

p/s: Sila save script template anda 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, taip atau paste kod </head> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin kod yang berwarbna biru di bawah dan pastekan di atas atau sebelum kod </head>

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>


Langkah 4


Sekali lagi, dengan menggunakan keyboard, tekan Ctrl+ F. Seterusnya,  taip atau paste kod <data:post.body/> pada ruang Find dan tekan Enter.

Langkah 5

Salin kod yang berwarna merah di bawah dan paste(gantikan)  pada kod <data:post.body/>

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD98gKW4_-FCV5BLyBeTwRZYwGpzw5XLcMku_Go4vifc-N0FL1L13nnee_qpQRcXgNwdYUY89YWLvb8BsCzmAufxAE4BLir0JbZNIjK-PiofD1FwaFhhSW8G9kYOyP_VMSG3vWr_k-iro/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


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

Update: Jika anda menghadapi masalah pada auto read more selepas memasangnya pada blog, seperti post menjadi dua, sila klik www.yummylolly.com untuk menyelesaikan masalah tersebut.

Jika berlaku error semasa proses Preview akibat masalah code, sila klik ke www.bloggersentral.com untuk mencuba tutorial Auto Read More
Related Posts Plugin for WordPress, Blogger...

Recent Posts