Tutorial : Put cute blog list

 

Konnichiwa minna

Miyoko mau bagi2 tuto lagi 

Thxx for Kak Ezah

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

LIVE PREVIEW

Style number one ( Only blog name )

<style>
.bloglist {
width:200px;
border:2px dotted #FFDAE0;
padding:10px;
text-align:left;
background:url(http://i.imgur.com/2EShx.png);
}
a.name {
font:13px century gothic;
letter-spacing:1px;
text-align:left;
color:#333333;
text-decoration:none;
padding-left:20px;
background:url(http://media.tumblr.com/62008af8ba59684acaa500115373b228/tumblr_inline_mnvwkh8qjb1qz4rgp.gif);
background-repeat:no-repeat;
background-size:15px;
-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.name:hover {
padding-left:30px;
background:url(http://media.tumblr.com/tumblr_lkl6qodkIv1qfamg6.png);
background-repeat:no-repeat;
background-size:15px;
}
</style>
<center>
<div class="bloglist">
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<br />
</center>
</div>

Style number two ( With blog description )

<style>
.bloglist {
width:230px;
height:120px;
border:2px solid #FFDAE0;
padding:5px;
text-align:left;
overflow-y:scroll;
overflow-x:hidden;
background:url(http://i.imgur.com/2EShx.png);
}
a.name {
font:13px century gothic;
text-align:left;
color:#333333;
border-bottom:1px solid #FFDAE0;
text-decoration:none;
padding-left:20px;
background:url(http://media.tumblr.com/62008af8ba59684acaa500115373b228/tumblr_inline_mnvwkh8qjb1qz4rgp.gif);
background-repeat:no-repeat;
background-size:15px;
}
.description {
font:12px century gothic;
text-align:left;
color:#333333;
background:#FFFFFF;
text-decoration:none;
}
</style>
<center>
<div class="bloglist">
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</center>
</div>
</div>

Style number three ( With description and title )

<style>
.bloglist {
width:230px;
height:120px;
border:2px solid #FFDAE0;
padding:5px;
text-align:left;
overflow-y:scroll;
overflow-x:hidden;
background:url(http://i.imgur.com/2EShx.png);
}
.btitle {
width:240px;
font:18px century gothic;
background:#FFDAE0;
padding:2px;
letter-spacing:2px;
color:#333333;
text-shadow:1px 2px 0px #FFFFFF,-1px -2px -0px #FFFFFF;
}
a.name {
font:13px century gothic;
text-align:left;
color:#333333;
border-bottom:1px solid #FFDAE0;
text-decoration:none;
padding-left:20px;
background:url(http://media.tumblr.com/62008af8ba59684acaa500115373b228/tumblr_inline_mnvwkh8qjb1qz4rgp.gif);
background-repeat:no-repeat;
background-size:15px;
}
.description {
font:12px century gothic;
text-align:left;
color:#333333;
background:#FFFFFF;
text-decoration:none;
}
</style>
<center>
<div class="btitle">My bloglist</div>
<div class="bloglist">
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</div><br />
<a class="name" href="http://kawaiilady.blogspot.com">Kawaii lady</a>
<div class="description">A blog that contain a lot of tutorial and freebies...
</center>
</div></div>

The notes :

Red text : The width and height of the blog list

Blue text : The color code FIND HERE

Purple text : Background URL HERE or search at Google

Green text : Mini icon URL FIND HERE
Fuchsia text : Blog link

Orange text : Blog name

Pink text : Blog link

Turquoise text : Blog description

Preview and save when you're done... ^^

Just ask if you don't understand...