Tạo kiểu menu đẹp với DD Tabe Menu Script

Mình làm việc trong lĩnh vực tài chính nên thường xuyên đọc tin tức trên trang Stockbiz.vn. Và mình lại thích webdesign nên từ lâu đã nghía đến kiểu menu đẹp tại trang này. Vì thế hy vọng một ngày nào đó sẽ giới thiệu cho bạn đọc cách tạo kiểu menu như vậy. Khi tìm hiểu ngọn nguồn mới biết đó là DD Tab Menu do Dynamic Drive phát triển. Bạn có thể xem trang Demo của Dynamic Drive ở đây.

Qua quá trình nguyên cứu mình đã chỉnh code từ Menu của trang Stockbiz.vn cho gọn gàng hơn, chuyên nghiệp hơn và đặc biệt là dễ cài đặt đối với người chưa biết nhiều về webdesign. Bạn có thể xem Demo của mình ở đây.

Sau đây là các bước thực hiện.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.

<script src="http://hacodeproject.googlecode.com/files/ddtabmenu.js" type="text/javascript"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>

<style type="text/css">
.basictab{float:left;line-height:normal;/*border-bottom:1px solid #7e9fff;Add border strip to bottom of menu*/}
.basictab ul{list-style-type:none;margin:0;margin-left:5px;/*Left offset of entire tab menu relative to page*/padding:0}
.basictab li{display:inline;margin:0;padding:0}
.basictab a{float:left;background:url(http://bit.ly/hGffu7) no-repeat left top;margin:0;margin-right:5px;/*spacing between each tab*/padding:0 0 0 9px;text-decoration:none}
.basictab a span{float:left;display:block;background:url(http://img411.imageshack.us/img411/421/glowtab.gif) no-repeat right top;padding:5px 12px 3px 3px;font-weight:bold;color:#3B3B3B}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.basictab a span{float:none}
/* End IE5-Mac hack */
.basictab a:hover span{color:White}
.basictab a.current{/*Selected Tab style*/background-position:0 -82px;/*Shift background image up to start of 2nd tab image*/}
.basictab a.current span{/*Selected Tab style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/color:White}
.basictab a:hover{/*onMouseover style*/background-position:0% -82px;/*Shift background image up to start of 2nd tab image*/text-decoration:none}
.basictab a:hover span{/*onMouseover style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/}
.tabcontainer{clear:left;width:998px;/*width of 2nd level sub menus*/height:1.5em;/*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/background:#035EB7;height:30px;font-size:11px}
.tabcontent{display:none;color:White;padding-top:5px;padding-left:13px;float:left}
.tabcontent a{color:White;font-size:12px;padding:4px 7px 0 7px;text-decoration:none}

.haSearch{float:right;font-weight:bold;padding-right:5px;padding-top:4px}
.haSearchInput{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;height:16px;padding:3px;text-align:left;width:200px;font-size:11px;background-color:White}
.haSearchTextBox{border:0 none;float:left;font-size:11px;height:14px;left:24px;width:100px}
.btn{height:15px;width:15px;border-width:0;float:right}
</style>

Trong đoạn code CSS ở trên, bạn cần điều chỉnh tham số width:998px cho phù hợp với chiều rộng phần main của trang web.

Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.

<div id="ddtabs" class="basictab">
<ul>
<li><a href='#' rel='sc1'><span>Trang chủ</span></a></li>
<li><a href='#' rel='sc2'><span>Menu I</span></a></li>
<li><a href='#' rel='sc3'><span>Menu II</span></a></li>
<li><a href='#' rel='sc4'><span>Menu III</span></a></li>
<li><a href='#' rel='sc5'><span>Menu IV</span></a></li>
<li><a href='#' rel='sc6'><span>Menu V</span></a></li>
</ul>
</div>

<div class="tabcontainer">

<div id='sc1' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Giới thiệu </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='#'>Liên hệ</a></div>

<div id='sc2' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu I.1</a> |
<a href='#'>Submenu I.2</a> |
<a href='#'>Submenu I.3</a> |
<a href='#'>Submenu I.4</a> |
<a href='#'>Submenu I.5</a> |
<a href='#'>Submenu I.6</a> |
<a href='#'>Submenu I.7</a></div>

<div id='sc3' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu II.1</a> |
<a href='#'>Submenu II.2</a> |
<a href='#'>Submenu II.3</a> |
<a href='#'>Submenu II.4</a> |
<a href='#'>Submenu II.5</a> |
<a href='#'>Submenu II.6</a> |
<a href='#'>Submenu II.7</a></div>

<div id='sc4' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu III.1</a> |
<a href='#'>Submenu III.2</a> |
<a href='#'>Submenu III.3</a> |
<a href='#'>Submenu III.4</a> |
<a href='#'>Submenu III.5</a> |
<a href='#'>Submenu III.6</a> |
<a href='#'>Submenu III.7</a></div>

<div id='sc5' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu IV.1</a> |
<a href='#'>Submenu IV.2</a> |
<a href='#'>Submenu IV.3</a> |
<a href='#'>Submenu IV.4</a> |
<a href='#'>Submenu IV.5</a> |
<a href='#'>Submenu IV.6</a> |
<a href='#'>Submenu IV.7</a></div>

<div id='sc6' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu V.1</a> |
<a href='#'>Submenu V.2</a> |
<a href='#'>Submenu V.3</a> |
<a href='#'>Submenu V.4</a> |
<a href='#'>Submenu V.5</a> |
<a href='#'>Submenu V.6</a> |
<a href='#'>Submenu V.7</a></div>

<div class="haSearch">
<div class="haSearchInput">
<form action='http://www.google.com/custom' id='searchform' method='get' style='display:inline;'>
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input class="haSearchTextBox" name='q' onblur='if (this.value == "") {this.value = "Nhập từ cần tìm...";}' onfocus='if (this.value == "Nhập từ cần tìm...") {this.value = ""}' type='text' value='Nhập từ cần tìm...'/>
<input class='btn' name='' src='http://bit.ly/hSgufo' type='image' value='Go'/>
</form>
</div>
</div>

</div>

Trong cấu trúc HTML ở trên, bạn cần đặt tên Menu, Submenu và URL (thay vào vị trí các dấu #) tương ứng.

Kiểu menu này có thể cài đặt cho Blogger dễ dàng tương tự như cách cài đặt đối với website thông thường.

More about →

Tùy biến Avatar cho người bình luận trên blogspot

Trước đây khi Blogger chưa phát triển tính năng Avatar cho Comment thì việc tạo avatar cho người nhận xét, bình luận trên blogspot là một trong những thủ thuật Blogger rất được quan tâm.

Nhưng ngay cả sau khi Blogger đã có tính năng này rồi thì vẫn còn một số điểm để phát triển thêm. Ví dụ như tạo Avatar riêng cho một người nào đó, mà ngay cả khi người đó viết nhận xét trên blog của bạn trong trường hợp không đăng nhập Blogger mà chỉ đăng nhận xét dưới dạng Tên/URL thì vẫn hiển thị được Avatar của người đó.

Để thực hiện điều này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đoạn code sau đây.

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Thay nó bằng đoạn code như bên dưới.

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.author == &quot;Tên Người Bình Luận&quot;'>
<span class='avatar-image-container'><img src='URL_Avatar_Người Bình Luận'/></span>
<b:else/>
<data:comment.authorAvatarImage/>
</b:if>
<b:else/>
<span class='avatar-image-container'><img src='URL_Avatar_Nặc danh'/></span>
</b:if>
</b:if>

Trong đoạn code trên, bạn cần thay URL Avatar tương ứng với tên của người bình luận nào đó và URL Avatar của Nặc danh (Anonymous).

Bước 2. Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Nếu bạn muốn tạo Avatar riêng cho các trường hợp khác (các trường hợp người nhận xét không đăng nhập Blogger, không phải là Anonymous và không được chọn đặt Avatar riêng ở bước 1), thì thêm đoạn code sau vào phần CSS ở trên.

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_Avatar_Các trường hợp khác) transparent no-repeat 50% 50%;}

More about →

Tạo nút Reply cho nhận xét Blogger

Một đặc tính nổi bật mà hầu hết các hệ thống nhận xét dạng plugin như Disqus là nút Reply (Trả lời) ngay sau mỗi nhận xét. Về mặc định thì hệ thống nhận xét của Blogger không có đặc tính này. Tuy nhiên bạn cũng có thể sử dụng một thủ thuật để tạo nút Trả lời cho mỗi nhận xét Blogger.

Bạn có thể xem Demo ở các nhận xét trên blog này. Để làm được như vậy, bạn hãy thực hiện theo hướng dẫn sau đây.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm dòng <data:commentPostedByMsg/> và đặt sau nó với đoạn code bên dưới.

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=750,height=450&quot;); return false;'>[ Trả lời ]</a></span>

Trong đoạn code trên, bạn cần thay blogID cho blogspot của bạn. BlogID là chuỗi số nằm trên thanh địa chỉ của công cụ trình duyệt khi ở chế độ Edit HTML trong Template.

More about →

Đặt nút Share phía dưới tiêu đề bài viết

Nút Share rất hữu ích cho blogspot khi nó tích hợp nhiều trang mạng xã hội với liên kết chia sẻ bài viết góp phần phổ biến blog của bạn ra cộng đồng. Thông thường các blogger thích đặt nút Share ngay dưới tiêu đề bài viết, có thể ở vị trí bên trái hoặc dạt sang bên phải.

Share

Để đặt nút Share như vậy, bạn hãy thực hiện như sau.

Đăng nhập Blogger vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm dòng <div class='post-header'> và đặt trước nó với đoạn code sau đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div style="float:right" class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4d2267003d6799cf" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf"></script>
<!-- AddThis Button END -->
</b:if>

Nếu muốn nút Share nằm ở bên trái thì đổi float:right thành float:left.

Nếu muốn nút Share gọn hơn thì bỏ phần được đánh dấu màu đỏ trong đoạn code nói trên.

More about →

Kiểu phân trang Pager 2.0 cho blogspot

Tính đến thời điểm này thì đã có khá nhiều kiểu phân trang đẹp cho blogspot mà tôi đã giới thiệu (bạn có thể dùng từ khóa “phan trang” để tìm trên blog này). Mỗi kiểu phân trang đều có ưu điểm và vẻ đẹp riêng của nó. Mỗi blogger đều có sở thích riêng và tất nhiên sẽ lựa chọn kiểu phân trang riêng để cài đặt cho blogspot của mình.

Còn nhớ vào năm 2008 vào cái thuở tôi mới chân ướt chân ráo đến với Blogger, lúc đó một chữ bẻ đôi về code tôi cũng chả biết là gì nữa, thì tôi đã nghe nói về một kiểu phân trang khá thịnh hành thuở ấy gọi là Pager 2.0 của bạn Anh Võ tại blog www.vietwebguide.com. Rất tiếc gần đây Anh Võ đã rửa tay gác kiếm và mai danh ẩn tích, hoặc vì một lý do nào đó cũng không biết nữa. Cũng may là cái script phân trang ấy vẫn được lưu giữ đâu đó trên cộng đồng Blogger.

Hôm nay tôi xin mạn phép Anh Võ giới thiệu lại kiểu phân trang Pager 2.0 và có một số bổ sung để mọi người cùng chia sẻ và lưu truyền cho mai sau.

Xem Demo.

Nếu bạn đã lỡ (nhỡ) xài kiểu phân trang khác mà lại kết kiểu phân trang này thì phải xem lại cách cài đặt kiểu phân trang đó rồi làm ngược lại các bước để tháo nó ra khỏi Template rồi bắt đầu cài đặt kiểu phân trang này, theo hướng dẫn sau đây.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm dòng <b:include name='nextprev'/> rồi thay nó bằng đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16x;
color:#0033FF;
font-weight:bold;
background:#CCC;
border:1px solid #bbb;
padding:0px 4px;
}
</style>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/>&amp;nbsp;<span id='vwg-pager-prev'/>&amp;nbsp;<input name='showingpage' onfocus='this.select()' size='4' title='Nhập số trang bạn muốn đến' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/>&amp;nbsp;<span id='vwg-pager-last'/>
</form>
</div>
<script type='text/javascript'>
var blogID = &quot;5730565790137789925&quot;;
var home_page = &quot;http://huynh-nhat-ha.blogspot.com/&quot;;
var pager_max_main = 7;

var pager_first_text = &quot;First&quot;; // Bạn có thể đổi thành Đầu
var pager_last_text = &quot;Last&quot;; // Bạn có thể đổi thành Cuối
var pager_prev_text = &quot;Prev&quot;; // Bạn có thể đổi thành Trước
var pager_next_text = &quot;Next&quot;; // Bạn có thể đổi thành Sau
</script>
<script src='http://hacodeproject.googlecode.com/files/blogger_pager_script_v20.js' type='text/javascript'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Trong đoạn code trên, bạn cần thay blogID của bạn bằng chuỗi số trên thanh địa chỉ của công cụ trình duyệt ở chế độ Edit HTML của Template; thay địa chỉ home page cho blog của bạn; thay con số ở dòng var pager_max_main = 7; đồng nhất với số bài đăng trên trang chính khi định cấu hình bài đăng cho blog (Blog Posts).

Lưu Template là OK rồi đấy!

More about →

Classroom Spy Professional v3.6.2

The Classroom Spy Professional allows you to monitor live screens of remote computers. This way, you can always watch what users are doing on the remote computer. You can also take a control of a remote computer by controlling its mouse and keyboard-this is especially useful when you need to assist the person who uses the remote computer. Additionally you can also record students' screens. Several tools allow you to turn off, restart, and hibernate remote computers with one click. You can also share your screen to students if you want.

DOWNLOAD HERE

More about →

Tiện ích Bài viết mới nhất với hiệu ứng accordion

Tiện ích Bài viết mới nhất rất cần thiết cho blogspot và tiện ích này cũng đã có nhiều biến thể với nhiều hiệu ứng. Ví dụ như tiện ích Bài viết mới nhất với hiệu ứng Spy.

Chúng ta đã biết hiệu ứng đàn xếp rất hữu ích trong thiết kế website qua bài viết này. Tôi có ý tưởng kết hợp tiện ích Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp để cho ra tiện ích gọi là Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp (Recent Posts with Thumbnails and Accordion Effect). :17)

Xem Demo.

Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/jquery4accordion.js' type='text/javascript'/>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();

$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});

});
</script>

Lưu Template.

Trong phần CSS ở trên, chú ý tham số width:300px, bạn cần điều chỉnh chiều rộng tương đương với chiều rộng tại vị trí đặt tiện ích.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt toàn bộ đoạn code dưới đây vào phần Nội dung của tiện ích.

<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;

jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;

jtext = "";
jshowPostDate = false;

sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>

Nếu bạn sử dụng tiện ích Bài viết mới nhất với hiệu ứng đàn xếp cho một nhãn nào đó thì thay file js được đánh dấu màu đỏ thành như sau:

http://hacodeproject.googlecode.com/files/accordion-recentposts4label.js

Và đặt tên nhãn ở dòng label = "Thủ thuật Blogger";

Bạn cần phải thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé. :37)

More about →