Sebelumnya Posting mengenai Tombol Share Mirip Mas Sugeng, Emoticon Campur dari Master Jin dll. Kali ini saya akan share Cara Membuat Pesan Warning Admin. Dengan tampilan warna kuning yang mengagumkan, saya jamin pengunjung tidak segan-segan untuk melihat pesan dari Admin suatu Blog.
Apa sih guna Pesan Warning itu nanti mas ?? Mungkin sekedar untuk pemberitahuan bahwa Blog kalian sedang dalam perbaikan, entah dalam pengembangan atau sedang menjalani hal-hal sibuk. Jadi kesimpulannya para pengunjung lebih paham mengapa Blog kalian sudah sangat jarang update. Bagaimana ?? Cukup logika kan ?? Hehe. Berikut penerapannya langsung dari Master Jin
✓ Letakkan di atas kode
</body>
<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/AVvXsEgqBnUcOEH1vSiTqDP3U3f7ksySXMK-4jF2-Pk_8xS5W27jm2OUcWCHbVFvIxAMmmDppK3pp8_RvdHK79JoMIWhNajt8YHnItseeApyDwJ1SjbEuQ2aBTUiwPNbxbWcbF3gZSRaxVxJBEo/) 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/AVvXsEgCNIHRP9u9uWsPv6PKSu1PtXzuw0ac94-JQa4w7TB4WOOx0kDLX4q1UAyN-JBerx5SonKoK-i1u6A2CDjm7xgJja5pQBvR4q6ibD65z_svPagHmMuNsyVEDowSqUN6K3Q3Nb5Qj8YRpZA/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
✓ Tambahkan kode di bawah ini (letakkan dibawah kode yang di atas tadi)
<script type='text/javascript'>
$(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Pesan Admin :</strong>Mohon maaf apabila terdapat gambar posting yang kurang rapi dll.</p></div></b:if>
✓ Jangan lupa selimuti kode di atas.
1. Hanya muncul di halaman utama
<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE DI ATAS........
</b:if>
2. Muncul di halaman Posting
<b:if cond='data:blog.pageType == "item"'>
KODE DI ATAS........
</b:if>
Tulisan berwarna merah silahkan diganti dengan kata-kata kalian sendiri.
52 comments
Wahh Keren nih Master :>)
X ✓Tapi untuk tampilan edit html sekarang bikin males otak atik template nih :)
salam sukses selalu yah :)
WAW. SAYA LIHAT DEMONYA BAGUS MAS... Terimakasih sudah berbagi !!
X ✓#Happy Blogging !! Salam Sukses. :))
Keren juga ya, .btw kapan2 dicoba deh,, Makasih tutornya :D
X ✓wah nemu skript keren disini, saya bungkus dulu sob, bisa dicoba nanti, trims
X ✓keren ya pake conditional tag :D emang serbaguna kaya script php
X ✓kunjungan sob, lama g maen ksini. sambil nyimak tuorialnya
X ✓koment back y dpostq yg baru :)
hehe tapi lebih keren kok mas menurut saya :o
X ✓hehe makasih :))
X ✓sukses juga ya mas..
silahkan mas (o)
X ✓hehe boleh mas :)
X ✓hehe yups bisa di bilang begitu mas 8-)
X ✓okay.. tunggu saja mas :)
X ✓say coba ah,tapi di blog yang lainnya deh,saya bungkus sob,kayaknya skrip baru nih.
X ✓wah kelihatanya keren nih gan ,, apakah ini tidak mempengaruhi loading blog gan ?
X ✓keren nih, buat peringatan visitor klo ada apa-apa, hehe... mantep postnya :D
X ✓hehe silahkan deh mas dicoba ^o^
X ✓cuman 10% mas menurut saya.. gak terlalu kok ;)
X ✓hehe yups bener sekali mas \o/
X ✓Klw di lihat dari DEMO nya mantap juga,,,,thanks sudah berbagi gan.
X ✓Salam kenal dari saya.. :D
Mantap mas, serasa jadi Blogger Professional klw script di ats di pasang.. mantap dhhh
X ✓ane nitip tutorial artikel terkait kaya mas dong
X ✓okey.. salam kenal balik yah :)
X ✓hehe silahkan pasang aja mas :D
X ✓okey.. boleh
X ✓tunggu ya ??
keren mas jin!, thx sdh berbagi ilmux *smile
X ✓blogwalking plus OOT *smile
X ✓hehe mau OOT soal apa mas ??
X ✓maaf baru sempat bls, maklum pelajar :p
izin bookmark dulu gan artikelnya menarik hehehehe :)
X ✓boleh gan..
X ✓mau tanya gan,gimana cara bikin komentar admin yg ada tanda merah kayak agan? dibantu gan :D
X ✓oh iya gan satu lagi cara bikin scrool kayak agan gimana?
X ✓CSS Komentar Admin :
X ✓.comments .comments-content .icon.blog-author{transform:rotate(-225deg);-ms-transform:rotate(-225deg);-webkit-transform:rotate(-225deg);border-color:transparent #AD3000 transparent transparent;border-image:none;border-style:solid;border-width:15px;bottom:-13px;display:block;height:0;position:absolute;right:-23px;width:0}
CSS Scroll :
::-webkit-scrollbar {border: 5px solid #bbb;height:8px;width:13px;background:#ddd}
::-webkit-scrollbar-thumb:hover{background-color:#AD3000}
::-webkit-scrollbar-thumb{background-color:#963030;background-clip:padding-box;border:solid transparent;min-height:28px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);border-width:1px;padding:100px 0 0}
Silahkan diatur sendiri..
kode nya taruh dimana-mana gan?
X ✓gan template nya responsif banget,minta tutor nya dong,saya udah cari kemana-mana gk ketemu yg bisa.
X ✓diatas :
X ✓]]></b:skin>
search google banyak kok mas meresponsivekan.. emg bagian mana yang mau di responsive, mgkn saya bisa bantu. atau menuju kesini :
http://willyseo.blogspot.com/2013/02/Buat-Responsive.html
gan komentar admin kayak punya agan kok gak berubah ya? saya pake komentar wordpress v.2 dari akangkismet
X ✓owh..hehe sudah berbeda modelnya mas.. klo punya saya masih bawaan blogger, jadi nggak support simbol komentar adminnya :)
X ✓gimana nih? help dong :)
X ✓kayaknya kode nya sama kayak punya agan,
X ✓http://blog.kangismet.net/2012/12/komentar-bertingkat-seperti-wordpress-v2.html
responsive atau simbolnya ??
X ✓klo simbolnya ane gak tau klo comments hack wp..
coba seperti ini simbolnya :
X ✓.comment_admin .comment_body:before {transform:rotate(-225deg);-ms-transform:rotate(-225deg);-webkit-transform:rotate(-225deg);border-color:transparent #AD3000 transparent transparent;border-image:none;border-style:solid;border-width:15px;bottom:-13px;display:block;height:0;position:absolute;right:-23px;width:0}
gak bisa :'(
X ✓coba tanyakan ke Mas Abdul.. dia juga pakai comments hack wp
X ✓minta tutor komentar kayak agan dong,
X ✓gan coba liat blog saya : http://bmaster23.blogspot.com/
X ✓gimana cara bikin widget search nya kayak punya agan?
klo komentar coba cabut ulang komentar wp milik kangismet..hingga tampilan default dari bawaan blogger
X ✓klo search itu bukan widget mas, itu dah satu paket sama menunya. mau yang bagaimana mksdnya ?? efek tampilan warna atau bagaimana ??
biar tampilan kayak punya agan yg pake javascrip,k=kok blog mdf-blog bisa pake admin komen ya? agan tau gak caranya?
X ✓klo punya ane bikin sendiri..
X ✓klo punya agan satu versi dengan mdf, sudah beda kode. coba visit kesana, tanya aja gpp :) hehe
gan, maksutnya di selimuti tu apa ya ? tolong di bantu ya.. :-?
X ✓di tunggu balesannya ya master jin :>) (h) (c)
X ✓Artikel yang menarik dan patut dicoba, terimakasih sudah berbagi.
X ✓gan gmn cara ngebuat back on top kyak punya agan?
X ✓1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar
Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"
KONVERSI KODEEMOTICON