Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Monday, September 25, 2017

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

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 jikalau 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 kesudahannya :)

    Sumber https://faiz-tutorial.blogspot.co.id/

    Share on Facebook
    Share on Twitter
    Share on Google+

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