HOME OWNER TUTORIALS INFO & TIPS EXCHANGE CONTACT ME

Header Transparent (Simple Template)

Siapa yang gune simple template ? angkat tangan ! Dah buat header transparent kat photoshop ? Dah letak kat header blog ke ? Tak nampak transparent kan ? Memang lah , name jer simple template kan ? Ikut step cara menyelesaikan masalah tersebut di bawah :

1. Dashboard - Template - Edit HTML - Proceed

2. Seacrh kod di bawah menggunakan F3

/* Mobile

3. Copy kod di bawah

.header-outer, .content-inner { background-color: transparent; }.main-outer, .tabs-outer { background-color: $(content.background.color);}
4. Paste di atas kod /*Mobile

5. Search kod di bawah menggunakan F3

 .content-outer {
6. Di bawah kod .content-outer { terdapat kod seperti ini :

 -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333; box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

7. Delete kod tersebut

8. Preview & Save

Blockquote Like Mine :D



Eh-2 . Pasti ada yang tertanya-tanya , macam mana Effa buat blockquote mcm atas ni eh ? Dalam blog lain tak pernah pun wujud blockquote mcm ni.. Tu kerana , hasil gabungan kod-2 lain . Unik tak ? Suka tak ? Nak wat gak ? Jangan ikut step di bawah .

1. Dashboard - Template - Edit HTML - Proceed
2. Cari kod di bawah ni menggunakan F3

.post blockquote { 
3. Copy kod di bawah :

background:url(URL Background);
no-repeat 5px 10px !important;
background-position: 8px 10px;
border: 1px solid #ff8fc1;
border-left: 10px solid #ff8fc1;
font-weight: bold;
color: #D8D8D8;
padding: 6px;
-webkit-transition: 1.0s;
}
blockquote:hover {
background: transparent;
padding: 6px;
color: #000000;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transition: 1.0s;
}
4. Paste kod tersebut di bawah kod .post-blockquote {

ABC : URL Background blockquote
ABC : Warna Border (SINI)
Siap , Easy ke ? Easy rite ?

Link Membesar


 Dashboatd - Template - Edit HTML - Proceed
 Search kod bawah menggunakan F3

a:hover
 Copy kod di bawah ini :.

font-size: 20px;font-weight: bold;text-decoration: none;}
 Paste kod tersebut di atas kod a:hover

20 : Saiz font ..

 Preview & save

Tulisan Jadi Bold & Berwarna


==' Ignore my face
See my email, colored. Itulah yang dimaksudkan Tulisan Jadi Bold & Berwarna

 Dashboard -> Layout -> Add a Gadget -> HTML/Javascript

 Copy kod di bawah :
<center><span style='color: #FA58AC;'><b>12 April 2012</b></span></center>
FA58AC : kod warna tulisan
Klik [SINI] untuk mendapatkan kod warna

12 April 2012 : Gantikan dengan ayat korang

 Paste kod tersebut di dalam ruangan HTML/Javascript

 Save

Letak Copyright

Heyyoo dan selamat sejahtera ^^

Copyright © 2012 - 2013. All right reserved by Effa Nadia
 

 Dashboard -> Template -> Edit HTML

 Right click -> Select all -> Right click -> Cut -> Right click -> Paste [?]

 Cari kod di bawah menggunakan CTRL + F [?]

</body>
 Kalau dah jumpa, copy kod di bawah

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<center>AYAT COPYRIGHT</center>

AYAT COPYRIGHT : Ayat copyright korang.

 Paste kod tersebut di atas kod </body>

 Preview dulu, kalau tak ada apa-apa error baru save

Vertical Navigation

Assalamu'alaikum..

Vertical Navigation :

 Dashboard -> Layout -> Add a Gadget -> HTML/Javascript

 Copy kod di bawah :
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:240;
text align:left;
list-style-type: none;
font: normal 13px Century gothic;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-align:center;
text-decoration: none;
margin: 1px;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #000000; /*background of tabs (default state)*/
border-top-left-radius: 15px 15px;
border-top-right-radius: 15px 15px;
border-bottom-left-radius: 5px 7px;
border-bottom-right-radius: 20px 15px;}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
border-top-left-radius: 75px 15px;
border-top-right-radius: 55px 15px;
border-bottom-left-radius: 5px 7px;
border-bottom-right-radius: 20px 15px;
-webkit-transition-duration: 1s;
background-color: #000000;}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="URL BLOG">HOME</a></li>
<li><a href="URL TUTORIAL">TUTORIAL</a></li>
<li><a href="URL FREEBIES">FREEBIES</a></li>
<li><a href="LINK EXCHANGE">EXCHANGE</a></li>
</ul>
</div>
 Paste kod tersebut di bahagian HTML/Javascript

000000 : Warna navigation

Klik [SINI] untuk mendapatkan kod warna

WARNA MERAH : Link page. Etc : Home, tutorial dll
WARNA BIRU : Nama page

 Save

Sparkling Cursor


 Dashboard -> Layout -> Add a Gadget -> HTML/Javascript

 Copy kod di bawah

<script type='text/javascript'>


</script>


<script type='text/javascript'>
// <![CDATA[
var colour="#FFA0BA";
var sparkles=100;


var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";


star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}


}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {




tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
 Paste di bahagian HTML/Javascript

FFA0BA : Warna sparkle
Klik [SINI] untuk mendapatkan kod warna

 Save