ทำข้อความแจ้งเตือนบนหน้าเว็บ Blog ของเราอย่างง่ายด้วย CSS3

วันอาทิตย์ที่ 9 พฤศจิกายน พ.ศ. 2557

0
ทำข้อความแจ้งเตือนบนหน้าเว็บ Blog ของเราอย่างง่ายด้วย CSS3

1. เข้าไปที่ >>> แม่แบบ >>> แก้ไข HTML >>> ค้นหาโค้ด ]]></b:skin>

2. เมื่อหาพบแล้วให้วางโค้ดนี้ไว้ ก่อนหน้า ]]></b:skin

#notifjo { 
right: 10px; /* posisi di paling kanan */ 
top: 10px; /* posisi di paling atas */ 
width: 320px; /* lebar notif */ 
height: auto; /* tinggi notif otomatis */ 
overflow: hidden; 
background: rgba(255,255,255,0.9); /* warna background */ 
border-radius: 5px; /* nilai sudut bundar */ 
border: 1px solid #ddd; /* garis batas luar */ 
z-index: 999999; 
position: fixed; /* posisi melayang */ 
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */ 
-moz-animation: fadeOutnotif 10s linear forwards; 
-o-animation: fadeOutnotif 10s linear forwards; 
-ms-animation: fadeOutnotif 10s linear forwards; 
animation: fadeOutnotif 10s linear forwards; 
} 
#notifjo a { 
display:block; 
text-decoration:none;} 
#notifjo span { 
display: block; 
padding: 15px 15px; 
pointer-events: none; 
text-align: left; 
float: left; 
} 
#notifjo span h2 { 
font-size: 12px; /* Ukuran text */ 
line-height: 21px; 
color: #222; /* Warna text */ 
font-weight: normal; 
letter-spacing: 0px; 
} 
/* Blog johanes djogzs.blogspot.com */ 
@-webkit-keyframes fadeOutnotif { 
0% { opacity: 1;} 
10% { opacity: 1;} 
90% { opacity: 1; -webkit-transform: translateY(0px);} 
99% { opacity: 0; -webkit-transform: translateY(-30px);} 
100% { opacity: 0;} 
} 
@-moz-keyframes fadeOutnotif { 
0% { opacity: 1;} 
10% { opacity: 1;} 
90% { opacity: 1; -moz-transform: translateY(0px);} 
99% { opacity: 0; -moz-transform: translateY(-30px);} 
100% { opacity: 0;} 
} 
@-o-keyframes fadeOutnotif { 
0% { opacity: 1;} 
10% { opacity: 1;} 
90% { opacity: 1; -moz-transform: translateY(0px);} 
99% { opacity: 0; -moz-transform: translateY(-30px);} 
100% { opacity: 0;} 
} 
@-ms-keyframes fadeOutnotif { 
0% { opacity: 1;} 
10% { opacity: 1;} 
90% { opacity: 1; -moz-transform: translateY(0px);} 
99% { opacity: 0; -moz-transform: translateY(-30px);} 
100% { opacity: 0;} 
} 
@keyframes fadeOutnotif { 
0% { opacity: 1;} 
10% { opacity: 1;} 
90% { opacity: 1; -moz-transform: translateY(0px);} 
99% { opacity: 0; -moz-transform: translateY(-30px);} 
100% { opacity: 0;} 
}

3. จากนั้นให้ค้นหาโค้ด <body> เมื่อหาพบแล้วให้วางโค้ดข้างล่างนี้ไว้ก่อนหน้า <body>

4. แก้ไขข้อความจากข้อ 3. ตามใจชอบเลยจ้า ^^

ปล. ข้อความจะอยู่ได้ 10 วิ แล้วจะหายไปเองจ้า

เครดิต : http://www.djogzs.com/2013/02/notifikasi-sederhana-dengan-css3.html

0 ความคิดเห็น:

แสดงความคิดเห็น

โปรดใช้คำที่สุภาพด้วยครับ

Kanhathip

วันอาทิตย์ที่ 9 พฤศจิกายน พ.ศ. 2557

0
ทำข้อความแจ้งเตือนบนหน้าเว็บ Blog ของเราอย่างง่ายด้วย CSS3

0 ความคิดเห็น:

แสดงความคิดเห็น

f

เมนู

บทความที่ได้รับความนิยม

Tag

จำนวนการดูหน้าเว็บรวม

Download

Trending Template

Best Patner

Kanhathip

วันอาทิตย์ที่ 9 พฤศจิกายน พ.ศ. 2557

0 ทำข้อความแจ้งเตือนบนหน้าเว็บ Blog ของเราอย่างง่ายด้วย CSS3

0 ความคิดเห็น:

แสดงความคิดเห็น

f

เมนู

บทความที่ได้รับความนิยม

Tag

จำนวนการดูหน้าเว็บรวม

Download

Trending Template

Best Patner

0
ทำข้อความแจ้งเตือนบนหน้าเว็บ Blog ของเราอย่างง่ายด้วย CSS3