Cara Membuat Notice Di Blog

Halo sobat Blogger, kali ini saya akan memberi Tutorial nih, yaitu Cara Membuat Notice Di Blog.
Apakah sobat Blogger ingin memberi tau kepada pengunjung blog anda untuk jangan lupa Subscribe email atau apalah. hehe

Silahkan liat dulu Screenshotnya

Jika ingin seperti itu ikuti langkah-langkah dibawah ini:
1. Masuk ke Akun Blogger sobat
2. Pilih Template
3. Klik Edit HTML ( jangan lupa cadangkan/pulihkan dulu)
4. Cari kode ]]></b:skin> ( biar lebih gampang gunakan Ctrl + F )
5. Masukan kode dibawah ini tepat diatas kode ]]></b:skin>

Klik show untuk melihat

.container {right: 10px;top: 10px;margin: 20px auto;width: 380px;z-index: 999999;position: fixed;-webkit-animation: fadeOutnotif 10s linear forwards; /* Waktu notifikasi 10 detik */-moz-animation: fadeOutnotif 10s linear forwards;-o-animation: fadeOutnotif 10s linear forwards;-ms-animation: fadeOutnotif 10s linear forwards;animation: fadeOutnotif 10s linear forwards;}.container .notif {margin: 10px 0;}.notif {position: relative;padding: 25px 30px 25px 100px;min-height: 50px;line-height: 22px; background: white;border-radius: 2px;}.notif:before {content: '';position: absolute;top: 25px;left: 30px;width: 40px;height: 40px;border: 5px solid;border-radius: 25px;}.notif p {font-size: 11px;color: #666;}.notif-title { margin: 0 0 5px; font-size: 14px; font-weight: bold; color: #333;}.notif-title:before, .notif-title:after {content: ''; position: absolute;background: white;border-radius: 2px;}.notif-notice:before {background: #a7d155;border-color: #8fb14f;}.notif-notice .notif-title:before, .notif-notice .notif-title:after {top: 44px;left: 55px;width:4px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.notif-notice .notif-title:after {top: 50px; left: 48px;width: 8px;height: 4px;}.notif-controls { position: absolute; top: 0; right: 0; height: 16px; padding: 4px 3px 5px;background: #f0f0f0;border: solid #dcdcdc; border-width: 0 0 1px 1px;border-radius: 0 2px;}.notif-controls > a {position: relative;float: left;margin: 0 1px;width: 16px;height: 16px; font: 0/0 serif;text-shadow: none;color: transparent;}.notif-minimize:before {content: '';position: absolute;top: 11px;left: 4px;width: 7px;height: 2px;background: #bbb;}.notif-minimize:hover:before {background: #888;}.notif-zoom:before {content: '';position: absolute;top: 6px;left: 3px;width: 5px;height: 3px;border: 2px solid #bbb;}.notif-zoom:hover:before {border-color: #888;}.notif-close:before, .notif-close:after {content: '';position: absolute;top: 4px;left: 7px;width: 2px;height: 10px; background: #bbb; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.notif-close:after {top: 8px;left: 3px;width: 10px;height: 2px;}.notif-close:hover:before, .notif-close:hover:after {background: #888;}.lt-ie9 .notif-notice .notif-title:before {content: '\2714';display: block;top: 25px;left: 30px;width: 50px;font: bold 18px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}.lt-ie9 .notif-notice .notif-title:after {display: none;}.lt-ie9 .notif-alert .notif-title:before {content: '\2716'; display: block;top: 25px;left: 30px;width: 50px;font: bold 17px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}.lt-ie9 .notif-alert .notif-title:after { display: none;}.lt-ie9 .notif-close:before {content: '\2716';display: block;top: 0;left: 0;width: 16px;font: 11px/19px 'Arial Unicode MS';color: #bbb;text-align: center;background: none;}.lt-ie9 .notif-close:after {display: none;}.lt-ie9 .notif-close:hover:before {color: #999;}@-webkit-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -webkit-transform: translateY(0px);}99% { opacity: 0; -webkit-transform: translateY(-30px);}100% { opacity: 0;}}@-moz-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@-o-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@-ms-keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}@keyframes fadeOutnotif {0% { opacity: 1;}10% { opacity: 1;}90% { opacity: 1; -moz-transform: translateY(0px);}99% { opacity: 0; -moz-transform: translateY(-30px);}100% { opacity: 0;}}

6. Selanjutnya cari kode </body>
7. Masukan kode dibawah ini tepat dibawah kode </body>

<div class="container">
        <section class="notif notif-notice">
          <h6 class="notif-title">Perhatian!</h6>
          <p>Silahkan Subscribe Email anda untuk mengetahui Artikel terbaru BlogYhan12 dan Jadilah Member Disini</p>
          <div class="notif-controls">
            <a href="#" class="notif-minimize">Minimize</a>
            <a href="#" class="notif-zoom">Zoom</a>
            <a href="#" class="notif-close">Close</a>
          </div>
        </section>
      </div>

Keterangan:
Teks berwarna Merah : Ganti sesuai dengan keinginan Anda

Untuk menguji berhasil atau tidak Silahkan klik PRATINJAU

Kalo ada yang tidak di mengerti silahkan Comment

Semoga Bermanfaat!!!

Like Fans Page kami : Download Software dan Games Gratis
Add My Facebook :  Dar Yan
Follow My Twitter : @daryan560