Hướng dẫn tạo tiện ích

Hướng dẫn tạo tiện ích và sơ đồ tiện ích

(CLick vào hình ảnh để xem kích thước dầy đủ)

1. Tạo tiện ích:

- Các bạn đăng nhập vào blogger.com sau đó chọn Mẫuchỉnh sửa HTML để dán code chính vào trước. sau khi dán code các bạn click vào Lưu

- CLick vào Bố cục sau đó click vào Thêm tiện ích chọn HTML/javascript

 - Coppy đoạn code tiện ích mà bạn muốn tạo vào như hình mẫu sau đó Lưu lại

2. Sơ đồ tiện ích để bạn dán code cho đúng

Nếu bạn đã lỡ tạo tiện ích nhưng chưa đúng vị trí thì bạn có thể di chuyển tới vị trí đúng sau đó bấm vào lưu sắp xếp




code 12

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

code 11

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="500" align="center">

ảnh mới


ảnh mới
ảnh mới

ảnh mới

ảnh mới

ảnh mới

ảnh mới

</marquee>

code 06-07-08-09-10

<b>THIẾT KẾ BLOG</b><br /><div style="font-weight: normal;"><a href="https://www.blogger.com/">Menu dọc</a><div><a href="https://www.blogger.com/">Menu ngang</a></div><div><a href="https://www.blogger.com/">Thu gọn bài viết</a></div></div>

code 05

<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#ffffff;   /* màu nền của menu*/
width: 100%;
border-top: 2px solid #FC04F9;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
border-bottom: 2px solid #FC04F9;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu chữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Giải trí</a></li>
<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>  </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>

</ul>

<br style="clear: left" />
</div>
<div style="left: 0px; bottom: 70px; position: fixed; z-index: 50; id="columnleft";position:relative;">
<img alt="quy ngo trai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcRqhtTxjbv6AzOc5LukffvJMkk8LX0lJnN8KFNRF-4qCBF-uI0xLazSoINi10hOaM1TvgJJApll1vwRQAFpOcdqzfqLG7UEvlGF1HsYDf137VdiTZ1EoCAgB_TegqJykCeoGS0lMLng/s1600/Quy-ngo_left.png" width="140" height="229" />
</div>

<div style="right: 0px; bottom: 100px; position: fixed; z-index: 50;id="columnright";
position:relative;">
<img alt="quy ngo phai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEZg-TP_2yaBZOttCgDrENMby1jfnbBLMTUFdGmOoZawdj2J32meZUEMhGv5CJDlz9EGz-q6w5u8uDjirsqAKXQh0V1pKptsTTxknTVIc_oNGudO47t2shpwAzyNE-BD5ubNOnGcpnew/s1600/Quy-ngo_right.png" width="140" height="229" />
</div>

code 04

<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#ffffff;   /* màu nền của menu*/
width: 100%;
border-top: 2px solid #FC04F9;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
border-bottom: 2px solid #FC04F9;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu chữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Giải trí</a></li>
<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>  </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>

</ul>

<br style="clear: left" />
</div>
<div style="left: 0px; bottom: 70px; position: fixed; z-index: 50; id="columnleft";position:relative;">
<img alt="quy ngo trai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcRqhtTxjbv6AzOc5LukffvJMkk8LX0lJnN8KFNRF-4qCBF-uI0xLazSoINi10hOaM1TvgJJApll1vwRQAFpOcdqzfqLG7UEvlGF1HsYDf137VdiTZ1EoCAgB_TegqJykCeoGS0lMLng/s1600/Quy-ngo_left.png" width="140" height="229" />
</div>

<div style="right: 0px; bottom: 100px; position: fixed; z-index: 50;id="columnright";
position:relative;">
<img alt="quy ngo phai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEZg-TP_2yaBZOttCgDrENMby1jfnbBLMTUFdGmOoZawdj2J32meZUEMhGv5CJDlz9EGz-q6w5u8uDjirsqAKXQh0V1pKptsTTxknTVIc_oNGudO47t2shpwAzyNE-BD5ubNOnGcpnew/s1600/Quy-ngo_right.png" width="140" height="229" />
</div>

code 04

<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#ffffff;   /* màu nền của menu*/
width: 100%;
border-top: 2px solid #FC04F9;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
border-bottom: 2px solid #FC04F9;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu chữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Menu liên kết</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>
<li><a href="#">Giải trí</a></li>
<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>  </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>
<li><a href="#">Menu liên kết</a></li>

</ul>

<br style="clear: left" />
</div>
<div style="left: 0px; bottom: 70px; position: fixed; z-index: 50; id="columnleft";position:relative;">
<img alt="quy ngo trai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcRqhtTxjbv6AzOc5LukffvJMkk8LX0lJnN8KFNRF-4qCBF-uI0xLazSoINi10hOaM1TvgJJApll1vwRQAFpOcdqzfqLG7UEvlGF1HsYDf137VdiTZ1EoCAgB_TegqJykCeoGS0lMLng/s1600/Quy-ngo_left.png" width="140" height="229" />
</div>

<div style="right: 0px; bottom: 100px; position: fixed; z-index: 50;id="columnright";
position:relative;">
<img alt="quy ngo phai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEZg-TP_2yaBZOttCgDrENMby1jfnbBLMTUFdGmOoZawdj2J32meZUEMhGv5CJDlz9EGz-q6w5u8uDjirsqAKXQh0V1pKptsTTxknTVIc_oNGudO47t2shpwAzyNE-BD5ubNOnGcpnew/s1600/Quy-ngo_right.png" width="140" height="229" />
</div>

Tổng số lượt xem trang