Thứ Hai, 31 tháng 12, 2012

Tùy chỉnh thanh tìm kiếm của Google (Google Custom Search)

Google Custom Search một trong những công cụ  trong danh sách các điểm cộng gần như vô tận. Từ cung cấp các kết quả tìm kiếm liên quan đến lựa chọn cho chỉ mục theo yêu cầu. GCS là một lợi ích cho tất cả Blog chủ sở hữu trang web. Nhưng một điều không phù hợp tại chỗ là khung tìm kiếm của nó cực kì đơn giản , và không bắt mắt chút nào. Trong bài này Karl sẽ nói cho bạn làm thế nào để thay đổi hình thức  Search Box GC của bạn thành hộp tìm kiếm CSS3.





Giả sử bạn đã thiết lập công cụ tìm kiếm của Google tìm kiếm Tuỳ chỉnh của bạn nếu bạn không sau đó kiểm tra hướng dẫn này. Có nhiều biến thể GCS, nhưng thông thường mã có chứa một thẻ <script>, hoặc tương tự thế này:




<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
đây bạn có thể không thực sự thấy nơi để áp dụng các style. Bây giờ hãy copy và dán các mã sau đây (cũng hoạt động theo cách tương tự như trên), và tùy chỉnh theo ý bạn:



<form id="search-form_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> 
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:150px;" name="q" size="70" type="text" />
<input value="Search" name="sa" type="submit"/>
</form>



id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" là thứ bạn cần thay cho phù hợp với id mình đã đăng kí.LÀM SAO ĐỂ TÙY CHỈNH KHUNG SEARCH CỦA BẠN?1- Đầu tiên là bạn hãy Sao lưu mẫu của mình để tránh rủi ro.2- Hãy chắc chắn là code GCS bạn chèn vào là duy nhất, nếu có hãy xóa chúng trước.3- Tiếp theo, bạn vào Mẫu >> Chỉnh sửa HTML và chèn đoạn code nào bạn muốn dưới đây vào trước ]]></b:skin> :
Mẫu 1:




#search-form{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 250px;
height: 35px;
padding: 10px;
margin: 10px auto 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#submit
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
background: #95d788;
outline: none;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#submit::-moz-focus-inner
{
border: none;
}

/* ----------------------- */

#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}

#search.placeholder {
color: #9c9c9c !important;
font-style: italic;
}

#search:focus
{
border-color: #8badb4;
background: #fff;
outline: none;
}



Mẫu 2





/* search-form 
-------------------------------------- */
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}


Mẫu 3:






#searchform {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;

/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;

/* Rounded Corners */
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;

/* Rounded Corners */
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;

/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

Mẫu  4:





#searchform {
width: 400px;
height: 50px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"] {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 5px;
margin-left: 3px;
border: 1px solid #999999;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-left: 20px;
background-color: #f8b838;
color: rgba(134, 79, 11, 0.8);
text-transform: uppercase;
font-weight: bold;
border: 1px solid #99631d;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].solid:hover, input[type="submit"].solid:focus {
background: #ffd842;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}

input[type="submit"].solid:active {
background: #f6a000;
position: relative;
top: 5px;
border: 1px solid #702d00;

-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}


Thứ Bảy, 29 tháng 12, 2012

Dropdown menu có search


Menu giúp cho bạn trình bày các chương mục trong blog được gọn gàng và khoa học hơn. Lần trước Karl đã từng giới thiệu cho các bạn một mẫu Menu Drop. Hôm nay Karl tiếp tục giới thiệu cho các bạn thêm một mẫu Menu Drop khác.



Cách thực hiện:
  1. Đăng nhập Blogger
  2. Vào Thiết Kế (Design)
  3. Chọn tab Chỉnh Sửa HTML (Edit HTML). Không cần chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
  4. Thêm đoạn code sau trước thẻ  ]]></b:skin> .
#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu { list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center; position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto; position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px; }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px; line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0; float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
- Bạn điều chỉnh lại các Width cho phù hợp với blog của bạn. với:
  • width:850px là chiều rộng của menu thường ứng với chiều rộng của blogspot.
  • width:200px là chiều rộng của ô tìm kiếm
  • width:650px là chiều rộng phần chứa các Sub menu thường bằng width:850px - width:200px
    5. Chèn đoạn code sau trước thẻ  <body> . Với các mẫu Simple của blogspot thì là thẻ:   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> hoặc tương tự.
- Chèn đoạn code bên dưới vào sau đoạn code vừa tìm được:

<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='http://vinacer.blogspot.com/'/>
</form></div>
<div style='clear:both'/>
</div>
Trong đó:
  • Bạn có thể thay chữ Tìm kiếm bài viết ... bằng chữ bạn muốn. Lưu ý thay cả 3 chữ thì khi click chuột vào mới có hiệu ứng rolover.
  • Thay địa chỉ (URL) blog http://vinacer.blogspot.com/ thành địa chỉ (URL) blog của bạn.
    6. Lưu mẫu (Save template) Lại.
   7. Vào Thiết Kế (Design) - Phần tử trang bạn sẽ thấy xuất hiện 1 HTML92. bạn bấm vào chỉnh sửa và Pate đoạn code bên dưới vào.
<ul class="menu">
<li class="drop0"><a href="http://vinacer.blogspot.com/">Home</a></li>
<li class="drop0"><a href="http://vinacer.blogspot.com/p/so-o-trang-blog-vinacer.html">Site map</a></li>
<li class="drop0"><a href="#">About Me</a></li>
<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>

<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">

<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>

</div></div></li></ul>
Trong đó:
  • Thay dấu # là liên kết tới bài viết, nhãn hoặc trang của bạn.
  • Thay các phàn màu xãnh là các nhãn, bài viết trên menu chính.
  • Thay phần màu cam là các tiêu đề trong phần Sub menu xổ xuống.
  • Bạn có thể thêm các Sub menu drop bằng cách thêm các phần màu xanh da trơi và xanh la mạ vào ngay trước thẻ </ul>
Chúc thành công!

The Sunrise Drop Down Menu


Đặc điểm: The Sunrise Drop Down Menu không sử dụng các file javarscrip do vậy các bạn có thể yên tâm về tốc độ của nó.
Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

@charset "utf-8"; /* CSS Document */ body{ padding: 25px; } /* ----Navigation Structure -------- */ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://lh5.googleusercontent.com/-W0vrRokKy24/UN7UbHW-e0I/AAAAAAAAAfA/r9LdyBu7fpE/s512/nav-bg-vinacer.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(https://lh3.googleusercontent.com/--_teazbCtns/UN7U1yEd6pI/AAAAAAAAAfI/O4ZLefuD_WQ/s512/item-primary-bg-vinacer.gif); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #6C3600; background: url(https://lh3.googleusercontent.com/--_teazbCtns/UN7U1yEd6pI/AAAAAAAAAfI/O4ZLefuD_WQ/s512/item-primary-bg-vinacer.gif); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(https://lh4.googleusercontent.com/-6LhnrsuWmII/UN7VlOFNtII/AAAAAAAAAfY/H5MCKhVdh1A/s512/item-secondary-container-bg-vinacer.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; } /* -------- Secondary Items------ */ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://lh4.googleusercontent.com/-paHMFLCLHTU/UN7WNaW8xMI/AAAAAAAAAfg/0Z3DWOip5_Y/s512/item-secondary-bg-vinacer.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(https://lh4.googleusercontent.com/-paHMFLCLHTU/UN7WNaW8xMI/AAAAAAAAAfg/0Z3DWOip5_Y/s512/item-secondary-bg-vinacer.jpg); background-repeat: no-repeat; color:#CC0000; } /* ---- Secondary Item Titles ---- */ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(https://lh4.googleusercontent.com/-BuQNQ2S2cF0/UN7WsRoM3jI/AAAAAAAAAfo/nzj-3UAU8Cw/s512/item-secondary-title-bg-vanacer.jpg); */ background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }


6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)


<div class="nav-container-outer">
<img src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJOxMlB1I/AAAAAAAAAKw/hXZ77KQnoT8/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtJQzrYfsI/AAAAAAAAAK0/Wv8PRzkfPV8/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Products</a>

<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Quality</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Services</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear">&nbsp;</li></ul>
</div>
Chúc thành công!

Menu dọc xổ xuống dạng thư mục

Hôm nay Karl sẽ giới thiệu cho các bạn một mẫu menu dọc đẹo dành cho việc thiết kế blog. Menu này có đặc điểm trượt từ trên xuống, hết hợp hiệu ứng hover khi dê chuột. Điểm khác biệt là menu sử dụng 2 button để ẩn hiện các sub menu. 







Và đây là hình demo:




☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế (Mẫu)
   3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng   ]]></b:skin>.
.button {border:1px solid #055;border-radius:3px;box-shadow:0 1px rgba(255,255,255,0.3) inset;background:#41A317;color:#FFFF00 !important;text-decoration:none !important}
a.button:hover,.submit.button:hover{border:1px solid #222;background:#810541}
.button.medium{padding:5px 10px;font-size:12px}
.button.big{padding:10px 20px;font-size:14px}
div.sdmenu {
width: 200px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(
https://lh4.googleusercontent.com/-qtqEgW9fYj4/UN7EwPuFpmI/AAAAAAAAAeI/ROau5P6Fm2k/s512/bottom-menu-doc-vinacer.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(
https://lh5.googleusercontent.com/-0whgmbVe1R0/UN7EtsukdKI/AAAAAAAAAeA/K4Ged4d1kgg/s512/menu-vinacer-dot-blogspot-dot-com.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(
https://lh5.googleusercontent.com/-0whgmbVe1R0/UN7EtsukdKI/AAAAAAAAAeA/K4Ged4d1kgg/s512/menu-vinacer-dot-blogspot-dot-com.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 30px;
}
div.sdmenu div span {
display: block;
padding: 8px 30px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 8px 30px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(
https://lh5.googleusercontent.com/-0whgmbVe1R0/UN7EtsukdKI/AAAAAAAAAeA/K4Ged4d1kgg/s512/menu-vinacer-dot-blogspot-dot-com.gif) 0 -32px;
color: #fff;
text-decoration: none;
}

     5-  Bấm Lưu Mẫu  (save template) lại.

    6. Tạo một widget HTML/Javarscip và dán đoạn code sau vào:
<script type="text/javascript" src="http://code-pro.googlecode.com/files/sdmenu.js"></script>
<script type="text/javascript">
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<form action="#" style="font-family: sans-serif; font-size: .8em" onsubmit="return false">
<input class="submit button medium" type="button" value="
Hiện Menu" onclick="myMenu.expandAll()" />
<input class="submit button medium" type="button" value="
Rút gọn menu" onclick="myMenu.collapseAll()" />
</form>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>
Menu 1</span>
<a href="
#">Sub Menu 1.1</a>
<a href="
#">Sub Menu 1.2</a>
<a href="
#">Sub Menu 1.3</a>
<a href="
#">Sub Menu 1.4</a>
<a href="
#">Sub Menu 1.5</a>
</div>
<div>
<span>
Menu 2</span>
<a href="
#">Sub Menu 2.1</a>
<a href="
#">Sub Menu 2.2</a>
<a href="
#">Sub Menu 2.3</a>
<a href="
#">Sub Menu 2.4</a>
</div>
<div class="collapsed">
<span>
Menu 3</span>
<a href="
#">Sub Menu 3.1</a>
<a href="
#">Sub Menu 3.2</a>
<a href="
#">Sub Menu 3.3</a>
<a href="
#">Sub Menu 3.4</a>
<a href="
#">Sub Menu 3.5</a>
<a href="
#">Sub Menu 3.6</a>
</div>
<div>
<span>
Menu 4</span>
<a href="
#">Sub Menu 4.1</a>
<a href="
#">Sub Menu 4.2</a>
<a href="
#">Sub Menu 4.3</a>
<a href="
#">Sub Menu 4.4</a>
<a href="
#">Sub Menu 4.5</a>
</div>
</div>
Trong đo:
  • Thay các dấu thăng màu đỏ thành URL (địa chỉ) liên kết tới bài viết, nhãn, trang của bạn.
  • Thay các phần màu xanh thành tên của các bài viết, nhãn, trang của bạn/
  • Bạn hãy tải file sdmenu.js và Upload lên Google code hoặc Dropbox để sử dụng lâu dài.

   5-  Bấm Lưu   (save Widget) lại.

- Ở trên mình dùng file ảnh làm background bạn cũng có thể thay thành các hình ảnh của bạn. Nếu không muốn dùng ảnh bạn có thể xóa các file ảnh đó đi.
 Chúc thành công!

Tạo menu đẹp và load nhanh cho Blogger



Nếu trước đây các bạn phải than phiền về tốc độ blog bị giảm đi ít nhiều khi áp dụng các thanh menu xổ dọc nhiều cấp kết hợp JQuery của blog khác. Thì hôm nay mẫu menu VinaCer Blog giới thiệu này sẽ đem đến cho các bạn một trải nghiệm tuyệt vời với CSS3.





Các bạn có thể xem hình demo ở dưới










☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin>.
#MBT-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://lh3.googleusercontent.com/-12RTQAJTUpA/UOLrGqHqFMI/AAAAAAAAAgY/MWrU71-KnDk/s512/vinacer-blogspot.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://lh3.googleusercontent.com/-12RTQAJTUpA/UOLrGqHqFMI/AAAAAAAAAgY/MWrU71-KnDk/s512/vinacer-blogspot.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #7d7d7d url(https://lh3.googleusercontent.com/-12RTQAJTUpA/UOLrGqHqFMI/AAAAAAAAAgY/MWrU71-KnDk/s512/vinacer-blogspot.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://lh3.googleusercontent.com/-12RTQAJTUpA/UOLrGqHqFMI/AAAAAAAAAgY/MWrU71-KnDk/s512/vinacer-blogspot.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
- Trong code trên bạn thay đổi các thông số sau cho phù hợp. Dấu # thay bằng liên kết tới các nhãn hoặc bài viết.
- Sau đó bấm Lưu lại
- nếu muốn đổi màu khác bạn hãy đổi phần  #7d7d7d  thành mã màu của bạn như màu xanh (#0080ff).
5- Toại một tiện ích HTML/Javarscip
- Thêm đoạn code sau vào.
<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="/">Home</a></li>
<li><a href="http://vinacer.blogspot.com/">Menu-Level Item 1</a>

<ul>
<li><a href="#">Sub-Level Item 1.1</a>
<ul>
<li><a href="#">Sub-Level Item 1.1.1</a></li>
<li><a href="#">Sub-Level Item 1.1.2</a></li>
<li><a href="#">Sub-Level Item 1.1.3</a></li>
<li><a href="#">Sub-Level Item 1.1.4</a></li>

</ul>
</li>
<li><a href="#">Sub-Level Item 1.2</a>
<ul>
<li><a href="#">Sub-Level Item 1.2.1</a></li>
<li><a href="#">Sub-Level Item 1.2.2</a></li>
<li><a href="#">Sub-Level Item 1.2.3</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item 1.3</a></li>

<li><a href="#">Sub-Level Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Menu-Level Item 2</a>
<ul>
<li><a href="#">Sub-Level Item 2.1</a>
<ul>

<li><a href="#">Sub-Level Item 2.1.1</a></li>
<li><a href="#">Sub-Level Item 2.1.2</a>
<ul>
<li><a href="#">Sub-Level Item 2.1.2.1</a></li>
<li><a href="#">Sub-Level Item 2.1.2.2</a></li>
<li><a href="#">Sub-Level Item 2.1.2.3</a></li>
<li><a href="#">Sub-Level Item 2.1.2.4</a></li>

</ul>
</li>

<li><a href="#">Sub-Level Item 2.1.3</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item 2.2</a></li>
<li><a href="#">Sub-Level Item 2.3</a></li>

<li><a href="#">Sub-Level Item 2.4</a>
<ul>
<li><a href="#">Sub-Level Item 2.4.1</a></li>
<li><a href="#">Sub-Level Item 2.4.2</a></li>
<li><a href="#">Sub-Level Item 2.4.3</a></li>
<li><a href="#">Sub-Level Item 2.4.4</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="#">Menu-Level Item 3</a></li>
<li><a href="#">Menu-Level Item 4</a></li>
</ul>
</div>
- Trong code trên bạn thay đổi các thông số sau cho phù hợp. Dấu # thay bằng liên kết tới các nhãn hoặc bài viết.
- Sau đó bấm Lưu lại



Menu trên có style được định dạng bằng HTML và CSS3. Menu có sử dụng các thuộc tính border-radius để bo tròn góc, thuộc tính box-shadow tạo bóng đổ cho menu con và text-shadow để tạo bóng đổ cho chữ. Menu này hoạt động tốt trên các trình duyệt có hỗ trợ CSS3 như Firefox, Safari, Chrome, IE 9+. Trên các trình duyệt không hỗ trợ CSS3 như IE6, IE7, IE8 thì tính năng Dropdown vẫn hoạt động tốt ngoại trừ những hiệu ứng của CSS3 (border-radius, box-shadow, text-shadow)
- Nếu có host chứa file riêng thì bạn có thể copy tất cả code ở bước 4 vào thành 1file.CSS sau đó upload lên host. Lấy link file đó và chèn vào trước thẻ </head> theo cấu trúc:
<link href="URL_style.css" rel="stylesheet" type="text/css" />
URL_style.css chính là link CSS.
Chúc thành công!

Thứ Sáu, 21 tháng 12, 2012

[ HOT ] Nhận 45.000 tiền điện thoại và 20Mb DATA Miễn Phí

Chương trình chăm sóc khách hàng đăng ký nhận tin nhắn quảng cáo  Từ ngày 18/12/2012 đến ngày 31/03/2012, MobiFone triển khai chương trình chăm sóc khách hàng đối với các thuê bao trả trước kích hoạt trước thời điểm 0h00 ngày 01/12/2012 hoặc thuê bao trả sau đăng ký nhận các thông tin giới thiệu sản phẩm, dịch vụ, khuyến mại từ MobiFone. 
Để tham gia chương trình, khách hàng có thể đăng ký bằng 2 hình thức: Soạn tin nhắn với cú pháp QC gửi đến số tắt 9241 hoặc Gọi 18001090 nhánh 7 để yêu cầu điện thoại viên hỗ trợ đăng ký.  Khi tham gia chương trình, khách hàng sẽ được tặng tổng cộng 45.000 đồng (đã bao gồm thuế GTGT) chia làm 3 kỳ trong vòng 90 ngày.
 
http://www.mobifone.com.vn/web/vn/home/promotion.jsp?id=3520

Thứ Bảy, 15 tháng 12, 2012

Săn tìm backlink với Google Alerts

Xây dựng backlinks là một việc tất yếu của Internet Marketing, nhưng đặt backlink ở đâu để có hiệu quả vì không phải back link lớn là hiệu quả vì mục đích của bạn là những click để dẫn đên website của mình.

Thứ Sáu, 14 tháng 12, 2012

Chèn biểu tượng cảm xúc vào nhận xét dạng input

Chèn biểu tượng cảm xúc vào nhận xét dạng input (Update 20/02/2012)
Chắc hẳn bạn cũng biết rằng hệ thống nhận xét của Blogspot có phần khung viết nhận xét (Comments Form and Editor) dưới dạng nhúng từ bên ngoài qua thẻ iframe do đó chúng ta không thể chèn biểu tượng cảm xúc (Emoticons) vào nhận xét bằng phương pháp input như Wordpress. Để giải quyết vấn đề này, chỉ có một cách là tạo khung nhận xét riêng theo kiểu Wordpress cho Blogspot.

Tuy nhiên tạm thời mình chưa tìm ra giải pháp vì thế có thể áp dụng một thủ thuật trung gian, tức là tạo tính năng chèn biểu tượng cảm xúc trực tiếp vào một vùng text (textarea) kết hợp nút chọn để người dùng copy mã nhập rồi dán vào khung viết nhận xét, ngoài ra còn có chức năng chèn các thẻ như <b>, <i>, <em>, <a>. Hy vọng đây sẽ là bàn đạp để chúng ta tiến thêm một bước trong công cuộc hiện đại hóa hệ thống nhận xét của Blogspot so với cách mà các blog khác hướng dẫn.
Chèn biểu tượng cảm xúc vào nhận xét dạng input (Update 20/02/2012)
Thủ thuật này đã kết hợp thủ thuật tạo bộ biểu tượng cảm xúc cho nhận xét vì thế nếu áp dụng thủ thuật này thì bạn cần tháo thủ thuật cũ liên quan (nếu đã cài đặt rồi) và thực hiện theo các bước sau đâ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 Mở rộng tiện ích (Expand Widget Templates).
5.
Đặt đoạn code sau đây vào trước thẻ </body> (Đây là script chức năng cho bộ biểu tượng cảm xúc hoạt động).
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Karl Carsten || http://vinacer.blogspot.com/ || © Copyright 2011
function emoticonBloggervinacer() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://2.bp.blogspot.com/_XwhCottp9-E/TTmbVU_kkAI/AAAAAAAAAEk/i8I-QCsR-SU/s1600/49.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://4.bp.blogspot.com/_XwhCottp9-E/TTmb0X8B7dI/AAAAAAAAAEo/kIL3qY4z64c/s1600/102.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://2.bp.blogspot.com/_XwhCottp9-E/TTmcTfeKNWI/AAAAAAAAAEs/diNANNZkMyQ/s1600/113.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://1.bp.blogspot.com/_XwhCottp9-E/TTmc01yNOUI/AAAAAAAAAEw/Zn6dL8OwwTo/s1600/93.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmdWcMGnWI/AAAAAAAAAE0/akbkAp24xLQ/s1600/61.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmd6T7Xn4I/AAAAAAAAAE4/U0uh6Hoq_sI/s1600/134.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmehTlZqII/AAAAAAAAAFA/l_mADXotyKQ/s1600/39.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTme6tBMcOI/AAAAAAAAAFE/DAolMctYPqw/s1600/106.gif" />');
theText = theText.replace(/:9\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmfX20J-yI/AAAAAAAAAFI/tII_6K4KRCQ/s1600/43.gif" />');
theText = theText.replace(/:A\)/g,'<img src="https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxprv4iStI/AAAAAAAAAH8/e1tCATRhM8k/111.gif" />');
theText = theText.replace(/:B\)/g,'<img src="http://2.bp.blogspot.com/_XwhCottp9-E/TTmg0FnIr4I/AAAAAAAAAFQ/D7j1I62S9Qk/s1600/48.gif" />');
theText = theText.replace(/:C\)/g,'<img src="http://2.bp.blogspot.com/_XwhCottp9-E/TTmhNLMIPgI/AAAAAAAAAFU/gDc0r27mvVE/s1600/54.gif" />');
theText = theText.replace(/:D\)/g,'<img src="https://lh6.googleusercontent.com/_9-sNIAfGhKg/TXxppiLfiKI/AAAAAAAAAHY/2OPphwT9pB0/63.gif" />');
theText = theText.replace(/:E\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmiEhF5zeI/AAAAAAAAAFc/jTXlR5srhac/s1600/100.gif" />');
theText = theText.replace(/:F\)/g,'<img src="http://4.bp.blogspot.com/_XwhCottp9-E/TTmi8fWtW3I/AAAAAAAAAFg/whJrnaxVlMg/s1600/45.gif" />');
theText = theText.replace(/:G\)/g,'<img src="http://1.bp.blogspot.com/_XwhCottp9-E/TTmjoGrMk2I/AAAAAAAAAFk/l6Qyx1zDYSw/s1600/77.gif" />');
theText = theText.replace(/:H\)/g,'<img src="http://1.bp.blogspot.com/_XwhCottp9-E/TTmkKU7ogHI/AAAAAAAAAFo/Pz7Y8TFiuBY/s1600/86.gif" />');
theText = theText.replace(/:I\)/g,'<img src="http://4.bp.blogspot.com/_XwhCottp9-E/TTmkoSLCwpI/AAAAAAAAAFs/yA9mJ4RIeig/s1600/94.gif" />');
theText = theText.replace(/:J\)/g,'<img src="http://3.bp.blogspot.com/_XwhCottp9-E/TTmk8pAvkXI/AAAAAAAAAFw/_vZNhJpZWXk/s1600/83.gif" />');
theText = theText.replace(/:K\)/g,'<img src="http://4.bp.blogspot.com/_XwhCottp9-E/TTmlWub0TUI/AAAAAAAAAF0/W9Rj1z_nx8U/s1600/59.gif" />');
theText = theText.replace(/:L\)/g,'<img src="http://lh4.googleusercontent.com/-Jkm1_kmUV-o/TW3rxDgKE-I/AAAAAAAAAJ8/DPc2XyQXovg/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M\)/g,'<img src="http://lh4.googleusercontent.com/-JsBeD8OhIGA/TW3rqDDSGFI/AAAAAAAAAJw/IEVj5KX08c4/s1600/alo.gif" />');
theText = theText.replace(/:N\)/g,'<img src="http://lh6.googleusercontent.com/-gIeSsZ94xUU/TW3ru9VpcFI/AAAAAAAAAJ4/H5esmIaOUBA/s1600/shutup.gif" />');
theText = theText.replace(/:O\)/g,'<img src="http://lh6.googleusercontent.com/-fu3iaiaFn1Y/TW3ry-NJcrI/AAAAAAAAAKA/N_MUfucV_do/s1600/yeulam.gif" />');
theText = theText.replace(/:P\)/g,'<img src="http://lh6.googleusercontent.com/-yLDJ0T3p65E/TW3rs-cFoAI/AAAAAAAAAJ0/aa8YOxeo3oc/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggervinacer();
</script>
</b:if>
 Cần chú ý để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID comments-block cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng:
<b:loop values='data:post.comments' var='comment'>
 Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ: comments-block, comments-block3, comments_block, cm_block, commentsblock


 Nếu bạn nào dùng mà mình giới thiệu trước đây  thì thay đoạn:
bodyText = document.getElementById('comments-block');
thành:
bodyText = document.getElementById('cm_block'); 
- Update ngày 20/02/2012: Đối với các bạn sử dụng Thread Comment mặc định của Blogger (tức là blogspot mới tạo có phân cấp tới cấp 2) thì các bạn thay đoạn trên thành đoạn sau:


bodyText = document.getElementById("comment-holder"); 

 6. Tìm đến đoạn code như bên dưới. Đoạn code này biểu thị phần khung viết nhận xét.
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
Đặt trước đoạn code trên bằng đoạn code bên dưới:
<script type='text/javascript'>
//<![CDATA[
// Script to insert Emoticons and Links on Blogspot Comments V1 by www.thuthuatblogger.info
function comments_URL() {
var r = prompt("Nhập địa chỉ trang", "http://");
var p = prompt("Nhập link text hiển thị", "Text");
if(r != "") ; if(p != ""){
document.getElementById('comments_input').value += "<a href='" + r + "' rel='nofollow'>" + p + "<\/a>";
} else {
alert("Bạn đã nhập xong dữ liệu");
}
}
function comments_HTML() {
document.getElementById('comments_input').value += '<a href=\'http://URL dẫn đến link \'>Trang<\/a>';
}
function comments_B() {
document.getElementById('comments_input').value += '<b><\/b>';
}
function comments_I() {
document.getElementById('comments_input').value += '<i><\/i>';
}
function comments_EM() {
document.getElementById('comments_input').value += '<em><\/em>';
}
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&laquo;&nbsp;Less</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">More&nbsp;&raquo;</a>';
}
//]]>
</script>
<style>
#comments_insert {padding:0;margin:0;width:600px;float:left;text-align: center}
#comments_insert img {padding:0;border:none;margin:2px}
.text_style_wrap {margin-top:10px;}
.text_style {border:1px solid #069;padding:3px;background: #d8eaee}
#comments_insert a {text-decoration:none}
#comments_HTML {display: none}
#comments_input {margin-top:10px}
.tooltip{outline:none;cursor:help;text-decoration:none;position:relative}
.tooltip span{margin-left:-999em;position:absolute}
.tooltip:hover span{border-radius:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px rgba(0,0,0,0.1);font-family:Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:300px}
.tooltip:hover img{border:0;margin:-10px 0 0 -55px;float:left;position:absolute}
.tooltip:hover em{font-family:Candara,Tahoma,Geneva,sans-serif;font-size:1.2em;font-weight:bold;display:block;padding:0.2em 0 0.6em 0}
.help{padding: 0.8em 1em; background: #FFCCAA; border: 1px solid #FF3334;text-align:justify;color:#000}
</style>
<!--[if IE]> <style> #comments_URL {display: none} #comments_HTML {display:inline} </style> <![endif]-->

<div id='comments_insert'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:1) &quot;;'><img src='http://2.bp.blogspot.com/_XwhCottp9-E/TTmbVU_kkAI/AAAAAAAAAEk/i8I-QCsR-SU/s1600/49.gif' style='border: 0; padding:0' title='hê hê hê'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:2) &quot;;'><img src='http://4.bp.blogspot.com/_XwhCottp9-E/TTmb0X8B7dI/AAAAAAAAAEo/kIL3qY4z64c/s1600/102.gif' style='border: 0; padding:0' title='hôn hôn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:3) &quot;;'><img src='http://2.bp.blogspot.com/_XwhCottp9-E/TTmcTfeKNWI/AAAAAAAAAEs/diNANNZkMyQ/s1600/113.gif' style='border: 0; padding:0' title='ua ua ua'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:4) &quot;;'><img src='http://1.bp.blogspot.com/_XwhCottp9-E/TTmc01yNOUI/AAAAAAAAAEw/Zn6dL8OwwTo/s1600/93.gif' style='border: 0; padding:0' title='nhìn nè'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:5) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmdWcMGnWI/AAAAAAAAAE0/akbkAp24xLQ/s1600/61.gif' style='border: 0; padding:0' title='vỗ tay'/></a>
<span id='smiley-more' style='display: none;'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:6) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmd6T7Xn4I/AAAAAAAAAE4/U0uh6Hoq_sI/s1600/134.gif' style='border: 0; padding:0' title='tát bớp'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:7) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmehTlZqII/AAAAAAAAAFA/l_mADXotyKQ/s1600/39.gif' style='border: 0; padding:0' title='rơi lệ'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:8) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTme6tBMcOI/AAAAAAAAAFE/DAolMctYPqw/s1600/106.gif' style='border: 0; padding:0' title='money money'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:9) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmfX20J-yI/AAAAAAAAAFI/tII_6K4KRCQ/s1600/43.gif' style='border: 0; padding:0' title='lêu lêu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:A) &quot;;'><img src='https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxprv4iStI/AAAAAAAAAH8/e1tCATRhM8k/111.gif' style='border: 0; padding:0' title='lắc đầu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:B) &quot;;'><img src='http://2.bp.blogspot.com/_XwhCottp9-E/TTmg0FnIr4I/AAAAAAAAAFQ/D7j1I62S9Qk/s1600/48.gif' style='border: 0; padding:0' title='khóc ròng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:C) &quot;;'><img src='http://2.bp.blogspot.com/_XwhCottp9-E/TTmhNLMIPgI/AAAAAAAAAFU/gDc0r27mvVE/s1600/54.gif' style='border: 0; padding:0' title='I don’t know'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:D) &quot;;'><img src='https://lh6.googleusercontent.com/_9-sNIAfGhKg/TXxppiLfiKI/AAAAAAAAAHY/2OPphwT9pB0/63.gif' style='border: 0; padding:0' title='hi hi hi'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:E) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmiEhF5zeI/AAAAAAAAAFc/jTXlR5srhac/s1600/100.gif' style='border: 0; padding:0' title='đá một phát'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:F) &quot;;'><img src='http://4.bp.blogspot.com/_XwhCottp9-E/TTmi8fWtW3I/AAAAAAAAAFg/whJrnaxVlMg/s1600/45.gif' style='border: 0; padding:0' title='cười lớn giơ răng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:G) &quot;;'><img src='http://1.bp.blogspot.com/_XwhCottp9-E/TTmjoGrMk2I/AAAAAAAAAFk/l6Qyx1zDYSw/s1600/77.gif' style='border: 0; padding:0' title='cụng ly'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:H) &quot;;'><img src='http://1.bp.blogspot.com/_XwhCottp9-E/TTmkKU7ogHI/AAAAAAAAAFo/Pz7Y8TFiuBY/s1600/86.gif' style='border: 0; padding:0' title='chém gió'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:I) &quot;;'><img src='http://4.bp.blogspot.com/_XwhCottp9-E/TTmkoSLCwpI/AAAAAAAAAFs/yA9mJ4RIeig/s1600/94.gif' style='border: 0; padding:0' title='bắt tay'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:J) &quot;;'><img src='http://3.bp.blogspot.com/_XwhCottp9-E/TTmk8pAvkXI/AAAAAAAAAFw/_vZNhJpZWXk/s1600/83.gif' style='border: 0; padding:0' title='ăn ăn ăn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:K) &quot;;'><img src='http://4.bp.blogspot.com/_XwhCottp9-E/TTmlWub0TUI/AAAAAAAAAF0/W9Rj1z_nx8U/s1600/59.gif' style='border: 0; padding:0' title='byyeee'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:L) &quot;;'><img src='http://lh4.googleusercontent.com/-Jkm1_kmUV-o/TW3rxDgKE-I/AAAAAAAAAJ8/DPc2XyQXovg/s1600/soldierbaby.gif' style='border: 0; padding:0' title='nhóc lính'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:M) &quot;;'><img src='http://lh4.googleusercontent.com/-JsBeD8OhIGA/TW3rqDDSGFI/AAAAAAAAAJw/IEVj5KX08c4/s1600/alo.gif' style='border: 0; padding:0' title='Alo'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:N) &quot;;'><img src='http://lh6.googleusercontent.com/-gIeSsZ94xUU/TW3ru9VpcFI/AAAAAAAAAJ4/H5esmIaOUBA/s1600/shutup.gif' style='border: 0; padding:0' title='Shup up'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:O) &quot;;'><img src='http://lh6.googleusercontent.com/-fu3iaiaFn1Y/TW3ry-NJcrI/AAAAAAAAAKA/N_MUfucV_do/s1600/yeulam.gif' style='border: 0; padding:0' title='Yêu lắm đó'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:P) &quot;;'><img src='http://lh6.googleusercontent.com/-yLDJ0T3p65E/TW3rs-cFoAI/AAAAAAAAAJ0/aa8YOxeo3oc/s1600/datbomb.gif' style='border: 0; padding:0' title='Đặt bom'/></a>
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>
More
&#8594;</a></span>

<div class='text_style_wrap'>
<a href='javascript: void(0);' onClick='comments_B()'><span class='text_style'><b>Chữ đậm</b></span></a>
<a href='javascript: void(0);' onClick='comments_I()'><span class='text_style'><i>Chữ nghiêng</i></span></a>
<a href='javascript: void(0);' onClick='comments_EM()'><span class='text_style'><em>Chữ nghiêng 2</em></span></a>
<a href='javascript: void(0);' id='comments_HTML' onClick='comments_HTML()'><span class='text_style'>Chèn Link</span></a>
<a href='javascript: void(0);' id='comments_URL' onClick='comments_URL()'><span class='text_style'>Chèn Link</span></a>
<script type='text/javascript'>
function openup_parseHTML() { window.open(&quot;http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html&quot;, &quot;followblog&quot;, &quot;height=600, width=500, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot; ); }
</script>
<a href='javascript:openup_parseHTML()' rel='nofollow' title='Mã hóa code trước khi đưa vào bình luận'><span class='text_style'>Mã hóa code</span></a>
<a class='tooltip' href='javascript: void(0);'><b style='color:#F00'>Help ?</b><span class='help'>Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.</span></a>
</div>
<form name='comments_form'>
<textarea cols='70' id='comments_input' rows='1' style='background: #F8F8FF;margin-bottom:7px'/>
<br/>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).select();'><span class='text_style'>Chọn</span></a>
<a href='javascript: void(0);' onClick='document.comments_form.reset();'><span class='text_style'>Xóa</span></a>
</form>
</div>
 Trong đó:
  •  textarea cols='70'  là chiều rộng ô hiện các ký tự khi bạn click vào biểu tượng.
  •  width:600px  là độ rộng của phần ảnh bên trên khung  textarea cols='70'  .
  • Những phần được đánh dấu màu đỏ là những phần bạn có thể tùy biến theo ý thích của mình.
 7 Lưu  Template.
 *Trên đây mình gắn sẳn 25 biểu tượng cảm xúc, nếu các bạn muốn thêm thì có thể tự nghiên cứu để gắn thêm vào, đảm bảo sự đồng nhất biểu tượng theo thứ tự ở Bước 1 và Bước2:
 Ký tự tắt nằm giữa 2 ký tự /
  Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
  Với ký tự < phải đổi thành <
  Với ký tự > phải đổi thành >
  Với ký tự & phải đổi thành &
  Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.
 Trích dẫn:
 Lưu ý là với những ký tự tắt bao gồm của nhau như
Code:
 :))

Code:
:)
thì bạn phải đặt
Code:
:))
lên trước
Code:
:)
nếu không chỉ ký tự ít hơn được hiện lên.

  Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.

Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).


Dưới đây là một số hình bạn có thể xem và chọn nếu thích:


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow - Chèn biểu tượng cảm xúc vào nhận xét dạng input (Update 20/02/2012) Bạn nhập từ: votay Bạn nhập từ: hihihi Bạn nhập từ: antap Bạn nhập từ: chemgio Bạn nhập từ: nhinne Bạn nhập từ: battay Bạn nhập từ: dda Bạn nhập từ: moneymoney Bạn nhập từ: moison Bạn nhập từ: lacdau Bạn nhập từ: uauaua Bạn nhập từ: tatbop Bạn nhập từ: aloalo Bạn nhập từ: chuichui Bạn nhập từ: dotlua Bạn nhập từ: loveyou Bạn nhập từ: dmohoi Bạn nhập từ: danhrang Bạn nhập từ: bichoang Bạn nhập từ: cdv Bạn nhập từ: cunghi Bạn nhập từ: anhtrang Bạn nhập từ: nuocmui Bạn nhập từ: vuivewa Bạn nhập từ: liem Bạn nhập từ: suytu Bạn nhập từ: chaomay Bạn nhập từ: hongthem Bạn nhập từ: yeahyou Bạn nhập từ: votulu Bạn nhập từ: muonchetah Bạn nhập từ: huhune Bạn nhập từ: bucroinhe Bạn nhập từ: honcaine Bạn nhập từ: chucmungnammoi Bạn nhập từ: chaoban Bạn nhập từ: toiuocgi Bạn nhập từ: yessirl Bạn nhập từ: khocwatroi Bạn nhập từ: tambiet Bạn nhập từ: huhuhu Bạn nhập từ: dabong Bạn nhập từ: dungdung Bạn nhập từ: lonmeo Bạn nhập từ: hutthuoc Bạn nhập từ: lovelovelove Bạn nhập từ: tungkinh Bạn nhập từ: happy-new-year Bạn nhập từ: kemne
Theo: thuthuatblogger.