JRTR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Berbagi informasi online, komputer, tutorial blogger, template untuk blogger, tips trik blogger.

Khamis, 13 September 2012

Cara Mudah Membuat Kotak Pemberitahuan (kotak pesan) di Blog


Trik kali ini Cara Mudah Membuat Kotak Pemberitahuan (kotak pesan) di Blog. Ada banyak cara untuk melakukan trik ini, di mana saya memperkenalkan sebuah aplikasi kecil Jquery dalam menciptakan Kotak Pesan Blog. Sebuah fitur khusus dari kerangka ini adalah bahwa pembaca dapat mematikannya jika diinginkan, sehingga memastikan estetika blog Anda.


Langsung saja ke langkah-langkahnya.

Langkah 1
Sign In Ke Akun Blog anda
Langkah 2
Masuk ke Rancangan
Langkah 3 
Edit HTML
Langkah 4
Copy Kode dibawah ini. dan pastekan diatas kode </body>



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzb01qtslSz9Lrn-fcvSivfBeGh8nOMalcNk1pfx-Uf2OC5QY9PPkNWNqOjvdN18k9mmJ7S-1PkagZoY9kV-F3UXN_pMcImpwa-LdBV3RMAr4mRm5Y4JsCazHYbIXcrJzSufYn0L1aF4/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaFlk0S4DY8esowr0y0KxmPUnjiJT0bgq1-2jBv4DAuRXWZ5klMj6GF0H5XDSbrjowMno1z0RCAH5ZfL_6NOo0SpS78f6SRYM1Pbs9FUN2XDCrONO_eCBBhp5xF7rgApkfzW3Zax3VHM/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>
Selamat datang di blog DeeJayHan, Tutorial blog Up To Date</p></div></b:if>


Langkah 5
Ganti tulisan yang dicetak TEBAL dengan sesuka anda.
Langkah 6
Simpan Template anda danlihat hasilnya sungguh sempurna Dengan 
Cara Mudah Membuat Kotak Pemberitahuan (kotak pesan) di Blog>>
Selamat Mencoba...!!! Semoga BermanFaat Untuk sahabat Artikel Cara Mudah Membuat Kotak Pemberitahuan (kotak pesan) di Blog>>> Terima Kasih,,,,

JokoRowoTlogoRejo Beri Komentar
Bagikan kepada teman!
Garis
300 x 250

0 komentar:

Catat Ulasan

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by JRTR Copyright © 2014 ~ 2015 Powered by Blogger
TOP