วันจันทร์ที่ 16 กุมภาพันธ์ พ.ศ. 2558

เขียนโดย ที่ 08:54 0 ความคิดเห็น

Read More »

วันพุธที่ 10 กรกฎาคม พ.ศ. 2556

วิธีทำปุ่ม แชร์ Social ต่างๆ แบบไสลด์

เขียนโดย ที่ 23:03 0 ความคิดเห็น

Floating Social Share Buttons

เห็นว่าเก๋ดีก็เลยเอามาฝากน่ะครับเผื่อว่าใครจะเอาไปใช้งาน ก็เลยเอามาแนะนำวิธีการเอาไปใช้ได้ครับผม

วิธีการใส่
  • ไปที่รูปแบบ —>เพิ่ม gadget
  • เลือก HTML/Javascript
  • แล้วคัดลอกโค้ดด้านล่างนี้ไปใส่
 
<!-- floating page sharers with funy emoticons by www.makingdifferent.com -->
<style>#MDfloatshare{background:#f5f5f5;float:left;padding: 4px; position: fixed; top: 240px; z-index: 1; width:64px;}
#MDfloatemo{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE5SNC5LAAkudnI6dCX2drM-xeZDqHWKOoyTFbk5l77PjYDBdUD4aXnJYZ740FG3HarisUeDmsoTAKn0eurGRX3cYfv5QVvQLpduEZcv_uur9JLxR1kWiy8gpa00t2P4R0ZDPRbd3FARpJ/s1600/%5Bwww.makingdifferent.com%5Demo.png);background-position:67px 0;float: left; margin: 0 0 0 -100px; padding: 4px;height:65px;position: fixed; top: 160px; z-index: 1; width:60px;}
#MDfloatemo:hover{background-position:2px 0;}
</style>
<div id="MDfloatemo"><div id="MDfloatshare">
<div style="margin:0 0 5px 2px;">
<a href="https://twitter.com/share" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="margin:0 5px 5px;">
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<g:plusone size="tall"></g:plusone></div>
<div style="margin:0 8px 5px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="false" layout="box_count" width="55" show_faces="false" font="">
</fb:like> </div><div style="margin:0 2px 5px;"><div data-action="share" data-annotation="vertical-bubble" data-height="60">
</div></div></div></div>
<!-- floating page sharers End -->
  • แล้วก็บันทึกโล้ดครับ
Read More »
ป้ายกำกับ: ,

วิธีสร้างเงาครอบรูปภาพและข้อความ

เขียนโดย ที่ 22:51 0 ความคิดเห็น

วิธีสร้างเงาครอบรูปภาพและข้อความ

มาดูวิธีการสร้างเงาครอบรูปภาพและข้อความให้ดูสวยงามครับผมเทคนิง่านในการทำรูปภาพให้ดูสวยงามมากยิ่งขึ้นครับผม

วิธีการติดตั้ง
  • เข้าไปหน้าจัดการแล้วเข้าไปที่ Template> Edit HTML
  • มองหาตัวนี้ครับ
    </head>
  • แล้วก็แทนที่ด้วยโค้ดด้านล่างนี้น่ะครับ
 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#MDrelatedposts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
</style>
<script type='text/javascript'>
var MD_defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBEGDoYOPPClBc1ALim8Y3VZMHGEOPuBRYHglLnAQNdcwcGD980AGuLw4Qf53TyIF0c0OWmbDWkGY3Ey0hJaYU3xndNtkgztjimwoxZO-zAGyP48fYcJ1pxZXHhTGaNstdqMpsk0AizNE/s1600/MD-No-Thumbnail.jpg&quot;;
var MD_maxresults=6;
var MD_relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://makingdifferent.github.com/blogger-widgets/MD-relatedpostswidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
  • แล้วค้นหาโค้ดด้านล่างนี้
<div class='post-footer-line post-footer-line-1'>
  • หรือค้นหาโค้ดด้านล่างก็ได้เหมือนกันครับ
<p class='post-footer-line post-footer-line-1'>
  • แล้ววางตัวต่อเลยน่ะครับ
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='MDrelatedposts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=MD_relatedpostswithhumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.makingdifferent.com/2013/02/related-posts-widget-with-thumbnails-for-blogger.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7hgEiE-qe0EXa9rsJ3MZGD3AffVux1l-AjZw_HLDUD-59bgxALS2aXm4VA6EbCheBYd9eWG-rEDfWYnIDf0Y3rpUZTKc5WUh5XsfjPSuPZk6hHs_U3pCXSBAhRl7TgEMdc2ET6WHBGs_3/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • แล้วกำหนดการแสดงผล
var MD_maxresults=6;
  • หรือกำหนดเป็นหมวดหมู่ก็ได้ครับ
max-results=6

  • แล้วก็เปลี่ยนหัวรายละเอียด
var MD_relatedpoststitle="Related Posts";
  • หรือเปลี่ยนภาพหรือตั้งค่าทั่วไป
var MD_defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBEGDoYOPPClBc1ALim8Y3VZMHGEOPuBRYHglLnAQNdcwcGD980AGuLw4Qf53TyIF0c0OWmbDWkGY3Ey0hJaYU3xndNtkgztjimwoxZO-zAGyP48fYcJ1pxZXHhTGaNstdqMpsk0AizNE/s1600/MD-No-Thumbnail.jpg
การแสดงผลแล้วก็ใส่โค้ดตัวนี้ต่อท้ายครับผม
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
และตัวนี้ปิดจบแล้วครับ
<!-- remove --></b:if>
Read More »
ป้ายกำกับ: ,

ป๊อบอัพ ไลก์ Facebook

เขียนโดย ที่ 22:05 0 ความคิดเห็น

Facebook Like Popup Box Widget

       มาสร้าง Popup Box Widget กันดีกว่าครับผม ในบทความนี้ผมจะชวนมาทำ Popup Like Box ของ Facebook กันดีกว่าครับผม เพื่อว่าใครหลายต้องการเอาไปทำในบล๊อคตัวเองส่วนใหญ่ก็จะทำกันในเว็บดูหนังสะส่วนใหญ่ครับผมเอาหล่ะมาดูวิธีการกันเลยดีกว่า

ขั้นตอนแรก เข้าไปที่ รูปแบบ>หลังจากนั้นก็เพิ่ม Gedgate ให้เลือก HTML/JavaScript  น่ะครับ
ขันตอนที่ 2 ก็คัดลอกโค้ดด้านล่างนี้ไปใส่คับผม

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmTsSyeY3v8RwTaiUbf1CYI7yimMaBc5BK_WOfE0FJxrfgR5IehX4ACsVHzQgO_ueTQAQfMUKu0gkXiGvqXrgW07LZ9pzTkQwgX8DyRGi8Wkx1_Hpc6A_HAelI3s9qVH_UkM6e8LzbcFk/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmTsSyeY3v8RwTaiUbf1CYI7yimMaBc5BK_WOfE0FJxrfgR5IehX4ACsVHzQgO_ueTQAQfMUKu0gkXiGvqXrgW07LZ9pzTkQwgX8DyRGi8Wkx1_Hpc6A_HAelI3s9qVH_UkM6e8LzbcFk/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJc16zSfHDxyv9YDwoLyQl5tzBvF4_2gX6Gjb9UAilC8Iwktfa1HnkTUFDGzmLfCT0FMAHabJnEzz6v2Lz3KLHOPNBV30f_77s-gHNB_BO0rxP3zBXeDiy5JxPhBkqgZyjHFufQpIpO3E/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6zl8JuJZsGUStgTrRVJMoFsYEQANji2AsUb7wXrb8EoOyVDWkMa91qPSb-Nr9sShp-dlgOC8x1e_YiZDV_KArcWYEz_KJVwx34i5gBMfeBiezQsDPa-pfTu5GQQvmHX58qUWAkEhApwr/h120/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVyZ_IXDmWkKumvWKGk0lOwasTPuVk4sqf3Z4THqVb4TUX7cIHTLzMQc-r3U4tvTJ79Cc7TueBSG_fVaGwc1BBgCoIzGdmuWFFyfFa0YEbnfhLABcl-wOzHahLs8ZguSL2xzmowP5FW6Y/h120/controls.pngno-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://supportivehandsjs.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title" align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >▼</p></center></h3> 
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fitcongress&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>
ขั้นตอนที่ 3. เปลี่ยนชื่อ Facebook เป็นของคุณเองเลยครับผมตรงตัวหนังสือสีฟ้าน่ะครับ
ขั้นตอนที่ 4. ก็บันทึกไปเลยฮ่าาาแค่นี้ก็ได้แล้วครับผม

Read More »
ป้ายกำกับ: , ,

สร้าปุ่มคลิกขึ้นบน-ลงล่างด้วย JQuery

เขียนโดย ที่ 21:42 0 ความคิดเห็น

สร้าปุ่มคลิกขึ้นบน-ลงล่างด้วย JQuery

 เอาหล่ะครับมทำปุ่มกดขึ้นบน-ลงล่างกันแบบเก๋ๆในบล๊อคของคุณเพื่อให้สะดวกแก่การใช้งานมากขึ้นวิธีการครั้งก็มีวิธีการไม่ยากครับซึ่งมีขั้นตอนการทำแบบนี้ครับ


วิธีติดตั้ง
  • เข้าไปที่  Blogger–>Template—>Edit HTML
  • แล้วก็กด (Ctrl+F) เพื่อค้นหา ]]></b:skin> ในบล๊อคครับผม
  • หลังจากนั้นก็คัดลอกโค้ดด้านล่างนี้วางก่อนตัวนี้ครับ  ]]></b:skin>


/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVILwByCtdCxSppjOM9MBbLDBoNKRo6LNZU5VAy40d7Gco-WEg1WrpgwF2MZwWOFOjxgar2YMEbLqy6mi1V9KYYxRERfMx-vTYFRlcz8OhuLdT-wrYWUH91ptHcwxc5Lbf3Molqa3EuE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQSsFGdRLAypXGS7xycd2jV_3-r5HnNtsVDkoaeaBin4RDw1qkoq6-sCq_cwRCoUIusSAoWE1VS_Jmhu7Ytt4hqrR8N3pKC0LiN5yUmm638IEnJvDy8Uno92ojyaifT7yQJhP5tTNurnQ/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
หมายเหตุ :- ตรงตัวหนังสือสีแดงคือตำแหน่งที่จะให้ปุ่มปรากฎน่ะครับ
  •  ต่อไปก็ค้นหาคำว่า  </body>
  • แล้วคัดลอกโค้ดด้านไปวางก่อนคำว่า </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script
Read More »
ป้ายกำกับ: ,

Scrolling Recent Post Widget for Blogger with Thumbnails

เขียนโดย ที่ 20:17 0 ความคิดเห็น

สร้างอัพเดดรายการล่าสุดเก๋ๆให้บล๊อคของคุณ.

    เป็นเมนูที่ช่วยเสริมให้บล๊อคของคุณมีความสวยงามมากยิ่งขึ้นซึ่งรูปแบบเมนูจะค่อยๆจางหายไปและโชว์เป็นการสุ่มบทความเพื่อมาแสดงเหมือนบล๊อคของผมนี่แหละครับ

ขั้นตอนแรก. เข้าสู่ระบบ แล้วเข้าหน้าจัดการบล๊อคของคุณก่อนน่ะครับ
ขั้นตอนที่ 2. หลังจากนั้นก็เพิ่ม gadget เข้ามาครับผมโดยเลือกเป็นรูปแบบ HTML/JavaScript ครับผมหลังจากนั้นก็ทำตามขั้นตอนที่ 3 ได้เลยครับผม.
ขั้นตอนที่ 3. หลังจากที่เลือกแล้วก็ทำการคัดลอกโค้ดจากขั้นตอนที่ 4 น่ะครับ. 

ขั้นตอนที่  4. คัดลอกโค้ดข้างล่างนี้ไปใส่ใน Gadget ที่สร้างมาครับ.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
<!--
#supportivehands-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#supportivehands-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#supportivehands-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX8slohOQGYQ3z_fx3m-LKFizHJPHMxTv38353IsMVHOHLRvT6HEYx0R3kO7EdyPTXrWha9WEtFqiYvytQP0GinmIZ5imsAjbZrHv_43Th5Vq-sfcBCFy1KxFshdAR7noTj6kO-BjfW9g/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;

}
#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}
-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiKIPzgTVEjb4FvdU3gJHiDzGzWFTIE-ZtQXSLuwLjEb6f0fC8oQxkb9pKAFHF3W5WBr7Np6XB-Z8U3LAFMQcrVQOty3x_rQ5gbMSv97zOOaZEAFp19dgLtHB7abYdVoHtysTpfxEYZI/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiKIPzgTVEjb4FvdU3gJHiDzGzWFTIE-ZtQXSLuwLjEb6f0fC8oQxkb9pKAFHF3W5WBr7Np6XB-Z8U3LAFMQcrVQOty3x_rQ5gbMSv97zOOaZEAFp19dgLtHB7abYdVoHtysTpfxEYZI/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiKIPzgTVEjb4FvdU3gJHiDzGzWFTIE-ZtQXSLuwLjEb6f0fC8oQxkb9pKAFHF3W5WBr7Np6XB-Z8U3LAFMQcrVQOty3x_rQ5gbMSv97zOOaZEAFp19dgLtHB7abYdVoHtysTpfxEYZI/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiKIPzgTVEjb4FvdU3gJHiDzGzWFTIE-ZtQXSLuwLjEb6f0fC8oQxkb9pKAFHF3W5WBr7Np6XB-Z8U3LAFMQcrVQOty3x_rQ5gbMSv97zOOaZEAFp19dgLtHB7abYdVoHtysTpfxEYZI/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiKIPzgTVEjb4FvdU3gJHiDzGzWFTIE-ZtQXSLuwLjEb6f0fC8oQxkb9pKAFHF3W5WBr7Np6XB-Z8U3LAFMQcrVQOty3x_rQ5gbMSv97zOOaZEAFp19dgLtHB7abYdVoHtysTpfxEYZI/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://movie-2h7.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='https://supportivehandsjs.googlecode.com/files/recent-posts-spy.js' type='text/javascript'></script>
</div>
1. ตรงตัวหนังสือสีแดงนี้ให้เปลี่ยนเป็นบล๊อคของคุณเองน่ะครับ

home_page = “http://movie-2h7.blogspot.com/”;


2. จัดการรูปแบบความกว้างน่ะ ของตัวแสดงผล
   from above style/css, you can change :

width : 220px;width:208px:
 3. ขนาดของรูปภาพน่ะครับ

thumbwidth = 70;
thumbheight = 70;

4. กำหนดจำนวนบทความครับผม
numposts = 10;
หลังจากนั้นก็บันทึกข้อมูลไปเลยครับผม
Read More »
ป้ายกำกับ: , ,
 
© 2013 สร้างบล๊อคให้สวยด้วยมือคุณ | Designed by Making Different | Provided by All Tech Buzz | Powered by Blogger