button skype

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Button Hỗ trợ Skype Online cho Blog /website</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-4149382198084438327" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXzdbKpxrh1PO5DxwRI-kVJtbsKgyRBCsyamLPlufAcGARTicwfHWQx9yMSail5ch1pnNITEBxmtqSZztWVtvfn9Tlc0WHIq468Vt6-Dhr9pVN03b0YZZbmuHFLT-pDPpYQGuywm9jS47/s1600/code-ho-tro-skype-truc-tuyen-cho-web-blog.png" imageanchor="1" style="clear: right; color: #006666; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXzdbKpxrh1PO5DxwRI-kVJtbsKgyRBCsyamLPlufAcGARTicwfHWQx9yMSail5ch1pnNITEBxmtqSZztWVtvfn9Tlc0WHIq468Vt6-Dhr9pVN03b0YZZbmuHFLT-pDPpYQGuywm9jS47/s200/code-ho-tro-skype-truc-tuyen-cho-web-blog.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" width="200" /></a></div><div style="text-align: justify;">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, <a href="http://namkna.blogspot.com/2011/08/gan-bieu-tuong-chat-yahoo-vao-web.html" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>yahoo</b></a>. 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.</div><br /><a href="" name="more"></a><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Cách tạo Button Hỗ trợ Skype Online cho Blog /website</h3><div style="text-align: justify;"><b>l. Đăng nhập</b> vào blog</div><div style="text-align: justify;"><b>2. </b>Chọn <b>Bố cụ</b>c (layout)</div><div style="text-align: justify;"><b>3.</b> Chọn <b>thêm tiện ích</b> (Add widget) » Chọn <b>HTML/Javascripts</b> và dán code bên dưới vào nha.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><a href="Skype:<span style="background-color: #b6d7a8;"><b>YOUR-ID-SKYPE</b></span>?chat"> <img src="http://mystatus.skype.com/<span style="background-color: orange;">bigclassic</span>/<span style="background-color: #b6d7a8;"><b>YOUR-ID-SKYPE</b></span>" title="<span style="background-color: yellow;"><b>Liên hệ với nhóm tác giả để được trợ giúp trực tuyến qua Skyper</b></span>" <span style="background-color: cyan;">width="120"</span> <span style="background-color: lime;">height="30"</span> alt=""> </a></pre><div style="text-align: justify;"><b>» Trong đó:</b></div><ul style="text-align: justify;"><li><span style="background-color: #b6d7a8;"><b>YOUR-ID-SKYPE </b></span>là id trang Skype  của bạn, có 2 lần thay trong code trên.</li><li><span style="background-color: orange;">width="120"</span> là chiều rộng của hình ảnh button</li><li><span style="background-color: cyan;">height="30"</span> là chiều cao của hình ảnh button</li><li> <span style="background-color: orange;"><b>bigclassic</b></span> 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.</li></ul><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Một số hình ảnh hỗ trợ Skype bạn có thể chọn</h3>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ị <span style="background-color: orange;"><b>bigclassic</b></span> thành từ bên dưới theo ý thích của bạn nha.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE48CtQa2OjQhh8ikbEv2idm849_Ct6S8GoahHevvTR0H5H7FPdE4IOVMAU1uMp7KjOIczFuZ7s6nyeea3q94-eZqHZqPjBq1aMTtQv_BNB847YKiYHtnTp0qsMNWSNV_WG5C1COAkVkJo/s1600/mediumicon_namkna.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE48CtQa2OjQhh8ikbEv2idm849_Ct6S8GoahHevvTR0H5H7FPdE4IOVMAU1uMp7KjOIczFuZ7s6nyeea3q94-eZqHZqPjBq1aMTtQv_BNB847YKiYHtnTp0qsMNWSNV_WG5C1COAkVkJo/s1600/mediumicon_namkna.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><b>                                         mediumicon</b><br /><hr /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDn0D_YXkQvOjotO9NID2UezFLLxFjnwV_6B9ki5VtXdZLUF2Itf7raAfuZNbpbj-vIMjKL8jzjTf8xLw9eLrc5K59TF6G59jjXQlnYZm3C1G3N9fAVebHA9kR3J1H5gpJplNUv1RS2f4d/s1600/bigclassic-namkna.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDn0D_YXkQvOjotO9NID2UezFLLxFjnwV_6B9ki5VtXdZLUF2Itf7raAfuZNbpbj-vIMjKL8jzjTf8xLw9eLrc5K59TF6G59jjXQlnYZm3C1G3N9fAVebHA9kR3J1H5gpJplNUv1RS2f4d/s1600/bigclassic-namkna.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><b> bigclassic</b><br /><hr /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3VRb7hpf0tjXd-XEIscRtCGpg8EKgN3oRhyphenhyphenpENV6LXfeNjXRW-zsntAwdtHsMMH-W5MgfcNPkX6N1BanhVvOqQ5pA3fs5C60t3x3RXAO_LVBopTM4pzLtehRB3MurvlpG-FOgoirA8pRt/s1600/smallclassic-namkna.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3VRb7hpf0tjXd-XEIscRtCGpg8EKgN3oRhyphenhyphenpENV6LXfeNjXRW-zsntAwdtHsMMH-W5MgfcNPkX6N1BanhVvOqQ5pA3fs5C60t3x3RXAO_LVBopTM4pzLtehRB3MurvlpG-FOgoirA8pRt/s1600/smallclassic-namkna.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><b>                  smallclassic </b><br /><hr /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LaXW1_aGsBrlRk3DqraqqBISkpyGd_OPYDYf5v2-kYyUjh8gLb5LHhf_c4ub77o9MapB6KhyphenhyphenrpVJmFX1MsaWqQiSpfJ2SWTVMAb6MCEIqedW9JRgG0CngO88CRNpl3gGOn74taE9PNSu/s1600/balloon-namkna.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LaXW1_aGsBrlRk3DqraqqBISkpyGd_OPYDYf5v2-kYyUjh8gLb5LHhf_c4ub77o9MapB6KhyphenhyphenrpVJmFX1MsaWqQiSpfJ2SWTVMAb6MCEIqedW9JRgG0CngO88CRNpl3gGOn74taE9PNSu/s1600/balloon-namkna.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><b>         balloon </b><br /><br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Tùy biến sáng xanh khi có người online</h3>1. Truy cập vào trang tùy biến của Skype : <a href="https://dev.skype.com/skype-uri/generator" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>https://dev.skype.com/skype-uri/generator</b></a><br />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,</div></div>

button skype

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ớ...

Đọc thêm »

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

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Heading Tag với hiệu ứng đổ bóng và dê chuột Hover</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-1440636769613819422" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ii_04zlyET9851tTK09zVDQ9ELhLYycDrPl0HjFhCuLavJhJ6PMu6-SvVkt12fidIZDmFPiHh_JIKsVrsBDJm8nCM80Z_JV9QwGEQ8P0w3g_mnQCKM4s3klT8jRbXYWPr2Y7ckTkl7E/s1600/custom-heading-tag-with-drop-shadow-and-mouse-hover-namkna-1.png" imageanchor="1" style="clear: left; color: #006666; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img alt="Heading Tag với hiệu ứng đổ bóng và dê chuột Hover" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ii_04zlyET9851tTK09zVDQ9ELhLYycDrPl0HjFhCuLavJhJ6PMu6-SvVkt12fidIZDmFPiHh_JIKsVrsBDJm8nCM80Z_JV9QwGEQ8P0w3g_mnQCKM4s3klT8jRbXYWPr2Y7ckTkl7E/s1600/custom-heading-tag-with-drop-shadow-and-mouse-hover-namkna-1.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Heading Tag với hiệu ứng đổ bóng và dê chuột Hover" width="200" /></a></div><div style="text-align: justify;">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ẻ <a href="http://namkna.blogspot.com/2012/12/thay-doi-heading-style-cho-blogger.html" style="color: #006666; text-decoration: none;">nhiều cách khác nhau tùy biến các thẻ tiêu đề</a>, tức là H3. Namkna sử dụng thẻ <b>H3</b> 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 đó!</div><a href="" name="more"></a>Demo chính là các tiêu đề con trong bài viết này!<br /><h3 style="-webkit-box-shadow: rgb(102, 102, 102) 0px 0px 13px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-color: rgb(0, 128, 255) rgb(102, 102, 102); border-style: dotted solid; border-top-left-radius: 15px; border-top-right-radius: 15px; border-width: 1px 10px; box-shadow: rgb(102, 102, 102) 0px 0px 13px; color: #666666; font-family: veranda !important; font-style: italic !important; margin: 0px; padding: 3px 5px 3px 20px; text-align: justify;">☼ Cách tiến hành:</h3><div style="text-align: justify;"><b>1- Đăng nhập</b> (login) vào Blog<br /><b>2- </b>Vào <b>Mẫu </b>(Template)<br /><b>3-</b> Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):<br /><b>4-</b> Tìm kiếm thẻ <b>]]></b:skin> </b> (<i>Mẹo</i>: Hãy bấm <b>Ctrl + F</b> để tìm nhanh hơn)<br /><b>5-</b> Dán đoạn code sau vào trước thẻ <b> ]]></b:skin></b> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">/*------http://namkna.blogspot.com/--------*/<br />h3{<br />font-family:<span style="color: purple;"><b>veranda</b></span> !important;<br />font-style:<span style="color: blue;"><b><i>italic</i> </b></span>!important;<br />}<br /><br />.post h3 {<br />color:<span style="background-color: yellow;"><b>#666</b></span>;<br />border-left:10px solid <span style="background-color: yellow;"><b>#666</b></span>;<br />border-right:10px solid <span style="background-color: yellow;"><b>#666</b></span>;<br />padding:3px 5px 3px 20px;<br />border-radius:15px;<br />-moz-border-radius:15px;<br />box-shadow:0px 0px 13px <span style="background-color: lime;"><b>#666</b></span>;<br />-webkit-box-shadow:0px 0px 13px <span style="background-color: lime;"><b>#666</b></span>;<br />-moz-box-shadow:0px 0px 13px <span style="background-color: lime;"><b>#666</b></span>;<br />}<br /><br />.post h3:hover {<br />color:<span style="background-color: magenta;"><b>#FF133F</b></span>;<br />border-left:10px solid <span style="background-color: magenta;"><b>#FF133F</b></span>;<br />border-right:10px solid <span style="background-color: magenta;"><b>#FF133F</b></span>;<br />box-shadow:0px 0px 13px <span style="background-color: cyan;"><b>#FF133F</b></span>;<br />-webkit-box-shadow:0px 0px 13px <span style="background-color: cyan;"><b>#FF133F</b></span>;<br />-moz-box-shadow:0px 0px 13px <span style="background-color: cyan;"><b>#FF133F</b></span>;<br />}</pre><blockquote class="tr_bq" style="background-color: #f0fdff; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(150, 215, 226); margin: 0px; padding: 10px;"><div style="text-align: justify;"><b>Lưu ý:</b> 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:<br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">.post h3 {...}<br />.post h3:hover {...}<br />.post h3 span {...}<br />....<br /></pre></div></blockquote><div style="text-align: justify;">Tùy chỉnh đoạn code trên:</div><ul style="text-align: justify;"><li>Để thay đổi chỉnh sửa kiểu font <span style="color: purple;"><b>Verdana</b></span> hãy thay thế nó với bất kỳ kiểu font bạn muốn.</li><li>Để thay đổi chữ <i>in nghiêng</i> hãy thay thế (<i><b>italic</b></i>) với một trong hai loại là bình thường (<b>normal</b>) hoặc đậm (<b>norma</b>)</li><li>Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi <b>chưa</b>dê chuột lên, Hãy thay đổi mã màu <span style="background-color: yellow;"><b>#666</b></span> thành mã màu lựa chọn của bạn.</li><li>Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi <b>đã</b> dê chuột lên, Hãy thay đổi mã màu <span style="background-color: magenta;"><b>#FF33F</b></span> thành mã màu lựa chọn của bạn.</li><li>Để 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 <span style="background-color: lime;"><b>#666</b></span> thành mã màu lựa chọn của bạn.</li><li>Để 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 <span style="background-color: cyan;"><b>#FF133F</b></span> thành mã màu lựa chọn của bạn.</li></ul><div style="text-align: justify;"><b>6- Lưu mẫu</b> của bạn lại!</div><h3 style="-webkit-box-shadow: rgb(102, 102, 102) 0px 0px 13px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-color: rgb(0, 128, 255) rgb(102, 102, 102); border-style: dotted solid; border-top-left-radius: 15px; border-top-right-radius: 15px; border-width: 1px 10px; box-shadow: rgb(102, 102, 102) 0px 0px 13px; color: #666666; font-family: veranda !important; font-style: italic !important; margin: 0px; padding: 3px 5px 3px 20px; text-align: justify;">Cách sử dụng khi đăng bài?</h3><b>1-</b> Tạo một bài đăng mới.<br /><b>2- </b>Check vào tab HTML và sử dụng đoạn code sau:<br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><h3> <span style="color: blue;"><b>Tiêu đề bài viết của bạn ở đây</b></span> </h3></pre>Xem ảnh minh họa để tháy ró hơn.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOYqvmCxe70VOIdzFvMGOnpihsdYWAXSluy1D6ZEDp5c1gwTXuyeAqsz6xV_ReMqK2v_97WyCHjWg4JKQUBoAnukfu01M2z4-Ogar6Nt0cV9itakW3UBusBx2l4kkY8ELhmWhaog_0IY/s1600/custom-heading-tag-with-drop-shadow-and-mouse-hover-namkna.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Heading Tag với hiệu ứng đổ bóng và dê chuột Hover" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOYqvmCxe70VOIdzFvMGOnpihsdYWAXSluy1D6ZEDp5c1gwTXuyeAqsz6xV_ReMqK2v_97WyCHjWg4JKQUBoAnukfu01M2z4-Ogar6Nt0cV9itakW3UBusBx2l4kkY8ELhmWhaog_0IY/s1600/custom-heading-tag-with-drop-shadow-and-mouse-hover-namkna.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Heading Tag với hiệu ứng đổ bóng và dê chuột Hover" /></a></div><div style="text-align: justify;">3- Sau khi bạn <b>xuất bản</b> bài đăng, bạn sẽ thấy tác dụng của thủ thuật.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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<a href="http://www.mybloggertricks.com/2011/10/heading-tag-with-drop-shadow-and-mouse.html" style="color: #006666; text-decoration: none;" target="_blank">.</a></div></div></div>

Đổ 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ố...

Đọc thêm »

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

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Tự động chèn link cho từ khóa trong bài viết của blogspot</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-3294950216723679908" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div style="text-align: justify;">Bình thường để chèn <a href="http://namkna.blogspot.com/2013/02/lien-ket-va-tuy-bien-lien-ket.html" style="color: #006666; text-decoration: none;" target="_blank"><b>link </b></a>vào một <a href="http://namkna.blogspot.com/2012/04/tao-bo-tag-keywork-cho-bai-viet-trong.html" style="color: #006666; text-decoration: none;" target="_blank"><b>từ khóa</b></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 để<a href="http://namkna.blogspot.com/2012/03/tao-auto-readmore-khong-su-dung.html" style="color: #006666; text-decoration: none;" target="_blank"><b>tự động </b></a>chèn liên kết (link) vào các từ khóa (<a href="http://namkna.blogspot.com/2012/04/tao-bo-tag-keywork-cho-bai-viet-trong.html" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>keywork</b></a>) 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 <a href="http://namkna.blogspot.com/2011/01/nhung-code-thong-dung-cho-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank"><b>link</b></a> bằng tay...</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Ảnh minh họa:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYujyIohiJ_1dPGTB5qpssxo-ei5dK7n6wiivOEXgT9W40M7cdia_KjHk80IjSv-0kCO_gFKxcuJPxNKlCbC3No7k6WkkJaQsTe_kHbMaT11kfuYzLGDvtvYHfffaTFt8OAQRvnTtChTt/s1600/Auto+add+link+for+keywork+of+post+in+blogspot.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="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" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYujyIohiJ_1dPGTB5qpssxo-ei5dK7n6wiivOEXgT9W40M7cdia_KjHk80IjSv-0kCO_gFKxcuJPxNKlCbC3No7k6WkkJaQsTe_kHbMaT11kfuYzLGDvtvYHfffaTFt8OAQRvnTtChTt/s1600/Auto+add+link+for+keywork+of+post+in+blogspot.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="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" /></a></div><a href="" name="more"></a><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Bắt đầu thủ thuật "tự động thêm link vào từ khóa của bài viết."</h3><div style="text-align: justify;"><b>1. Đăng nhập</b> vào tài khoản <a href="http://namkna.blogspot.com/2011/05/khoi-tao-blogger.html" style="color: #006666; text-decoration: none;" target="_blank"><b>Blogger</b></a></div><div style="text-align: justify;"><b>2. </b>Vào <a href="http://namkna.blogspot.com/search/label/Blogspot%20Templates" style="color: #006666; text-decoration: none;" target="_blank"><b>Mẫu </b></a>(Template)</div><div style="text-align: justify;"><b>3.</b> Chọn <a href="http://namkna.blogspot.com/2013/04/update-new-style-edit-html-in-blogspot.html" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>chỉnh sửa HTML</b></a> (Edit HTML)</div><div style="text-align: justify;"><b>4.</b> Chọn một trong 2 đoạn code bên dưới và chèn nó  ngay trước thẻ <span style="background-color: #eeeeee;"><b></head></b></span><br />(<i>Mẹo</i>: 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 <a href="http://namkna.blogspot.com/2013/04/update-new-style-edit-html-in-blogspot.html" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>tìm kiếm nội tuyến</b></a> như <a href="http://namkna.blogspot.com/2013/04/update-new-style-edit-html-in-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank"><b>bài này</b></a>):<br /><b>- Đoạn 1: </b> Các liên kết mở ngay tại trang bạn đang xem:</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><script type='text/javascript'><br />//<![CDATA[<br />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)+'<span style="background-color: lime;"><a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'"></span>'+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};<br />//]]><br /></script></pre><b>- Đoạn 2:</b> 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:<br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><script type='text/javascript'><br />//<![CDATA[<br />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)+'<span style="background-color: lime;"><a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" <span style="color: magenta;"><b>target="_blank</b></span>"></span>'+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};<br />//]]><br /></script></pre><b>5.</b> Tìm đoạn code sau:<br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><data:post.body/></pre><div style="text-align: justify;"><br />- Thay thế nó thành:</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><div expr:id='"summary" + data:post.id'><br /><data:post.body/><br /></div><br /><script type='text/javascript'><br />highlightSearchTerms('<span style="color: blue;"><b>Từ khóa 1</b></span>',true,'<span style="color: red;"><b>Link từ khóa 1</b></span>','summary<data:post.id/>');<br />highlightSearchTerms('<span style="color: blue;"><b>Từ khóa 2</b></span>',true,'<span style="color: red;"><b>Link từ khóa 2</b></span>','summary<data:post.id/>');<br />highlightSearchTerms('<span style="color: blue;"><b>Từ khóa 3</b></span>',true,'<span style="color: red;"><b>Link từ khóa 3</b></span>','summary<data:post.id/>');<br /><span style="background-color: cyan;"></script></span></pre><div style="text-align: justify;"><blockquote class="tr_bq" style="background-color: #f0fdff; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(150, 215, 226); margin: 0px; padding: 10px;"><b>Lưu ý: </b>Mỗi blog thường có từ 2 đến 4 đoạn code <span style="background-color: #cccccc;"><b><data:post.body/></b></span> như trên. Các bạn phải chèn đúng vị trí mới hiển thị.</blockquote><b>¤ Trong đó:</b></div><ul style="text-align: justify;"><li>Thay <span style="color: blue;"><b>Từ khóa 1</b></span>,<span style="color: blue;"><b>2</b></span>,<span style="color: blue;"><b>3 </b></span>thành các từ khóa bạn hay sử dụng trong blog.</li><li>Thay <span style="color: red;"><b>Link từ khóa 1</b></span>,<span style="color: red;"><b>2</b></span>,<span style="color: red;"><b>3 </b></span>thành link tương ứng với các từ khóa.</li><li>Để 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ẻ <b><span style="background-color: cyan;"></script></span></b>của đoạn code trên.<br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">highlightSearchTerms('<span style="color: blue;"><b>Từ khóa n</b></span>',true,'<span style="color: red;"><b>Link từ khóa n</b></span>','summary<data:post.id/>');</pre></li></ul><div style="text-align: justify;"><b>6. Lưu mẫu</b> lại.</div><div style="text-align: justify;">- 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.</div></div></div>

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 thêm »

Flying Drop Down Menubar

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Css3 Flying Drop Down Menubar cho Blogger</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-5873375967598725256" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div style="text-align: justify;">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.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAq829tMhK8XD3baJbY9HgBRAmuUjnP2u4wXqF42OZG-uPjJ4YZljEud-Ll9AbYVlIHwrX6rHCnYJsNwogK65ajOU4hDoBYd4-Mdrb-oxyTs-57DsSerqlbW1RVBuOEehAuA-QaLP27Jlp/s1600/Css3+Flying+Style+Drop+Down+Menubar+For+Blogger.gif" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Css3 Flying Drop Down Menubar Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAq829tMhK8XD3baJbY9HgBRAmuUjnP2u4wXqF42OZG-uPjJ4YZljEud-Ll9AbYVlIHwrX6rHCnYJsNwogK65ajOU4hDoBYd4-Mdrb-oxyTs-57DsSerqlbW1RVBuOEehAuA-QaLP27Jlp/s1600/Css3+Flying+Style+Drop+Down+Menubar+For+Blogger.gif" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Css3 Flying Drop Down Menubar Blogger" /></a></div><br /><a href="http://www.blogger.com/blogger.g?blogID=308252941565170427" name="more"></a><a class="button big" href="http://namkna-demo.blogspot.com/2013/06/css3-flying-style-drop-down-menubar-for.html" rel="nofollow" style="background-color: #006666; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(0, 85, 85); box-shadow: rgba(255, 255, 255, 0.2) 0px 1px inset; color: #519ad6; outline: none; padding: 10px 20px; text-decoration: none;" target="_blank"><span style="color: red;">VIEW</span><span style="color: white;"> DEMO</span></a><br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Cách tiến hành:</h3><div style="text-align: justify;"><b>1. Đăng nhập</b> vào blog</div><div style="text-align: justify;"><b>2.</b> Chọn <b>Bố cục</b> (lsyout)</div><div style="text-align: justify;"><b>3.</b> Chọn <b>Thêm Tiện ích</b> (Add widget) => Tạo <b>HTML/Javarscipts</b> và dán đoạn code bên dưới và dán vào.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">/* Flying Css3 menu http://namkna.blogspot.com/*/<br /><br />#flyingmenubt,#flyingmenubt ul {<br /> list-style: none outside none;<br /> margin: 0;<br /> padding: 0;<br /> height:500px;}<br />#flyingmenubt {<br /> font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;<br /> font-size: 13px;<br /> <span style="background-color: #b6d7a8;">height: 36px;</span><br /> list-style: none outside none;<br /><span style="background-color: yellow;"><b> margin: 40px auto;</b></span><br /> text-shadow: 0 -1px 3px #202020;<br /> <span style="background-color: orange;">width: 980px;</span><br /> -moz-border-radius:4px;<br /> -webkit-border-radius:4px;<br /> border-radius:4px;<br /> -moz-box-shadow: 0px 3px 3px #cecece;<br /> -webkit-box-shadow: 0px 3px 3px #cecece;<br /> box-shadow: 0 3px 4px #8b8b8b;<br /> 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));<br /> background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);<br /> background-color:#5f5f5f;<br />}<br />#flyingmenubt ul {<br /> left: -9999px;<br /> position: absolute;<br /> top: -9999px;<br /> z-index: 2;<br />}<br />#flyingmenubt li {<br /> border-bottom: 1px solid #575757;<br /> border-left: 1px solid #929292;<br /> border-right: 1px solid #5d5d5d;<br /> border-top: 1px solid #797979;<br /> display: block;<br /> float: left;<br /> height: 34px;<br /> position: relative;<br /> <span style="background-color: lime;">width: 105px;</span><br />}<br />#flyingmenubt li:first-child {<br /> border-left: 0 none;<br /> margin-left: 5px;<br />}<br />#flyingmenubt li a {<br /> color: #FFFFFF;<br /> display: block;<br /> line-height: 34px;<br /> outline: medium none;<br /> text-align: center;<br /> text-decoration: none;<br /> 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));<br /> background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);<br /> background-color:#5f5f5f;<br />}<br /><br />/* keyframes #animation1 */<br />@-webkit-keyframes animation1 {<br /> 0% {-webkit-transform: scale(1);}<br /> 30% {-webkit-transform: scale(1.3);}<br /> 100% {-webkit-transform: scale(1);}}<br />@-moz-keyframes animation1 {<br /> 0% {-moz-transform: scale(1);}<br /> 30% {-moz-transform: scale(1.3);}<br /> 100% {-moz-transform: scale(1);}}<br />#flyingmenubt li > a:hover {<br /><br /> -moz-animation-name: animation1;<br /> -moz-animation-duration: 0.7s;<br /> -moz-animation-timing-function: linear;<br /> -moz-animation-iteration-count: infinite;<br /> -moz-animation-direction: normal;<br /> -moz-animation-delay: 0;<br /> -moz-animation-play-state: running;<br /> -moz-animation-fill-mode: forwards;<br /> -webkit-animation-name: animation1;<br /> -webkit-animation-duration: 0.7s;<br /> -webkit-animation-timing-function: linear;<br /> -webkit-animation-iteration-count: infinite;<br /> -webkit-animation-direction: normal;<br /> -webkit-animation-delay: 0;<br /> -webkit-animation-play-state: running;<br /> -webkit-animation-fill-mode: forwards;<br />}<br />#flyingmenubt li:hover > a {<br /> z-index: 4;<br />}<br />#flyingmenubt li:hover ul.subs {<br /> left: 0;<br /> <span style="color: red;">top: 34px;</span><br /> <span style="background-color: cyan;">width: 150px;</span><br />}<br />#flyingmenubt ul li {<br /> background: none repeat scroll 0 0 #838383;<br /> box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br /> opacity: 0;<br /> width: 100%;<br /> /*-webkit-transition:all 0.3s ease-in-out;<br /> -moz-transition:all 0.3s ease-in-out;<br /> -o-transition:all 0.3s ease-in-out;<br /> -ms-transition:all 0.3s ease-in-out;<br /> transition:all 0.3s ease-in-out;*/<br />}<br /><br />/* keyframes #animation2 */<br />@-webkit-keyframes animation2 {<br /> 0% {margin-left:185px;}<br /> 100% {margin-left:0px;opacity:1;}<br />}<br />@-moz-keyframes animation2 {<br /> 0% {margin-left:185px;}<br /> 100% { margin-left:0px;opacity:1;}<br />}<br />#flyingmenubt li:hover ul li {<br /> /* css3 animation */<br /> -moz-animation-name: animation2;<br /> -moz-animation-duration: 0.3s;<br /> -moz-animation-timing-function: linear;<br /> -moz-animation-iteration-count: 1;<br /> -moz-animation-direction: normal;<br /> -moz-animation-delay: 0;<br /> -moz-animation-play-state: running;<br /> -moz-animation-fill-mode: forwards;<br /> -webkit-animation-name: animation2;<br /> -webkit-animation-duration: 0.3s;<br /> -webkit-animation-timing-function: linear;<br /> -webkit-animation-iteration-count: 1;<br /> -webkit-animation-direction: normal;<br /> -webkit-animation-delay: 0;<br /> -webkit-animation-play-state: running;<br /> -webkit-animation-fill-mode: forwards;<br /><br /> /*-webkit-transition:all 0.3s ease-in-out;<br /> -moz-transition:all 0.3s ease-in-out;<br /> -o-transition:all 0.3s ease-in-out;<br /> -ms-transition:all 0.3s ease-in-out;<br /> transition:all 0.3s ease-in-out;*/<br />}<br />/* animation delays */<br />#flyingmenubt li:hover ul li:nth-child(1) {<br /> -moz-animation-delay: 0;<br /> -webkit-animation-delay: 0;<br />}<br />#flyingmenubt li:hover ul li:nth-child(2) {<br /> -moz-animation-delay: 0.05s;<br /> -webkit-animation-delay: 0.05s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(3) {<br /> -moz-animation-delay: 0.1s;<br /> -webkit-animation-delay: 0.1s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(4) {<br /> -moz-animation-delay: 0.15s;<br /> -webkit-animation-delay: 0.15s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(5) {<br /> -moz-animation-delay: 0.2s;<br /> -webkit-animation-delay: 0.2s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(6) {<br /> -moz-animation-delay: 0.25s;<br /> -webkit-animation-delay: 0.25s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(7) {<br /> -moz-animation-delay: 0.3s;<br /> -webkit-animation-delay: 0.3s;<br />}<br />#flyingmenubt li:hover ul li:nth-child(8) {<br /> -moz-animation-delay: 0.35s;<br /> -webkit-animation-delay: 0.35s;<br />}</style><br /><ul id="flyingmenubt"><br /> <li><a href="<span style="color: red;"><b>http://namkna.blogspot.com/</b></span>"><span style="color: blue;"><b>Home</b></span></a></li><br /> <li><a class="hsubs" href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Menu 1</b></span></a><br /> <ul class="subs"><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 1</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>">Submenu 2</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 3</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>">Submenu 4</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 5</b></span></a></li><br /> </ul><br /> </li><br /> <li><a class="hsubs" href="<span style="color: red;"><b>http://namkna.blogspot.com/</b></span>"><span style="color: blue;"><b>Menu 2</b></span></a><br /> <ul class="subs"><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 2-1</b></span></a></li><br /> <li><a href="#">Submenu 2-2</a></li><br /> <li><a href="#">Submenu 2-3</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>">Submenu 2-4</a></li><br /> <li><a href="#">Submenu 2-5</a></li><br /> <li><a href="#">Submenu 2-6</a></li><br /> <li><a href="#">Submenu 2-7</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 2-8</b></span></a></li><br /> </ul><br /> </li><br /> <li><a class="hsubs" href="#">Menu 3</a><br /> <ul class="subs"><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 3-1</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 3-2</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>">Submenu 3-3</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>">Submenu 3-4</a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Submenu 3-5</b></span></a></li><br /> </ul><br /> </li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Menu 4</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Menu 5</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Menu 6</b></span></a></li><br /> <li><a href="<span style="color: red;"><b>#</b></span>"><span style="color: blue;"><b>Back</b></span></a></li><br /></ul></pre><div style="text-align: justify;"><b>» Tùy chỉnh:</b></div><ul style="text-align: justify;"><li>Sửa <span style="background-color: yellow;">margin: 40px auto;</span> nếu menu có khoảng cách với phần trên và dưới, Có thể đổi thành <span style="background-color: yellow;">margin: 0 auto;</span> là tốt nhất,</li><li><span style="background-color: orange;">width: 980px;</span> 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.</li><li><span style="background-color: lime;">width: 105px;</span> là chiều rộng menu con. hãy thay đổi nếu tiêu đề menu quá dài.</li><li><span style="background-color: cyan;">width: 150px; </span>là chiều rộng tiêu đề khi dê chuột vào menu,</li><li><span style="background-color: #93c47d;">height: 36px;</span> là chiều cao của menu chính.</li><li>Thay dấu thăng màu đỏ (<span style="color: red;"><b>#</b></span>) là liên kết tới bài viết, trang, hoặc nhãn của bạn.</li><li>Thay <span style="color: blue;"><b>màu xanh</b></span> 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.</li></ul></div></div>

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...

Đọc thêm »

Dropmenu Đơn giản

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">CSS Dropdown menu đơn giản cho blogspot</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-6779386110899308495" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHbREoqfvuxLmUwqyz9RnJwPSlpwXuAGTPW1XWBbYPjE4Bos70LTZlIspz4qS6HhwykqHwhFvHNvvjWpJos2HohYvjvtOyyZ45M79Mu-s6NqWspYVI9wN4ECvRdSNmcw9brkf4HeVkjqdt/s1600/CSS+drop+menu+don+gian+tren+sidebar+cho+blogger.gif" imageanchor="1" style="clear: right; color: #006666; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="CSS Dropdown menu đơn giản cho blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHbREoqfvuxLmUwqyz9RnJwPSlpwXuAGTPW1XWBbYPjE4Bos70LTZlIspz4qS6HhwykqHwhFvHNvvjWpJos2HohYvjvtOyyZ45M79Mu-s6NqWspYVI9wN4ECvRdSNmcw9brkf4HeVkjqdt/s1600/CSS+drop+menu+don+gian+tren+sidebar+cho+blogger.gif" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="CSS Dropdown menu đơn giản cho blogspot" /></a></div><div style="text-align: justify;">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 đề đó.</div><br /><a href="" name="more"></a><div style="text-align: justify;">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:<br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px;">☼ Cách thêm CSS Dropdown menu dơn giản cho blogspot:</h3></div><div style="text-align: justify;"><b>1- Đăng nhập </b>vào Blog</div><div style="text-align: justify;"><b>2-</b> Vào<b> Bố cục</b> (Layout)</div><div style="text-align: justify;"><b>3- </b>Bấm vào<b> thêm tiện ích</b> => Chọn <b>HTML/Javascripts</b> và dán code bên dưới vào.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><style>nav.drop-menu {<br /> position:relative;<br /> padding:10px 15px;<br /> background:#6D92A5;<br /> width:200px;<br /> font:bold 12px Arial,Sans-Serif;<br /> text-transform:uppercase;<br /> color:#eee;<br />}<br /><br />nav.drop-menu:after {<br /> content:"";<br /> width:0px;<br /> height:0px;<br /> border:5px solid transparent;<br /> border-top-color:#fff;<br /> position:absolute;<br /> top:16px;<br /> right:14px;<br />}<br /><br />nav.drop-menu ul {<br /> position:absolute;<br /> top:100%;<br /> left:0px;<br /> z-index:99;<br /> text-transform:none;<br /> margin:0px;<br /> padding:0px;<br /> background:#6D92A5;<br /> width:100%;<br /> font-weight:normal;<br /> display:none;<br />}<br /><br />nav.drop-menu li {<br /> list-style:none;<br /> margin:0px;<br /> padding:0px;<br />}<br /><br />nav.drop-menu li a {<br /> display:block;<br /> margin:0px;<br /> padding:7px 15px;<br /> text-decoration:none;<br /> color:#ccc;<br />}<br /><br />nav.drop-menu li a:hover {<br /> background:#74838F;<br /> padding-left:19px;<br />}<br /><br />nav.drop-menu:hover ul {<br /> display:block;<br />}</style><br /><nav class='drop-menu'><br /><span style="background-color: orange;"><b>Drop Down Menu</b></span><br /> <ul><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Home</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>About</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Portfolio</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Contact</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Archive</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Search</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Company</b></span></a></li><br /> </ul><br /></nav></pre><div style="text-align: justify;"><b>» Tùy chỉnh:</b></div><ul style="text-align: justify;"><li>Thay dấu thăng màu đỏ (<span style="color: red;"><b>#</b></span>) thành liên kết URL tới blog, nhãn hoặc bài viết của bạn.</li><li>Thay phần<span style="color: blue;"><b> màu xanh</b></span> 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.</li><li>Thay chữ <span style="background-color: orange;"><b>Drop Down Menu</b></span> thành chữ tiêu đề. Đây là phần luôn hiển thị của menu.</li></ul><div style="text-align: justify;"><b>4- Lưu mẫu</b> lại và quay trở lại blog để xem kết quả của bạn nha<a href="http://www.dte.web.id/2012/01/basic-drop-down-menu.html" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank">.</a></div></div></div>

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 hea...

Đọc thêm »

Navigation Dropmenu

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Colume Dropmenu có Search cho blogspot</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-4687518068326873218" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div style="text-align: justify;">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.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQreaDVsSCD9r_3jegly6nxurC6pDAtYFLGvzcsO9Oak-7AjhSMbBR25OVwjGeDXuZwRP2KOa0FOU2330pP78E6n8v1qr_Hi9RAbYp5SKV7DbQH3Jff93VuFQcd4UuiMKaZAiOGRwW0w/s1600/Colume+Dropmenu+with+Search+for+blogspot.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Colume Dropmenu with Search for blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQreaDVsSCD9r_3jegly6nxurC6pDAtYFLGvzcsO9Oak-7AjhSMbBR25OVwjGeDXuZwRP2KOa0FOU2330pP78E6n8v1qr_Hi9RAbYp5SKV7DbQH3Jff93VuFQcd4UuiMKaZAiOGRwW0w/s1600/Colume+Dropmenu+with+Search+for+blogspot.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Colume Dropmenu with Search for blogspot" /></a></div><br /><a href="" name="more"></a><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Cách thêm Colume Dropmenu with Search cho blogger</h3><div style="text-align: justify;"><b>1. Đăng nhập </b>vào blog</div><div style="text-align: justify;"><b>2.</b> Chọn <b>Bố cục </b>(layout)</div><div style="text-align: justify;"><b>3. </b>Chọn <b>Thêm Tiện ích </b>(Add widget) => <b>Tạo HTML/Javarscip </b>và dán đoạn code bên dưới vào.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><style><br />#menu-module{width:100%}<br />#menu-wrapper{<span style="background-color: orange;">background:#fff;</span>font-size:14px;width:980px;margin:0 auto;border-top:1px solid #eef2f8;border-bottom:1px solid #eef2f8;}<br />#fdmega-menu ul{margin:0;padding:0;list-style:none;width:100%}<br />#main_menu{float:left;position:relative;height:33px;display:block}<br />#main_menu li{float:left;height:33px;padding:0;font-family:Times}<br />#main_menu li:hover,#main_menu li:hover a#ff4{background:#282e2e;color:#ccc}<br />#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}<br />#main_menu li:hover a{color:#ccc;border:0}<br />#main_menu li.searchpost{width:200px;height:24px;float:right;-webkit-border-radius:10px;-moz-border-radius:5px;border-radius:5px;background:#f4f4f4 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqFHrn3PcSbtzBz8a1U1tTxLloJ77SNPxaHmAj5ni5YCE6VzDCoE6s653-y7JXMCyt4I0lEhWwhXvIeMbrxX2Y5hAJ3RfKZanYlxgTPeGfN5jREpxJAQsEGrWoDl1gZhnNVdo_vgibagI/s21/search.gif" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXhSJbbnlSy-1FUrVkVZyeI5ngLsIhliqqxFziS-oIFtim_1t-lCunvMT3rgNW69YCBtXr1Hdrt7MQnuogDfh3C3D6gmwx0ZMQQEwQ2P_8O67JEzV1cmJGasQgTMO6ft4BPQ4WHbELpEUS/s1600/search-namkna-4.gif</b></a>) no-repeat 176px 4px;border:1px solid #b8bbbf;margin:4px 0 0 0}<br />#search-results{margin-top:5px;z-index:-9999}<br />#main_menu li.first a{border-left:0}<br />#main_menu li.first:hover{background:none}<br />#main_menu li.first:hover a{border-right:1px solid #ced1d6;color:#000}<br />#main_menu li.last a{border-right:0}<br />#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}<br />#main_menu li:hover div.sub{display:block}<br />#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}<br />#main_menu li div.sub div.cont h3{color:#afc3c7;text-transform:uppercase;margin:5px 0 8px 0;font-size:12px}<br />#main_menu li div.sub div.ms2{min-height:114px}<br />#main_menu li div.sub div.ms3{min-height:97px}<br />#main_menu li div.sub div.ms6{min-height:80px}<br />#main_menu li div.sub div.first{border:0}<br />#main_menu li div.sub div.last{background:none}<br />#main_menu li div.sub div.onecol{background:none;padding:0 15px 0 15px}<br />#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}<br />#main_menu li div.sub div.cont a:hover{color:#fff}<br />#main_menu li div.ms2{left:50px}<br />#main_menu li div.ms3{left:170px}<br />#main_menu li div.ms4{left:300px}<br />#main_menu li div.ms5{left:350px}<br />#main_menu li div.ms6{left:500px}<br />#main_menu li div.ms7{left:570px}<br /><br /></style><br /><div id='menu-module'><br /><div id='menu-wrapper'><br /><div id='fdmega-menu'><br /><ul id='main_menu'><br /><li class='first'><a href='<span style="color: red;"><b>/</b></span>'><img align='top' height='20' src='<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9fuuoTCWuKAGG8pHq0-Jj3y-ygkH6j_FggyP7-eAfiOpo82Ob92Z_zb94wd9BXFq95jNi9XWMNP9m2La5gbk0X1jTOyljRweGI3HXC4tSjtwlXP9rCGz2IRp6JfWsZuP0vmz5luAdak/s45/Home.png" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUVHO5-2-45DXtqXcTha1FGwkmoO2HYorS3wEve1m_ZUYsxe_sFx_gM6zZHsx2ZpNvs-CyQbEiuUIzLX_VkfCFA-lCaiOxzfE7fPe-4S3ud3ldJlBS09jmb1Yum61-hpyqbtw2k2UFrIE/s1600/Home-namkna-3.png</b></a>' width='25'/></a><br /><li class='last'><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>About me</b></span></a></li><br /><li><a href='<span style="color: red;"><b>#</b></span>'>Thủ Thuật</a><br /><div class='sub ms2'><br /><div class='cont ms2'><br /><h3><span style="background-color: lime;"><b>Thủ Thuật Blogger</b></span></h3><br /><a href='<b><span style="color: red;">#</span></b>'><span style="color: #38761d;"><b>Blogger Tuts</b></span></a><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: #38761d;"><b>Thủ Thuật SEO</b></span></a><br /><a href='<b>#</b>'>Tiện Ích</a><br /></div><br /><div class='cont ms2'><br /><h3><span style="background-color: lime;"><b>Thủ Thuật PC</b></span></h3><br /><a href='#'>Máy Tính</a><br /><a href='#'>Internet</a><br /><a href='#'>Office</a><br /><a href='#'>Đồ Họa</a><br /><a href='#'>Kiến Thức Tin Học</a><br /></div><br /><div class='cont last '><br /><h3>Kiếm tiền Online</h3><br /><a href='<span style="color: red;"><b>#</b></span>'>Kiếm tiền</a><br /><a href='<span style="color: red;"><b>#</b></span>'>Captcha</a><br /><a href='<span style="color: red;"><b>#</b></span>'>Zip code các tĩnh</a><br /></div><br /></div><br /></li><br /><li><a href='#'>Phần Mềm</a><br /><div class='sub ms3'><br /><div class='cont ms3'><br /><h3><span style="background-color: lime;"><b>Namkna BlOg</b></span></h3><br /><a href='#'>Phần Mềm Hệ Thống</a><br /><a href='#'>Network Tools</a><br /><a href='#a'>Multimedia</a><br /><a href='#'>Graphics & Design</a><br /></div><br /><div class='cont last'><br /><h3><span style="background-color: lime;"><b>Namkna BlOg</b></span></h3><br /><a href='#'>Office - Văn Phòng</a><br /><a href='#'>Antivirus</a><br /><a href='#'>Driver</a><br /><a href='#'>DeskTop</a><br /></div><br /></div><br /></li><br /><li><a href='/search/label/Hệ Điều Hành'>Hệ Điều Hành</a><br /><div class='sub ms4'><br /><div class='cont ms4'><br /><h3><span style="background-color: lime;"><b>Windows</b></span></h3><br /><a href='/search/label/Windows XP'>Windows XP</a><br /><a href='/search/label/Windows 7'>Windows 7</a><br /><a href='/search/label/Windows 8'>Windows 8</a><br /></div><br /><div class='cont last'><br /><h3><span style="background-color: lime;"><b>Ghost</b></span></h3><br /><a href='#'>Ghost Win XP</a><br /><a href='#'>Ghost Win 7</a><br /><a href='#'>Ghost Win 8</a><br /></div><br /></div><br /></li><br /><li><a href='#'><span style="color: blue;"><b>Giải Trí</b></span></a><br /><div class='sub ms5'><br /><div class='cont ms5'><br /><h3><span style="background-color: lime;"><b>Truyện</b></span></h3><br /><a href='#'>Lạ & Funny</a><br /><a href='#'>Truyện Ngắn</a><br /><a href='#'>Truyện Cổ Tích</a><br /><a href='#'>Truyện Tình Yêu</a><br /><a href='#'>Quà Tặng Cuộc Sống</a><br /><a href='#'>Đọc Và Suy Ngẫm</a><br /></div><br /><div class='cont ms5'><br /><h3><span style="background-color: lime;"><b>Hình Ảnh</b></span></h3><br /><a href='#'>Hình Nền</a><br /><a href='#'>Hình Girl Xinh</a><br /></div><br /><div class='cont last '><br /><h3><span style="background-color: lime;"><b>Âm Nhạc</b></span></h3><br /><a href='#'>Nhạc Việt Nam</a><br /><a href='#'>Nhạc Nước Ngoài</a><br /></div><br /></div><br /></li><br /><li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Download</b></span></a><br /><div class='sub ms6'><br /><div class='cont ms6'><br /><h3><span style="background-color: lime;"><b>Học Tập</b></span></h3><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Ebook</b></span></a><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Portable Soft</b></span></a><br /></div><br /><div class='cont last'><br /><h3><span style="background-color: lime;"><b>Giải Trí</b></span></h3><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Tải Phim</b></span></a><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Tải Game</b></span></a><br /></div><br /></div><br /></li><br /><li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Hỗ trợ</b></span></a><br /><div class='sub ms7'><br /><div class='cont ms7'><br /><h3>Tiện Ích</h3><br /><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Code Converter</b></span></a><br /></div><br /><div class='cont last'><br /><h3>Kết Nối</h3><br /><a href='<span style="color: red;"><b>#</b></span>' onclick='this.style.behavior=&#39;url(#default#homepage)&#39;;this.setHomePage(&#39;<span style="color: orange;"><b>http://namkna.blogspot.com/</b></span>&#39;);'><span style="color: blue;"><b>Đặt làm trang chủ</b></span></a><br /></div><br /></div><br /></li><br /></li><br /><li class='searchpost'><br /><form action="/search" target="_parent" id="searchform"><br /><input name="cof" type="hidden" value="FORID:10" /><br /><input name="ie" type="hidden" value="UTF-8" /><br /><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;<span style="background-color: yellow;">height:25px</span>;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><br /></li><br /></ul><br /></div><br /><div style='clear: both;'></div><br /></div><br /></div></pre><b>4- Lưu mẫu</b> lại và xem kết quả nha.<br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">»  Tùy chỉnh nâng cao.</h3><br /><div style="text-align: justify;"><b>1-</b> 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 <span style="background-color: yellow;">height:25px</span>.<br /><br /><b>2-</b> Để đổi màu menu chính bạn thay đổi mã màu <span style="background-color: orange;">background:#fff</span>;<br /><br /><b>3-</b> Menu này nếu chèn thẳng vào template thì hãy chèn vào trước thẻ <span style="background-color: #cccccc;"><b><div class='tabs-outer'></b></span>(đố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ư: <span style="background-color: #eeeeee;"><b><div id='content-wrapper'></b></span>. Nếu không xác định được hãy để lại comment.<br /><br /><b>4-</b> 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 <a href="http://namkna.blogspot.com/2011/07/tao-khung-them-tien-ich-cho-header-them.html" style="color: #006666; text-decoration: none;" target="_blank"><b>tại đây</b></a>) sau đó tạo một tiện ích <b>HTML/Javascripts</b> ngay dưới phần header và thêm code vào là oke.</div></div></div>

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 ...

Đọc thêm »

Navigation tab

<div dir="ltr" style="text-align: left;" trbidi="on"><h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Tạo Responsive Dropdown Menu trong Blogger</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-1906064821972961672" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pDAtAFN9jM0TMwM_WbvMBP-rA9In2nfwX9vXgDTAsQJBUbYP-bjN-qC4_JA3h5fxsHAS9h-UvIXGd5evNyHqnBStAwHeZONpcF3i1Y1XE88333hp4uIK862SNsip-DAFyAh7pGRO4AvJ/s400/design-responsive-drop-down-menu-in-blogger_namkna.blogspot.com.png" imageanchor="1" style="clear: right; color: #006666; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Tạo Responsive Dropdown Menu trong Blogger" border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pDAtAFN9jM0TMwM_WbvMBP-rA9In2nfwX9vXgDTAsQJBUbYP-bjN-qC4_JA3h5fxsHAS9h-UvIXGd5evNyHqnBStAwHeZONpcF3i1Y1XE88333hp4uIK862SNsip-DAFyAh7pGRO4AvJ/s320/design-responsive-drop-down-menu-in-blogger_namkna.blogspot.com.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Tạo Responsive Dropdown Menu trong Blogger" width="320" /></a></div><div style="text-align: justify;">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ẻ <b><nav> </b>và CSS3 : bạn có thể <b><a href="http://www.w3schools.com/cssref/css_selectors.asp" style="color: #006666; text-decoration: none;">kiểm tra tại đây</a></b>, Mình sẽ giới thiệu một menu của <b><a href="http://www.mybloggertricks.com/2013/06/design-responsive-drop-down-menu-in-blogger.html" style="color: #006666; text-decoration: none;">mybloggertricks</a></b> 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!</div><br /><div style="text-align: justify;"><br /><a href="" name="more"></a>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.</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQw3f7SJR0D-8q481IL6PicAFNnI5Yykja4Go-Gm7iL3PBqKZWxhE_qdV1h3rpuejaRSMdC8NnE8_MKJIojYWv8kfRTnoJM4wbequjlqh0X4OK12HU7gKkXg2b6y79suu06Jk17-jKlUL/s600/design-responsive-drop-down-menu-in-blogger_namkna.blogspot.com-1.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Tạo Responsive Dropdown Menu trong Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQw3f7SJR0D-8q481IL6PicAFNnI5Yykja4Go-Gm7iL3PBqKZWxhE_qdV1h3rpuejaRSMdC8NnE8_MKJIojYWv8kfRTnoJM4wbequjlqh0X4OK12HU7gKkXg2b6y79suu06Jk17-jKlUL/s600/design-responsive-drop-down-menu-in-blogger_namkna.blogspot.com-1.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Tạo Responsive Dropdown Menu trong Blogger" /></a><br /><div style="text-align: justify;">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.</div><br /><a class="button big" href="http://namkna-demo.blogspot.com/2013/07/demo-responsive-dropdown-menu-trong.html" rel="nofollow" style="background-color: #006666; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(0, 85, 85); box-shadow: rgba(255, 255, 255, 0.2) 0px 1px inset; color: #519ad6; outline: none; padding: 10px 20px; text-decoration: none;" target="_blank"><span style="color: red;">VIEW</span><span style="color: white;"> DEMO</span></a><br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">»  Bước 1: Tắt trình duyệt mobile mặc định của blogger</h3><div style="text-align: justify;"><b>1.1- Đăng nhập </b>Blogger</div><div style="text-align: justify;"><b>1.2-</b> Bấm vào icon <b>chỉnh sửa</b> ở mục <b>điện thoại di dộng</b>.</div><div style="text-align: center;"><img alt="Tạo Responsive Dropdown Menu trong Blogger" class="decoded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihROLa-KjVbXqrsgvmwseaAiz-hn-yaun1a24wDt4Kywuf91ulx25F5sCD2cLA4xYeeYdzNHsLiEyRiZuUqWNIbCOCsGXHqFcPJKCCaS1exlaC1KAle_3pw7RqF2-1-FG74lVa2fu4g4/s1600/edit-blogger-mobile-templates-for-blogger-blogspot.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Tạo Responsive Dropdown Menu trong Blogger" /></div><div style="text-align: justify;"><b>1.3-</b> Tại mục <b>seleck </b>chọn <b>no</b>.=> <b>Lưu </b>lại và tiến hành bước tiếp theo.</div><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;">» Bước 2: Thêm Responsive menu vào template</h3><div style="text-align: justify;"><b>2.1-</b> Vào <b>Mẫu</b></div><div style="text-align: justify;"><b>2.2-</b> Chọn <b>Chỉnh sửa HTML</b></div><div style="text-align: justify;"><b>2.3- </b>Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <b><head></b>)</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><b:if cond='data:blog.isMobile'><br /><meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/><br /><b:else/><br /><meta content='width=1100' name='viewport'/><br /></b:if></pre><div style="text-align: justify;">- 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ẻ <b><head></b>)</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/><br /><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/></pre><b>2.4-</b> Dán đoạn code bên dưới trước thẻ: <span style="color: white;"><span style="background-color: #666666;"><b>]]></b:skin></b></span></span><br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">/*-----Responsive Drop Down Menu by MBT ----*/<br /><br />body {<br />margin: 0px;<br />}<br />#menu{<br />background: <span style="background-color: orange;">#50B7DC</span>;<br />color: <span style="background-color: yellow;">#FFF</span>;<br />height: 40px;<br />border-bottom: 2px solid #DDD;<br />box-shadow: 1px 2px 9px #B1B1B1;<br />border-top: 2px solid #DDD;<br />}<br />#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}<br />#menu ul{height:45px;width:<span style="background-color: lime;">1024px</span>}<br />#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}<br />#menu a{display: block;<br />line-height: 40px;<br />padding: 0 14px;<br />text-decoration: none;<br />color: #FFF;<br /><br />}<br /><br /><br />#menu li a:hover{<br />color: #E4E4E4;<br />-webkit-transition: all .1s ease-in-out;<br />-moz-transition: all .1s ease-in-out;<br />-ms-transition: all .1s ease-in-out;<br />-o-transition: all .1s ease-in-out;<br />transition: all .1s ease-in-out;<br />background: <span style="background-color: cyan;">#5FC6EB</span>;<br />}<br />#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}<br />#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}<br />#menu label span{font-size:16px;position:absolute;left:35px}<br />#menu ul.menus{<br />height: auto;<br />overflow: hidden;<br />width: 170px;<br />background: #50B7DC;<br />position: absolute;<br />z-index: 99;<br />display: none;<br />}<br />#menu ul.menus li{<br /><br />display: block;<br />width: 100%;<br />font:normal 0.8em Arial;<br />text-transform: none;<br />text-shadow: none;<br />border-bottom: 1px dashed #31AFDB;<br /><br />}<br />#menu ul.menus a{<br />color: #FFF;<br />line-height: 35px;<br />}<br />#menu li:hover ul.menus{display:block}<br /><br />#menu ul.menus a:hover{<br />background: <span style="background-color: cyan;">#5FC6EB</span>;<br />color: #FFF;<br />-webkit-transition: all .1s ease-in-out;<br />-moz-transition: all .1s ease-in-out;<br />-ms-transition: all .1s ease-in-out;<br />-o-transition: all .1s ease-in-out;<br />transition: all .1s ease-in-out;<br />}<br /><br />@media screen and (<span style="background-color: red;">max-width: 800px</span>){<br /><br /> #menu{position:relative}<br /> #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}<br /> #menu ul.menus{width:100%;position:static;padding-left:20px}<br /> #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}<br /> #menu input,#menu label{position:absolute;top:0;left:0;display:block}<br /> #menu input{z-index:4}<br /> #menu input:checked + label{color:white}<br /> #menu input:checked ~ ul{display:block}<br /><br />}</pre><div style="text-align: justify;"><b>» Tùy chỉnh</b></div><ul style="text-align: justify;"><li><span style="background-color: orange;">#50B7DC</span> Là màu nền của menu</li><li><span style="background-color: yellow;">#FFF</span> Là màu chữ hiển thị trên menu chính.</li><li><span style="background-color: lime;">1024px</span> Chiều rộng của thanh menu</li><li><span style="background-color: cyan;">#5FC6EB</span> Màu sub menu khi rê chuột vào</li><li><span style="background-color: red;">max-width: 800px</span> Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown</li></ul><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>2.5-</b> Dán code bên dưới sau thẻ <span style="background-color: #eeeeee;"><b><body></b></span> hoặc vị trí bạn muốn thêm menu.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><nav id='menu'><br /> <input type='<span style="background-color: yellow;">checkbox</span>'/><br /> <label>&#8801;<span><span style="color: blue;"><b>Namkna&#160;Blog</b></span></span></label><br /> <span style="background-color: cyan;"><b><ul></b></span><br /> <li><a href='/'>Home</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>About</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Drop Down <font size='1'><span style="color: orange;"><b>&#9660;</b></span></font></a><br /> <ul class='menus'><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 1</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 2</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 3</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 4</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 5</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 6</a></li><br /><br /> </ul><br /> </li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Contact</b></span></a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Drop Down </b></span><font size='1'><span style="color: orange;"><b>&#9660;</b></span></font></a><br /> <ul class='menus'><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 1</a></li><br /> <li><a href='#'>Tab 2</a></li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Tab 3</a></li><br /> </ul><br /> </li><br /> <li><a href='<span style="color: red;"><b>#</b></span>'>Advertise</a></li><br /> <span style="background-color: cyan;"><b></ul></b></span><br /></nav></pre><b>»  Tùy chỉnh:</b><br /><ul style="text-align: justify;"><li>Thay <span style="color: red;"><b><span style="color: blue;">Namkna&#160;Blo</span>g</b></span> 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ự <span style="color: blue;"><b>&#160;</b> </span>để thay cho dấu cách.</li><li>Thay các dấu thăng màu đỏ (<span style="color: red;"><b>#</b></span>) thành liên kết tới bài viết hoặc nhãn của bạn.</li><li>Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau <span style="color: orange;"><b>&#9660; </b></span>.</li></ul><div style="text-align: justify;">Dán đoạn mã bên dưới vào sau thẻ <span style="background-color: cyan;"><b><ul></b></span> hoặc trước thẻ <span style="background-color: cyan;"><b></ul></b></span> để tạo một menu thả xuống.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><li><a href='#'><span style="color: blue;"><b>Drop Down</b></span> <font size='1'><span style="color: orange;"><b>&#9660;</b></span></font></a><br /><ul class='menus'><br /><li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Tab 1</b></span></a></li><br /><li><a href='<span style="color: red;"><b>#</b></span>'><span style="color: blue;"><b>Tab 2</b></span></a></li><br /></ul><br /></li> </pre><div style="text-align: justify;">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.<br /><br /><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px;">» Cần giúp đỡ?</h3></div><div style="text-align: justify;">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 <span style="background-color: red;">800px</span>. 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 <span style="background-color: red;">800px</span> 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.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Tôi đã sử dụng chỉ có hai điểm <b>break </b>quan trọng và đó là chiều rộng: <span style="background-color: lime;">1024px</span> cho màn hình máy tính để bàn và <span style="background-color: red;">800px</span> 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</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div></div></div>

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à p...

Đọc thêm »