Membuat Kotak Pemberitahun Cantik

Sore sobat blogger, Masa-masa pemilihan Cagub-Cawagub telah berakhir, saat nya Kolom Tutorial™ sharing Tutorial Blog lagi, Meskipun tutor ini mungkin sudah pada tahu, namun gak ada salahnya ana share trik ini, yaa siapa tau aja diantara sobat Blogger ada yang belum tau, hehhehehhe.

Baiklah sobat untuk tutor kita kali ini tentang bagaimana "Membuat Kotak Pemberitahuan Cantik" Untuk Freviewnya seperti pada gambar dibawah :




Tutornya :
1. Seperti biasa Login dulu ke akun Blogger Sobat
2. Klik Tata Letak
3. Klik Add Widget
4. Klik HTML./Java Script
5. Kopi Pasteu Kode Dibawah ini :
 <div class="notification warning hideit">
<p><strong>WARNING ( Atau isi sesuai keinginan sobat ): </strong>Isi dengan keterangan sobat</p>
</div> 
 <div class="notification information hideit">
<p><strong>INFORMATION ( Atau isi sesuai keinginan sobat ): </strong>Isi dengan keterangan sobat</p>
</div> 
 <div class="notification success hideit">
<p><strong>SUCCESS ( Atau isi sesuai keinginan sobat ): </strong>Isi dengan keterangan sobat</p>
</div> 
 <div class="notification failure hideit">
<p><strong>FAILURE ( Atau isi sesuai keinginan sobat ): </strong>Isi dengan keterangan sobat</p>
</div> 
6. Klik Save.
7. Klik TemplateKlik Edit HTML Centang Exspand widget Template
8. Letakan Kode CSS Dibawah ini Tepat di Atas Kode ]]></b:skin>
 body {
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    color: #999999;
}
p {
    color: #999;
    line-height: 18px
}
.main_container {
    width: 400px;
    margin: 0 auto;
}
.notification {
    line-height: 30px;
    cursor: pointer;
    clear: both;
    height: 30px;
    margin: 8px 0px 8px 0px;
    padding: 20px 25px 10px 60px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.notification strong {
    margin-right: 5px;
}
.notification p {
    font-size: 11px;
    padding: 0px;
    margin: 0px;
    color: #333333;
}
.message p {
    font-size: 11px;
}
.warning {
    background-image: url(http://2.bp.blogspot.com/-fo0Y8_Jx21Y/USsNzjwEg2I/AAAAAAAABWQ/J2ZydO_dWUw/s1600/error.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #FFC237;
    background-color: #FFEAA8;
    color: #826200;
}
.success {
    background-image: url(http://4.bp.blogspot.com/-UszcUAA2Ilg/USsNzshIDKI/AAAAAAAABWI/o99vHOw0gvY/s1600/accept.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #99C600;
    background-color: #EFFFB9;
    color: #3C5A01;
}
.failure {
    background-image: url(http://2.bp.blogspot.com/-GxOY8UpGKVM/USsN0A0oB8I/AAAAAAAABWY/w5AW038Cb3c/s1600/exclamation.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #EB5339;
    background-color: #FCCAC2;
    color: #AC260F;
}
.information {
    background-image: url(http://3.bp.blogspot.com/-dtOmp_Joqtg/USsN0fBDlFI/AAAAAAAABWc/yrPCYsjjR4M/s1600/information.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #418ACC;
    background-color: #D0E4F4;
    color: #235685;
}
.lightbulb {
    background-image: url(http://2.bp.blogspot.com/-NiWT2UWVICI/USsN0uiaIHI/AAAAAAAABWo/65eG45bVgHk/s1600/lightbulb.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #D3A350;
    background-color: #FEF0CB;
    color: #835F21;
}
.messages {
    background-image: url(http://4.bp.blogspot.com/-BBNH8UZbtZA/USsNziW1iXI/AAAAAAAABWM/bV5FC2eeI_A/s1600/email.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #42B4FF;
    background-color: #9DDFFF;
    color: #835F21;
} 
9. Kemudianletakan Kode Javascript dibawah ini diatas kode  </head>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {


    // Closing notifications
    // this is the class that we will target
    $(&quot;.hideit&quot;).click(function() {
    //fades the notification out  
        $(this).fadeOut(700);
    });
  
});  
  
</script> 
10. Kllik Save

Keterangan : 
Bagi sobat Blogger yang sudah memasang kode js :
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
Tidak usah dipasang lagi...........!!!


12 Responses to "Membuat Kotak Pemberitahun Cantik"

  1. wah keren soat tutornya boleh di coba nih,,,,makasih yah sudaah berbagi

    ReplyDelete
  2. keren banget warna warni...hahayyy

    ReplyDelete
  3. keren tapi sob, itu kerjanya bagaimana?
    apakah saat user laoading tau bagiamana?

    ReplyDelete
    Replies
    1. Mas Reki, tutor ini dibuat jika kita ingin menampilkan semacam tagheadline di postingan, atau bisa juga buat judul, tapi bukan judul utama postingan, kurang lebih gitu mas.

      Delete
    2. seperti itu yah sob, maaf soalnya saya katrok -,-

      Delete
    3. Mas reki ane juga bukan bisa tapi sambil belajar sambil berbagi gitu mas.

      Delete
  4. Tutorialnya kren-kren neh bro. salute....

    ReplyDelete
  5. keren,ni mas artikelnya trmksih'y mas

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat