Tutorial Menggunakan Fungsi CSS3 - " :Before And :After Pseudo Elements " Pada " Sidebar Title "

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL + F) kod dibawah:

</head>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah , sebelum kod </head>

<style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}
.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}
.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}
.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}
.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}
.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}
</style>

7. Klik Preview template dan jika ok, klik Save Template

8. Klik Layout --->  Add a Gadget --->  HTML/JavaScript

9. Copy (CTRL+C) dan Paste (CTRL+V) salah satu kod dibawah pada ruang HTML/JavaScript

a) Biru :

 <div class="module blue">
<h2>Title in <a href="Link/URL">TAJUK SIDEBAR</a></h2>
</div>

b) Kuning :

 <div class="module yellow">
<h2>Title in <a href="Link/URL">TAJUK SIDEBAR</a></h2>
</div>

c) Hijau :

 <div class="module green">
<h2>Title in <a href="Link/URL">TAJUK SIDEBAR</a></h2>
</div>

d) Merah :

 <div class="module red">
<h2>Title in <a href="Link/URL">TAJUK SIDEBAR</a></h2>
</div>

Keterangan:

• Gantikan " Title in " dan " TAJUK SIDEBAR " dengan teks anda .
• Gantikan " Link/URL " dengan link anda.

9. Klik Save dan lihat hasilnya :)