Terbaru Multi Tab Widget untuk Blogger - Tabs dapat diedit !

Selamat pagi ! Selamat gi sekolah yer :)

Hari ni masih ada masa , saya nak buat tutorial .

Terbaru Multi Tab Widget untuk Blogger - Tabs dapat diedit !

Haa.. nampak tak yang ' About - Label - Archives ' ? Nampakan ? Itulah yang dimaksudkan Multi Tab Widget .
Kalau nak , ikut jer tutorial kat bawah ni .

1. Pergi ke Blogger - Tamplate - Edit HTML.

2. BACKUP TEMPLATE DULU ! - Sebagai langkah berjaga - jaga .

3. Cari ]]></b:skin> , guna CTRL+F untuk memudahkan pencarian.

/*----- MBT Multi Tabbed Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSeN0CnST8e2LqeMM6fqVMtHJB6pJaFQXuSGcT1ebBH-ikIC0V_bCRAt6QwW7W2qf6Sw_ObMBVRy7lq0kHFSbohn5p2QjGikcthUvoe6toXFyM3Yw_ssHH_nLH92J43j057QYwXxH4Snc/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSeN0CnST8e2LqeMM6fqVMtHJB6pJaFQXuSGcT1ebBH-ikIC0V_bCRAt6QwW7W2qf6Sw_ObMBVRy7lq0kHFSbohn5p2QjGikcthUvoe6toXFyM3Yw_ssHH_nLH92J43j057QYwXxH4Snc/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Copy kod tersebut dan paste sebelum (di atas ) ]]></b:skin>

5.  Tunggu , tutorial kita belum habis lagi . Ikut lagi arahan di bawah ni .

6. Cari kod ini :

Bagi pengguna blogger template design . Gunakan kod ni :

 <div class='column-right-inner'>

Bagi pengguna template lain , sila guna kod ni :

<div id='sidebar-wrapper'>

7. Dapat cari tak kod di atas tu ? Kalau sudah dapat , copy kod di bawah ni .

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
     
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                    
</div>                          
                             
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                      
</div>                          
                             
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<div style='height:5px;clear:both;'/>

8. Pastekan kod tersebut di bawah  <div class='column-right-inner'> atau <div id='sidebar-wrapper'> .


9. Tukar kan About , Tags dan Archives kepada ayat korang sendiri .

JANGAN INGAT SUDAH HABIS . BELUM LAGI . Hehehe . Sabar yer .

10. Pergi ke Layout pula .

Akan nampak macam gambar kat bawah ni .

Ada tab 1 , tab 2 dan tab 3. Korang boleh letak apa - apa gadget jer.

p/s : panjangkan ? Hahaha.. selamat mencuba :)

Kalau jadi bagitahu yer, kalau tak menjadi pun bagitahu .

read more "Terbaru Multi Tab Widget untuk Blogger - Tabs dapat diedit !"

Tutorial Facebook Pop Up Like Box Untuk Blogger | New

Selamat petang !

Kali ni saya nak buat tutorial . Seperti yang korg tengok, Tutorial Facebook Pop Up Like Box yang terbaru .

Nak ke ? Dah2 , meh ikut step by step kat bawah nih

1. Pergi Dashbord > Layout > Add A Gadget > html/javascript


2. Copy kod dibawah ni dan Paste dalam gadget Html/javascript (Kod di bawah ni panjang. Pastikan semua kod betul2 di copypaste )

<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSr0Q55-afhdfEucl0bW19CbL8SistNSjfDJZtH93WAF_5F4pF2YLTlNQR9Yfdhx990PvF2rmYzoRymlvmDC3fOzCYDOAkZ9znjdz4q8TQ2HighuDwLbB0wJKHXG8WN8vahyphenhyphen6vOY3bwxl/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSr0Q55-afhdfEucl0bW19CbL8SistNSjfDJZtH93WAF_5F4pF2YLTlNQR9Yfdhx990PvF2rmYzoRymlvmDC3fOzCYDOAkZ9znjdz4q8TQ2HighuDwLbB0wJKHXG8WN8vahyphenhyphen6vOY3bwxl/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhLZ1tnnIsM8VsNVg03bP94NXTsPMq84D5td3KWy3adyImHM8oPVkIXZ3YGboQAWpmG1kN9imff-bGoDYtY_MjgelyfUJHGzNYcCh8c1l3oeyJDw0vmaDC5c3_O3knutdHI3ItEuD3QEV/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijkDfvhiphDoipWpMUL9fqSAU166nxcFGJ_xHvf3XrNFNJFvvU9iiblcE4smbtn-wwrhRuwWm4_KVFIh4JyFL5bF4vBPj60AtFlhHy0SI75K0_IH9BZ2ckw_E-skdb3zLGS7eENqSvtcM4/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghCkNOUATlPjNyFhW2KkYEXbZWQhPjAne0ngclP7Ty6TKPiG7h9QcFR2QBTb2IYSuR-pEHB94OlFFx4Ek9m05s0Z8saDTOLdkvyTC-o8nYeesuO1VTJozslhr0gTZd3W3anjV5AyW5zSJ3/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fjgnjelez&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

NOTA - Tukarkan jgnjelez yg dihighlightkan dengan warna merah tersebut kepada facebook fanpage username korg .

read more "Tutorial Facebook Pop Up Like Box Untuk Blogger | New"

Tutorial : Date Header Outside Body

Bonjour !*menyempatkan diri untuk bercakap perancis*. Hari ini ada masa lapang untuk buat tutorial. Mia tahu,ramai yg dah tahu tutorial ni dan ada yg belum tahu. So, Mia cuma nak share kan dengan korg ^_^. Hehe...

{｡^◕‿◕^｡} Date Header Outside Body {｡^◕‿◕^｡}

✖ Not Suitable For Classic Template ✖

 → Pergi ke Design/Layout → Edit HTML → Tick Expand Widget Template → Find Code,

.date-header {

or

h2.date-header {

❤ Dah jumpa code di atas ? Then paste code ini di BAWAH code yang tadi tu.

height:40px;

margin:-15px -20px -500px -115px;

padding: 30px 300px 105px 10px;

background: url(LINK GAMBAR) no-repeat;

position:absolute !important; position:relative; float:left;

text-align: center;

font-family: Calibri; font-size: 12px; color: #000000;

}

❤ Next, tukar code LINK GAMBAR kepada gambar yang anda mahukan.

◕‿◕ Preview dulu baru tekan SAVE !

Nak link gambar tak ? Nah, ambiklah link gambar kat bawah yang tesedia ada...FREE

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6B1OawjyVI9s93TvGSS7tQlwfgaT2tyZYIHWG9owo2NqKOZYqDqA6VnwNyC_ONPN8ko48mbVAtM9VGaT5DBdZbNuwNptJn4m8UFqiY1ifIwwFskEe_Helx4AfLhH5p5CK_w9pZIB8q8_-/s1600/yelloworange.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYk2MNjNhBZDcOblLh9IS6UFJyLY1odirUEbO_DSMT9dTnzCmWpIG64FP8nGaRLO3wbW7t_CBYqJrGU-Vj62jpnxopqfDQJsyGIHYICWEzW6ctyjl_-JZUnpuJPMCFUIqwWqGRuwQJvS0/s1600/red.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-2uMYNyRACs-MbdQ1WX-MCkgh7olOKr76ztkZF4RkybY1gM74bflRBb2GmodTWlIZ9u6qBcevVdClvjd-KmGnBwx5SyYiEDYxG3iuOh-fRT_yD9JsSAcNllJ1QlCwPSucSjaNNPNJtht/s1600/purple.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sxReViSe5sN3Ua1_oMBAfpUNhVl6FkRGcX__vehMaKlmI4UQbe9WyDeNDN9tic7W9Tnie_ZZcSDKHRZFDKyKYDWy2GcToEAg4aJQV5Ax6vdcAHHabqEN46_otDSgez1ZerXNowgIxIEF/s1600/pink.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjxF6PIG4hGvGNUk6UvicX9IiwlqciIS7y5FjqlEfRFDCt68sWgfTZ7Mw0Z4T7FfJIQU36QcldAfV0AglRxUS4g5ZOPgH_YRGzW3PSqoAcI3Br_QmreaoiED2nnbuGNajJ6bSZ7YOYIK-r/s1600/grey.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9-s9P1s6CwDlHj2jfQWjntqInVNiZ4cQVjrDilOJVD94ntrXJe9_-R8ANN_uA42YBA47nk2diaq0aZFndjVg-DjyFgF8Nqck8OJtSRaEGebN1NOXkmtrrlsF2w-kLWHhQRsI3gGif460/s1600/green.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh45uPLKBORmVyb2hNbL5A6wU9AqezwI9i5erGvZHsnjcnmAIruoPaZrTk9i421vd37k4igDAigrHOzavkef2MANg2dzSFGWz9C4NINjipaD-z2eJVzdkQl487DB2LxlYrkuG2XCDMY5bHK/s1600/blue.png

credit : tyra

read more "Tutorial : Date Header Outside Body"

Tutorial : Cara meringankan Blog| Cepatkan loading| Jimat Bandwidth

Hai..selamat malam, mesti korg nak ringankan blog korg, kan?? Mai ikut kaedah di bawh ni, ada tutorial...

Kaedahnya;

1) Buka website CSS Drive-Compressor

2) Log in Blogger - 'Dashboard' - 'Edit HTML'

3) Copy bermula dari

UPDATE TERKINI (12/10/12) : Copy code bermula dari /* Header sampai ]]></b:skin>.

4) Paste aje di ruang  'Insert CSS code:'

5) Di ruangan 'Compression mode:' Pilih Normal.Jika ingin pilih Light pun boleh.

6) Di ruangan 'Comments handling:' Pilih " Don't strip any comments "

7) Klik 'Compress-it!' dan kita akan dapat kod HTML 'body' yang baru.

8) Copy HTML tersebut dan paste semula di dalam HTML blog menggantikan yang lama di tempat yang sama.

9) Dinasihatkan agar download full templete yang lama dulu sebelum melakukan proses 'compress' ni, manalah tahu masih sayang pada gaya yang lama.

10) Save terus perubahan yang telah kita buat tu.- selesai

dan hasilnya banyak benda yang telah diubah dari segi saiz dan keperluan blog itu sendiri. Jadi kita dah menjimatkan Bandwidth serta meringankan blog, makanya lajulah sikit untuk dibuka/dilawati.

Tips: 
1) Mana-mana gambar yang diedit/dibuat sendiri hendaklah kita pastikan saiznya tidak terlalu besar sebelum dimasukkan ke dalam blog.
2) Buang mana-mana widget yang tidak sepatutnya ada dan mengganggu.
3)Kurangkan bilangan Post untuk dipaparkan. Sekurang - kurangnya 1- 3 sahaja.

read more "Tutorial : Cara meringankan Blog| Cepatkan loading| Jimat Bandwidth"

Memasang Like + Send Facebook Button

Warning : Sebelum memulakan sebarang tuto, tlg backup full template @ Download Full template dulu, sebagai langkah keselamatan... 

Tau tak  apa tu Send + Like facebook button??

alalalal.... kalau x tahu, buat2 tahu jew, kalau yg tahu, teruskan untuk mengetahuinya...

1. Pergi ke  Dashboard > Design/Layout > Edit HTML >Tick Expand Widget Template.
2. Tekan Ctrl+F (serentak) untuk memudahkan pencarian.. cari kod ini :


a)Kod Ini untuk meletakkan widget tersebut di atas post entry anda,bukan di penghabisan post entry. sila cari kod ni : 

<div class='post-header-line-1'>

or

<div class='post-header-line-1'/>

B) Kalau nak letakkan widget tersebut di bawah post entry anda @penghabisan post entry anda, sila cari kod ni pulak :

<div class='post-footer'>

or

<data:post.body/>

Dan ini ialah kod untuk widget  Send Facebook Button :

<!--Facebook Send button Start AllBlogTools.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>
<!--Facebook Send button End AllBlogTools.com  -->

Ini pulak untuk Like + Send Facebook button :

<!-- Facebook Like+Send button Start AllBlogTools.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End AllBlogTools.com -->

read more "Memasang Like + Send Facebook Button"

ScrollBox pada Entry @ Post

1: Masuk kat new post macam biasa.. like uols nak buat entry baru... 2: Then masukkan coding ini...(ltk dkt HTML <--. )

<div style="border: 2px solid ; background: transparent none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 450px; height: 100px;">

Kat sini anda boleh masukkan text or segala jenis  gambar yang ado...

</div>

3. Korang boleh ubah width dan juga height itu mengikut kesesuaian blog.

Contoh :

Hahahaha..lolz !

read more "ScrollBox pada Entry @ Post"

Scrollbox pada kotak komen

Salomm u all @ Readers !


Kali ni aku buat tutorial Scrollbox pada kotak komen.


First pergi Dashboard>Design > Edit HTML >Tick Expand Widget Template
Sebagai langkah keselamatan, silalah download template korg, @ backup template , takott2 blog korg akan jahanam...T__T


Dengan cara mudah tekan Ctrl+F dan cari kod ni 

<div class='comments' id='comments'>

Hapuskan kod tersebut dan gantikan dengan kod ni :

<div class='comments' id='comments' style='overflow:auto; width:ancho;height:500px;'>

Kaler Biru tu boleh tukar mengikut ketinggian yg korg nak.

p/s  : Klau menjadi britahu okeyh.!

read more "Scrollbox pada kotak komen"

Menukar Perkataan Older,Home,Newer Page kepada Icon

1. Sign Blogger &gt; Design &gt; Edit HTML &gt; tekan / tick Expand Widget Templates

2. Sebelum korang mengikuti langkah selanjutnya, ingin aku mengingatkan bahawa korang Download Full Templates terlebih dahulu k. Kalau silap ada back up. Nanti jangan salahkan aku bila tak jadi.

3. Cari code di bawah, nak mudah korang tekan Ctrl F, lepas keluar kotak Find, paste code di bawah ke dalam kotak Find. Faham? ni dah panjang lebar penjelasannya..

expr:title='data:newerPageTitle'&gt;&lt;data:newerPageTitle/&gt;

4. Replace/padamkan code yang dimerahkan ( Newer Page )dan gantikan dengan code ini

&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNaOnmuC8vlU_joF6_D10CEDunODCa60uG0ea_8rJKxVrMxY9br8MAYwGG0-ruI3CmHBzgUahIa5s5lEYtdas40yTJfTWQHZuc-IQbfEr1CHB2SjxvpUEH4bzxy4NIyDL-ioWSYKKDmA/s1600/638148hihxwgn8gx.gif'/&gt;

# Boleh tukar yang biru dengan icon/gambar url korang

5. Cari code ini untuk gambar older pages pula :

expr:title='data:olderPageTitle'&gt;&lt;data:olderPageTitle/&gt;

6. Replace/padamkan code merah dan gantikan dengan code di bawah

&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOSfrVB00XltkoFBebXqQL6gD4eHCteB4IRGF5BveNvzrZXsfvSsng4zk951CCp2cUBYxtU7im0zr-j8bna439cvAVBxVphVHi7cQIPt4hd93qk02mKTqFQ-SSo3wr6Vbtc1cBi1IXGI/s1600/older.gif'/&gt;

# Boleh tukar yang biru dengan icon/gambar url korang

7. Cari code ini untuk Home pula :

expr:href='data:blog.homepageUrl'&gt;&lt;data:homeMsg/&gt;

8. Macam biasa, replace/padamkan code yang dimerahkan dan gantikan dengan code di bawah

&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuSzEgYuMNHPVdqAEn0SBxwNtFWyR0_loVo_2Rf-1ZTdnNVBL_RZJRtQclygfEAs4wPS62ZETtHZgMjv-u9d_GlLp-dj8hl7w3UISgOCGd2M1dlI6SKdR6Muw0CHtK6YsdUdlEzUiq7L8/s1600/home+sweet+home.gif'/&gt;

# Boleh tukar yang biru dengan icon/gambar url korang

9. Preview dan SAVE. Kadang-kadang gambar korang tak muncul bila preview. So SAVE je.

read more "Menukar Perkataan Older,Home,Newer Page kepada Icon"

Simbol teks untuk korg...

Nana, aku dulu pun terpikir juga, camner mereka leh buat simbol ne, akhirnya lahir otak yg 


bernas ni,,... ni aku dapat dari blog kengkawan.. x yah susah kan diri cari keyboard tuk 


buat ni. 







Æ æ ❖

{｡^◕‿◕^｡} (◕^^◕) ✖✗✘♒

♬✄ ✂✆✉✦✧♱ ♰♂♀☿❤❥ ❦❧

™®©♡♦ ♢♔♕♚♛★ ☆✮ ✯☄☾☽

☼☀☁☂☃☻ ☺☹ ☮۞۩ εїз☎☏¢

☚☛☜☝☞☟✍

✌☢☣☠☮☯ ♠♤♣♧♥ ♨๑❀✿ ψ☪☭

♪ ♩♫℘ℑ ℜℵ♏ηα ʊϟღツ回 ₪™ ©®¿¡½⅓

⅔¼¾⅛⅜⅝⅞℅

№⇨❝❞ ◠◡╭╮╯╰ ★☆⊙¤㊣

★☆♀◆◇↑↓→ ←↘↙♀ ♂┇┅﹉﹊

﹍﹎╭╮╰╯ *^_^* ^*^ ^-^

^_^ ^︵^∵∴‖ ︱︳︴﹏

﹋﹌♂♀ ♥♡☜☞☎ ☏⊙◎☺☻ ►◄

▧▨ ♨◐◑↔↕ ▪▫☼♦▀ ▄█▌▐ ░▒▬♦◊

◦☼♠♣▣ ▤▥▦▩ ぃ◘◙◈♫ ♬♪♩♭♪ の☆→あ ￡❤

｡◕‿◕｡✎✟ஐ ≈๑۩ ۩.. ..۩۩๑ ๑۩۞۩๑ ✲

❈➹ ~.~◕ ‿-｡☀☂☁ 【】┱┲❣ ✚✪✣ ✤✥

✦❉ ❥❦❧❃ ❂❁❀✄☪ ☣☢☠☭♈

✓✔✕ ✖㊚㊛ *.:｡ ✿*ﾟ‘ﾟ･ ⊙¤㊣★☆

♀◆◇回□〓

→←↘↙ ♀♂┇┅﹉ ﹊﹍﹎ ╭╮╰╯ *^_^*

^*^ ^-^ ^_^ ^︵^∵ ∴‖ ︱︳ ︴﹏﹋﹌

♂♀♥♡☜ ☞☎☏⊙ ◎☺☻

►◄ ▧▨♨◐◑ ↔↕ ▪▫ ☼♦

▌▐░▒▬ ♦◊◦☼ ♠♣▣▤▥ ▦▩ぃ◘◙ ◈

♫♬♪ ♩♭♪の☆ →あ￡❤｡ ◕‿◕｡ ✎✟ஐ≈

๑۩۩.. ..۩۩๑๑۩۞ ۩

๑✲❈ ➹ ~.~◕‿-｡ ☀☂☁【】

┱┲❣✚ ✪✣✤✥ ✦❉❥❦

❧❃❂❁❀ ✄☪☣☢☠ ☭♈ ✓

✔✕✖㊚ ㊛ *.:｡✿*ﾟ ‘ﾟ･ ◊♥▫■๑»«¶

ஐ©† εïз♪ღ♣ ♠•± °•ิ.•ஐஇ *×○▫

♂•♀◊©¤ ▲↔™®☎ε їз♨ ☏

☆★ ▽△▲ ∵∴∷ ＃♂♀♥♠♣

♧♤♧ ♡♬♪ ♭♫♪ﻬஐღ ↔↕↘••● ¤╬﹌

▽☜♥☞ ♬✞♥♕☯☭☠☃ ─ ━

▰ ▱◆ ◇ ◈ ◉ ◊ ○ ◌ ◍ ◎ ● ◐ ◑ ◒ ◓ ◔

◕ ◖ ◗ ◘ ◙ ◚ ◛ ◜ ◝ ◞ ◟ ◠ ◡ ◢ ◣

◤ ◥ ◦ ◧ ◨ ◩ ◪ ◫ ◬ ◭ ◮ ◯ ◰ ◱ ◲ ◳ ◴ ◵ ◶ ◷

◸ ◹ ◺ ◻ ◼ ◽ ◾ ◿ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈

☊ ☋ ☌ ☍ ☎ ☏ ☐ ☑ ☒ ☓ ☔ ☕ ☖ ☗ ☘ ☙

☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯

☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼ ☽ ☾

☿ ♀ ♁ ♂ ♃ ♄ ♅ ♇ ♔ ♕ ♖ ♗

♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♠ ♡ ♢ ♣

♤ ♥ ♦ ♧ ♨ ♰ ♱ ´ ῾ ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟ † ‡ • ‣

․ ‥ … ‧ 
 
 ‪ ‫ ‬ ‭ ‮   ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ ›

※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔

∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟ ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪

∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿ ≀ ≁ ≪ ≫

≬ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ ⊀

⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏ ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙

⊚ ⊛ ⊜ ⊝ ⊞ ⊟ ⊠ ⊡ ⊬ ⊭ ⊮ ⊯ ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻

⊼ ⊽ ⊾ ⊿ ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇

⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏ ⋐ ⋑ ⋒ ⋓ ⋔ ⋕

⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬

◿ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇

☊ ☋ ☌ ☍ ☎ ☏ ☐ ☑ ☒ ☓ ☔ ☕ ☖ ☗

☘ ☙ ☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬

☭ ☮ ☯ ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼

☽ ☾ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♇

♎ ♏ ♐ ♑ ♒ ♓ ♔ ♕ ♖ ♗ ♘ ♙

♚ ♛ ♜ ♝ ♞ ♟ ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♰ ♱ ☫

read more "Simbol teks untuk korg..."

Cara Buat Favicon untuk Blog

Ngap!  Hye u alls , hari ini saya nak buat tutorial khas yg saya buat untuk korg. Korg pun tau apa nama tutorial nye kan ' Cara buat favicon untuk blog' , hahaha , *gelak jahat* , k , back to the point

First
1. Sila pergi ke sini  Favicon.ico Generator


2. Klik 'Import Images' ,

3. Klik pada 'Upload Image' , pastu , klik pada 'Keep Dimensions'.
4.  Lepas tu , klik 'Download Favicon'... Step 1 sudah selesai ,

Step 2 :
1.Pergi login ke blog anda > Design
2.Tekan pada 'Favicon'

3. pastu , upload lah Favicon yg anda download tadi ,...
4. Klik SAVE.
5. kini , anda dh selesai....
Finish dh step 1 dan 2. mudah jew.

read more "Cara Buat Favicon untuk Blog"