delete cung cấp bởi blogger

Để ẩn dòng chữ “Cung cấp bởi blogger”

I. Các bạn làm như sau:

1. Đăng nhập vào blog → thiết kế →chỉnh sửa HTML → Mở rộng mẫu tiện ích.

2. Ở đây bạn ấn cặp phím Ctrl + F → gõ dòng chữ Attribution

- Sẽ hiển thị tương tự như hình dưới:

3. Tiếp theo các bạn xóa dòng <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> rồi lưu mẫu. - Sẽ hiện ra bảng như hình dưới:

- Các bạn chọn dòng “xóa tiện ích”

II. Ngoài ra những template khác không xoá được như cách trên và bạn có thể xoá theo cách dưới đây.

1. Đăng nhập vào blog → thiết kế →chỉnh sửa HTML → Mở rộng mẫu tiện ích.

2. Ở đây bạn ấn cặp phím Ctrl + F → gõ dòng chữ Attribution

Bạn nhìn kỹ sẽ thấy đoạn code như sau:

<b:section class='foot' id='footer-3' showaddelement='no'>

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

<b:includable id='main'>

<b:if cond='data:feedbackSurveyLink'>

<div class='mobile-survey-link' style='text-align: center;'>

<data:feedbackSurveyLink/>

</div>

</b:if>

<div class='widget-content' style='text-align: center;'>

<b:if cond='data:attribution != ""'>

<data:attribution/>

</b:if>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

3. Tiếp theo bạn sửa chữ :

no thành yes

true thành false
tiếp theo bạn save template lại

tiếp sau đó bạn nhấp vào trang chủ và kéo xuống cuối trang và nhấp vô biểu tượng cài đặt và chọn xóa bỏ

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

Button Hỗ trợ Skype Online cho Blog /website

Hiện nay nhu cầu hỗ trợ trực tuyến trên mạng rất phổ biến. Blog của bạn sẽ có thêm một lượng lớn độc giả nếu dịch vụ hỗ trợ và chăm sóc khách hàng thường xuyên hơn.Cách đơn giản nhất mà không mất phí đó là dùng các mạng xã hội như Skype, facebook, yahoo. Bài viết này mình sẽ hướng dẫn các bạn code để giúp độc giả khi truy cập blog có thể biết được bạn đang online bằng tài khoản Skype hay khong để chat trực tuyến và yêu cầu hỗ trợ online mà không cần phải gọi điện thoại hỏi trước.

» Cách tạo Button Hỗ trợ Skype Online cho Blog /website

l. Đăng nhập vào blog

2. Chọn Bố cục (layout)

3. Chọn thêm tiện ích (Add widget) » Chọn HTML/Javascripts và dán code bên dưới vào nha.

<a href="Skype:YOUR-ID-SKYPE?chat"> <img src="http://mystatus.skype.com/bigclassic/YOUR-ID-SKYPE" title="Liên hệ với nhóm tác giả để được trợ giúp trực tuyến qua Skyper" width="120" height="30" alt=""> </a>

» Trong đó:

YOUR-ID-SKYPE là id trang Skype của bạn, có 2 lần thay trong code trên.
width="120" là chiều rộng của hình ảnh button
height="30" là chiều cao của hình ảnh button
bigclassic là hình ảnh của button sẽ hiển thị phần này bạn có thể thay đổi thành cách hình khác như phần nâng cao ở cuối bài viết này.

» Một số hình ảnh hỗ trợ Skype bạn có thể chọn

Nếu thích hình nào trong các hình bên dưới bạn chỉ cần thay giá trị bigclassic thành từ bên dưới theo ý thích của bạn nha.

mediumicon

bigclassic

smallclassic

balloon

» Tùy biến sáng xanh khi có người online

1. Truy cập vào trang tùy biến của Skype : https://dev.skype.com/skype-uri/generator
2. Điền thông tin mà họ yêu cầu sau đó copy code bạn lấy được về dán vào blog của bạn nha,

Đổ bóng tiêu đề bài viết

Heading Tag với hiệu ứng đổ bóng và dê chuột Hover

Blogger blog cho phép chỉnh sửa stylesheet. Bạn có thể tùy chỉnh các mã để blog như ý muốn. Bài trước, Namkna đã chia sẻ nhiều cách khác nhau tùy biến các thẻ tiêu đề, tức là H3. Namkna sử dụng thẻ H3 bên trong mỗi bài viết. Thẻ tiêu đề (heading tag) được xem là phần quan trọng nhất với Seo. Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo ra một tiêu đề tùy chỉnh và sẽ thay đổi màu sắc khi chuột di chuột. Namkna sẽ sử dụng CSS3 hiệu ứng để tạo ra một hiệu ứng đổ bóng cùng với hiệu ứng hover khi dê chuột lên tiêu đề đó. Điều này sẽ cung cấp cho tiêu đề của bạn một cái nhìn mới hơn. Vì vậy, hãy làm điều đó!

Demo chính là các tiêu đề con trong bài viết này!

☼ 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ửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin> (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ ]]></b:skin> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).

/*------http://namkna.blogspot.com/--------*/
h3{
font-family:veranda !important;
font-style:italic !important;
}

.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Lưu ý: Hãy xóa tất cả những thẻ trong blog của bạn bắt đầu bằng thẻ CSS dạng:
.post h3 {...}
.post h3:hover {...}
.post h3 span  {...}
....

Tùy chỉnh đoạn code trên:

Để thay đổi chỉnh sửa kiểu font Verdana hãy thay thế nó với bất kỳ kiểu font bạn muốn.
Để thay đổi chữ in nghiêng hãy thay thế (italic) với một trong hai loại là bình thường (normal) hoặc đậm (norma)
Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi chưadê chuột lên, Hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi đã dê chuột lên, Hãy thay đổi mã màu #FF33F thành mã màu lựa chọn của bạn.
Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #FF133F thành mã màu lựa chọn của bạn.

6- Lưu mẫu của bạn lại!

Cách sử dụng khi đăng bài?

1- Tạo một bài đăng mới.
2- Check vào tab HTML và sử dụng đoạn code sau:

<h3> Tiêu đề bài viết của bạn ở đây </h3>

Xem ảnh minh họa để tháy ró hơn.

3- Sau khi bạn xuất bản bài đăng, bạn sẽ thấy tác dụng của thủ thuật.

Tôi hy vọng mẹo nhỏ này sẽ giúp bạn tạo các bài viết có chất lượng tốt hơn bằng văn bản. Hãy cho namkna biết nếu bạn cần bất kỳ sự giúp đỡ nào.

Tự động chèn link cho bài viết

Tự động chèn link cho từ khóa trong bài viết của blogspot

Bình thường để chèn link vào một từ khóa trong bài viết bạn phải thực hiện thủ công. Như vậy với bài viết có nhiều từ khóa xẽ rất bất tiện. Bài viết này namkna sẽ hướng dẫn các bạn cách đểtự động chèn liên kết (link) vào các từ khóa (keywork) nằm trong bài viết của bạn mà không phải vất vả thêm thủ công từng link bằng tay...

Ảnh minh họa:

Tự động chèn link cho từ khóa trong bài viết của blogspot - Auto add link to keywork of post blogspot

» Bắt đầu thủ thuật "tự động thêm link vào từ khóa của bài viết."

1. Đăng nhập vào tài khoản Blogger

2. Vào Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chọn một trong 2 đoạn code bên dưới và chèn nó ngay trước thẻ </head>
(Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này):
- Đoạn 1: Các liên kết mở ngay tại trang bạn đang xem:

<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

- Đoạn 2: Các link mở ra trong tab mới khi click chuột vào thì hãy dùng đoạn code bên dưới:

<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" target="_blank">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

5. Tìm đoạn code sau:

<data:post.body/>

- Thay thế nó thành:

<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 3',true,'Link từ khóa 3','summary<data:post.id/>');
</script>

Lưu ý: Mỗi blog thường có từ 2 đến 4 đoạn code <data:post.body/> như trên. Các bạn phải chèn đúng vị trí mới hiển thị.

¤ Trong đó:

Thay Từ khóa 1,2,3 thành các từ khóa bạn hay sử dụng trong blog.
Thay Link từ khóa 1,2,3 thành link tương ứng với các từ khóa.
Để thâm một từ khóa mới bạn chỉ cần thêm đoạn mã bên dưới vào trước thẻ </script>của đoạn code trên.
```
highlightSearchTerms('Từ khóa n',true,'Link từ khóa n','summary<data:post.id/>');
```

6. Lưu mẫu lại.

- Giờ hãy tạo một bài viết mới chứa các từ khóa như bạn đx thiết lập ở đoạn scripts trong bước 6 rồi xuát bản và xem kết quả nha.

Flying Drop Down Menubar

Css3 Flying Drop Down Menubar cho Blogger

Với mẫu dropdown fly menu sử hiệu ứng bay từ CSS3 blog của bạn sẽ đặc biệt hơn, và sẽ không lo tốc độ vì tất cả đều là CSS3. Các menu con sẽ bay khi dê chuột vào menu chính. Menu hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,.... Các bạn có thể xem ảnh minh họa hoặc demo.

VIEW DEMO

» Cách tiến hành:

1. Đăng nhập vào blog

2. Chọn Bố cục (lsyout)

3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscipts và dán đoạn code bên dưới và dán vào.

/* Flying Css3 menu http://namkna.blogspot.com/*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
    z-index: 4;
}
#flyingmenubt li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#flyingmenubt ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}</style>
<ul id="flyingmenubt">
    <li><a href="http://namkna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://namkna.blogspot.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Back</a></li>
</ul>

» Tùy chỉnh:

Sửa margin: 40px auto; nếu menu có khoảng cách với phần trên và dưới, Có thể đổi thành margin: 0 auto; là tốt nhất,
width: 980px; là chiều rộng của menu. hãy chỉnh lại cho phù hợp với độ rộng blog của bạn.
width: 105px; là chiều rộng menu con. hãy thay đổi nếu tiêu đề menu quá dài.
width: 150px; là chiều rộng tiêu đề khi dê chuột vào menu,
height: 36px; là chiều cao của menu chính.
Thay dấu thăng màu đỏ (#) là liên kết tới bài viết, trang, hoặc nhãn của bạn.
Thay màu xanh là tên bài viết, trang, hoặc nhãn tương ứng với link màu đỏ. nên là từ khố không nên quá dài sẽ sấu menu.

Dropmenu Đơn giản

CSS Dropdown menu đơn giản cho blogspot

Bài viết này namkna sẽ hướng đẫn các bạn thiết kế một mẫu menu đơn giản để đặt trên sidebar hoặc header, Menu hoạt động dựa trên các thuộc tính CSS để góp phần làm giảm tới mức thấp nhất thời gian load trang: Về kiểu dáng menu này chỉ có một tiêu đề duy nhất và nó sẽ được mở rộng ra thêm các menu con khi bạn dê chuột lên phần tiêu đề đó.

Các bạn có thể xem hình minh họa ngay bên cạnh tiêu đề bài viết này:

☼ Cách thêm CSS Dropdown menu dơn giản cho blogspot:

1- Đăng nhập vào Blog

2- Vào Bố cục (Layout)

3- Bấm vào thêm tiện ích => Chọn HTML/Javascripts và dán code bên dưới vào.

<style>nav.drop-menu {
  position:relative;
  padding:10px 15px;
  background:#6D92A5;
  width:200px;
  font:bold 12px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#eee;
}

nav.drop-menu:after {
  content:"";
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#fff;
  position:absolute;
  top:16px;
  right:14px;
}

nav.drop-menu ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  text-transform:none;
  margin:0px;
  padding:0px;
  background:#6D92A5;
  width:100%;
  font-weight:normal;
  display:none;
}

nav.drop-menu li {
  list-style:none;
  margin:0px;
  padding:0px;
}

nav.drop-menu li a {
  display:block;
  margin:0px;
  padding:7px 15px;
  text-decoration:none;
  color:#ccc;
}

nav.drop-menu li a:hover {
  background:#74838F;
  padding-left:19px;
}

nav.drop-menu:hover ul {
  display:block;
}</style>
<nav class='drop-menu'>
Drop Down Menu
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Portfolio</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>Archive</a></li>
        <li><a href='#'>Search</a></li>
        <li><a href='#'>Company</a></li>
    </ul>
</nav>

» Tùy chỉnh:

Thay dấu thăng màu đỏ (#) thành liên kết URL tới blog, nhãn hoặc bài viết của bạn.
Thay phần màu xanh thành tiêu đề tương ứng với các liên kết cùng hàng. (Không nên đặt quá dài sẽ xuống dòng không đẹp nha.
Thay chữ Drop Down Menu thành chữ tiêu đề. Đây là phần luôn hiển thị của menu.

4- Lưu mẫu lại và quay trở lại blog để xem kết quả của bạn nha.

Navigation Dropmenu

Colume Dropmenu có Search cho blogspot

Mẫu Dropmenu menu này có đặc điểm là Sub menu chia thành nhiều cột, giúp bạn bố chí các mục theo các chủ đề lớn nhỏ. Menu sử dụng CSS và hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,... Đặc biệt namkna tích hợp thêm khung searck giúp menu đep hơn và chuyên nghiệp hơn.

Colume Dropmenu with Search for blogspot

» Cách thêm Colume Dropmenu with Search cho blogger

1. Đăng nhập vào blog

2. Chọn Bố cục (layout)

3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscip và dán đoạn code bên dưới vào.

<style>
#menu-module{width:100%}
#menu-wrapper{background:#fff;font-size:14px;width:980px;margin:0 auto;border-top:1px solid #eef2f8;border-bottom:1px solid #eef2f8;}
#fdmega-menu ul{margin:0;padding:0;list-style:none;width:100%}
#main_menu{float:left;position:relative;height:33px;display:block}
#main_menu li{float:left;height:33px;padding:0;font-family:Times}
#main_menu li:hover,#main_menu li:hover a#ff4{background:#282e2e;color:#ccc}
#main_menu li a{border-left:1px solid #eef2f8;border-right:1px solid #ced1d6;text-transform:uppercase;padding:4px 10px 0;margin:6px 0 0 0;display:block;color:#2c2d2f;text-decoration:none;font-weight:bold}
#main_menu li:hover a{color:#ccc;border:0}
#main_menu li.searchpost{width:200px;height:24px;float:right;-webkit-border-radius:10px;-moz-border-radius:5px;border-radius:5px;background:#f4f4f4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ehL9uOiXEdFE3O-4NNr4eHzjwaJ8A_DadORbOPhmTF33fCX4DOEXRZjK03POJ8nHeaElJSnNBZh-5kOP146pxph9fa5N0Gwr3MTNETHGP6_hQyiRWlTrbWczUSO9rhR6W74zp7OX2_Lo/s1600/search-namkna-4.gif) no-repeat 176px 4px;border:1px solid #b8bbbf;margin:4px 0 0 0}
#search-results{margin-top:5px;z-index:-9999}
#main_menu li.first a{border-left:0}
#main_menu li.first:hover{background:none}
#main_menu li.first:hover a{border-right:1px solid #ced1d6;color:#000}
#main_menu li.last a{border-right:0}
#main_menu li div.sub{z-index:9999;position:absolute;line-height:1.3em;top:33px;min-height:100px;background:#282e2e;padding:0 8px 0 8px;display:none;border-right:4px solid #e1e4e8;border-left:4px solid #e1e4e8;border-bottom:4px solid #e1e4e8;color:#333}
#main_menu li:hover div.sub{display:block}
#main_menu li div.sub div.cont{background:url(http://traidatmuidotcom.appspot.com/background/sep.gif) repeat-y right 0;font-weight:normal;float:left;padding:0 5px;margin:8px 0 6px 0}
#main_menu li div.sub div.cont h3{color:#afc3c7;text-transform:uppercase;margin:5px 0 8px 0;font-size:12px}
#main_menu li div.sub div.ms2{min-height:114px}
#main_menu li div.sub div.ms3{min-height:97px}
#main_menu li div.sub div.ms6{min-height:80px}
#main_menu li div.sub div.first{border:0}
#main_menu li div.sub div.last{background:none}
#main_menu li div.sub div.onecol{background:none;padding:0 15px 0 15px}
#main_menu li div.sub div.cont a{font-size:11px;border:0;text-shadow:none;font-weight:normal;display:block;margin:0;padding:0 0 2px;color:#8a989a}
#main_menu li div.sub div.cont a:hover{color:#fff}
#main_menu li div.ms2{left:50px}
#main_menu li div.ms3{left:170px}
#main_menu li div.ms4{left:300px}
#main_menu li div.ms5{left:350px}
#main_menu li div.ms6{left:500px}
#main_menu li div.ms7{left:570px}

</style>
<div id='menu-module'>
<div id='menu-wrapper'>
<div id='fdmega-menu'>
<ul id='main_menu'>
<li class='first'><a href='/'><img align='top' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtubwMWAA2-ujI0GpPFXVygcB6Nz48uagwEiaLMV2EAMSyQPrESvkPwz05xmd-AR47NmXQsBT9dtBC4vCXCKQfUWf3XV-cCYJX_4aEMc2P_ZglJMjxD7BjfyhvEqtYJLt7zMxygiZxLSj/s1600/Home-namkna-3.png' width='25'/></a>
<li class='last'><a href='#'>About me</a></li>
<li><a href='#'>Thủ Thuật</a>
<div class='sub ms2'>
<div class='cont ms2'>
<h3>Thủ Thuật Blogger</h3>
<a href='#'>Blogger Tuts</a>
<a href='#'>Thủ Thuật SEO</a>
<a href='#'>Tiện Ích</a>
</div>
<div class='cont ms2'>
<h3>Thủ Thuật PC</h3>
<a href='#'>Máy Tính</a>
<a href='#'>Internet</a>
<a href='#'>Office</a>
<a href='#'>Đồ Họa</a>
<a href='#'>Kiến Thức Tin Học</a>
</div>
<div class='cont last '>
<h3>Kiếm tiền Online</h3>
<a href='#'>Kiếm tiền</a>
<a href='#'>Captcha</a>
<a href='#'>Zip code các tĩnh</a>
</div>
</div>
</li>
<li><a href='#'>Phần Mềm</a>
<div class='sub ms3'>
<div class='cont ms3'>
<h3>Namkna BlOg</h3>
<a href='#'>Phần Mềm Hệ Thống</a>
<a href='#'>Network Tools</a>
<a href='#a'>Multimedia</a>
<a href='#'>Graphics & Design</a>
</div>
<div class='cont last'>
<h3>Namkna BlOg</h3>
<a href='#'>Office - Văn Phòng</a>
<a href='#'>Antivirus</a>
<a href='#'>Driver</a>
<a href='#'>DeskTop</a>
</div>
</div>
</li>
<li><a href='/search/label/Hệ Điều Hành'>Hệ Điều Hành</a>
<div class='sub ms4'>
<div class='cont ms4'>
<h3>Windows</h3>
<a href='/search/label/Windows XP'>Windows XP</a>
<a href='/search/label/Windows 7'>Windows 7</a>
<a href='/search/label/Windows 8'>Windows 8</a>
</div>
<div class='cont last'>
<h3>Ghost</h3>
<a href='#'>Ghost Win XP</a>
<a href='#'>Ghost Win 7</a>
<a href='#'>Ghost Win 8</a>
</div>
</div>
</li>
<li><a href='#'>Giải Trí</a>
<div class='sub ms5'>
<div class='cont ms5'>
<h3>Truyện</h3>
<a href='#'>Lạ & Funny</a>
<a href='#'>Truyện Ngắn</a>
<a href='#'>Truyện Cổ Tích</a>
<a href='#'>Truyện Tình Yêu</a>
<a href='#'>Quà Tặng Cuộc Sống</a>
<a href='#'>Đọc Và Suy Ngẫm</a>
</div>
<div class='cont ms5'>
<h3>Hình Ảnh</h3>
<a href='#'>Hình Nền</a>
<a href='#'>Hình Girl Xinh</a>
</div>
<div class='cont last '>
<h3>Âm Nhạc</h3>
<a href='#'>Nhạc Việt Nam</a>
<a href='#'>Nhạc Nước Ngoài</a>
</div>
</div>
</li>
<li><a href='#'>Download</a>
<div class='sub ms6'>
<div class='cont ms6'>
<h3>Học Tập</h3>
<a href='#'>Ebook</a>
<a href='#'>Portable Soft</a>
</div>
<div class='cont last'>
<h3>Giải Trí</h3>
<a href='#'>Tải Phim</a>
<a href='#'>Tải Game</a>
</div>
</div>
</li>
<li><a href='#'>Hỗ trợ</a>
<div class='sub ms7'>
<div class='cont ms7'>
<h3>Tiện Ích</h3>
<a href='#'>Code Converter</a>
</div>
<div class='cont last'>
<h3>Kết Nối</h3>
<a href='#' onclick='this.style.behavior=&#39;url(#default#homepage)&#39;;this.setHomePage(&#39;http://namkna.blogspot.com/&#39;);'>Đặt làm trang chủ</a>
</div>
</div>
</li>
</li>
<li class='searchpost'>
<form action="/search" target="_parent" id="searchform">
<input name="cof" type="hidden" value="FORID:10" />
<input name="ie" type="hidden" value="UTF-8" />
<input onfocus="if(this.value==this.defaultValue)this.value='';" value="Nhập từ khóa tìm kiếm" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style=" float:left;background:none;-moz-border-radius: 10px;border-radius:10px;height:25px;padding:5px 0px 4px 8px; width: 175px; border:0px;color:rgb(102, 102, 102); font-size:13px; align:middle; " value="" name="q" /><input id='searchsubmit' value='' type='hidden'/></form>
</li>
</ul>
</div>
<div style='clear: both;'></div>
</div>
</div>

4- Lưu mẫu lại và xem kết quả nha.

» Tùy chỉnh nâng cao.

1- Nếu khi click vào ô tìm kiếm mà con trỏ chuột không nằm chính giữa hãy điều chỉnh lại thuộc tính height:25px.

2- Để đổi màu menu chính bạn thay đổi mã màu background:#fff;

3- Menu này nếu chèn thẳng vào template thì hãy chèn vào trước thẻ <div class='tabs-outer'>(đối với mẫu SIMPLE của blogspot). VỚi các mẫu khác tải trên mạng thì có phần khác như: <div id='content-wrapper'>. Nếu không xác định được hãy để lại comment.

4- Nếu không xuất hiện menu con bạn hãy bật chức năng thêm tiện ích dưới phần header (xem cách bật tại đây) sau đó tạo một tiện ích HTML/Javascripts ngay dưới phần header và thêm code vào là oke.

Navigation tab

Tạo Responsive Dropdown Menu trong Blogger

Trong thiết kế blogger để phần header thích hợp với các trình duyệt khác nhau rất quan trọng và phần quan trọng nhất của header là menu chính cung cấp liên kết hữu ích bên trong của bạn. Hôm nay mình sẽ hướng dẫn cách thiết kế một menu thả xuống linh hoạt cho Blogspot mà không cần sử dụng một scripts hoặc hình ảnh! Phần đặc biệt là nó không chỉ là một trình đơn ngang mà nó có thể biến thành một danh sách thả xuống. Đơn giản chỉ cần sử dụng mã HTML5, thẻ <nav> và CSS3 : bạn có thể kiểm tra tại đây, Mình sẽ giới thiệu một menu của mybloggertricks mà tôi hy vọng sẽ có ích cho cộng đồng blogger vì nó thực sự là một trình đơn hiệu quả đó là tương thích với tất cả các trình duyệt và sử dụng không Jquery!

Các ảnh chụp màn hình dưới đây được chụp bằng iPhone cá nhân của tôi để cung cấp cho bạn một cái nhìn tổng quát về blog của bạn sẽ như thế nào trong các kích cỡ màn hình khác nhau. Menu tự động điều chỉnh chính nó sử dụng CSS3 truy vấn phương tiện truyền thông mà chúng ta đã thảo luận trong phần đầu tiên của loạt bài này.

Bạn có thể vào blog demo bên dưới sau đó thu nhỏ chiều ngang của trình duyệt nhỏ lại để xem menu sẽ biến dổi thế nào nha.

VIEW DEMO

» Bước 1: Tắt trình duyệt mobile mặc định của blogger

1.1- Đăng nhập Blogger

1.2- Bấm vào icon chỉnh sửa ở mục điện thoại di dộng.

1.3- Tại mục seleck chọn no.=> Lưu lại và tiến hành bước tiếp theo.

» Bước 2: Thêm Responsive menu vào template

2.1- Vào Mẫu

2.2- Chọn Chỉnh sửa HTML

2.3- Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <head>)

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

- Thay thế nó thành đoạn code bên dưới (Nếu không tìm thấy đoạn code trên thì dán đoạn code bên dưới vào trước thẻ <head>)

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

2.4- Dán đoạn code bên dưới trước thẻ: ]]></b:skin>

/*-----Responsive Drop Down Menu by MBT ----*/

body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;

}


#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

}

» Tùy chỉnh

#50B7DC Là màu nền của menu
#FFF Là màu chữ hiển thị trên menu chính.
1024px Chiều rộng của thanh menu
#5FC6EB Màu sub menu khi rê chuột vào
max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown

2.5- Dán code bên dưới sau thẻ <body> hoặc vị trí bạn muốn thêm menu.

<nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Namkna&#160;Blog</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    <li><a href='#'>Tab 4</a></li>
    <li><a href='#'>Tab 5</a></li>
    <li><a href='#'>Tab 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
</nav>

» Tùy chỉnh:

Thay Namkna Blog thành tiêu đề blog của bạn.Nếu giữa tên có ký tự khoảng trống bạn dùng ký tự   để thay cho dấu cách.
Thay các dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc nhãn của bạn.
Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau ▼ .

Dán đoạn mã bên dưới vào sau thẻ <ul> hoặc trước thẻ </ul> để tạo một menu thả xuống.

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li>

Menu trên sẽ chỉ tạo ra có một danh sách thả xuống và không thả xuống danh sách đa cấp bởi vì nó làm phức tạp các bố trí mẫu trên các thiết bị di động. Giữ nó đơn giản là tốt nhất.

» Cần giúp đỡ?

Trong ví dụ trên, Menu chính sẽ tự động được thiết lập hiển thị khi chiều rộng kích thước màn hình dưới hoặc bằng 800px. Tôi sử dụng hộp kiểm để giới thiệu các hiệu ứng chuyển đổi. Vì vậy, ngay sau khi kích thước màn hình đạt giảm 800px hoặc hơn nữa, các thuộc tính CSS truy vấn phát hiện ra nó và tự động thiết lập chế độ của hộp để kiểm tra và áp dụng các style. Đây là một kỹ thuật thú vị mà chúng tôi sử dụng ở đây mà loại bỏ sự cần thiết cho chức năng chuyển đổi JQuery.

Tôi đã sử dụng chỉ có hai điểm break quan trọng và đó là chiều rộng: 1024px cho màn hình máy tính để bàn và 800px cho các thiết bị bao gồm máy tính bảng, iPad và điện thoại thông minh. Vì vậy, toàn bộ quá trình được thực hiện rất dễ dàng. Mình chắc chắn những người hiểu các hướng dẫn ở trên sẽ thấy nó thực sự thú vị để tùy chỉnh nhiều hơn nữa và thêm các yếu tố thêm vào menu giống như một hộp tìm kiếm đáp ứng ở góc hoặc một biểu tượng RSS, vv

Xin vui lòng cho tôi biết nếu bạn muốn bất kỳ trợ giúp ở đây. Tôi hy vọng kỹ thuật này sẽ tiếp tục giúp các nhà phát triển để tạo ra các mẫu blogger thú vị hơn và đóng góp nhiều hơn cho cộng đồng thế giới blog. Tôi rất thích nghe phản hồi của bạn về điều này. Xin vui lòng cho chúng mình biết quan điểm quý báu của bạn để chúng tôi có thể cải thiện nó hơn nữa nếu cần thiết.

Thủ thuật tạo nhiều hơn 20 trang tĩnh cho blogspot

Như chúng ta đã biết, blogspot chỉ cho phép chúng ta tạo tối đa 20 trang tĩnh ( static page). Vì vậy hôm nay mình sẽ hướng dẫn cho các bạn một thủ thuật để khắc phục được nhược điểm này, tức là chúng ta cho thể tạo được hơn số trang tĩnh được giới hạn bởi blogspot.

Khi các bạn đã tạo đủ 20 trang, blogger sẽ hiển thị thông báo " Bạn có thể thêm tối đa 20 trang độc lập.."

Bắt đầu thủ thuật nhé:

1. Click vào chỉnh sửa để edit một trang bất kì.

Tiếp theo các bạn hãy copy lại URL của trang:

Sau đó, các bạn hãy xóa các trang đó đi:

Tiếp theo, các bạn hãy xóa những page vừa lưu URL lại và tạo trang mới ( không được trùng với tiêu đề trang đã xóa )

Đến đây, các bạn hãy paste URL của các trang đã xóa lúc nãy, dán vào trình duyệt và Enter. Và các bạn sẽ được chuyển đến trang " Chỉnh sửa trang " lúc nãy. Nhấn Xuất bản trang để tạo trang mới.

Như vậy, dựa vào thủ thuật trên chúng ta có thể tạo hơn 20 trang tĩnh cho blog của mình.

Các bạn có thể xem Video do mình quay lại để hiểu rõ hơn.

Bỏ dòng "cung cấp bởi blogger"

Blogger có 1 sức mạnh khủng khiếp, nhưng nhiều người chưa hiểu rõ được công dụng của nó.
Khi chúng ta sử dụng template của blogger, thường hay dính chữ [ Được cung cấp bởi Blogger], hôm nay Thomas Thiet sẽ hướng dẫn các bạn xóa dòng chữ đó để website của mình trông bắt mắt hơn.

1. Các bạn vào Mẫu -> Chỉnh sửa HTML và tìm dòng chữ sau

'   attribution '

Tiếp theo để ý dòng chữ sau
     <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Thay thế từ  true (màu xanh) thành false và lưu mẫu lại

2. Cuối cùng vào Bố cục tìm tiện ích [Định cấu hình Thuộc tính] Cung cấp bởi blogger và xóa đi là xong

- See more at: http://thomasthiet.blogspot.com/2013/06/huong-dan-cach-xoa-bo-dong-chu-cung-cap.html#sthash.rNgF4OBD.dpuf