สร้างกล่องข้อความประชาสัมพันธ์สวยๆ ใต้หัวเรื่องบทความ




บทความนี้เป็นวิธีสร้างกล่องข้อความแจ้งเตือน หรือประชาสัมพันธ์ หรือ โฆษณา เมื่อมีการคลิกเข้าไปอ่านบทความ ซึ่งอาศัยการทำงานของจาวาสคริปต์  ( JQuery )



Massage


วิธีการติดตั้ง



ขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง CSS codeเพื่อกำหนดหน้าตาของกล่องข้อความ

ไปที่ ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> และคลิกขยายแม่แบบเครื่องมือ!

จากนั้นค้นหาโค้ด ]]></b:skin> แล้วแทนที่ด้วยโค้ดต่อไปนี้


/* Hackublog Box massage */
#info{
/*border: 1px solid;*/         /*ถ้าต้องการให้มีเส้นขอบเอาเครื่องหมาย /*...*/  หน้าและหลังโค้ด border ออก */
margin: 0px 0px;
padding:5px 5px 5px 45px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #360000; /* สีข้อความ*/
background-color: #DEDEDE; /* สีพื้นหลัง*/
background-image: url(http://upic.me/i/cl/bgboxx.png); /* รูปนก twitter เปลี่ยนเป็นรูปคุณเองได้ ขนาด 32*32 */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

]]></b:skin>



ขั้นที่ 2 เป็นขั้นการเรียกใช้ Java script ให้กล่องข้อความเกิด even ทำโดย

ค้นหาโค้ด </head> แล้วแทนที่ด้วยโค้ดต่อไปนี้

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.close&quot;).click(function(){
$(&quot;#info&quot;).animate({left:&quot;+=10px&quot;}).animate({left:&quot;-5000px&quot;});
});
blink();
});
function blink(){
$(&quot;#info&quot;).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$(&quot;#info&quot;).animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20)
.animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20);
}
</script>

</head>



ขั้นที่ 3 ระบุตำแหน่ง/เรียกใช้ ด้วย HTML

ค้นหาโค้ด <data:post.body/>  ซึ่งบางคนอาจพบหลายตำแหน่ง

ให้วางโค้ดต่อไปนี้ไว้ ด้านบนโค้ด <data:post.body/> ที่เจอเป็นตำแหน่งแรก

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='info' style=''>ใส่ข้อความของคุณที่นี่<a class='close' href='#'>&#160;&#160;&#160; close ! </a></div>
</b:if>


บันทึกแม่แบบ แล้วลองเข้าไปอ่านบทความของคุณดูครับ และเช่นเคยหากมีข้อสงสัยในการทำก็สอบถามได้เลยครับผม

ตอนนี้มีความคิดเห็น : 0 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel