มาทำภาพสไลค์ติดบล็อคเกอร์ แบบ เจ๋งๆ สวยๆ กันครับ พอดีผมก้ยากมีสไลค์สวยๆกํบเค้าบ้างก็เลยไปค้นจากเว็บอื่นๆดูแล้วมาลองทำก็ไม่ได้ ยุกยากสะเหลือเกิน แต่พอดีไปเจอที่หนึ่ง เพียงแค่ก็อปโค้ดมา ใส่ที่ HTML ก็ใช้ได้แล้ว เมื่อของผมใช้ได้ ก็เลยเอามาแบ่งบันให้ทางได้ลองใช้กัน ส่วนขั้นตอนก็ไม่ยาก ครับ มาดูกันดีว่า
 |
| ภาพตัวอย่าง |
ก็อปปี๊ โค้ดทั้งหมดแล้วนำไปวางใน HTML ของบล็อคเกอร์
ส่วนตรงที่เคลือบสีไว้เปลี่ยนภาพ ของท่านตามต้องการ เพียงท่านมีที่อยู่ของ URL รูปภาพ ก็อปวางใส่ได้เลยครับ และเปลี่ยนคำอธิบายภาพแต่ละภาพ สีแดงที่เคลือบในโค้ด
______________________________________CODE______________________________________
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/6hmtv143bo6vhnq/yourjavascript-56841175202.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
height:100%;
}
a img{
border:0;
}
div.wrap{
width:540px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:540px;
height:52px;
margin:22px 0 0;
background:url url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5F3dfuT52aIiEcLoOpX2Fl2ES53DNzJYlYPa3DNLV4oT63G01w9783HNpfG_b21lVBzFh_9OnglItZ-V8luASi7wSq5CUhvai_Vi6YGKvTb49YZi0olqgS_sWyTBvUfhSQk8mg0YIhTMB/s1600/navbgq.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div#slide-holder{
z-index:40;
width:540px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:540px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:540px;
height:46px;
display:none;
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5aRnzKJecpbUBa8rFM5WquP9O7F9f79lexe-wtXuxbz9klx_-65pQ2AkDcsV2H4qRCA1vRn_v_Ly_jm5SM0lILWw28HYYOzMSxi7tgIjDXsKuE3cmpsfgLBgM_FRh_GIree2Ad93PdnN/s1600/slidebg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#fff;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRBHX70u-PXe4XC_c6DMjSzdRuIm7avsFUmy61M8fl3azowDj8SnRjdgfi_eo_7BXBSB2lQALzqqbNGwt9nuRJ01QgKt_t-oKLIcWjE_LGeH5SDY6DXkcGd1AtyCNdgTcxzBK56sYKmta/s1600/sildenav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}
</style>
<div style="float:left;">
<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="#"><img id="slide-img-1" src="http://img338.imageshack.us/img338/9756/naturephotoc.png" class="slide" alt="" /></a>
<a href="#"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="" /></a>
<a href="#"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="" /></a>
<a href="#"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="" /></a>
<a href="#"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
<!--content featured gallery here -->
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script></div></div></div>
________________________________________________________________________________
ก็อปโดย เคลือบโค้ด ทั้งหมด แล้ว กด Ctrl+C แล้วก็ไปที่รูบแบบ ดูที่ภาพด้านล่างครับ
 |
| ภาพตัวอย่าง VinsLike |
 |
| ภาพตัวอย่าง VinsLike |
แค่นี้เราก็มีสไลค์ เจ๋งๆ สวยๆ ติดบล็อกเกอร์ของเรา แล้วคับ
โดย VinsLike.
หากเนื้อหาใด้ไม่เหมาะสม กรุณาแจ้งกับทางเรา
ขอบคุณข้อมูล 24work
แสดงความคิดเห็น