Join us on Facebook

Please wait..10
Blogger WidgetsBlog statistics Widget For Blogger Ping your blog, website, or RSS feed for Free

Cara Buat Butang Share Gaya OS X Dock



Butang Share Dengan Gaya OS X Dock Ini Daripada addthis.com,Butang Share Ini Dengan Fungsi Floating  Dibahgian Bawah Yang Mempunyai Satu Butang Untuk Pelawat Mengklik Butang Berkenaan.


1.Login Ke Blogger
2.Layout' > Add a Gadget' > 'HTML/Javascript
3.Copy Dan Pastekan Dalam Widget Anda.Siap!

                                                                                                                                                                                  <style type="text/css">  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XQ1bVuYxSFDgy68p97Oe-xPQGyTV2HvLTuKTnnMPN18obQKUXMUfvK2msr6_A2wuYkZs7vc34jpOmJYsWDTy-4O1AJjkVgaU3b8dbRkGh-4l2aL7zOEy4lcjDyagnqGp5irKJ01ymFjC/s1600/widget-bg-donorilmu.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }  </style><div id="sharedock">  <div id="dock">  <div class="dock-container"><div class="addthis_toolbox">  <div class="custom_images"> <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a><a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a><a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a><a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a><a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>  </div>  </div>   </div>  </div>  </div>  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>  <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://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>  <script type="text/javascript">  $(function () {   // Dock initialize  $('#dock').Fisheye(  {  maxWidth: 30,  items: 'a',  itemsText: 'span',  container: '.dock-container',  itemWidth: 50,  proximity: 60,  alignment : 'left',  valign: 'bottom',  halign : 'center'  }  );  });  </script>
Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Buat Bener Iklan Style CSS BuySellAds



Membuat Ruang Atau Banner Style BuySellAds Memang Cantik Tapi Kena Pastikan Juga Anda Perlu Menarik Traffik Ke Blog Anda.Untuk Membuatnya


1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi  Ctrl+F 
4.Cari Kode ]]></b:skin>
5.Copy Kode Dibawah Ini Dan Pastekan Sebelum Kode ]]></b:skin>


/* Ads
---------------------------------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}



1.Login Ke Blogger
2.Layout' > Add a Gadget' > 'HTML/Javascript
3.Copy Dan Pastekan Dalam Widget Anda.Siap!



                                                                                                                                                                   <center>
<div id="bsap_125" class="bsap_125 bsap">

<a href="LINK ANDA" class="ad1" title="video screen capture" id="bsa_1451626" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="video screen capture" height="125" width="125" /></a>

<a href="LINK ANDA" class="ad2 even" title="Premium plugins for WordPress" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Premium plugins for WordPress" height="125" width="125" /></a>

<a href="LINK ANDA" class="ad3" title="DonorIlmu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mAQdSSXFNUuRNgBRGSCi37FSPVPBwMv9ogbTm3nFSJWfIh8Cvt1jMZWPsTzO6zEf0DMrLe3tnlr7M4rY3pc0gz9WpTC-uEJVO7kRDsLm4cZz3P56IcxifV_PW4Dvl857beH5Rh5ZYcw/s1600/donor.jpg" alt="DonorIlmu" height="125" width="125" /></a>

<a href="LINK ANDA" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>
</div>
</center>




Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Paksa Pelawat Klik Iklan


Sudah Pasti Ramai Pemilik Blog Meletakan Iklan Dari Pelbagai Syarikat,Dan Iklan Yang Diletakan Pasti Berbeza-beza,Mungkin Untuk Pemilik Blog Yang Mempunyai Ramai Pelawat Tidak Mempunyai Masalah Untuk Mendapatkan Income Sampingan,Bagaimana Pula Bagi Blog Yang Kurang Pelawat Untuk Mendapatkan Klik.
Dimana Kod Dibawah Ini Akan Terbuka Secara Automatik Jika Pelawat Anda Pergi Keblog Anda,Apabila Pelawat Mengklik Salah Satu Link Dalam Kod Berkenaan,Ianya Akan Hilang Secara Serta Merta.Dan Akan Terbuka Kembali Setelah Seminggu Kemudian Jika Pelawat Sama Yang Datang Keblog Anda.


1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi  Ctrl+F 
4.Cari Kode </head>

5.Copy Kode Dibawah Dan Pastekan Sebelum Kode </head>


                                                                                                                                                        <style type='text/css'>
#topbar{position:absolute;visibility: hidden;width: 500px;z-index: 100;padding:10px;background:#fff; border:1px solid #000;margin:0 auto 10px;float:left;color: #000;text-align: justify;font-size: 12px;font-family: Verdana, serif}
</style>
<script src='http://donor-ilmu.googlecode.com/files/klik-iklan.js' type='text/javascript'></script>
6.Cari Kode <body>
7.Copy Kode Dibawah Dan Pastekan Selepas Kode <body>

                                                                                                                                                               <div id='topbar' style='visibility: hidden; left: 30px; top: 689px;'>
<div style='text-align: center;'>
<b><span class='ads'>Klik Link Dibawah ini Untuk <a href='http://komunitibm.blogspot.com/' target='new'>Menutup</a></span></b>
</div>
<div onclick='closebar()'>
<center>
KODE IKLAN ANDA
</center>
</div>
</div>



P/S 1.Anda Boleh Membuang Kod Yang Berwarna Merah
       2.Masukan Apa-apa Kode Pada Bahagian KODE IKLAN ANDA Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Buat Jquery Tab Menu Accordion


Tajuk 1
Masukkan kod disini.
Tajuk 2
Masukkan kod disini.
Tajuk 3
Masukkan kod disini.
Jquery Menu Tab Ini Anda Boleh Gunakan Juga Untuk Meletakan Pelbagai-Bagai Kod,Contohnya Jika Anda Ingin Meletakan FB Fanpage Dan Lain-lain.


1.Login Ke Blogger
2.Layout' > Add a Gadget' > 'HTML/Javascript
3.Copy Dan Pastekan Dalam Widget Anda.Siap!


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

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Buat Jquery Menu Slide Out Navigation




Men Slide Out Ini Sangatlah Comel Kerana Ianya Mempunyai Pelbagai Warna,Tambahan Pula Ianya Berada Pada Tepi Bahagian Blog Dan Ianya Tidak Menganggu Pelawat Anda Membaca Artikel.



1.Login Ke Blogger
2.Layout' > Add a Gadget' > 'HTML/Javascript
3.Copy Dan Pastekan Dalam Widget Anda.Siap!


                                                                                                                                                         <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/AVvXsEhvOvG7UgpOP0961NBUFsqeSO5uiHoEePClzt4mX7EE-HOXtn-SFl0vFNwC9rMvQxRbeIB33MoobmJejEL86LpHRd5DZyBYuUH1Hed6WlFlX-rqMdGgyhyHeDALgpZlyMXz7io2xKgRMME/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyBt-SB5Rpls6bR7yn8lyWvRRi7d_lADwvnLvUh7zbWUfemSbhWNFWPSWmTpyRgdasqAB1B6oFF3H5TKs8tiACfDnsyyimfXjYi24be7bd-Wnh-tjkyJpeW8kt7mIwLUc6xyXiAkklK4/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOqEXKXvkj-PeVxRudmGamwQ0Ydxb4hbAp2NSmwgTmu5Y7Q9BmQCrc-DTbt3XerFWxFGUTOzG1Hym2cEP0iohAm-tQD_T7TwirDumMVPPecFg6N4xMz4rge-DCdV25oG7aSij2EukHHM/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEV2_Gl-rqkAeIiEGtru9GmbhNiA8tHEk8HhoqM1o-rZdefRJOCghsuX0GKt2U8tftraAPtYgisHHjFNHfhESrCKdoqtnX4DbxEtq92-FZChx0dV4L-sEHtfDLDG9o-4GfcQdGkeWUJI/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21nXg-gn4-irIjJC5k4wOz9dmGop30jryicX2vpUMR1SgQ1iHH5Cie0i35JQwBwDDzwbd4qvFmBqm2vmeKqm5s1mZr2zPWhlnx77JPc0j5N_tdV5AkZDx2RRWlfBFGNZdU7tNbcAlprc/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>

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Buat Jquery Sliding Panel


Jquery Sliding Panel Log In Ini Lebih Kemas Kerana Ianya Hanya Berfungsi Jika Anda Mengklik Pada Bahagian Login,Dimana Ianya Tersorok Kedalam Dibahagian Header.



1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi  Ctrl+F 
4.Cari Kod ]]></b:skin>
5.Copy Kod Dibawah Dan Pastekan Diatas Kod ]]></b:skin>


#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}
.slide{width:950px;
margin:auto;
}
.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}
.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}
.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}
.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}
.loginregister{
color:#999;padding:5px;
}
.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}
.loginregister a:hover{
color:#fff';
}
.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}
.loginform ul li{
display:inline;
}
.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}
input#signIn{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2I0nJgt-B20uWoI5IANiaITba8M5PesCEY5ZwxLOckR5-XCioAEUnz-oO0k5p8efCxctB6OqwoifUZMQ955xKkwLjP2rBrNgdNEY72pdf0oRgWPxEZEAe0_TS-rpi9TnHv-1-jLnI-Y/) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}
input#Email,input#Passwd{
background:#414141;color:#fff;
}
input:focus#Email,input:focus#Passwd{
background:#545454;
}

6.Cari Kod </head>
7.Copy Kode Dibawah Dan Pastekan Selepas Kode </head>

                                                                                                                                                       <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Masuk'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar&#173;</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>


Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Pop Hit TV

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Menghilangkan Tajuk Blog Pada Header

click to zoom

Tajuk Yang Berada Pada Bahagian Header Kadang-Kadang Menganggu Penglihatan Pada Blog,Secantik Mana Pun Kalau Tajuk Mendahului Header Tetap Akan Menggangu.
Cara Pertama Mungkin Ramai Yang Sudah Tahu,Iaitu Dengan Cara Mengupload Header Pada Bahagian Gadget.
Bagaimana Pula Jika Header Itu Anda Perlu Menukarkan Pada Bahagian Template?Begini Caranya


1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi Ctrl+F

4.Cari Kode Yang Hampir Serupa Dengan Kod Dibawah Ini


#header h1 {
margin:50;
padding:10px 0 0 20px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#0099CC;
Masukan Kode disini
}
Atau Kode Dibawah Ini

.blogname h1 {
font-size:40px;
font-weight:normal;
margin:0px 0px 0 40px;
color:#ffffff;
text-decoration: none;
text-align:left;
Masukan Kode disini
Atau Kode Dibawah Ini

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
Masukan Kode disini
}
Jika Anda Sudah Jumpa Salah Satu Kode Diatas,Anda Perlu Memasukan Pula Kode Dibawah Ini Untuk Menghilangkan Tajuk Pada Header Blog Anda.Pilih Salah Satu Kode Dibawah.

display:none

Atau Kode Ini

visibility:hidden;
Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.

Cara Buat Image Loading Pada Blogger

loading effect for blogger

Image Loading Kebiasaanya Ia akan Keluar Semasa Kita Menuju Kesesuatu Blog Ke Link Lain Dalam Blog Yang Sama,Dimana Image Ini Membuatkan Seseorang Pelawat Blog Anda Akan Sentiasa Menunggu Hingga Sesuatu Halaman Itu Terbuka Hingga Habis.



1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi Ctrl+F

4.Cari Kode </head>
5.Copy Kode Dibawah Dan Pastekan Diatas </head>

                                                                                                                                                                              #nib-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: none; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrN-Vb3OaMNeo-6dspBbp_R_4lzdEojkvK3XyXEopXjI7ysjleJz0TI8KcgoSjjCLJs0j797PNJmiu690iwCL7kLmTGRpHUzufpJhWCQIAcwBJH4wfcjSPqjvtd8hQUsdJaod_IRSCAE/s1600/BLOGGER-WHEELS.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.NIB #nib-loading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#nib-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#nib-loader {
    height: 100%;
    display: none;
}
</style>
<script>
(function($){
$("html").removeClass("NIB");

$("#header").ready(function(){ $("#nib-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#nib-progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
    $("#nib-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#nib-loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>


6.Cari Kode <body>
7.Copy Kode Dibawah Dan Pastekan Selepas Kode <body>

<div id='nib-loading'><div
id='nib-progress-bar'></div><div
id='nib-loader'>Loading...</div></div>



p/s:Jika Anda Ingin Menukarkan Image Loading,Tukar Pada Kode Yang Bewarna Merah,Di Bawah Disediakan Beberapa Image Kepada Anda
Image 1                                                                                                                                                                                    
                                                                                                                                    http://fees.niles219.org/Images/loading_gif.gif                                                                                                   Image 2                                                                                                                                                                                                                                                                              
http://dribbble.s3.amazonaws.com/users/39528/screenshots/793181/slow_load.gif        

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.
Related Posts Plugin for WordPress, Blogger...