Monday 4 May 2015

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

12 comments:

  1. wahh ! nak cuba ! xD

    ReplyDelete
  2. Welcome...do try it.. (^^,)

    ReplyDelete
  3. I copy this tutorial ..I credits you..okay?

    ReplyDelete
  4. saya pakai ya kak.
    kak, saya nak tanya. gimana cara tambah nomor untuk ganti page itu?

    ReplyDelete
  5. izin gunakan ya :)
    thanks so much ^^

    ReplyDelete
  6. Hai, Aku Areta! aku sudah coba tapi Kok yang baris ke 70 nggak bisa ya? Tulisannya : ''Kesalahan saat mengurai XML, baris 70, kolom 1: Content is not allowed in trailing section."

    ReplyDelete
    Replies
    1. Mungkin salah memasukkan code nya.. kamu letak code nya di HTML template..Sepatutnya masukkan code di bahagian HTML page

      Delete