Thiết kế Template videos cho những ai thích làm Blog videos

Thiết kế Template videos Chuẩn seo cho những ai thích làm Blogspot videos: 

DEMO









Bước 1: chép code sau vào dưới  ]]></b:skin>:

#video h1{background:#736F6E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUiHqVT4XEH57EeMKqkTleNMl1RsjNeMeQ3ln0t1W-IqeYzqY63WI5JVpBI6HY2ofBgzKd2PEdICZGWjJehKCxqaXIxFQl7RoJRVeEOEIKtGsPfK01InbCcY5jeipsLxj6k16Awx25Kw/s1600/video.png) no-repeat left;font:bold 14px Arial;margin:0px;padding:5px 5px 5px 20px;text-transform:uppercase;border-bottom:2px solid #ff5800}
#video h1 a,#video h1 a:visited{color:#ff5800}
#video h1 a:hover{color:#B20000}
#video {width:100%;overflow:hidden;padding-bottom:10px;}
#video .col_video {width:200px;height:170px;float:left;padding:0;margin:2px 5px 8px 5px;text-align:center;}
#video .col_video .play-button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHhiY_h_YE3k_iT3Z1LC-Ky8CP8WktfBEiANS4qXwwQb_apPihaLTBdLfod_vPakWqmy-8ePMSL_MgvVgOsRVWe8kcYj7pflFFqbtHIM5bxCg9E2Q7nCWhCEDP6qyjwCKzZl3ENcQX7wFL/s1600/play.png) no-repeat 77px 57px;cursor:pointer;}
#video .video_img {border:4px solid #ccc;margin:10px 3px;width:194px;height:130px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#video .video_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
#video .posttitle {height:20px;border:0 none;line-height:8px;margin:0 5px 5px;padding:2px}
#video .posttitle a{color:#111;font:bold 12px Arial}
#video .posttitle a:hover {color:#ff5800}




Bước 2: Chép code sau vào dưới  ]]></b:skin>:

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sQ0P4qjvkoStPQ6tBm5DkdpcApC5ZwCmxRb-v204lYj8Q05O1tGM6FMAjvJcNv8tShcZsNJqwqo5Qjr1V4hOCq35SXcLvCI5vDlMA7y8rTmrDmpOiszCjv4ZDpOvQumpvsrEaoQFmZg/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=200;summaryPost1=80;summaryTitle=25;numposts=8;numposts1=6;numposts2=4;numposts3=6;numposts4=4;numposts5=12;Title1="Nhạc cách mạng";Title2="Nhạc trữ tình";Title3="Nhạc trẻ";Title4="Nhạc không lời";Title5="Tổng hợp";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><a href="#"><img width="70" height="55" src="'+img[i]+'"/></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="featuredPost"><div class="cover"><a href="'+posturl+'"><img width="360" height="240" class=" " src="'+img[i]+'"/></a></div><div class="featuredPostContent"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div></h2><p>'+removeHtmlTag(postcontent,summaryPost)+' ...</p><a href="'+posturl+'" class="readmore">Chi tiết &#187;</a></div></div>';document.write(trtd);j++}}function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts1<=json.feed.entry.length){maxpost=numposts1}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]="";s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){if(i==0){img[i]='<img width="300" height="225" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright" height="65" src="'+d+'" width="90"/>'}}var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;if(i==0){var trtd='<div class="bottomBox_wide left"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div><span class="featuredPostMeta"><a href="'+posturl+'">Chi tiết »</a></span></div></div><div class="bottomBox_narrow right">';document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<div class="bottomBox_narrow"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost1)+'...<div class="clear"></div></div>';document.write(trtd)}j++}document.write('</div>')}function showrecentposts3(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';if(i==0){var trtd='<li class="first"><div class="entry-thumb"><a href="'+posturl+'"><img width="110" height="80" src="'+img[i]+'"/> </a></div><h2 class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></h2><div class="entry-excerpt"><p>'+removeHtmlTag(postcontent,summaryPost1)+'...    <a href="'+posturl+'" class="meta-more">Read more <span class="meta-nav"></span></a></p></div></li>';document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<li class="catlist"><a href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd)}j++}}function showrecentposts4(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts3<=json.feed.entry.length){maxpost=numposts3}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_video"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><div class="play-button"><a href="'+posturl+'"><img class="video_img" src="'+img[i]+'"/></a></div><div class="clear"></div></div>';document.write(trtd);j++}}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts4;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost1)+'...</p></div>';document.write(trtd);j++}}function showrecentposts6(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>


<style>
<b:if cond='data:blog.url != data:blog.homepageUrl'>

#HTML6 {display:none !important;visibility:hidden !important;
}
</b:if>
</style>

Lưu ý code: #HTML6 {display:none !important;visibility:hidden !important; ở đây tôi chi cho hiển thị HTML6  tại trang chủ.


Bước 3: Quay về Bố cục và thêm tịện ích HTML/Javascipt Gõ vào tên nhãn videos muốn hiển thị.

Bước 4: Vào chỉnh sửa mẫu nhấn Ctr + F gõ tên HTML/Javascipt vừa thêm và sửa lại như sau:

 Sửa lại như sau:

<b:widget id='HTML6' locked='false' title='VIDEO' type='HTML'>
            <b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <div id='video'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>&quot;&gt;&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h1&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=8&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h1&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts3+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:if>

</b:includable>
          </b:widget>
Lưu template lại và xem kết quả. Hy vọng bài viết có ích cho các bạn!