Sổ tay code blogspot phần 1

1 Phút Dành Cho Quảng Cáo

Khung chứa code Hiển thị nội ở một số trang nhất định Tạo menu Tạo Sitemapu Tạo Slider ngang đẹp mắt

1. Khung chứa code : (từ khóa : khung chứa code, Tạo khung chứa CODE hiệu ứng CSS Đẹp cho Blogspot )

* Khung chứa code có nhút chọn tất cả : 

<form name="MyTextBoxForm1">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Chọn tất cả" />
<textarea cols="65" name="MyTextBox" rows="3" wrap="off">nội dung
</textarea></form>

* Khung chứa code như mẫu trên : 

pre, code {font-family:"Courier New",monospace; font-size:16px; display:block; margin:10px 0 15px; border:4px dotted #C9C9C9; background:#E9E9E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZK92AIELq7R3CV_b6gzPsi3Ee8RS63RT2gDY_N9Xw3p889usN0d7ksLSqkPP2PVk9cAJRMzSyfDgBJu229p1bmyhJWkr9VXKDSLh2Fa4NsS34oFxl_FJ6J3cIjG_9NSiAipt25qH2_8/s1600/code-namkna-blogspot-com.png) top right no-repeat;padding:10px;overflow:auto; }

2. Hiển thị nội dung ở một số trang nhất định :   (từ khóa : Hiển thị widget (tiện ích) chỉ ở trang chủ hoặc trang riêng biệt, tùy chọn)

Chỉ hiển thị nội dung ở trang chủ.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Nội dung hiển thị
</b:if> Hiển thị nội dung ở tất cả các bài viết, trừ trang chủ:

<b:if cond='data:blog.pageType == "item"'>
Nội dung hiển thị
</b:if> Chỉ hiển thị nội dung ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>
Nội dung hiển thị
</b:if> Chỉ hiển thị nội dung ở các trang chính gồm trang chủ, các trang Label và Archive:
<b:if cond='data:blog.pageType == "index"'>
Nội dung hiển thị
</b:if> Chỉ hiển thị nội dung ở các trang lưu trữ:
<b:if cond='data:blog.pageType == "archive"'>
Nội dung hiển thị
</b:if> 
Chỉ hiển thị nội dung ở tất cả các trường hợp trừ các trang lưu trữ
<b:if cond='data:blog.pageType ! == "archive"'>
Nội dung hiển thị
</b:if> 
Chỉ hiển thị nội dung ở tất cả các trường hợp trừ các trang bài viết:
<b:if cond='data:blog.pageType ! == "item"'>
Nội dung hiển thị
</b:if> Chỉ hiển thị nội dung ở tất cả các trường hợp trừ trang chủ
<b:if cond='data:blog.url ! == data:blog.homepageUrl'>
Nội dung hiển thị
</b:if> 
Chỉ hiển thị nội dung ở tất cả các trang trừ một trang riêng biệt nào đó
<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>

Nội dung hiển thị
</b:if> Chỉ hiển thị nội dung ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>

Nội dung hiển thị  
</b:if>
</b:if> 
Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>
Đây là điều không hiển thị ở trang chủ
</b:if>
 
Chỉ hiển thị nội dung ở một trang nhãn:
<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/search/label/Tennhan"'>
Nội dung hiển thị
</b:if>

* Đoạn code hiển thị Widget (tiện ích) ở trang chủ.

<b:widget id='HTML1' locked='false' title='Sản phẩm có sẵn' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Nếu bạn muốn hiển thị ở trang khác thay thế code
<b:if cond='data:blog.url == data:blog.homepageUrl'> Nội dung hiển thị </b:if> bằng đoạn code hiển thị nội dung ở vị trí mong muốn. 

3. Tạo menu :
* Tạo box menu :
<!-- tao menu box -->
<!--Example drop down menu 1-->
<br />
<form name="form1">
<select name="select1" onchange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')" size="1" style="background-color: #ffffd7;">
<option selected="" value="http://www.sotay.xyz/2017/02/so-tay-code-blogspot-phan1.html#khungchuacode">Khung chứa code
</option>
<option selected="" value="http://www.sotay.xyz/2017/02/so-tay-code-blogspot-phan1.html#hienthinoidungomotsotrangnhatdinh">Hiển thị nội ở một số trang nhất định
</option>
<option selected="" value="http://www.sotay.xyz/2017/02/so-tay-code-blogspot-phan1.html#taomenu">Tạo menu
</option>
</select>
<input onclick="jumptolink(document.form1.select1)" type="button" value="Go" /><br />
<span align="left" id="textcontainer1" style="font: italic 13px Arial;">
</span>
</form>
<!--Example drop down menu 2-->
<!--
<form name="form2">
<select name="select2" size="1" style="background-color:#E3FFDF" onchange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="http://www.cnn.com" />CNN
<option value="http://www.msnbc.com" />MSNBC
<option value="http://news.bbc.co.uk" />BBC News
<option value="http://www.theregister.com/" />The Register
</select>
<input type="button" value="Go"
onclick="jumptolink(document.form2.select2)" /><br />
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>
-->

<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
<!--To be safe, just add below script at the end of your page-->
<script type="text/javascript">
/***********************************************
* Drop down menu w/ description- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."
// Now, see 2) below for final customization step
function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
//2) Call function displaydesc() for each drop down menu you have on the page
// This function displays the initial description for the selected menu item
// displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
// Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)
displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')
</script>

<!-- het menu box -->


4. Tạo Sitemap (sơ đồ bài viết trang blogspot ) : (Từ khóa : tạo sitemap - sơ đồ cho blogspot, Hướng dẫn tạo sitemap ( Sơ đồ trang ) cho blogspot )

<style>
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
margin: 0 auto;
background-color: #FFFFFF;
border: 4px dashed rgb(48, 167, 229);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);
overflow: hidden;
position: relative;
color: #333;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:30%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color: #434B50;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:rgba(110, 193, 255, 0.68);
color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #6EC1FF;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 70%;
float: right;
background-color: white;
border-left: 2px dotted #30A7E5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 14px;
color: #434B50;
line-height: 40px;
height: 35px;
padding: 0 12px;
text-decoration: none;
outline: none;
overflow: hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#333;
color:white;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#224C19;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://www.goghep.xyz/" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Gỗ ghép - go ghep</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.ahref.xyz", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap.JS" type="text/javascript"></script>

5. Tạo Slider ngang đẹp mắt:


<!--<link href="assets/css/jquerysctipttop.css" rel="stylesheet" type="text/css">-->
<style>
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;

.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
</style>
<link rel="icon" href="http://cntech.vn/wp-content/uploads/2015/02/logo.png" type="image/x-ico"/>
<!--<link rel="stylesheet" href="assets/css/cssreset-min.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<style>
/*
YUI 3.8.0 (build 5744)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
</style>
<!--<link rel="stylesheet" href="assets/css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<style>
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
/***************************************************************/
/*************** Footer Bar Style ******************************/
/***************************************************************/
.footer-bar
{
display: block;
width: 100%;
padding:25px 0;
background: #111;
border-top: 3px solid #3b5998;
position: fixed;
bottom: 0;
left: 0;
}
.footer-bar .article-wrapper{
font-family: arial, sans-serif;
font-size: 14px;
color: #888;
float: left;
margin-left: 10%;
}
.footer-bar .article-link a, .footer-bar .article-link a:visited{
text-decoration: none;
color: #fff;
}
.site-link a, .site-link a:visited{
color: #888;
font-size: 14px;
font-family: arial, sans-serif;
float: right;
margin-right: 10%;
text-decoration: none;
}
.site-link a:hover{
color: #3589db;
}
</style>

<!--<link rel="stylesheet" href="assets/css/global.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<style>
/* ==========================================================================
HTML general
========================================================================== */
/**
* remove the default underline
*/

html {
height: 100%;
background: #e3e3e0;
}
a { text-decoration: none; }
:focus,
:active { outline: 0; }
/**
* box-sizing all elements
*/

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hide { display: none; }
/**
* Center
*/
body {
margin: 0 auto;
}
/* ==========================================================================
Header
========================================================================== */

header {
text-align: center;
color: #29628D;
padding-top: 30px;
text-shadow: 1px 1px 2px #fff;
margin:120px auto 50px auto;
}
/* ==========================================================================
Content
========================================================================== */
#content {
margin: 0 auto;
width: 978px;
}
/**
* prev next and slider
*/

#content .prev {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLufo22F5RS6r2f6TbDuTlP-udS3eEUxdCMTAABbf6a8qKj0Rlo8Q1nkEEBufI3eeK7ertbLJMmanPwVzssHsbhEOBrdz1UXmjvC_fQ0U9xoNt0hz7p8c6b20WLVPha_97wZpHWbwuvr9K/s1600/left-on.png) no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 40px;
margin-top: 100px;
width: 23px;
}
#content .prev-disable { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9doLQL3uxxXNFZX_bAxdWJ3oSUTQ2uuxSBtymG3-tw4iUZcqWNHTCmqvpYgXFrHHTis62AAC1Ewwm1nMs-m2ZED9WP5H_NltO9Wtx4ESX3vXTAt3OFF0Mn9oB-FUofpdX8sfS74XwPlqT/s1600/left-off.png) no-repeat scroll 0 0 transparent; }
#content .next {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiweMniTcfpsxUlB8kTF6pzu-1h1JG99AtsntRHd8ZHjbdf5j9BrCCYezFNXzjByO_k3-wMQK0O_89gsL9zupuViglEA72f5nEwUIoHlbcDWWoO_9X_KZe9qlPwyi7DW0udnoC5nMN9U9t/s1600/right-on.png) no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 40px;
margin-top: 100px;
width: 23px;
}
#content .next-disable { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIrZXO5i4r9S63n_x5FDyNGTLpFQ8CqtibshYQMWXre-lTP44b7NSBTIwbLu0tfyc_v5SHMERYFV1S2Y9NT2gdRe4TMTLzYKeq82we_7c9RQV7tSVAWdU3sDfodFJuwjJT6hb44Y9lIDi/s1600/right-off.png) no-repeat scroll 0 0 transparent; }
#slider {
float: left;
margin: 10px 5px;
width: 920px;
}
/**
* Carousel images and transitions
*/

#slider ul li { position: absolute; }
#slider ul li.prev-slide {
opacity: 1;
transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transition: opacity 400ms ease 0s, transform 400ms ease 0s;
-moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;
-webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;
-o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;
}
#slider ul li.selected {
opacity: 1;
transform: translate(310px, 0px);
-ms-transform: translate(310px, 0px);
-webkit-transform: translate(310px, 0px);
-o-transform: translate(310px, 0px);
-moz-transform: translate(310px, 0px);
transition: opacity 400ms ease 0s, transform 400ms ease 0s;
-moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;
-webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;
-o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;
}
#slider ul li.next-slide {
opacity: 1;
transform: translate(620px, 0px);
-ms-transform: translate(620px, 0px);
-webkit-transform: translate(620px, 0px);
-o-transform: translate(620px, 0px);
-moz-transform: translate(620px, 0px);
transition: opacity 400ms ease 0s, transform 400ms ease 0s;
-moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;
-webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;
-o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;
}
#slider ul li.prev-hidden {
opacity: 0;
transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transition: opacity 400ms ease 0s, transform 400ms ease 0s;
-moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;
-webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;
-o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;
}
#slider ul li.next-hidden {
opacity: 0;
transform: translate(620px, 0px);
-ms-transform: translate(620px, 0px);
-webkit-transform: translate(620px, 0px);
-o-transform: translate(620px, 0px);
-moz-transform: translate(620px, 0px);
transition: opacity 400ms ease 0s, transform 400ms ease 0s;
. -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;
-webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;
-o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;
}
/**
* content overlay
*/

#slider .overlay {
background: none repeat scroll 0 0 rgba(10, 10, 10, 0.5);
padding: 10px;
position: relative;
top: -43px;
width: 100%;
}
#slider .overlay > p {
font-weight: bold;
text-align: center;
text-shadow: 2px 5px 2px rgba(132, 130, 125, 0.98);
}
#slider .overlay > p a { color: #fff; }
</style>

<div id="content"> <a href="#" class="prev">&nbsp;</a> <a href="#" class="next">&nbsp;</a>
<div id="slider">
<ul>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 1</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 2</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 3</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 4</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 5</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 6</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 7</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 8</a> </p>
</div>
</li>
<li> <a href="#"><img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="" /></a>
<div class="overlay">
<p> <a href="#">Lorem Ipsum Dolor 9</a> </p>
</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script src="assets/js/carousel.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
/**
* @author luis.monge
*/
/*jslint continue: true, newcap: true, nomen: true, plusplus: true, regexp: true, sloppy: true, todo: true, unparam: true, forin: true */
/*globals $,jQuery,document,window*/
(function ($) {
var methods,
transforms = {
'selected' : {
class: 'selected',
},
'prev' : {
class: 'prev-slide',
},
'next' : {
class: 'next-slide',
},
'prev-hidden' : {
class: 'prev-hidden',
},
'next-hidden' : {
class: 'next-hidden',
}
};

function refresh(data) {
data.prev.toggleClass('prev-disable', (data.selected - 3 < 0));
data.next.toggleClass('next-disable', (data.selected + 3) > (data.count));
data.items.each(function (index) {
var transform;
if (index === data.selected) {
transform = transforms['selected'];
} else if (index === data.selected - 1 || (data.selected === 0 && index === data.count - 1)) {
transform = transforms['prev'];
} else if (index === data.selected + 1 || (data.selected === data.count - 1 && index === 0)) {
transform = transforms['next'];
} else if (index <= data.selected - 2 & !(data.selected === 0 && index === data.count - 1) ) {
transform = transforms['prev-hidden'];
} else if (index >= data.selected + 2 & !(data.selected === data.count - 1 && index === 0)) {
transform = transforms['next-hidden'];
}
$(this).removeClass().addClass(transform.class);
});
}
methods = {
'init': function (node, data, opts) {
var items;
if (!data) {
items = $('#slider ul > li', node);
data = {
items: items,
prev: $('.prev', node),
next: $('.next', node),
count: items.size(),
selected: Math.floor(items.size() / 2.0) - ((items.size() % 2 === 0)? 2 : 0)
};
node.data('Carousel', data);
$('a.prev', node).bind('click', function (e) {
e.preventDefault();
methods.prev(node, data);
});
$('a.next', node).bind('click', function (e) {
e.preventDefault();
methods.next(node, data);
});
}
refresh(data);
},
'next': function (node, data) {
if (data) {
data.selected = ((data.selected + 3) > (data.count)) ? data.selected : (data.selected + 3) % data.count;

refresh(data);
}
},
'prev': function (node, data) {
if (data) {
data.selected = (data.selected - 3 < 0) ? data.selected : data.selected - 3;
refresh(data);
}
}
};
$.fn.Carousel = function (action, opts) {
var method = methods[action];
if (method) {
method(this, this.data('Carousel'), opts);
}
};
})(jQuery);
</script>

<!--<script src="assets/js/global.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
/**
* @author luis.monge
*/
// Initialize Carousel
$('#content').Carousel('init', {});
</script>

Xem thêm : Sổ tay code blogspot phần 2