product :

วิธีทำหน้าเว็บให้เป็นสีขาวดำ

วิธีทำหน้าเว็บให้เป็นสีขาวดำ เทา
ขั้นตอน
ไปที่แม่แบบ >>แก้ไข html
1.ค้นหา ]]></b:skin>
2.คัดลอกโค้ด

html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

3.วางโค้ดวางลงก่อนหน้า ]]></b:skin>
4.บันทึกแม่แแบบ เสร็จแล้วครับ

ตัวอย่าง
html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
]]></b:skin>
คัดลอกโค้ดไปใช้ได้เลยครับ

**ถ้าหากมืดเกินไปให้ปรับลดลงเป็น90%,80%ตามเหมาะสม
**หากต้องการกลับมาเหมือนเดิมให้ลบโค้ดออกครับ

โค้ด Translate แปลภาษาบนหน้าเว็บไซต์ และบล็อก

โค้ด สำหรับแปลภาษาบนหน้าเว็บไซต์ และบล็อก
วิธีวางโค้ด Google Translate
ไปที่ >>รูปแบบ
>>เพิ่มGadget
>>HTML(จาวาสคริปส์)
>>วางโค้ด
>>บันทึก




คัดลอกโค้ดไปใช้ได้เลยครับ
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'th', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

ขั้นตอนการทำภาพสไลด์โชว์ Beautiful jQuery Slider on Blogger

ขั้นตอนการทำภาพสไลด์โชว์ สวยๆ บนเว็บไซต์ และเว็บบล็อก
Beautiful jQuery Slider on Blogger
-ภาพเลื่อนสไลด์ได้
-ใส่ลิงก์ได้
-มีเลขกำกับ
-มีหัวข้อบนภาพ

ขั้นตอนที่1 วางโค้ดสีแดงนี้วางก่อนหน้า </b:skin>

/* --------------WebblogDDslider1 begin------------ */
/*jQuery beatiful Slider EDIT by Pongwoot(1) */      
div.wrap1{       
width : 99%;       
margin : 0 auto;       
text-align : left;       
}       
div.wrap1 a{color:#ffffff;}       
div#top div#nav{       
float : left;       
clear : both;       
width : 99%;       
height : 0px;       
margin : 0px 0 0;       
background:url(#) 0 0 no-repeat;       
}       
div#top div#nav ul{       
float:left;       
width:98%;       
height:5px;       
list-style-type:none;       
}       
div#nav ul li{       
float:left;       
height:5px;       
}       
div#nav ul li a{       
border:0;       
height:5px;       
display:block;       
line-height:5px;       
text-indent:-9999px;       
}       
div#WebblogDDslider{       
margin:-1px 0 0;       
}       
div#video-header1{       
height:683px;       
margin:-1px 0 0;       
}       
div#WebblogDDslider div.wrap1{       
height:289px;       
background:#848484;       
}       
div#WebblogDDslider div#slide-holder{       
z-index : 40;       
width : 99%;       
height : 289px;       
position : absolute;       
}       
div#WebblogDDslider div#slide-holder div#slide-runner{       
top : 9px;       
left : 9px;       
width : 98%;       
height : 288px;       
overflow : hidden;       
position : absolute;       
}       
div#WebblogDDslider div#slide-holder img{       
margin:0;       
display:none;       
position:absolute;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls{       
left : 0;       
bottom : 228px;       
width : 98%;       
height : 46px;       
display : none;       
position : absolute;       
background:url(#) 0 0;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls p.text{       
float:left;       
color:#fff;       
display:inline;       
font-size:12px;       
line-height:16px;       
margin:15px 0 0 20px;       
text-transform:uppercase;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls p#slide-nav{       
float:right;       
height:24px;       
display:inline;       
margin:11px 15px 0 0;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls p#slide-nav a{       
float:left;       
width:24px;       
height:24px;       
display:inline;       
font-size:14px;       
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;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls p#slide-nav a.on{       
background-position:0 -24px;       
}       
div#WebblogDDslider div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://upic.me/i/qa/sildenav.png);}       
div#nav ul li a{background:url(#) no-repeat;}
/* --------------WebblogDDslider1 end------------ */
]]></b:skin>

***
ขั้นตอนที่2 วางโค้ดสีแดงข้างล่างนี้ วางก่อนหน้า  </head>

<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');

  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',

 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};
//]]>
</script>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2793189328068995666&amp;zx=a39885c5-5f6f-43b6-bb65-2cbbe80ff809' media='none' onload='if(media!=&#39;all&#39;)media=&#39;all&#39;' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2793189328068995666&amp;zx=a39885c5-5f6f-43b6-bb65-2cbbe80ff809' rel='stylesheet'/></noscript>
</head>

***
ขั้นตอนที่3 โค้ดสีแดงนี้วางใน Gadget
ไปที่Gadget>> HTML(จาวาสคริปส์)>>วางโค้ด >>บันทึก

<!--/WebblogDDslider3 begin-->
<div id='WebblogDDslider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-1' src='https://themes.googleusercontent.com/image?id=13FoiH-u4YRLfgveSr43LroHkiXjYFA6nOAGtJH5OEeSwpar5rCFHPiSqbw9RN_bWLwZx' width='100%'/></a>       
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-2' src='https://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYzZhYjNiMzEtMTFmMi00YzdkLWI4MGItNmYxNzY1MWFiNWVj' width='100%'/></a>        
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-3' src='https://themes.googleusercontent.com/image?id=1y3eC27Cm0mN0_e7VLIgP2tag83UvSEgzr_ch5SdlnYnJ8-bJInLqSW9UNf6_1HlJb2N3' width='100%'/></a>        
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-4' src='https://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMODRmMmQwZjQtZjY5Zi00YzMzLWEyMWYtYTZiMWRkZGY3YmEz' width='100%'/></a>        
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-5' src='https://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMOWRhNDdjMjMtYWJkMi00ZmQwLTg3OGEtYjhmMWMxZGQzNmNm' width='100%'/></a>        
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-6' src='https://themes.googleusercontent.com/image?id=16p0DhIQDIoTZOUyiLjbBSajoCvlXtai8rSbZiLnXfEwdwTFgFVIeDYQBf3S_b5BpMAfo' width='100%'/></a>        
    <a href='#'><img alt='' class='slide' height='288' id='slide-img-7' src='https://themes.googleusercontent.com/image?id=1-CAbHwP0L30Tf3buxcdopFoEUHyvMWzwrZ4s0ajgNSX7ImsZaqyJsoR77Td0zZGfvKJn' width='100%'/></a>       
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>product : </strong><span/></span></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </p></p></div>      
</div>      
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"Name1","desc":"description"},       
{"id":"slide-img-2","client":"Name2","desc":"description"},        
{"id":"slide-img-3","client":"Name3","desc":"description"},        
{"id":"slide-img-4","client":"Name4","desc":"description"},        
{"id":"slide-img-5","client":"Name5","desc":"description"},        
{"id":"slide-img-6","client":"Name6","desc":"description"},        
{"id":"slide-img-7","client":"Name7","desc":"description"}        
];      
</script>      
</div></div>
<!--/WebblogDDslider3 end-->



ภาพสไลด์แบบไดนามิค Blogger Dynamic Slider

โค้ดทำภาพสไลด์แบบไดนามิค สำหรับ เว็บไซต์ และเว็บบล็อก Blogger Dynamic Slider
-ภาพสไลด์บนเว็บไซต์ และเว็บบล็อก
-มีแถบข้อความ

ขั้นตอนการวางโค้ด
STEP - 1: ไปยัง Blogs Home > Template (สำรองข้อมูล)
STEP - 2: Edit HTML
STEP - 3: ค้นหา </head>  (กด Ctrl+F)
STEP - 4: นำโค้ดสีแดงข้างล่างนี้วางลงก่อนหน้า</head>

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>
</head>

//////////
STEP - 5: คัดลอกโค้ดสีแดงข้างล่างไปวางใน Gadget ที่ตำแหน่งที่ต้องการ

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Image width in px value
        imageHeight: 398, // Image height in px value
        maxItem: 6, // Max number of Slider Image to show
        animation: "slide", // Select your animation type, "fade" or "slide"
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
    });
});
</script>

////////////

STEP - 6: "บันทึก " ก็เป็นอันเสร็จสิ้น

ตัวเลือกการปรับเปลี่ยนรูปแบบ
$("#slider1").BloggerDynamicSlider({
    blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog
    labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
    maxItem: 6, // Max number of Slider Posts to show
    showPostTitle: true, // Show post title as Caption ? (true/false)
    postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
    imageWidth: 544, // Image width in px value
    imageHeight: 280, // Image height in px value
    animation: "fade", // Select your animation type, "fade" or "slide"
    controlNav: true, // Navigation for paging control of each slide? (true/false)
    directionNav: true, // Previous/next navigation? (true/false)
    pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
    slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, // Set the speed of animations, in milliseconds
    animationLoop: true, // Should the animation loop? (true/false)
});

////////////

HTML & JS Behind This Demo:

<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider2").BloggerDynamicSlider({
        blogURL: "http://labelpost.blogspot.com/", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"
        labelName: "Demo Photo", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
        maxItem: 9, // Max number of Slider Posts to show
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayDark", // Select post title/caption style "default, "overlayDark" or "overlayLight"
        imageWidth: 704, // Image width in px value
        imageHeight: 440, // Image height in px value
    });
});
</script>


Area Croods Map

code area croods map กำหนดปุ่มคลิกตำแหน่งในแผนที่ แล้วจะลิงก์ไปยังหน้าเว็บที่ต้องการ
"rect"  คือ สี่เหลี่ยม
"circle" คือ วงกลม
ภาพอธิบายการกำหนดตำแหน่ง


คัดลอกโค้ดไปใช้ได้ครับ
<img alt="Planets" height="222" src=" ใส่ URLภาพ " usemap="#planetmap" width="309" />
<map name="planetmap">
<area alt="นครปฐม" coords="33,151,113,30" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="ปทุมธานี" coords="136,80,280,24" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="กรุงเทพฯ href=" coords="180,90,280,146" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="สมุทรปราการ" coords="176,160,280,204" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="นนทบุรี" coords="152,96,25" href="ใส่URLลิงก์" shape="circle"></area>
<area alt="สมุทรสาคร" coords="96,184,30" href="ใส่URLลิงก์" shape="circle"></area>
</map>

*ท่านสามารถดัดแแปลงไปใช้กับแผนที่ แบบอื่นๆได้ตามความเหมาะสม
*ขนาดพื้นที่  height และ width ควรเท่ากันกับขนาดภาพ
ลองคลิกดูครับ
Planets

นครปฐม
ปทุมธานี
กรุงเทพฯ href=
สมุทรปราการ
นนทบุรี
สมุทรสาคร

Recent post Slidebar โค้ดสไลด์บาร์ สำหรับอัพเดทโพสต์ล่าสุดในบล็อก หรือเว็บไซต์

โค้ดสไลด์บาร์ สำหรับโพสต์อัพเดทล่าสุดในบล็อก หรือเว็บไซต์ Code Recent post Slidebar
เอาไว้ตกแต่งบล็อกสวยๆ หรือเว็บไซต์

1.Login Blogger
2.template >> Edit HTML
3.ค้นหา ]]></b:skin>
(Ctrl+F ใส่ ]]></b:skin> แล้วEnter)

4.คัดลอกโค้ดสีแดงต่อไปนี้ แล้วไปวางก่อนหน้า ]]></b:skin>
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

5..ค้นหา </head> 
(Ctrl+F ใส่ </head> แล้วEnter)

6.คัดลอกโค้ดสีแดงต่อไปนี้ แล้วไปวางก่อนหน้า </head> 
**อย่าลืมแก้ไข URL เป็นเว็บไซต์ของท่าน
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://webblog2u.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
เสร็จแล้วบันทึกแทมเพล็ต >> กลับ

7.เข้าไปที่รูปแบบ add gadget >> HTML/Javascript
แล้ววางโค้ดต่อไปนี้
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
เสร็จแล้วจะตั้งชื่อหรือไม่ก็ได้ สามารถเลือกวางในตำแหน่งได้ตามที่ท่านต้องการ



ดูตัวอย่าง เว็บไซต์ที่นำโค้ดไปใช้>> http://watchang.blogspot.com/

เว็บบล็อกสวยๆ Blogger template

วันนี้อยากนำเสนอรูปแบบ Template Blogger หรือ Theme Blogger สวยๆ ที่ไปเจอมา เลยเอามาอวดกันครับ มีรูปแบบ แม่แบบ แตกต่างกันไป บ้างเน้นที่ความสวยงาม บ้างก็เน้นที่การใช้งานง่าย เลือกให้เข้าตามลักษณะการนำเสนอที่เหมาะสมครับ


เว็บเกี่ยวกับอาหาร

เว็บขายเสื้อผ้า

เว็บเพลงออนไลน์ วิทยุออนไลน์

เว็บสุขภาพ

เว็บขายบ้าน

เว็บบันทึกการเดินทาง ท่องเที่ยว

เว็บขายหนังสือ

เว็บที่เน้นภาพสวยๆ เช่นอัลบั้มภาพ แฟชั่น เสื้อผ้า 
http://photonic-soratemplates.blogspot.com/

เว็บที่เน้นภาพสวยๆ ภาพพรีเวดดิ้ง แต่งงาน ชุดให้เช่า
http://wedding.blogspot.com

เว็บติวเตอร์ สอนพิเศษ
http://elearnmag.blogspot.com

เว็บออโต้คาร์


เว็บคูปองร้านค้า

โค้ดสร้าง Drop down menu ใน blog

ใส่ Drop down menu (ดร็อปดาวน์เมนู)  เป็นการประหยัดพื้นที่บล็อก หรือเว็บไซต์ได้เป็นอย่างดี
ไว้สำหรับใส่ลิงก์ภายใน และลิงก์ภายนอกไปยังเว็บอื่นๆ ก็ได้
คัดลอกโค้ดด้านล่างไปวางในตำแหน่งที่ต้องการได้เลยครับ วางในบทความของบล็อก หรือใน Gadget ก็ได้ครับ

วิธีใส่โค้ด Drop down menu
ไปที่ >> รูปแบบ >> เพิ่มGadget >> HTML/จาวาสคริปส์ >>วางโค้ด >>บันทึก เสร็จ

คำอธิบาย โค้ด Drop down menu
**แทนสีแดงด้วยหัวข้อ
**แทนสีน้ำเงินด้วยลิงค์ URL
**แทนสีม่วงด้วยชื่อลิงค์ที่ต้องการให้ปรากฏ

<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
 // eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 window.open(selObj.options[selObj.selectedIndex].value);
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
<option selected />เลือกฟังเพลง
<option value="http://looktoongthai.blogspot.com/2012/10/blog-post_16.html" />ต่ายอรทัย
<option value="http://looktoongthai.blogspot.com/2012/10/blog-post_4199.html" />ไผ่ พงศธ
<option value="http://looktoongthai.blogspot.com/2012/10/blog-post_4218.html" />มนต์แคน แก่นคูน
</select>
ลองคลิกดูได้ครับ



แจกโค้ดdropdown manu ฟังเพลง>>

โค้ดBack to top กลับไปสู่ข้างบนหน้าเว็บ

โค้ด Back to top กลับไปสู่ข้างบนหน้าเว็บ นำโค้ดไปวางใน Gadget ส่วนท้ายของเว็บ
เพื่อเวลาเลื่อนดูบล็อก หรือเว็บ ลงถึงส่วนล่างสุดแล้ว ต้องการกลับขึ้นบนสุดของหน้าอย่างรวดเร็ว

วิธีวางโค้ด
ไปที่ >> รูปแบบ >>เพิ่ม Gadget >> HTML/จาวาสคริปส์ >> วางโค้ด >> บันทึก เสร็จ

เลือกไปใช้ได้ตามใจชอบเลยครับ
แบบที่หนึ่ง
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://2.bp.blogspot.com/-fBSW--O5-eA/UIao-OcGSCI/AAAAAAAAEI8/-GomJZ4SCm4/s1600/uptop2.png"/></a>

แบบที่สอง
<a  href="#" rel="nofollow" title="กลับขึ้นไปด้านบนของหน้าเว็บ"><img style="border:0;" src="http://2.bp.blogspot.com/-fBSW--O5-eA/UIao-OcGSCI/AAAAAAAAEI8/-GomJZ4SCm4/s1600/uptop2.png"/></a>


วิธีการใช้งาน Font Awesome, Google Icons และ Icons BS Glyphicons

FONT AWESOME , Icon Font , Glyph font
ฟอนต์ อวีซัม ความหมายคือ ตัวอักษรแบบไอคอน (ไอคอน ฟอนต์ ) หรือ อักษรสัญลักษณ์ (ยิป ฟอนต์)
call home drive_eta mms
การเรียกขานโดยอ้างอิงตามแบบ
 Font Awesome = Font Awesome เช่น fa fa-bar-chart
 Google = Material Icons  (Google Icons)เช่น assessment
 Bootstrap = Icons BS Glyphicons เช่น  glyphicon glyphicon-cloud

ข้อดี
-ลงแค่ font เดียว ก็เหมือนได้ Icons ดีๆ มาใช้นับไม่ถ้วน
-สามารถปรับขนาดได้โดยง่ายเหมือน font ทั่วไป และยังแสดงผลได้อย่างคมชัด เพราะเป็น SVG (Infinite Scalability)
-ตกแต่งรูปแบบเพิ่มเติมได้ง่ายด้วย CSS (CSS Control )
-ออกแบบมาเพื่อให้ใช้ได้กับ Bootstrap โดยเฉพาะ (Made for Bootstrap)
-สามารถใช้ได้ฟรี แม้จะเป็น Commercial Use ก็ตาม (Free)

วิธีการใช้งาน การวางโค้ด  Font Awesome,Google Icons และ Icons BS Glyphicons
คัดลอกโค้ดไปใช้ได้เลยครับ
ส่วนที่1. วางโค้ดสีแดงลงในส่วน <head>

<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700|Open+Sans:400,700,400italic|Exo+2:700' media='all' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

* โค้ดนี้ใช้ได้ทั้งสามแบบเลยครับ
Font Awesome = Font Awesome
Bootstrap = Icons BS Glyphicons
Google = Google Icons

ส่วนที่ 2. การทำตัวอักษรสัญลักษณ์
-ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน
Font Awesome
-สัญลักษณ์กล้องถ่ายภาพ

<i class="fa fa-camera-retro fa-lg"></i> 
............
-สัญลักษณ์กล้องถ่ายภาพ พร้อมใส่ลิงก์

<a href=' ใส่ลิงก์ตรงนี้ครับ '><span class='fa fa-camera-retro fa-lg'/><span/></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title

<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg '/></span></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title และ size fa-2x ,fa-3x, fa-4x


<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg fa-3x'/></span></a>
............

Google Icons (material Icons)
-สัญลักษณ์ โทรศัพท์ call (ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน)
call
<i class="material-icons">call</i>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์
call
<a href="ใส่ลิงก์" rel="nofollow" ><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์ ใส่ title
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อมใส่ลิงก์ ใส่ title และกำหนด size
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons"><span style="font-size: 65px;">call</span></i></a>
.............

Bootstrap
โค้ดนี้วางในส่วนของ <div class="container"> ครับ
-สัญลักษณ์ Signal icon:
    <div class="container">
    <span class="glyphicon glyphicon-signal"></span>
    </div>

ดูโค้ดตัวอักษรสัญลักษณ์ ข้างล่างนี้ครับ
Font Awesome

ดูเพิ่มเติมได้ที่ http://fontawesome.io/icons/ 
Google Icons ดูเพิ่มเติม https://material.io/icons/

ดูเพิ่มเติมได้ที่ดูเพิ่มเติม https://material.io/icons/ และ http://fontawesome.io/icons/ และ https://www.w3schools.com/icons/icons_reference.asp

Font Awesome
Icons Brand
Icons Chart
Icons Currency
Icons Directional
Icons File Type
Icons Form
Icons Gender
Icons Hand
Icons Medical
Icons Payment
Icons Spinner
Icons Text
Icons Transportation
Icons Video
Icons Web Application

Bootstrap
Icons BS Glyphicons

Google
Google Icons
Icons Action
Icons Alert
Icons AV
Icons Communication
Icons Content
Icons Device
Icons Editor
Icons File
Icons Hardware
Icons Image
Icons Maps
Icons Navigation
Icons Notification
Icons Places
Icons Social
Icons Toggle

วันนี้