Put cute blog list...

Assalamualaikum dan hai semua...okay tadi ada yang request kat cbox...dia tanya macam mana nak letak bloglist dalam blogskin...okay so, here the tutorial...

This style doesn't look exactly like the style of the default style in template designer because there is no latest blog entry name and feed...

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