Tutorial / Freebies Navigation with Hover

1. Design > Edit HTML
2. Ctrl + F :

/* Content
----------------------------------------------- */
3. Copy one of the navigation code below and paste after the code in the second step.
4. Save Template.
5. Design > Page Element > Add a gadget > HTML/Javascript
6. Copy code below :
<a id="naviblog" href="LINK" title="TITLE">TITLE</a>
7. Paste in HTML/Javascript space. Change where necessary.
8. Save.
Navigation #1
before
after
#naviblog {
font-size: 10px;
letter-spacing: 1px;
line-height: 150%;
text-align:left;
color: #aaa;
padding-left:18px;
text-decoration: none;
border-bottom: 1pt solid #A9E2F3;
color: #CEECF5;
background:#ffffff;
display: block;text-transform: ;
}
#naviblog:hover {
letter-spacing: 2px;
background: #F6CEF5;
color: #aaa;
}
Navigation #2
before
after
#naviblog {
display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #000;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#naviblog:hover {
border-left:3px solid #ffffff;
color: #000000;
background: #BDBDBD;
-moz-border-radius: 0px 0px 70px 70px;
-webkit-border-radius: 0px 0px 70px 70px;
border-radius: 0px 0px 70px 70px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
Navigation #3
#naviblog {

display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #bdbdbd;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
Navigation #4
#naviblog {

display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #bdbdbd;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 70px;
border-top-right-radius: 0px;
border-top-right-radius: 0px;
Navigation #5
For navigation #5, no need step #1-6. Just go to Design > Add a Gadget > HTML/Javascript > Paste > Save
<a href="LINK" title="Linkies">
<img src="IMAGE URL 1"
onmouseover="this.src=&#39;IMAGE URL FOR HOVER&#39;"
onmouseout="this.src=&#39;IMAGE URL 1&#39;" /></a>
 Navigation #6
before
after
.button2
{height:45px;
font-size:10px;
float:left;
text-align:center;
padding-top:-10px;
moz-border-radius:0px 0px 30px 30px;
border-radius:0px 0px 30px 30px;
-webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;
opacity:1;}
.button2:hover
{padding-top:25px;
moz-border-radius:0px 0px 50px 50px;
border-radius:0px 0px 50px 50px;}


#button1
{float:left;
width:30px;
color:#3a3a3a;
background-color:#A9E2F3;}


#button1:hover
{color:#81BEF7;}

S/N : For navigation #6, copy code below and paste at Design > Page Elements > Add a Gadget > HTML/Javascript space
<a href="/p/vvip.html"><div id="button1" title="VVIP" class="button2"></div></a>

Tutorial Footer Blog with Freebies

1 . Design > Edit HTML > Ctrl + F <footer>
2 . Copy code below ;
<center><img src='URL FOOTER'/></center> 
3 . Paste the code below / after <footer>
4 . Preview > Save Template

Freebies

Plain Footer : 860 x 100

https://4.bp.blogspot.com/--jNfjPmA3jU/VXg7VmVZ2nI/AAAAAAAAGqs/Jl88uIW0zBg/s1600/normal_footer.png
Plain Footer : 860 x 244
http://4.bp.blogspot.com/-win-z250yio/T1h413MIgOI/AAAAAAAACTc/NRn2iGiaF9k/s1600/empty_footer.png



Kawaii footer : 880 x 230
http://2.bp.blogspot.com/-aZ9B8kysnEs/T0JlCXPIDzI/AAAAAAAACNE/XlGRJBacU-s/s1600/Untitled_footer_.png
Panda footer : 880 x 273
http://2.bp.blogspot.com/-shK1q9zBSxg/T1BuCj3R56I/AAAAAAAACPs/e0skqlRECrI/s1600/panda_footer+copy2.png 
COMMENT IF YOU TAKE ONE OF THEM :3

Tutorial Simple Navigation with Freebies

Design > Page Elements > Add a Gadget > HTML/JavaScript



<center><div style="-moz-border-radius-bottomright: 50px 25px; -moz-border-radius: 1em 4em 1em 4em; background: url(URL BACKGROUND); border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span><a href=" LINK">TITLE </a>  <span id="goog_1755542996"></span>| <a href=" LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius-bottomright: 50px 25px; -moz-border-radius: 1em 4em 1em 4em; background: url(URL BACKGROUND); border-bottom-right-radius: 50px 25px; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius-bottomright: 50px 25px; -moz-border-radius: 1em 4em 1em 4em; -moz-border-radius: 25px 10px / 10px 25px; background: url( (URL BACKGROUND) ; border-radius: 25px 10px / 10px 25px; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius: 1em 4em 1em 4em; background: url(URL BACKGROUND); border-radius: 1em 4em 1em 4em; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius-bottomright: 50px; -moz-border-radius: 1em 4em 1em 4em; -moz-border-radius: 35px; background: url (URL BACKGROUND) ; border-radius: 35px; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius-bottomright: 50px; -moz-border-radius: 1em 4em 1em 4em; background: url (URL BACKGROUND) ; border-bottom-right-radius: 50px; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>


<center><div style="-moz-border-radius-bottomright: 25px 50px; -moz-border-radius-bottomright: 50px 25px; -moz-border-radius: 1em 4em 1em 4em; background: url(URL BACKGROUND); border-bottom-right-radius: 25px 50px; border: 2px solid #ccc; padding: 5px; width: 210px;"><a href="LINK">TITLE </a> | <span id="goog_1755542995"></span> <a href="LINK">TITLE </a>  <span id="goog_1755542996"></span>|  <a href="LINK">TITLE </a> </div></center>

WARN NOTE LOL 
First of all, I would like to thanks cute Kihah for the basic code. Second, thanks to myself Lol cause coding an addition code for freebies. Third, please comment if you use one of them. Because it is freebies. Forth, don't chuuuuu dare to RE-FREEBIES this one.

Freebies Mix Background Part 2

Assalammualaikum.
How to save / get code ? 
Ctrl + Click on the image.


Tutorial Floating / Sliding Twitter, Shoutbox, Music

Assalamualaikum.

Sebenarnya bendanya macam bawah ni :


Tutorial untuk Template Designer / Modern Template

1 . Design > Page Elements > Add a Gadget > HTML / JavaScript
2 . Copy code berikut :
<style type="text/css">
.music {
padding:30px;
border-bottom-right-radius:10px;
background:url(URL BACKGROUND);
}
#ytube {
text-align: center;
position:fixed;
left:4px;
top:-310px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#ytube:hover {
top:-10px;
}
#pict {
height:35px;
width: 50px;
align:center;
}
</style>
<div id="ytube">
<div class="music">
CODE TWITTER / SHOUTBOX / MUSIC PLAYER
</div>
<div id="pict"><br /><img src="URL IMAGE" /></div></div>

3 . Ubah mana perlu. Boleh create Twitter Widget kat sini. Ubah tulisan warna merah kalau gambar korang terpotong / pelik / whatever. Save.

*Ehem. Aku bukannya apa tapi code untuk Template Designer, aku coding sendiri. Ubah dari yang asal. Kalau nak RE-TUTORIAL, pandai-pandai lah credit kan?

Tutorial untuk Blogskin / Classic Template
Cr : here

1 . Template > Ctrl + F code </style>
2 . Copy code berikut dan paste sebelum </style> :

.music {
padding:15px;
border-bottom-right-radius:10px;
background:url(URL BACKGROUND);
}
#ytube {
text-align: center;
position:fixed;
left:4px;
top:-310px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#ytube:hover {
top:-10px;
}
#pict {
height:35px;
width: 50px;
align:center;}
3 . Ctrl + F code </body>
4 . Copy code berikut dan paste atas </body> :

<div id="ytube"><div class="music">

CODE TWITTER / SHOUTBOX / MUSIC PLAYER

</div><div id="pict"><br><img src="URL IMAGE"></div>
5 . Ubah mana yang perlu dan Save Template.

*Sila CREDIT kalau anda RE-TUTORIAL benda ini.

[Own Made] Freebies Texture Background

http://1.bp.blogspot.com/-NkR6lqS1Wq8/T2RwUaEsjrI/AAAAAAAACWI/XbjQzsj3p6w/s1600/Please_Love_Me.jpg
http://2.bp.blogspot.com/-pVPbDhOBe7M/T2RxXNkMN6I/AAAAAAAACWY/nppeBuYoFaE/s1600/choc.jpg
http://2.bp.blogspot.com/-yBJAswLbA4Y/T2RxqpY_0bI/AAAAAAAACWg/PCITWvm3DTw/s1600/green.jpg
http://1.bp.blogspot.com/-BtriYvX1fDw/T2Rx6GsADFI/AAAAAAAACWo/8sKBdpoxvV8/s1600/pink.jpg
http://1.bp.blogspot.com/-X0vHtd9of1k/T2RyFjUpW3I/AAAAAAAACWw/J5AUCwjoHRQ/s1600/purple.jpg
COMMENT IF YOU TAKE THEM . TQ

Hide Music Player

1. Pergi kat code yang korang letak code music player.
2. Copy code bawah ni. and paste je kat bawah code music player korang.
<style>EMBED{width:0px;height:0px;} div table table table td font
{visibility:visible;} table table embed {display:block; position:absolute;
top:11px; left:0px; visibility:visible;} table table table embed
{position:static;} .herpe td td object {position:absolute; left:40%;
margin-left:-150px; top:300px;}</style>
<style type="text/css">embed, object
{display:block; width:0px; height:0px;}</style>
3.  Okay done. Save. 

Tutorial Scroll Box

1. Design > Page Element > Add a Gadget


2. Copy (Ctrl+C) :
<div style="width:426px;height:100px;overflow:auto; ">CODE / WRITE ANYTHING HERE</div>
3. Paste ! then Save.


Here the tricks ;
red color for width of your scroll box
blue color for height of your scroll box
orange one, you know right ? 


Good Luck !

Ringankan blog dengan Lazy Load jQuery

Definition : Lazy Load jQuery ni kurangkan tempoh load page pada blog esp kalau korang suka sangat letak banyak gambar dalam blog. Kalau scroll blog ke bawah, gambar muncul secare tiba-tiba
Dashboard>Design>Add a Gadget>HTML/javascript 
paste code bawah ni kat ruangan HTML/javascript tu. Pastu Save ;  
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></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: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif"});});</script>

Shadow Effect at Sidebar + Main Wrapper

Dashboard>Design>Edit HTML

1. to put shadow effect at main body search by clicking Ctrl+F : 
#main-wrapper {
then, copy the code below and paste it under #main-wrapper {
-moz-box-shadow: 0px 0px 50px #BDBDBD;
-webkit-box-shadow: 0px 0px 50px #BDBDBD;
2. to put shadow effect at sidebar body search by clicking Ctrl+F :
#sidebar-wrapper {
then, copy the code below and paste it under #sidebar-wrapper {
-moz-box-shadow: 0px 0px 50px #BDBDBD;
-webkit-box-shadow: 0px 0px 50px #BDBDBD;
p/s: change the red word to ypur fav color at http://html-color-codes.info/ 
this tutorial can be used only in some templates.

Tutorial Show / Hide Followers Box



Tutorial for Template Designer
1 . Design > Page Elements > Add A Gadget > Edit HTML / Javascript
2. Copy code below and paste at Edit HTML / Javascript space ;

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dashed #bdbdbd;
background:url(PHOTOS URL FOR BACKGROUND) #2ECCFA repeat;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
GOOGLE FRIEND CONNECT CODE
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div>
4 . Get GOOGLE FRIEND CONNECT CODE @www.google.com/friendconnect/. Change the orange bold words to any color code that you prefer for border. Get the code @html-color-codes.info and change where necessary especially the bold one. Then, Save.


Not finished yet. You need another step.


1 . Still at page elements, click again Add A Gagdet > Edit HTML / Javascript
2 . Copy code below and paste at Edit HTML / Javascript space ;
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; bottom:260px; left:245px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="92" height="71" src="PHOTOS URL FOR FOLLOW BUTTON" alt="push" title="Follow Me"/></a>
</div>
3 . Change where necessary especially the bold one. Dark blue : follow button position . Green : Follow button size . Then, save.


Tutorial for Blogskin / Classic Template

1 . Template > Ctrl + F code </body>
2 . Copy code below and paste before / above </body> :

<style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;F
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>< span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">    <div style='display:scroll; position:fixed; top:
5
px;right:
10
px;'>

    <a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="58" height="
20
"src="

PHOTOS URL FOR FOLLOW BUTTON

" alt="PUSH" title="Follow"/></a>
    </div>


<style type="text/css">
#at{position:fixed;right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dashed
#F5D0A9
;

background:url( PHOTOS URL FOR BACKGROUND
) #F5D0A9 repeat;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
CODE GOOGLE FRIEND CONNECT / CODE FOLLOWER
</div></div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
3 . Preview > Save Template.

Tutorial & Freebies Underline

1 . Design > Edit HTML
2 . Ctrl+F u {
3 . Paste code underline below u {


Double Underline
color:#AC58FA;
border-bottom:2px double #BE81F7;
}
Single Underline 
text-decoration:none;
border-bottom: 2px solid #ff95ab;
padding: -3px;
}
Dashed Underline 
text-decoration:none;
border-bottom: 2px dashed #ff95ab;
padding: -3px;
}
Ridge Underline
text-decoration:none;
border-bottom: 4px ridge #ff95ab;
padding: -3px;
}
 Dotted Underline
color:#AC58FA;
border-bottom:3px dotted #BE81F7;
}

 Groove Border Underline
text-decoration:none;
color:#AC58FA;
border:3px groove #BE81F7;
padding: 3px;
}

Kindly no re-freebies.

Tutorial Disable Open Page Source + Highlight + Right Click

1 . Design > Edit HTML > Ctrl+F untuk search <body> 
2 . Gantikan code <body> kepade code berikut :
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
 3 . Save Template !

Back to Top button with KPOP idol

 Assalammualaikum

Paste the code below at Dashboard > Layout >Add Gadget > HTML/JAVASCRIPT.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="YOUR IMAGE CODE?t=1287452175"
 /></a>
  Change YOUR IMAGE CODE to your favorite pics code such as below that i've design except yuri's pics.
  You can change right to left position if u want.
  Good Luck ! 

http://3.bp.blogspot.com/-rp8nvxZMXPE/Tw1b5d9EMlI/AAAAAAAACAg/5tY2FpjEv2w/s1600/boyfriend_icon.png
http://1.bp.blogspot.com/-Uy-fPE43rPA/T0DWTm6iZCI/AAAAAAAACMU/PoiiTAXc3BY/s1600/ledapple-topbutton.png
http://1.bp.blogspot.com/-TaRQ2eM4lcA/UQOfzLg5BpI/AAAAAAAAEik/sF-34tCslhY/s1600/topbutton.png
http://4.bp.blogspot.com/-vU-i_wGbazw/UQRwzt27OiI/AAAAAAAAEvw/uPFSmBBzXus/s1600/exo.png

Freebies Infinite Header

http://1.bp.blogspot.com/-6Coj-HbojDk/Tzc9_js23HI/AAAAAAAACJo/gW0CRn0Exoo/s1600/trulyinspirit.png
http://3.bp.blogspot.com/-C8lbOeRv2TY/T0iPBMg4tfI/AAAAAAAACPM/xA-Y7QXvnq4/s1600/2nd+invasion.png

Tutorial Guna Blogskin

1 . Pilih skin di www.blogskins.com .
2 . Klik pada skin pilihan . Scroll sikit ke bawah . Klik 'Blogger Main' seperti di bawah . Klik untuk tumbesaran .


3 . Check folder download, buka file blogskin yang di-download tadi.
4 . Design > Edit HTML . Scroll ke bawah . Bawah sekali, klik 'Revert to Classic Template' 
5 . Paste code yang di-download tadi di ruangan Template seperti di bawah :



NEW VERSION




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


Code yang boleh ditukar mengikut pilihan :
1 . Background blog 
Cari (Ctrl+F) code > body {
bawahnya ada background:url(..............)
boleh tukar link dalam kurungan (............) kepada link background kesukaan.


2 . Blog ID
Paling penting, jangan lupa tukar blog ID. Cari (Ctrl+F) code blogID= 
Ada nombor banyak-II kan ? Tukar nombor tu kepada blog ID sendiri. Mana nak dapat blog ID ? Rujuk gambar bawah ni. Klik untuk tumbesaran.


3 . Header
Cari (Ctrl+F) code <head> 
Copy code ini : URL HEADER"></center>
Paste atas <head>
Ada sesetengah blogskin tak perlukan header. Bergantung pada blogskin yang dipilih.

4 . Gadget
Contoh gadget disable right click. Copy code gadget, kemudian paste di atas code </body> .