KAWAII LADY ♔

Saturday, 28 September 2013

Sidebar Navigation

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

Here the preview

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

For template designer : Log in blogger --> Layout --> Add Gadget --> HTML/Javascript
For blogskin : Log in blogger --> Template
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

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 :

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

Live preview

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> MUSIC CODE HERE </div>

</center> </div>

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 :

Sign in www.blogger.com
Choose Template
Search </style> using CTRL+F or F3
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;

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

Color code here...

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

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

Bow cursor

Flower cursor

Star cursor

Cute cursor

........................................................................................................................................................

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