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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh416fhv_GxfNF7elH-hII5RVB4O2sz4hqvZHwLY1H8rAfQ7vwv_ZgDm6NR7uKZRCrXGxRmIiMnCxmiWOqvAtIqm3lwZrZwfGyxwhOFDNQYe2JKvyU4FffULhDt6FPgJ1FtlGy45ZBqJOoZ/s1600/error.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #FFC237;
    background-color: #FFEAA8;
    color: #826200;
}
.success {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii9j9qpIqWYx67YaTRHkjP-OuZHDw2eQWmSwJLmLOo5o9N9xdhOzSIUeB6xRlOkg6ePV8Sy_nD2gYbCruLi8rPBj2YHkmUSDuAs7LeFCNYFCtKGKskubnqSEAs9EVCK1vK4gHS3-5kcSEN/s1600/accept.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #99C600;
    background-color: #EFFFB9;
    color: #3C5A01;
}
.failure {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjee73_1_CtlHHrdke2fpwL_iUWM_oMvlnBHOv_pGyASqHCvqkdrSDKoy-GqaCJZuA2xA84VSR_z4YjVD0jOHZNyZg7D8TfHUQspIFA6IdKy_MREJTJ8CG9CbaDjm108cv0rr5eh-_6N5c-/s1600/exclamation.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #EB5339;
    background-color: #FCCAC2;
    color: #AC260F;
}
.information {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNP3JFQsHsTLpNtrwzkW47gPkijSgZ175i10D8M_DkHXTB3Ksb-01idbXydWKYV0CGuMuPyqfnh8Cn3oFnxXxoQoYgKjon9sd2VQvDbeIfz_nPvlK1Md1qjIVReqnLoOfXCW_naC4KX6II/s1600/information.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #418ACC;
    background-color: #D0E4F4;
    color: #235685;
}
.lightbulb {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtdbuJ9-q2606aiEmQ1W3pqQ3fA5JjnMNiGTY0t5maKsoOEQOiQCsaYiIxFecQgbALJTP2tuDdsFG-aaT3E4QQN19YASn8VJAhi2f9WxCNuyK2DdbbqiQXmrj8G1Fq7WgYZQaooGz7-nx/s1600/lightbulb.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    border: 2px solid #D3A350;
    background-color: #FEF0CB;
    color: #835F21;
}
.messages {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8v1TOqps6xPl2g9txeJE23mwuc60Amf4DcuYqAyLcq34hizhMZjt0CB1fJWDebM3FunHs773AupdHZFFzEHCwCr471h6vtVTGCY_yggyXmNtcoHAISGXkz1h-R5Omzt8vNSq2t3A7y40/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...........!!!

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post