Saturday 28 September 2013

Sidebar Navigation

5 Comment(s) so far

Assalamualaikum and hi everyone...i'm back with a new tutorial...okay this tutorial is about the navigation bar that can be put at the sidebar of blog...

NO RE-POST / RE-TUTORIAL !!



Interested with the navigation bar? let's add it to your blog

  1.  For template designer : Log in blogger --> Layout --> Add Gadget --> HTML/Javascript
  2.  For blogskin : Log in blogger --> Template
  3.  Copy below code and paste it in HTML/Javascript gadget or between sidebar code for blogskin...

 <head>
<link href="http://fonts.googleapis.com/css?family=Chewy" rel="stylesheet" type="text/css"></link>
</head>

<style>
a.navbar {
font:11px arial;
text-transform:uppercase;
letter-spacing:4px;
text-align:center;
text-decoration:none;
color:#444444;padding:6px;
background-color:#FFFCFD;
width:160px;display:block;
border-left:10px solid #FFFDD3;
border-right:10px solid #FFFDD3;
border-bottom:1px solid #FFEBEB;
border-top:none;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.navbar:hover{
background:#FFE5E5;
border-right:10px solid #FFD2D2;
border-left:10px solid #FFD2D2;
border-bottom:1px solid #FFD2D2;
box-shadow:none;
}
</style>
<center><div style="background:#FFDCDF;color:#FFFFFF;text-shadow:0px 1px 1px #777777;padding:3px;font:20px chewy;width:187px;align:center;">Navigation</div>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
<a class="navbar" href="http://kawaiilady.blogspot.com/" title="YOUR TITLE" >TITLE TWO</a>
</center>
<center><div style="background: #FFFDD3;color:#FFFFFF; text-shadow:0px 1px 5px #888888;height:9px;font:20px chewy;width:193px;align:center;"></div>

Customize the style :

Fuchsia text : Color of the font
Red text : Background color
Blue text : Color of the border
Orange text : Title of the navigation
Purple text :Title of link
Green text : Title number two
Orange highlighted : Link of page
Blue highlighted : Width of the navigation

How to get the page link ?
Home --> Page --> view --> Copy the link --> replace the link given ( refer below picture )


Okay after everything is done, save it happily...for template designer don't click on rich text on the HTML/Javascript gadget to avoid messing the code...

Comments and credit are really, truly appreciated...^^,

Saturday 21 September 2013

Freebies : Polkadot background

5 Comment(s) so far

Assalamualaikum dan hai semua...^^, okay sekarang saya nak bagi freebies background lagi...

I tweak the color by myself so, don't re-contribute or re-freebies...

If you want to copy image url...
Firstly click image --> Right click --> Copy image url / Copy image location...

If you want to save the image...
Click image --> Right click --> Save image as...












Okay that's all...Do comments if you take it...

Wednesday 18 September 2013

Blogskin : Sweetest Diary

22 Comment(s) so far



My blog skin are free to use...You don’t have to pay anything :-)
But because of this, they come with rules.Please follow the rules as I have put in a lot of effort into creating the best blog skin I can for you guys.

What you can do to this skin...

✔ edit the theme as much as you like
✔ move the credits onto another page within the blog ( make it visible)

What you can't do to this skin...

✘  Remove any credit in the skin
✘  Steal or claim my blog skin as your own
✘  Redistribute my blog skin
✘  Use my skin as a base code for your skin


Preview / Code / Download

Features :
✿  Header section
✿  Comment box
✿  Navigation
✿  Pages

Do comments okay... ^^,

Tuesday 10 September 2013

Blogskin : Kawaii World

22 Comment(s) so far


My blog skin are free to use...You don’t have to pay anything :-)
But because of this, they come with rules.Please follow the rules as I have put in a lot of effort into creating the best blog skin I can for you guys.

What you can do to this skin...

✔ edit the theme as much as you like
✔ move the credits onto another page within the blog ( make it visible)

What you can't do to this skin...

✘  Remove any credit in the skin
✘  Steal or claim my blog skin as your own
✘  Redistribute my blog skin
✘  Use my skin as a base code for your skin




Features :
✿  Music player
✿  Comment box
✿  Navigation
✿  Writer name below post

Do comments okay... ^^,

Hide music player 2

8 Comment(s) so far

Assalamualaikum and hola people...since my first hide music player post are quite popular because many people view the post...so, I decide to make another hide music player tutorial...



Firstly : for template designer , denim , simple ,watermark...
Dashboard --> Layout --> Add gadget --> HTML/Javascript

Firstly : for blogskin , classic template...
Dashboard --> template --> paste the code after  </style>

The codes :

<style>
#cornerplayer
{z-index:999;
background-color:#FFF4F4;
border:2px solid #FFDEDE;
width:45px;
height:45px;
border-radius:0px 0px 50px 0px;
-moz-border-radius:0px 0px 50px 0px;
position:fixed;
overflow:hidden;
top:0px;
left:0px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}

#cornericon
{margin-bottom:44px;
margin-top:13px;
margin-left:-9px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}

#cornerplayer:hover
{width:200px;
height:52px;
-moz-border-radius:0px;
border-radius:0px;
box-shadow:0px 0px 2px 2px #FFE5E5;
}

#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:10px;
}
</style>
<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"/></div>
<div> MUSIC CODE HERE </div>    
</center> </div><!--cornerplayer-->

The notes :

Blue text : Color code HERE
Orange text : Width and height of the music player before and after hover
Red text : Music icon URL can be find HERE
Fuchsia text : Music player code use billy player or use THIS or THIS player
Find music HERE for billy or cute music player...

Ok thats all...Kalau tak faham tanyalah...see you again in my next post..

Thursday 5 September 2013

Cute comments display ( Blogskin )

29 Comment(s) so far

Assalamualaikum w.b.t dan hai semua...^^,  disebabkan ramai yang belum tahu cara nak tambah dan cantikkan comment box untuk blogskin jadi, saya buatlah tutorialnya...
Don't RE-POST this tutorial !! it's really hard to tweak the code... :'(

Want to have a comment box exactly like above? follow below instructions...

The instruction :
  1. Sign in www.blogger.com
  2. Choose Template
  3. Search </style> using CTRL+F or F3
  4. Copy below code and paste it above / before </style>
/* Comment Start
----------------------------------------------- */
#comments h4 {
margin:10px;text-align:center; color: #444444; text-shadow: 1px 1px 1px #B2D5FF; border: 2px dashed #FFFFFF;font-weight:normal;font:20px short stack;
-webkit-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;border-radius: 15px;
box-shadow:0px 0px 4px 4px #DFEEFF;background:#F5FAFF;
}
#comments-block {
width:460px;
margin:1.5em;
background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3853/3853878.png);
color:#555555;
font:11px short stack;
padding:5px;box-shadow:0px 0px 4px 4px #FFF7DD;
border:2px dashed #FFFFFF;border-radius:20px;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #FFFFFF;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block {
background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3853/3853878.png);
border-radius:30px;
}
.comment-body p {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(http://i.imgur.com/tDtge.png) repeat top left;
border-radius: 25px;
box-shadow:0px 0px 4px 4px #EBF6FF;
border:2px dashed #FFFFFF;
}
.comment-timestamp {
margin:1em;
padding:5px;margin-bottom:2em;
color:#666666;width:200px;
box-shadow:0px 0px 4px 4px #DFEEFF;background:#F5FAFF;
border:2px dashed #FFFFFF;border-radius: 25px;
}
.comment-data {
background:#FFFFFF;
box-shadow:0px 0px 4px 4px #F9EBFF;
border:2px dashed #FFFFFF;border-radius: 25px;
margin-top:5px !important;margin-bottom:10px !important;
padding:3px;width:170px;
color:#666666;text-align:center;
}
.comment-date {
background:#FFFFFF;
box-shadow:0px 0px 4px 4px #FFF2F2;width:170px;float:right;
border:2px dashed #FFFFFF;border-radius: 25px;
margin-top:5px !important;margin-bottom:10px !important;
padding:3px;color:#666666;
text-align:center;
}
.deleted-comment {
font-style:italic;
color:#B2B2B2;
}
/* Comment Ends
----------------------------------------------- */ 


Let's edit the code !
Background can be find in my freebies page or google...

Blue text : Color code of the text...
Red text : Color code of the border...
Purple highlighted : Color code of the shadow...
Orange text : Background color code...
Fuchsia text : Background image URL...


Search  </head>  using F3 or ctrl+F
Then, copy below code and paste it above / before  </head>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'/>
Then search for </Blogger> and paste the codes below before / above it.
If there is two </Blogger> code paste it on both codes

<br /><br />
<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a><h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<div style="width:445px;padding:5px;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-date" id="<$I18NAtCommentTimeWithPermalink$></dt>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
      </dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
</div>
<center><p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
    </div>
</ItemPage></center>


Don't edit the code to avoid messing the code...
Next,you can save it...preview on single post page with comments...
Example : http://tetingblo.blogspot.com/2012/12/vintage-flower-picture.html instead of http://tetingblo.blogspot.com

Penatnya buat tutorial nie... u,u" kalau dah jadi tuw rajin-rajinlah comment yer...^^, kalau tak faham tanyalah...
...sekian terima kasih...

Tuesday 3 September 2013

Freebies : Mini cursor

14 Comment(s) so far

Assalamualaikum dan hai semua...Ok, sekarang saya nak bagi freebies mini cursor...do take it if you want and do comments...

 How to add this cursor? 

Search  ]]></b:skin> for template designer and  </style>  for blogskin using F3 or CTRL+F then, copy and paste below code underneath / above the code...
body, a, a:hover {
cursor: url(YOUR CURSOR URL), auto;}
Change the blue highlighted text with your own cursor url…

How to copy image url ?
Firstly click image --> Right click --> Copy image url / Copy image location...

Hand cursor

                                                                                  

Pointer cursor

 imageimageimageimageimageimageimageimageimage               

Bow cursor

image              image                   

Flower cursor

                 

Star cursor

        

Cute cursor

                   
image image 
........................................................................................................................................................
Don't re-freebies without proper credit..If you want to re-freebies it credit with a back link to me...