Home Blogger Templates Blogger Tricks & Hacks Tools & Generators Blogs Directory Blogger Falling Objects
Hiển thị các bài đăng có nhãn Thủ thuật blogger. Hiển thị tất cả bài đăng

Các menu ngang tuyệt đẹp cho blogger

19:39
1Các bước tạo menu điều hướng theo chiều ngang:
1. Truy cập vào Blogger : Bảng điều khiển (Dashboard)  >> Bố cục (Layout)  >>  Phần tử trang (Page Element)  >> Click vào Thêm tiện ích (Add a Gadget).
2. Click chọn tiện ích  HTML/JavaScript widget và dán  Navigation Menu Code ở phần dưới vào trong khung nội dung của HTML/JavaScript widget .
3. Kéo HTML/JavaScript widget và thả  vào vị trí phía dưới Blog Header.
4. Sau khi đã thực hiện xong các bước trên, bạn cần chỉnh lại link liên kết hiển thị trong đoạn mã HTML.
- Thay thế các tiêu đề và đường link của các menu bạn chỉ cần thay đổi các dòng in đậm trọng đoạn code như dưới:


<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>


- Thay thế  #1, #2, #3 etc bằng các địa chỉ  Page Links/URL và thay thế  Link1, Link2, Link3 etc bằng Tên các page Page . Ví dụ với Các bài viết về Bài viết trong blogger trên vnblognet.com sẽ như sau:


<li><a href="http://www.vnblognet.com/search/label/Post" >Bài vi&#7871;t</a></li>


- Nếu cần thêm hay xóa đi các tab (link) bạn chỉ cần thêm hoặc xóa đi đoạn code HTML dưới:


<li><a href="#" >Link</a></li>


2Code của menu điều hướng theo chiều ngang:
 
- Danh mục Menu 1:






<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


- Danh mục Menu 2:





<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



- Danh mục Menu 3:




<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


- Danh mục Menu 4:





<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


- Danh mục Menu 5:






<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaaNjwTlvORYdFIcNm-N41p_Cypqr-5xinFHwKRN9pQYLqCBH_CC6LdWd69QbGv5sDSemd8xkC7WM5DTyJt6uDsMW2Fr_0YYSct4CmymE9Us3tNc8sya3fS89odgeRfGxjERD09HgQluk/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



- Danh mục Menu 6:







<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJmAmVRVp4Ck1sO-yrRWMuAgSiStvKXIIGwwyFgvE7imboU8WRMohUpEFB1Bbdcz7-5TTdqqgrwAZ3cYa7SCqmFw1_4G3kzcv0-4euK-6IjHKvDTqQ1rbMOJDr6xaZEepkC_wA77GOlCs/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84B5GpD3Xf7gF56l260REUF6peD6qEl-1wnhQnWFnMa5-6bOo5TZp5rJ1BSKyQV4b-kxGV0UQdDAJjsonKXGL8Kh3B01lFEDC5DS0NZb9QpadDwdNr6fpUiMfGdKIBWpQO7uPCzts1BQ/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


- Danh mục Menu 7:






<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZw8ViZp_Yv84ZzqtU3IxHFC2THd7JyU_PT1kY_o65bCeTyJt40_blCFOZNR_3GfCp_dk-1i8p9o8ce2cnb39qSnxbikCNd_0-uR6yXWVlLf-THMnGr8EmT_iCBnqc3u_eSpzaPR5yVyc/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJLTrtlRNh3l5vpCgqLqJLdDdC3oFgtPkrz4lWLjiKTl12cfPqQeOcGYO7UEOODuvNodhiuskz25A5HGgZqLK7jaKI06Vt1QRE2818TwIpM9EPQEVc4I4ybzetfqDq144fwgxWkuYgwU/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Read On 0 nhận xét

Tạo “Bài viết liên quan” với thumbnails cho Blogger

21:52
Tiện ích “Bài viết liên quan” có thumbnail – hình đại diện thu nhỏ phía dưới mỗi bài viết sẽ gây được sự chú ý của người đọc, kích thích người đọc truy cập vào bài viết liên quan giúp tăng lượng traffic tới blog của bạn.
Hình minh họa tiện ích “Bài viết liên quan” có hình đại diện thu nhỏ
related-posts
Đây là tiện ích do Aneesh bên bloggerplugins.org phát triển, VnBlognet xin phép dịch và phổ biến để các bạn tham khảo, nếu thấy phù hợp với blog thì thực hiện tạo tiện ích này theo hướng dẫn sau.
< 1 > . Truy cập vào Blogger  >  Layout  >  Edit HTML
- Click vào ô chọn "Expand Widget Templates"
< 2 > . Tìm (Ctrl-F) đoạn code:


</head>
 

thay thế nó bằng đoạn code sau:


 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6CACtVMIGC3-49zEaY7z-0VJpTiRROWi0JUYHLL87qMEoxrHNcvM6LjcFvITUJCMEFg65qhT74Ol48zkHU5wfqlfuwUB3PjBLUYrbAb5IDZsZTLbcUJQhw9VLMG_FM3F9J4M-dLGRY4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
 
 
< 3 > . Tìm đoạn code:
 
 
<div class='post-footer-line post-footer-line-1'>
 
 
có thể trong một số mẫu Template blogger có dạng: 
 
 
<p class='post-footer-line post-footer-line-1'>
 
 
nếu không thấy một trong hai đoạn code trên, bạn tìm: 
 
 
<data:post.body/>
 
 
và dán dưới chúng đoạn code sau: 
 
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End -->
 
 
< 4 > . Chỉnh sửa tiện ích cho phù hợp với Blog (chỉnh các thông số màu đỏ)

- Chỉnh sửa số bài hiển thị trong tiện ích: 
 
 
var maxresults=5;
 
 

- Chỉnh sửa tiêu đề của tiện ích: 
 
var relatedpoststitle="Related Posts";
 
- Chỉnh sửa hình đại diện mặc định cho các bài không có hình ảnh:

 
- Thay đổi màu sắc của dòng kẻ phân chia bài:

var splittercolor="#d4eaf2";
 
- Để hiển thị tiện ích ở tất cả các trang, kể cả trang chủ Homepage: bạn chỉ cần bỏ hai dòng bắt đầu bằng <!-- remove –> ở bước < 2 > và < 3 > đó là:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
 
và 
 
<!-- remove --></b:if>

Chúc bạn thành công ^^
 
 
Read On 0 nhận xét

Cần gì cứ search sẽ có ^^!

Tổng số lượt xem trang

Được tạo bởi Blogger.

Giới thiệu về tôi

Người theo dõi

Music

Từ điển Anh Việt

Dictionary:
Enter word:
© Cftanhiep Groups 2009
Chào mừng bạn đến với Blog của mình!
ZicZac Room

Bài viết mới nhất!!!


My Blog List