Blogger/Blogspot không còn là dịch vụ xa lạ với đa số người dùng Internet tại Việt Nam. Thời gian đầu Blogger bị các nhà mạng chặn nên việc truy cập vào các Blog rất khó khăn. Tuy nhiên một vài năm gần đây, Blogger đã không bị chặn nữa, việc truy cập rất dễ dàng khiến cho lượng người dùng Blogger ngày càng tăng.
Tuy vậy phần lớn mọi người đều dùng Blogger giống như trang vệ tinh (SEO cho trang chính) hoặc đăng ký số lượng lớn tên miền đẹp rồi ... bỏ không. Có sự lãng phí này do Blogger có các nhược điểm như: cộng đồng hỗ trợ ít kèm theo các tính năng, tiện ích hỗ trợ không được phát triển nhiều; có nhiều hạn chế về giao diện ...
Bên cạnh các nhược điểm đó thì Blogger có những tính năng tuyệt vời mà ngay cả các website chính thống được đầu tư bài bản cũng không thể bì kịp. Mình xin giới thiệu một số ưu điểm của Blogger:
- Bảo mật: Với một dịch vụ do Google cung cấp thì bạn có thể an tâm với độ bảo mật Blog của mình mà không cần có kiến thức cao về vấn đề này.
- Không giới hạn dung lượng hosting và băng thông.
- Tự động post bài lên mạng xã hội Google +
- Là một dịch vụ của Google nên tốc độ Index bài viết cực kỳ nhanh. Thực tế đã chứng minh nhiều trang web sử dụng Blogspot với tên miền miễn phí (.blogspot.com) nhưng vẫn có thứ hạng tìm kiếm cao hơn nhiều so với các trang web mất phí
...
Download các mẫu giao diện mới nhất cho Blogger tại đây: http://www.wowblogger.org
Bài viết hướng dẫn tạo Gadget chứa các mạng xã hội của bạn. Khi click vào các icon sẽ có hiệu ứng xoay tròn icon giống Demo dưới đây
Add a Gadget
Bước 1: vào menu "Bố cục", ấn vào "Thêm tiện ích"
Bước 2 : Từ cửa sổ Popup hiện ra, bạn click vào "HTML/Javascript"
Bước 3: Copy 1 trong các đoạn mã dưới đây vào hộp HTML/Javascript
<style>p#hb_socialicons img {
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>
<center><p id="hb_socialicons">
<a href="https://www.facebook.com/izblogger/">
<img border="0" src="http://3.bp.blogspot.com/-08YDWYRyzc8/VGQ0Q00l1sI/AAAAAAAAC0Y/g-XyPhxku3E/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/blogspotviet/">
<img border="0" src="http://3.bp.blogspot.com/-CGknj7Szmjs/VGQ0Q-WzI5I/AAAAAAAAC0k/Ec_VOrFkV2E/s1600/twitter.png" /></a>
<a href="https://plus.google.com/+WowBlog">
<img border="0" src="http://3.bp.blogspot.com/-zw8uwYsEKeo/VGQ0Qxu9FEI/AAAAAAAAC0c/3jkQ1HcSGG0/s1600/google_plus.png" /></a>
<a href="http://www.youtube.com/user/blogspotviet/">
<img border="0" src="http://1.bp.blogspot.com/-wnlaRAYZEcs/VGQ0RmR-7II/AAAAAAAAC0s/-KmOWNo79xE/s1600/youtube.png" /></a>
</p></center>
- Thay thế đường link các trang Fanpage của bạn vào các dòng code màu đỏ
- Thay thế link ảnh khác vào các dòng code màu xanh
Chi tiet ... »
Bài viết hướng dẫn cách hiển thị các thông số Alexa Blog của bạn trên Sidebar hoặc Footer rất đơn giản bằng cách add Gadget trong Blogspot
Add a Gadget
Bước 1: vào menu "Bố cục", ấn vào "Thêm tiện ích"
Bước 2 : Từ cửa sổ Popup hiện ra, bạn click vào "HTML/Javascript"
Bước 3: Copy 1 trong các đoạn mã dưới đây vào hộp HTML/Javascript
Alexa Site Rank Widget : Style 1
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://www.matbaoad.com/'></script>
</a></center>
Alexa Site Rank Widget : Style 2
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/b?url=http://www.matbaoad.com/'></script>
</a></center>
Alexa Site Rank Widget : Style 3
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/c?url=http://www.matbaoad.com/'></script>
</a></center>
Alexa Site Rank Widget : Style 4
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/b?url=http://www.matbaoad.com/'></script>
</a></center>
Alexa Site Rank Widget : Style 5
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/a?url=http://www.matbaoad.com/'></script>
</a></center>
Alexa Site Rank Widget : Style 6
<center><a href="http://www.alexa.com/siteinfo/http://www.matbaoad.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/c?url=http://www.matbaoad.com/'></script>
</a></center>
Chi tiet ... »
Bài viết hướng dẫn cách thêm Menu nhiều cấp vào Blog. Cách này có điểm hay là sử dụng tính năng Add Gadget để thêm nên không cần chỉnh sửa HTML quá nhiều.
1. Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>
Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>
/* Drop Down Menu */
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu */
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu */
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.nav ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
}
.nav ul li ul li {
display: list-item;
float: none;
}
.nav ul li ul li ul {
top: 0;
}
.nav ul li ul li a {
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}
#nav li li:hover ul {
visibility: visible;
}
/* Drop Down Menu */
2. Add Gadget: Show Menu
Bước 1: vào menu "Bố cục", ấn vào "Thêm tiện ích"
Bước 2 : Từ cửa sổ Popup hiện ra, bạn click vào "HTML/Javascript"
Bước 3: Copy đoạn mã dưới đây vào hộp HTML/Javascript
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a></li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Sau khi Thêm tiện ích thành công, bạn kéo thanh Tiện ích thả vào phía trên phần Bài đăng trên Blog
Chi tiet ... »
Add Beautiful CSS3 Buttons For Blogspot by Helper Blogger là tiện ích cho phép chèn 1 nút bấm bất kỳ vào bài viết kèm theo hiệu ứng CSS đẹp mắt.
1. Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>
Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>
.button, .button:visited {
background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
.button:hover {
background-color: #111;
color: #fff;
}
.button:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
background-color: #e22092;
}
.pink.button:hover {
background-color: #c81e82;
}
.green.button, .green.button:visited {
background-color: #91bd09;
}
.green.button:hover {
background-color: #749a02;
}
.red.button, .red.button:visited {
background-color: #e62727;
}
.red.button:hover {
background-color: #cf2525;
}
.orange.button, .orange.button:visited {
background-color: #ff5c00;
}
.orange.button:hover {
background-color: #d45500;
}
.blue.button, .blue.button:visited {
background-color: #2981e4;
}
.blue.button:hover {
background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
.yellow.button:hover {
background-color: #fc9200;
}
2. Add Beautiful CSS3 ButtonsButton to Post
Để add button này vào nội dung nào đó thì khi post bài, bạn chuyển sang chế độ HTML và add đoạn code sau vào vị trí cần chèn
1. HTML Code Large Buttons -
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>
2. HTML Code Medium Buttons -
<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>
Chi tiet ... »
"Link To This Post" là tiện ích hay giúp tăng thêm lượng traffic cho blog của bạn. Tiện ích sẽ tự động lấy đường link bài viết theo 2 dạng Url Post hoặc HTML Code như hình dưới đây.
Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ <data:post.body/>
Bước 3: Chèn đoạn code sau đây vào phía dưới đoạn mã vừa tìm được <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<p style='color: #7AA1C3;font-weight: bold;'>If you Like This Article,Then kindly linkback to this article by copying one of the codes below.</p>
<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea>
<p style='color: #CF152A;font-weight: bold;'>Paste This HTML Code On Your Page:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><a href="<data:post.url/>"><data:post.title/></a></textarea>
<div style='text-align: right;font-size: x-small;'>
</div></b:if>
Khi tìm đoạn mã <data:post.body/> thì có thể bạn sẽ tìm được 3 lần đoạn mã này. Bạn sẽ dừng lại ở đoạn mã thứ 3 rồi chèn đoạn code trên vào phía dưới nó.
Nếu không tìm được <data:post.body/> thì bạn tìm 1 trong 2 đoạn mã sau
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer'>
Chi tiet ... »
Bài viết hướng dẫn cách add CSS3 vào Label (Category) trên Blog của bạn giống như hình dưới đây
Add Gadget: Show Labels
Nếu trên Blog của bạn đã sử dụng tính năng này thì bỏ qua, còn không thì bạn phải thêm tiện ích Show Label ra
Truy cập Bố cục >>> Thêm tiện ích >>> Nhãn
Nhớ tích chọn Cloud như trong hình
Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>
Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>
/*CSS3 Bricks Style Labels*/
#textwidget {
color: #666;
font-size: 0.925em;
font-style: italic;
line-height: 1.6em
}
a.tag {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background: #f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px #ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none
}
a.tag:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
a.tag:active {
color: #000;
border-color: #444
}
.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By*/
Bước 4: Tìm tiếp đoạn mã bắt đầu bằng đoạn mã sau <b:widget id='Label1' locked='false'
Chú ý đoạn mã cần tìm sẽ có dạng
<b:widget id='Label1' locked='false' ...
...
</b:widget>
Bạn xóa toàn bộ phần code này và thay bằng đoạn code sau đây:
<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget>
Xong click Lưu mẫu
Chi tiet ... »
Bài viết này hướng dẫn cách tạo nút để thêm vào bài viết trên Blog kèm theo hiệu ứng CSS giống hình dưới đây
Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>
Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>
/* Beautiful CSS Buttons */
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
/* End Beautiful CSS Buttons */
Add Download, Live Demo Buttons to Post
Để add button này vào nội dung nào đó thì khi post bài, bạn chuyển sang chế độ HTML và add đoạn code sau vào vị trí cần chèn
Homepage Button
<a class="button homebutton" href="YOUR HOMEPAGE LINK HERE" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Homepage</span></a>
Live Demo Button
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow"
style="float: left;" target="_blank"><span style="display:
inline-block;">Live Demo</span></a>
Download button
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE"
rel="nofollow" style="float: left;" target="_blank"><span style="display:
inline-block;">Download</span></a>
Chi tiet ... »
Bài viết hướng thêm cách dẫn tạo phân trang cho Blog giống như hình dưới đây
Edit HTML
Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.
Hướng dẫn:
Bước 1: Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML
Bước 2: Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ ]]></b:skin>
Bước 3: Chèn đoạn code sau đây vào phía trên đoạn mã vừa tìm được ]]></b:skin>
/* Numbered Page Navigation */
.pagenavi{
position: relative;
display: block;
width: 400px;
height: 40px;
overflow: visible;
margin: 50px auto;
border: 10px solid rgba(255,255,255,0.5);
/*border-radius*/
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*box-shadow*/
-webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
-moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
}
.pagenavi span,.pagenavi a{
font: bold 20px/30px Tahoma, Arial;
cursor: pointer;
text-decoration: none;
color: #464646;
display: block;
float: left;
margin-left: 2px;
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
padding: 2px 10px;
min-width: 10px;
text-align: center;
position: relative;
text-shadow: #fff 0 1px 0;
background: #cdcdcd;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9)));
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
}
.pagenavi a:after {
content: '';
position: absolute;
bottom: -3px;
height: 100%;
display: block;
width: 100%;
left: 0;
/*box-shadow*/
-webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
}
.pagenavi a:first-child::after {
/*border-radius*/
-webkit-border-radius: 500px 0 0 500px;
-moz-border-radius: 500px 0 0 500px;
border-radius: 500px 0 0 500px;
}
.pagenavi a:last-child::after {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
}
.pagenavi a.current:after {
height: 1px;
bottom: -1px;
}
.pagenavi a:before {
content: '';
position: absolute;
top: 1px;
height: 100%;
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
width: 1px;
display: block;
background: rgba(0,0,0,0.4);
right: -1px;
}
.pagenavi a:last-child::before { display: none !important }
.pagenavi a:first-child {
/*border-radius*/
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:last-child {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:hover {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
}
.pagenavi a:active {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
top: 1px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a:active:after { bottom: -2px }
.pagenavi a:active:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: 0px;
}
.pagenavi a.current {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
top: 2px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a.current:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: -1px;
}
.pagenavi a.current:active:after { bottom: -1px }
/* End Numbered Page Navigation */
Bước 4: Tìm tiếp đoạn mã sau
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Nếu không tìm được đoạn mã trên thì tìm theo đoạn mã sau:
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
Sau khi tìm được bạn chèn đoạn code dưới đây vào phía sau đoạn mã vừa tìm
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 6,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
Bước 5: Tìm tiếp đoạn mã sau:
<!– navigation –>
<b:include name='nextprev'/>
Thay thế đoạn code vừa tìm bằng đoạn mã sau:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
Hoàn thành, Lưu mẫu là xong
Chi tiet ... »
