tháng 4 2013 | Vietchiase.com - Blog Chia Sẻ Kiến thức - Thủ thuật internet

Vietchiase.com | Góc chia sẻ dành cho người Việt | 30/4/13

Chào các bạn !
Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chuột vào. Hiệu ứng này thích ứng với tất cả cá trình duyệt internet hiện nay. Tiện ích sử dụng CSS và HTML rất dễ dàng thêm vào blog của bạn.

ảnh hiển thị

* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

/* The CSS Code for the menu starts here bloggertrix.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; 
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; 
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzNpbdPI260AZjIo3EnFEnQmkYok-_YunSBkTOCmH6l7Yjayd8B6hpjHu4NDeZKQ2OZNzcYJoJNSqZqAj-GtyoPQSXZhotzlIkgjn1ONt4iZS1-W4od2rhx48PNm_intNUKdL1bojQsU/s1600/bt_home.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(2) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg75-yXJt1Oo1dRe6iE85Tli6grQLvW9XM5wofw4YbArsIMPre3oGqArsYUZO5-kwuULjVmmZTBe2WUX-QSRt_SXBF9deiEVzK16tPvr4Mg1Owspe_9zTvVp23v8GmNokDzS9Wz5cN5jco/s1600/bt_bulb.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(3) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7HH0Y19rMxZm6asLZbaZrglyd3gCV88fNli7j5djdQsWMDGt-hTolycwr54Fds_53F_8_HXIGHjDImpLUdlWr3gHnPP9cTgmzLzFk3Q_m_UQ0-F_EB4YKIAEHEuAYImcHYUmiHxQxk4/s1600/bt_database_add.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(4) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXH_FrVW3OxoaYJHn7u2cGAYubB8cUNnVTzMNMBsm8FlaUYGryEWVC6i4XhsljDCRquTbwLolDV2EHljHyB9eovqBLCrF6wOynhF7iO0B-cQxeEkIhJKetzrQ7EK6rYpltJSlGtNV7kOI/s1600/bt_films.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(5) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEsBkmxZS68qAowK1sP3iZ4OEHYWNqM-aainXkUV9qs79MBhYPdRGj9a9hCW9PN02pQfHMLRbJlnXHqHE-WskoxaMWBJfc3BTfjp7wwAkrjqDKlAe86WY-8HWRK6GSW1cdMUpOgXEfr6E/s1600/bt_mobile-phone.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(6) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnaUVsCDwZs40jJtwsAQlgE3vs8fg-Fgi1LclrZLefSvPqAFoj489-v_fOtk6yITD8jR0ri4ElTCatEP0foZ0ANhM7A8inca-XBjWEwRPpkOabvWvsYa1nmxT2T6oR1HdPAMAcUtdfH0/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat; 
}
.shadowblockmenu ul li a:hover{color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

<li><a href="#">Trang chủ</a></li>

<li><a href="#">Thủ thuật máy tính</a></li>

<li><a href="#">Thủ thuật Web</a></li>

<li><a href="#">Ứng dụng Mobile</a></li>

Thay # bằng link liên kết, thay các dòng chữ màu xanh bằng tên menu của bạn.

Chúc các bạn thành công

theo buivansum

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt | 29/4/13

Tạo “Bài viết liên quan” theo Categories cho Bloggerby: http://namkna.blogspot.con/

Người đọc truy cập blog của bạn đều có mong muốn có mục các bài, tin tức có liên quan đến chủ đề mà bài viết họ vừa đọc xong, chính vì thế thủ thuật tạo bài viết liên quan dưới đây là rất quan trọng đối với blog của bạn.

Mức độ thực hiện tương đối đơn giản không quá khó khăn, các bạn thực hiện từng bước như sau:

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Chọn Mở rộng tiện ích. (Expand Widget Templates)
5. Dán đoạn code bên dưới vào sau thẻ <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- Related Articles by Labels - Take Two -->
<!--
Distributed by bloggecustom.net and modified by JackBook.com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://namkna.blogspot.com/'>Namkna</a></u> | <u><a href='http://namkna.blogspot.com/2011/02/tao-bai-viet-lien-quan-theo-categories.html' title='Bạn thấy tiện ich này hay, hãy bấm vào đây để xem cách cài đặt vào blog'>Add your blog?</a></u>
</div>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

- Đây là thủ thuật của Hoctro and JackBook.com nhược điểm là chỉ hiển thị tốt với nhãn tiếng anh.

Chúc các bạn thành công.

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt | 28/4/13

Nếu bạn có tình yêu đặc biệt là các sinh vật đại dương với hình nền đầy màu sắc là chủ đề của "đại dương" sẽ giúp máy tính của bạn thành một đại dương thu nhỏ .

Sâu đại dương, nhưng cũng có nhiều điều thú vị và đầy màu sắc. Bộ hình nền với chủ đề "Cuộc sống đại dương "sẽ cung cấp cho máy tính của bạn một không gian mới, những sinh vật đầy màu sắc của đáy đại dương.

Trong trường hợp bạn đang quan tâm đến các loài cá cảnh, hình nền máy tính để bàn sẽ biến thành một bể cá độc đáo.

Tải tập hợp đầy đủ với kích thước hình nền đầy đủ ở đây.
Các hình ảnh trong nền:

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt |

Bài viết này s cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label và đã sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.

Các bạn xem qua ảnh để thấy được kết quả hiển thị của thủ thuật này.

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates)

5- Tìm ddoanj code <data:post.body/> (thường chọn là vị trí đầu tiên nếu có nhiều kết quả). Và gắn vào sau nó đoạn code bên dưới.

<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;viettin365.com&quot;;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 6;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/>
<!-- /related post -->

Trong đó:

Thay viettin365.com bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.

maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label).

maxNumberOfLabels là số nhãn (label) sẽ được hiển thị.

Lưu ý: Blog của bạn phải ở chế độ public cho tất cả mọi người xem thì widget này mới hoạt động được nhé!

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt | 27/4/13

Trên các trang web/blog hiện nay chúng ta rất hay gặp giao diện trên trang chính như bên! Nó giúp người đọc thuận lợi hơn trong việc tìm thông tin, đồng thời nó cũng góp phần không nhỏ làm tăng lượng truy cập! Hôm nay mình giới thiệu với các bạn cách tạo ra nhiều danh mục trên trang chính dựa theo label.

Các bước thực hiện:

1. Chèn đoạn css sau phía trên thẻ ]]></b:skin>

.boxhome{width:700px}
.boxhome ul {margin:0; padding:0}
.box1{overflow:hidden;}
.box1-left{width:380px; float:left; height:400px; border-right:1px solid #777; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:250px; width:380px}
.box1-right{height:49px; width:279px; float:right; padding: 10px; line-height:23px; border-bottom:1px solid #777; }
.box2-right:hover, .box1-right:hover {background:#999}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:49px; width:72px; margin-right:10px}
.box2{margin-top:10px; overflow:hidden}
.box2-left{width:380px; float:left; height:140px; padding:10px; border-right:1px solid #777; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:29px; width:289px; float:right; border-bottom:1px solid #777; padding:5px; line-height:15px;}
.box2-right img {float:left; height:29px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu li:first-child a::after{border-left-color: #888;}
.menu li:first-child a:hover{background:#444; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #444;}
.menu a:hover{background: #aaa;}
.menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #aaa;}

Lưu ý:

Mặc định box này được đặt trong class boxhome có chiều rộng 700px. Bạn cần thay đổi chiều rộng này lại cho phù hợp với mẫu template trên blog của bạn.
Ở bước 1 mình đánh dấu các đoạn code màu đỏ là chiều rộng của các thành phần bạn thay đổi lại cho phù hợp với blog của bạn.
Nếu có chổ nào không hiểu bạn để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể.

2. Chèn đoạn code sau phía trên thẻ </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://voquocan.googlecode.com/files/boxhome-v1.0.js' type='text/javascript'/>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
</style>
</b:if>

3. Dùng từ khóa blog1 tìm đoạn code tương tự như sau: (những đoạn màu đỏ có thể khác nhau tùy blog)

<b:section class='mainpost' id='mainpost' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Chèn đoạn code sau phía trên đoạn code vừa tìm được.

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='boxhome'>
<div class='box1'>
<script src='/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=box1'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
    <li><a href='http://template.viettin365.com/'>Blogger Template</a></li>
    <li><a href='http://template.viettin365.com/p/magazine-template.html'>Magazine Template</a></li>
    <li><a href='http://template.viettin365.com/p/shopping-template.html'>Shopping Template</a></li>
    <li><a href='http://template.viettin365.com/p/movie-template.html'>Movie Tempalte</a></li>
</ul>
<script src='/feeds/posts/default/-/Label1?max-results=5&orderby=published&alt=json-in-script&callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
    <li><a href='http://www.viettin365.com/'>Thủ Thuật Blog</a></li>
    <li><a href='http://www.viettin365.com/search/label/Blogger?max-results=5'>Blogger</a></li>
    <li><a href='http://www.viettin365.com/search/label/css-html?max-results=5'>CSS - HTML</a></li>
    <li><a href='http://www.viettin365.com/search/label/Tổng Hợp?max-results=5'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-/Label2?max-results=5&orderby=published&alt=json-in-script&callback=box2'/>
<div style='clear:both;'/>
</div>
</div></b:if>

Trong đoạn code trên mình tạo 1 box lớn (hiển thị các bài viết mới nhất) và 2 box con (2 chuyên mục). Đề tạo thêm chuyên mục bạn tạo thêm các mục box2 là được.
Nếu có vấn đề gì bạn để lại comment bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể.

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt |

Bài viết này mình chia sẻ với các bạn thủ thuật của Traidatmui.com, mình cũng đã thử áp dụng vào blog của mình nhưng còn một lỗi nhỏ đó là sau khi add đoạn code dưới đây sau thẻ <head> thì menu dropdown của mình không sổ xuống được, và thử áp dụng vào template khác có slide ảnh thì nó không chạy nữa. Mong Traidatmui sớm có biện pháp khắc phục.

Đây là hình ảnh minh họa thủ thuật này:

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu tím đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu tím nhạt).
7. Cuối cùng save tiện ích lại là xong

Mở rộng thủ thuật
Để lặp lại tiện ích cho các nhãn khác trên blog của mình thì bạn chỉ cần lặp lại đoạn code như bên dưới và chỉnh sửa phần số màu đỏ lại cho phù hợp

<div class="tab" id="neocat-2" onmouseover="Hovercat('2')" onmouseout="Outcat('2')">
<div class="iframpost">
<ul class="dpost">

<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.viettin365.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>
<li style="display:none;"><a href="http://www.viettin365.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>
<li style="display:none;"><a href="http://www.viettin365.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>

</div>
<script type="text/javascript">
dtlabel = "Templates"; // Thay thành tên nhãn bài bạn muốn hiển thị
document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>
</div>

Lưu ý:

>>> Nếu các bạn gặp lỗi chấm đen như hình sau:

Thì các bạn sửa code chèn sau thẻ <head>, tìm .dpost li{ và thêm vào đó list-style-type:none; như hình sau:

>>> Nếu các bạn muốn tiện ích này chỉ hiển thị ở trang chủ thì các bạn thêm đoạn code này trước và sau code ở bước 6:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code ở bước 6
</b:if>

Chúc bạn thành công!

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ:

BẠN XEM CHƯA ?

Vietchiase.com | Góc chia sẻ dành cho người Việt |

Các bạn có thể dễ dàng thay đổi màu nền cho thanh tiêu đề tiện ích khi vào thẻ "Trình thiết kế mẫu", nhưng thẻ này chỉ áp dụng cho giao diện Blogger mặc định, còn các giao diện bạn tải trên mạng sẽ vô ích với "Trình thiết kế mẫu" này.

Đối với giao diện tải về trên mạng, bạn phải áp dụng thủ thuật sau:

Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML (bấm chọn Mở rộng mẫu tiện ích), bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh .main .Blog { và Enter thì bạn sẽ thấy dòng lệnh giống như vầy:

.main .Blog {
border-bottom-width: 0;
}

Bây giờ, bạn thêm vào sau nó dòng lệnh dưới đây:

.sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}

Trong đó:

- yellow: các bạn có thể đổi cho thích hợp với Blog/web của mình! Các bạn tìm mà màu tại đây

- URL OF YOUR IMAGE: thay bằng icon đẹp tại đây

Bổ sung thêm:

có nhiều theme từ khóa không giống như trong bài viết. Nếu các bạn gặp trường hợp này hãy thứ gõ từ này nhé. #sidebar-secondary{ Và đoạn code tìm được là

#sidebar-secondary{
width:200px;
float:right;
margin:0;
padding:0;
}
#main, #sidebar-1, #sidebar-2{
margin:0;
padding:0;
}