How to Make Cute Link List With Title

Assalamualaikum and hello peeps...See you again with a brand new tutorial..Today's tutorial is about how to make cute  tutorial / freebies list with title.

Okay, here we go...

• 1. Firstly, Log in your blogger account.
• 2. Go to Dashboard > Page > Make new page / Edit already created page.
• 3. Click on HTML   
• 4. Copy below code and paste it on the HTML section.

<style>
.non-semantic-protector { position: relative; z-index: 1; }
.tape {
 font:18px Tahoma !important;
 width: 390px;
 position: relative;
 background: #c2deff;
 color: #FFFFFF;
 text-align: center;
 padding: 5px 3px;
 margin: 15px auto 0px;
}
.tape:before, .tape:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1.0em;
 border: 1.0em solid #b7d8ff;
 z-index: -1;
}
.tape:before {
 left: -1.8em;
 border-right-width: 1.7em;
 border-left-color: transparent;
}
.tape:after {
 right: -1.8em;
 border-left-width: 1.7em;
 border-right-color: transparent;
}
.tape .tape-content:before, .tape .tape-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #9cc9ff transparent transparent transparent;
 bottom: -1.0em;
}
.tape .tape-content:before {
 left: 0;
 border-width: 1.1em 0 0 0.9em;
}
.tape .tape-content:after {
 right: 0;
 border-width: 1.0em 0.9em 0 0;
}
a.aa {
font:11px century gothic;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
color:#222222;padding:3px;
background:#FFFFD9;
width:355px;display:block;
border-bottom:2px solid #E1F3FF;
border-right:2px solid #E1F3FF;
border-left:2px solid #E1F3FF;
-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.aa:hover{
background:#E1F3FF;
}
</style>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>
<br />

The Notes :

Color code Here

Red Text : Background color.

Fuchsia Text : Text color.

Blue Text : Border color.

Orange Text : Link Category.

Purple Text : Post Link.

Yellow Text :  Post Title.

• 5. Click on Compose 
• 6. Then, Publish your page.

Okay, done...Comment if you're using this tutorial.Comment if you don't understand.