.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Friday, April 19, 2013
Membuat Pesan Warning Admin

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://lh5.googleusercontent.com/_U0QaeycS3vw/Taqu74WricI/AAAAAAAAAkE/eEcZwcRj0ko/close.png) 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://lh3.googleusercontent.com/_U0QaeycS3vw/Taqu7wyV6rI/AAAAAAAAAkI/726O1B0-O94/warning.png);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(){$(&#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>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 :>)

Tapi untuk tampilan edit html sekarang bikin males otak atik template nih :)

salam sukses selalu yah :)

deleteX

WAW. SAYA LIHAT DEMONYA BAGUS MAS... Terimakasih sudah berbagi !!

#Happy Blogging !! Salam Sukses. :))

deleteX

Keren juga ya, .btw kapan2 dicoba deh,, Makasih tutornya :D

deleteX

wah nemu skript keren disini, saya bungkus dulu sob, bisa dicoba nanti, trims

deleteX

keren ya pake conditional tag :D emang serbaguna kaya script php

deleteX

kunjungan sob, lama g maen ksini. sambil nyimak tuorialnya

koment back y dpostq yg baru :)

deleteX

hehe tapi lebih keren kok mas menurut saya :o

deleteX

hehe makasih :))
sukses juga ya mas..

deleteX

hehe yups bisa di bilang begitu mas 8-)

deleteX

okay.. tunggu saja mas :)

deleteX

say coba ah,tapi di blog yang lainnya deh,saya bungkus sob,kayaknya skrip baru nih.

deleteX

wah kelihatanya keren nih gan ,, apakah ini tidak mempengaruhi loading blog gan ?

deleteX

keren nih, buat peringatan visitor klo ada apa-apa, hehe... mantep postnya :D

deleteX

hehe silahkan deh mas dicoba ^o^

deleteX

cuman 10% mas menurut saya.. gak terlalu kok ;)

deleteX

hehe yups bener sekali mas \o/

deleteX

Klw di lihat dari DEMO nya mantap juga,,,,thanks sudah berbagi gan.
Salam kenal dari saya.. :D

deleteX

Mantap mas, serasa jadi Blogger Professional klw script di ats di pasang.. mantap dhhh

deleteX

ane nitip tutorial artikel terkait kaya mas dong

deleteX

okey.. salam kenal balik yah :)

deleteX

hehe silahkan pasang aja mas :D

deleteX

okey.. boleh
tunggu ya ??

deleteX

keren mas jin!, thx sdh berbagi ilmux *smile

deleteX

blogwalking plus OOT *smile

deleteX

hehe mau OOT soal apa mas ??
maaf baru sempat bls, maklum pelajar :p

deleteX

izin bookmark dulu gan artikelnya menarik hehehehe :)

deleteX

mau tanya gan,gimana cara bikin komentar admin yg ada tanda merah kayak agan? dibantu gan :D

deleteX

oh iya gan satu lagi cara bikin scrool kayak agan gimana?

deleteX

CSS Komentar Admin :
.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..

deleteX

kode nya taruh dimana-mana gan?

deleteX

gan template nya responsif banget,minta tutor nya dong,saya udah cari kemana-mana gk ketemu yg bisa.

deleteX

diatas :
]]></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

deleteX

gan komentar admin kayak punya agan kok gak berubah ya? saya pake komentar wordpress v.2 dari akangkismet

deleteX

owh..hehe sudah berbeda modelnya mas.. klo punya saya masih bawaan blogger, jadi nggak support simbol komentar adminnya :)

deleteX

gimana nih? help dong :)

deleteX

kayaknya kode nya sama kayak punya agan,
http://blog.kangismet.net/2012/12/komentar-bertingkat-seperti-wordpress-v2.html

deleteX

responsive atau simbolnya ??
klo simbolnya ane gak tau klo comments hack wp..

deleteX

coba seperti ini simbolnya :
.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}

deleteX

coba tanyakan ke Mas Abdul.. dia juga pakai comments hack wp

deleteX

minta tutor komentar kayak agan dong,

deleteX

gan coba liat blog saya : http://bmaster23.blogspot.com/
gimana cara bikin widget search nya kayak punya agan?

deleteX

klo komentar coba cabut ulang komentar wp milik kangismet..hingga tampilan default dari bawaan blogger

klo search itu bukan widget mas, itu dah satu paket sama menunya. mau yang bagaimana mksdnya ?? efek tampilan warna atau bagaimana ??

deleteX

biar tampilan kayak punya agan yg pake javascrip,k=kok blog mdf-blog bisa pake admin komen ya? agan tau gak caranya?

deleteX

klo punya ane bikin sendiri..
klo punya agan satu versi dengan mdf, sudah beda kode. coba visit kesana, tanya aja gpp :) hehe

deleteX

gan, maksutnya di selimuti tu apa ya ? tolong di bantu ya.. :-?

deleteX

di tunggu balesannya ya master jin :>) (h) (c)

deleteX

Artikel yang menarik dan patut dicoba, terimakasih sudah berbagi.

deleteX

gan gmn cara ngebuat back on top kyak punya agan?

deleteX
Catatan :
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
 
Back to Top