Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free: blogger google

blogger google

Mẫu blogspot dịch vụ vệ sinh quốc tế đẹp 00027

Free

Mã SP: Free
Mã nguồn: Template blogspot
Thiết kế: Share123.vn

Mô tả chi tiết

Mẫu template blogspot dịch vụ vệ sinh được share123.vn thiết kế dựa trên mã nguồn mở blogspot với hosting và tên miền free.

Hướng dẫn cài đặt và quản trị:

Đăng nhập trang quản trị blogspot:
Link đăng nhập: https://draft.blogger.com
User: gmail của bạn
Pass: mật khẩu gmail của bạn

1. Hướng dẫn thay logo:
Mẫu => Chỉnh sửa HTML => Tìm đoạn code sau (Ctrl+F):


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX1Syc-ZPYLEs9oyV1HHt1aF9yz43wSWMeTTHqIsp-pIMV0v0j20yDoDQpOC99ogixgrtXJJ654Kwep-Fbxn5j2_ZvDII-NPhM0EE3Gh4qr3S3wpLAIbzSSrZKlBx5kixN4iV3UWGjmYQ/s1600/banner_top.jpg'/>

Bạn thay link logo thành link của bạn.

2. Hướng dẫn thay thông tin Menu
Mẫu => Chỉnh sửa HTML => Tìm đoạn code sau (Ctrl+F):


<nav class='full_width_nav main_navigation'>

3. Hướng dẫn thay link ảnh Slider
Mẫu => Chỉnh sửa HTML => Tìm đoạn code sau (Ctrl+F):


<div class='content-slideshow'>

4. Hướng dẫn cài đặt tiện ích DỊCH VỤ
Bố cục => Tiện ích Dịch vụ => chỉnh sửa tiện ích => Paste đoạn code sau:


<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="row">

            <div class="title-content"><a href="/search/label/NHÃN CỦA BẠN ">Dịch vụ làm sạch định kỳ </a> </div>

        </div>

        <div class="row">

            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 img-news no-px"> <img src="//bizweb.dktcdn.net/100/018/201/themes/23356/assets/error_1.png?1461035632880" /> </div>

            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 no-px">

                <ul>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch công ty, xí nghiệp</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch văn phòng</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch trường học</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch trung tâm thương mại</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch bệnh viện</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch căn hộ, nhà ở</b></a> </li>

                </ul>

                <button class="new-button"><a href="/search/label/NHÃN CỦA BẠN ">Xem Thêm</a> </button>

            </div>

        </div>

    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="row">

            <div class="title-content"><a href="/search/label/NHÃN CỦA BẠN ">Dịch vụ vệ sinh công nghiệp </a> </div>

        </div>

        <div class="row">

            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 img-news no-px"> <img src="//bizweb.dktcdn.net/100/018/201/themes/23356/assets/error_2.png?1461035632880" /> </div>

            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 no-px">

                <ul>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ vệ sinh công nghiệp</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Quy trình vệ sinh công nghiệp</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ vệ sinh tổng hợp</b></a> </li>

                    <li class="entry_title"><a href="//search/label/NHÃN CỦA BẠN "><b>Cung ứng nhân viên giúp việc</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ lau kính tòa nhà</b></a> </li>

                    <li class="entry_title">

                        <a href="=" /search/label/nhãn của bạn "><b>Dịch vụ vệ sinh màn nhện</b></a></li>

                </ul>

                <button class="new-button "><a href="/search/label/NHÃN CỦA BẠN ">Xem Thêm</a></button>

            </div>

        </div>

    </div>

</div>

Lưu ý: Bạn thay NHÃN CỦA BẠN thành nhãn của bạn

5. Hướng dẫn cài đặt tiện ích TIN TỨC
Bố cục => Tiện ích Tin tức => chỉnh sửa tiện ích => Paste đoạn code sau:


<script>

//<![CDATA[

document.write("<script src=\"/feeds/posts/default/-/Tin tức?max-results="+5+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

//]]>

</script>

Lưu ý: Thay nhãn Tin tức thành nhãn của bạn

6. Hướng dẫn cài đặt tiện ích DỊCH VỤ LÀM SẠCH ĐỊNH KỲ, DỊCH VỤ VỆ SINH CÔNG NGHIỆP , ...
Bố cục => Tiện ích HTMML/Javacript => chỉnh sửa tiện ích => Paste đoạn code sau:


<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="row">

            <div class="title-content"><a href="/search/label/NHÃN CỦA BẠN ">Dịch vụ làm sạch định kỳ </a>

            </div>

        </div>

        <div class="row">

            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 img-news no-px"> <img src="//bizweb.dktcdn.net/100/018/201/themes/23356/assets/error_1.png?1461035632880" /> </div>

            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 no-px">

                <ul>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch công ty, xí nghiệp</b></a></li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch văn phòng</b></a></li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch trường học</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch trung tâm thương mại</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch bệnh viện</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ làm sạch căn hộ, nhà ở</b></a> </li>

                </ul>

                <button class="new-button"><a href="/search/label/NHÃN CỦA BẠN ">Xem Thêm</a></button>

            </div>

        </div>

    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="row">

            <div class="title-content"><a href="/search/label/NHÃN CỦA BẠN ">Dịch vụ vệ sinh công nghiệp </a></div>

        </div>

        <div class="row">

            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 img-news no-px"> <img src="//bizweb.dktcdn.net/100/018/201/themes/23356/assets/error_2.png?1461035632880" /> </div>

            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 no-px">

                <ul>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ vệ sinh công nghiệp</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Quy trình vệ sinh công nghiệp</b></a> </li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ vệ sinh tổng hợp</b></a></li>

                    <li class="entry_title"><a href="//search/label/NHÃN CỦA BẠN "><b>Cung ứng nhân viên giúp việc</b></a></li>

                    <li class="entry_title"><a href="/search/label/NHÃN CỦA BẠN "><b>Dịch vụ lau kính tòa nhà</b></a></li>

                    <li class="entry_title">

                        <a href="=" /search/label/nhãn của bạn "><b>Dịch vụ vệ sinh màn nhện</b></a></li>

                </ul>

                <button class="new-button "><a href="/search/label/NHÃN CỦA BẠN ">Xem Thêm</a></button>

            </div>

        </div>

    </div>

</div>

Lưu ý: Bạn thay nhãn và tên thành thông tin của bạn.

7. Thay thông tin Footer ( Thông tin liên hệ)
Mẫu => Chỉnh sửa HTML => Tìm đoạn code sau (Ctrl+F):


<footer id='footer'>

8. Cài đặt giao diện mobile:
Đăng nhập => Mẫu => Điện thoại di động => Cài đặt sang chế độ tắt như hình dưới:

Cài đặt giao diện mobile

Với giao diện web, blog hiện nay, menu tương thích các thiết bị di động đã trở nên phổ biến, hôm trước mình đã chia sẻ một dạng menu ngang responsive của sinhvienit chia sẻ khá đẹp, hôm nay mình chia sẻ một menu dọc cũng khá đẹp như vậy.

Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp

Hướng dẫn:

Đối với Blogspot bạn chèn đoạn code sau trong thẻ body là được:


<style type="text/css">

#cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#cssmenu-doc { width:200px; font-family:Helvetica,Arial,sans-serif; color:#ffffff; }

#cssmenu-doc ul ul { display:none; }

.align-right { float:right; }

#cssmenu-doc > ul > li > a { padding:15px 20px; border-left:1px solid #1682ba; border-right:1px solid #1682ba; border-top:1px solid #1682ba; cursor:pointer; z-index:2; font-size:14px; font-weight:bold; text-decoration:none; color:#ffffff; text-shadow:0 1px 1px rgba(0,0,0,0.35); background:#36aae7; background:-webkit-linear-gradient(#36aae7,#1fa0e4); background:-moz-linear-gradient(#36aae7,#1fa0e4); background:-o-linear-gradient(#36aae7,#1fa0e4); background:-ms-linear-gradient(#36aae7,#1fa0e4); background:linear-gradient(#36aae7,#1fa0e4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }

#cssmenu-doc > ul > li > a:hover,#cssmenu-doc > ul > li.active > a,#cssmenu-doc > ul > li.open > a { color:#eeeeee; background:#1fa0e4; background:-webkit-linear-gradient(#1fa0e4,#1992d1); background:-moz-linear-gradient(#1fa0e4,#1992d1); background:-o-linear-gradient(#1fa0e4,#1992d1); background:-ms-linear-gradient(#1fa0e4,#1992d1); background:linear-gradient(#1fa0e4,#1992d1); }

#cssmenu-doc > ul > li.open > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15); border-bottom:1px solid #1682ba; }

#cssmenu-doc > ul > li:last-child > a,#cssmenu-doc > ul > li.last > a { border-bottom:1px solid #1682ba; }

.holder { width:0; height:0; position:absolute; top:0; right:0; }

.holder::after,.holder::before { display:block; position:absolute; content:""; width:6px; height:6px; right:20px; z-index:10; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }

.holder::after { top:17px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; }

#cssmenu-doc > ul > li > a:hover > span::after,#cssmenu-doc > ul > li.active > a > span::after,#cssmenu-doc > ul > li.open > a > span::after { border-color:#eeeeee; }

.holder::before { top:18px; border-top:2px solid; border-left:2px solid; border-top-color:inherit; border-left-color:inherit; }

#cssmenu-doc ul ul li a { cursor:pointer; border-bottom:1px solid #32373e; border-left:1px solid #32373e; border-right:1px solid #32373e; padding:10px 20px; z-index:1; text-decoration:none; font-size:13px; color:#eeeeee; background:#49505a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }

#cssmenu-doc ul ul li:hover > a,#cssmenu-doc ul ul li.open > a,#cssmenu-doc ul ul li.active > a { background:#424852; color:#ffffff; }

#cssmenu-doc ul ul li:first-child > a { box-shadow:none; }

#cssmenu-doc ul ul ul li:first-child > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }

#cssmenu-doc ul ul ul li a { padding-left:30px; }

#cssmenu-doc > ul > li > ul > li:last-child > a,#cssmenu-doc > ul > li > ul > li.last > a { border-bottom:0; }

#cssmenu-doc > ul > li > ul > li.open:last-child > a,#cssmenu-doc > ul > li > ul > li.last.open > a { border-bottom:1px solid #32373e; }

#cssmenu-doc > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom:0; }

#cssmenu-doc ul ul li.has-sub > a::after { display:block; position:absolute; content:""; width:5px; height:5px; right:20px; z-index:10; top:11.5px; border-top:2px solid #eeeeee; border-left:2px solid #eeeeee; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }

#cssmenu-doc ul ul li.active > a::after,#cssmenu-doc ul ul li.open > a::after,#cssmenu-doc ul ul li > a:hover::after { border-color:#ffffff; }

</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

( function( $ ) {

$( document ).ready(function() {

$('#cssmenu-doc li.has-sub>a').on('click', function(){

  $(this).removeAttr('href');

  var element = $(this).parent('li');

  if (element.hasClass('open')) {

   element.removeClass('open');

   element.find('li').removeClass('open');

   element.find('ul').slideUp();

  }

  else {

   element.addClass('open');

   element.children('ul').slideDown();

   element.siblings('li').children('ul').slideUp();

   element.siblings('li').removeClass('open');

   element.siblings('li').find('li').removeClass('open');

   element.siblings('li').find('ul').slideUp();

  }

 });



 $('#cssmenu-doc>ul>li.has-sub>a').append('<span class="holder"></span>');



 (function getColor() {

  var r, g, b;

  var textColor = $('#cssmenu-doc').css('color');

  textColor = textColor.slice(4);

  r = textColor.slice(0, textColor.indexOf(','));

  textColor = textColor.slice(textColor.indexOf(' ') + 1);

  g = textColor.slice(0, textColor.indexOf(','));

  textColor = textColor.slice(textColor.indexOf(' ') + 1);

  b = textColor.slice(0, textColor.indexOf(')'));

  var l = rgbToHsl(r, g, b);

  if (l > 0.7) {

   $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');

   $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');

  }

  else

  {

   $('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');

   $('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');

  }

 })();



 function rgbToHsl(r, g, b) {

     r /= 255, g /= 255, b /= 255;

     var max = Math.max(r, g, b), min = Math.min(r, g, b);

     var h, s, l = (max + min) / 2;



     if(max == min){

         h = s = 0;

     }

     else {

         var d = max - min;

         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

         switch(max){

             case r: h = (g - b) / d + (g < b ? 6 : 0); break;

             case g: h = (b - r) / d + 2; break;

             case b: h = (r - g) / d + 4; break;

         }

         h /= 6;

     }

     return l;

 }

});

} )( jQuery );



//]]>

</script>

<div id='cssmenu-doc'>

<ul>

   <li><a href='#'><span>Home</span></a></li>

   <li class='active has-sub'><a href='#'><span>Products</span></a>

      <ul>

         <li class='has-sub'><a href='#'><span>Product 1</span></a>

            <ul>

               <li><a href='#'><span>Sub Product</span></a></li>

               <li class='last'><a href='#'><span>Sub Product</span></a></li>

            </ul>

         </li>

         <li class='has-sub'><a href='#'><span>Product 2</span></a>

            <ul>

               <li><a href='#'><span>Sub Product</span></a></li>

               <li class='last'><a href='#'><span>Sub Product</span></a></li>

            </ul>

         </li>

      </ul>

   </li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

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

Trong bối cảnh việc thiết kế web , thiết kế blogspot luôn phải tương thích mọi thiết bị di động, ipad,... thì menu responsive cho web site, blog cũng rất quan trọng.

Ở đây share123.vn trích 1 đoạn code menu có responsive khá đẹp mà mình hay sử dụng, code được chia sẻ trên sinhvienit:

Live Demo: http://www.share123.vn/

Demo menu responsive cho blogspot

Cách làm:

Chèn trong thẻ body đoạn menu bạn muốn hiển thị như sau:


<script type='text/javascript'>
//<![CDATA[
!function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({title:"Menu",format:"dropdown",sticky:!1},s);return this.each(function(){return e.prepend('<div id="menu-button">'+i.title+"</div>"),n(this).find("#menu-button").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.hide().removeClass("open"):(s.show().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").hide():n(this).siblings("ul").addClass("open").show()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),i.sticky===!0&&e.css("position","fixed"),resizeFix=function(){n(window).width()>768&&e.find("ul").show(),n(window).width()<=768&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#cssmenu").menumaker({title:"Menu",format:"multitoggle"})})}(jQuery);
//]]>
</script>

  <style type='text/css'>

@import url(http://fonts.googleapis.com/css?family=Arial:400,700); #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#cssmenu:after,#cssmenu &gt; ul:after { content:&quot; .&quot; ; display:block; clear:both; visibility:hidden; line-height:0; height:0; }

#cssmenu #menu-button { display:none; }

#cssmenu { font-family:Arial,sans-serif; max-width:1024px; margin:auto; }

#cssmenu &gt; ul &gt; li { float:left; border-right:1px solid #02663D; border-left:1px solid #023D25; }

#cssmenu.align-center &gt; ul { font-size:0; text-align:center; }

#cssmenu.align-center &gt; ul &gt; li { display:inline-block; float:none; }

#cssmenu.align-center ul ul { text-align:left; }

#cssmenu.align-right &gt; ul &gt; li { float:right; }

#cssmenu &gt; ul &gt; li &gt; a { padding:13px 17px; font-size:12px; letter-spacing:1px; text-decoration:none; color:#dddddd; font-weight:700; text-transform:uppercase; }

#cssmenu &gt; ul &gt; li:hover &gt; a { color:#ffffff; }

#cssmenu &gt; ul &gt; li.has-sub &gt; a { padding-right:10px; }

#cssmenu &gt; ul &gt; li.has-sub &gt; a:after { position:absolute; top:0; right:0; width:0; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; }

#cssmenu &gt; ul &gt; li.has-sub &gt; a:before { position:absolute; top:0; right:0; display:block; width:2px; height:0; background:#dddddd; content:&#39; &#39; ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }

#cssmenu &gt; ul &gt; li.has-sub:hover &gt; a:before { top:23px; height:0; }

#cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; }

#cssmenu.align-right ul ul { text-align:right; }

#cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }

#cssmenu li:hover &gt; ul { left:auto; }

#cssmenu.align-right li:hover &gt; ul { left:auto; right:0; }

#cssmenu li:hover &gt; ul &gt; li { height:35px; }

#cssmenu ul ul ul { margin-left:100%; top:0; }

#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }

#cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:11px 15px; width:170px; font-size:12px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; }

#cssmenu ul ul li:last-child &gt; a,#cssmenu ul ul li.last-item &gt; a { border-bottom:0; }

#cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li a:hover { color:#ffffff; }

#cssmenu ul ul li.has-sub &gt; a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; }

#cssmenu.align-right ul ul li.has-sub &gt; a:after { right:auto; left:11px; }

#cssmenu ul ul li.has-sub &gt; a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:&#39; &#39; ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }

#cssmenu.align-right ul ul li.has-sub &gt; a:before { right:auto; left:14px; }

#cssmenu ul ul &gt; li.has-sub:hover &gt; a:before { top:17px; height:0; }




@media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {

    #cssmenu { width:100%; } #cssmenu ul { width:100%; display:none; } #cssmenu.align-center &gt; ul { text-align:left; } #cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); } #cssmenu ul ul li,#cssmenu li:hover &gt; ul &gt; li { height:auto; } #cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; } #cssmenu &gt; ul &gt; li { float:none; } #cssmenu ul ul li a { padding-left:25px; } #cssmenu ul ul ul li a { padding-left:35px; } #cssmenu ul ul li a { color:#dddddd; background:none; } #cssmenu ul ul li:hover &gt; a,#cssmenu ul ul li.active &gt; a { color:#ffffff; } #cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } #cssmenu &gt; ul &gt; li.has-sub &gt; a:after,#cssmenu &gt; ul &gt; li.has-sub &gt; a:before,#cssmenu ul ul &gt; li.has-sub &gt; a:after,#cssmenu ul ul &gt; li.has-sub &gt; a:before { display:none; } #cssmenu #menu-button { display:block; padding:17px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; } #cssmenu #menu-button:after { position:absolute; top:22px; right:17px; display:block; height:4px; width:20px; border-top:2px solid #dddddd; border-bottom:2px solid #dddddd; content:&#39; &#39; ; } #cssmenu #menu-button:before { position:absolute; top:16px; right:17px; display:block; height:2px; width:20px; background:#dddddd; content:&#39; &#39; ; } #cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:2px; width:15px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff; width:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; } #cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; } #cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:&#39; &#39; ; } #cssmenu ul ul .submenu-button:after { top:15px; right:13px; } #cssmenu .submenu-button.submenu-opened:after { background:#ffffff; } #cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:&#39; &#39; ; } #cssmenu ul ul .submenu-button:before { top:12px; right:16px; } #cssmenu .submenu-button.submenu-opened:before { display:none; } 

} 
</style>
    <div id='menu-desktop'>
    <div id='cssmenu'>

        <ul>

            <li><a href='/'>Trang chủ</a></li>

            <li><a href='#'>Giới thiệu</a></li>

            <li class='active'><a href='#'>Sản phẩm</a>

                   <ul>

                          <li><a href='#'>Sub Menu 1</a></li>

                          <li><a href='#'>Sub Menu 2</a></li>

                          <li><a href='#'>Sub Menu 3</a></li>

                          <li><a href='#'>Sub Menu 4</a></li>

                </ul>

            </li>

            <li><a href='#'>Tin tức</a> </li>

            <li><a href='#'>Thanh toán</a></li>

        </ul>

    </div>

</div>

Lưu ý: bạn thay link và tên menu phù hợp với blog của bạn

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

Mọi thứ xảy ra đều có lý do riêng của nó, không có gì là tình cờ hay may mắn cả!

Bạn sẽ ngưng phán xét người khác sau khi đọc câu chuyện này

Anh chàng Jimmy sống tại Texas đã có một bài học đáng nhớ trong đời khi làm nhiệm vụ trông coi nhà cửa cho một ông chủ giàu có nơi đây.

“Hàng ngày tôi vui vẻ chào đón và mở cửa xe để ông chủ tôi tự lái chiếc xe hơi sang trọng đi làm. Nhưng ông ấy chẳng bao giờ nhếch mép và trả lời lại”.

Một hôm, khi tôi đang lúi húi tìm kiếm đồ ăn thừa trong chiếc túi đựng rác bên ngoài khu biệt thự. Ông chủ đi qua cũng chẳng thèm để ý đến tôi, vẫn nhưng như thường lệ, ông ấy chẳng nói gì và đi thẳng!

Ngày hôm sau, tôi thấy một túi đồ ăn được gói gém cẩn thận và rất tươi mới, cứ như thể nó vừa được mua từ siêu thị nào đó. Tôi chẳng mảy may suy nghĩ đến chiếc túi đó từ đâu “rơi xuống”.

Cứ thế mỗi ngày, tôi hạnh phúc vì đều nhận được đồ ăn miễn phí và mang về cho vợ con cùng thưởng thức.

Lâu lâu tôi cũng tự hỏi “Gã điên nào đã bỏ quên đồ ăn như vậy?” nhưng dần dần tôi cũng chẳng cần thắc mắc nữa. Miễn hàng ngày có đồ ăn ngon là được.

Một ngày không may xảy ra, ông chủ tôi qua đời và có rất nhiều khách đến thăm viếng. Ngày đó tôi không thấy túi đồ như thường lệ nhưng nghĩ là do một trong số vị khách kia đã lấy chúng.

Nhưng ngày thứ hai, thứ ba, thứ tư vẫn không thấy đồ ăn quay trở lại và không lâu sau đó gia đình tôi không đủ thức ăn đuề huề như trước kia nữa.

Tôi quyết định đòi bà chủ tăng lương thêm, nếu không tôi sẽ bỏ việc. Bà ấy vô cùng sửng sốt khi thấy người trông coi nhà cửa đột ngột phàn nàn về mức lương sau 2 năm gắn bó.

Cuối cùng, tôi kể sự thật cho bà ấy nghe về việc túi đồ ăn được đặt hàng ngày bên ngoài khu biệt thự.

Bà ấy ngạc nhiên hỏi lại: Vậy việc đó dừng lại khi nào?

“Từ khi ông chủ qua đời, tôi đã không còn thấy túi đồ ăn nữa”, Jimmy hụt hẫng nói.

Bà chủ lại hỏi tiếp: Tại sao anh không nghĩ là ông chủ đã đặt gói đồ ăn suốt 2 năm cho anh?

Jimmy đau buồn ra mặt, chắc anh không thể nào ngờ được người đàn ông “lạnh lùng” chẳng nói chẳng rằng với anh câu nào mà lại rộng lượng đến thế.

Bà chủ bật khóc không ngừng khiến anh bối rối và hứa sẽ trở lại công việc như cũ.

Nhưng bà ấy nói với anh rằng: Tôi khóc vì cuối cùng tôi cũng tìm thấy người thứ 7 mà chồng tôi đã mang thức ăn cho. Hàng ngày ông ấy đều mua 7 túi đồ ăn cho 7 người nhưng tôi mới biết được 6 người. “Cuối cùng tôi cũng tìm được anh, người thứ 7”, bà nghẹn ngào.

Sau hôm đó, tôi lại bắt đầu được nhận đồ ăn miễn phí từ con trai của ông chủ mang đến. Nhưng mỗi khi tôi nói “Cảm ơn” thì cậu bé cũng chẳng hề đáp lại, y hệt bố của cậu.

Tôi không hiểu chuyện gì xảy ra giữa hai bố con nhà ông chủ, nhưng lần này tôi sẽ gào thật to hai tiếng “Cảm ơn” với cậu bé để cố tình cho cậu phản ứng lại.

Jimmy đứng ngây như trời trồng khi lần đầu tiên cậu bé đáp lại: Xin chú đừng buồn khi cháu không trả lời. Giống như bố, cháu cũng có vấn đề về thính giác.”

Ồ, tôi đã phạm hết sai làm này đến sai lầm khác khi xét đoán người khác mà chẳng hề biết gì về lý do thực sự đằng sau nó.

Hãy cẩn thận! Mọi thứ diễn ra trước mắt chưa chắc đã là sự thật, trước khi bạn kết luận một điều gì, có một thứ quan trọng bạn phải đặt ra đó là "CÂU HỎI" để tìm được lý do đúng đắn.

Nếu bạn không phải là người trong cuộc thì hãy khiêm tốn và đối xử tối với những người xung quanh, biết đâu họ đang phải chiến đấu với những khó khăn của chính bản thân mình.

Theo tuổi trẻ

"Đừng nên đánh giá một cái cây khi chỉ nhìn thấy nó trong một mùa.

Cũng giống như việc đừng nên đánh giá con người khi bạn chỉ nhìn thấy họ trong chốc lát. Bản chất con người chỉ có thể đánh giá khi nhìn vào cả một quá trình".

Tiện ích cuộn bài viết mới cho blog là một cách tuyệt vời để trình bày những tin tức mới cập nhật, những dòng tiêu đề di chuyển lên xuống một cách mượt mà giúp thu hút độc giả hơn và tạo được lượng traffic nhiều hơn.

Dưới đây là tiện ích bài viết gần nhất (Recent post) với hình ảnh thu nhỏ (Thumbnails) rất phù hợp với những bạn mới tìm hiểu blogger.

Tạo bài viết mới nhất cuộn lên có ảnh thumbnails cho blogspot

Demo cuộn bài viết blogspot

Tiện ích cuộn bài viết mới với CSS và Jquery
Đăng nhập => Bố cục => Thêm tiện ích => Tiện ích HTML/Javacript => Paste đoạn code sau:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">

#spylist { overflow:hidden; margin-top:5px; padding:0 0; height:350px; }

#spylist ul { width:220px; overflow:hidden; list-style-type:none; padding:0 0; margin:0 0; }

#spylist li { width:208px; padding:5px 5px; margin:0 0 5px 0; list-style-type:none; float:none; height:70px; overflow:hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIknRVMAilUjeNgy0xDvbElSSPYDr0OWEcBKyOOYGUveJxyZ1G5h1TQ4bLerXjlCDCMSQ_RSrRp0-0m_yIFRd6Nu3dq1LS9ZS5VT9owFSIXKGhwqcPWi40G9ak-0_2s5TUPP8YWGiXZvlL/s1600/24work-blogspot-com.jpg) repeat-x; border:1px solid #ddd; }

#spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0 0; padding:0 0 2px 0; }

#spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; }

.spydate { overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0; margin:1px 0 0 0; height:15px; font-family:Tahoma,Arial,verdana,sans-serif; }

.spycomment { overflow:hidden; font-family:Tahoma,Arial,verdana,sans-serif; font-size:10px; color:#262B2F; padding:0 0; margin:0 0; }

</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1MgdQwO2MIW0WPLU4NoR3fLsukqE9skXOspHVjYJIjAvy66aFfw4oC9YhGi8BEAtZF9BORPVuNINqzE2XWlFySYui7ABFxec0zBn-Ltq7rAH20C4I_wYhqnw7qj3CVXnziZOxymSG52D/s1600/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1MgdQwO2MIW0WPLU4NoR3fLsukqE9skXOspHVjYJIjAvy66aFfw4oC9YhGi8BEAtZF9BORPVuNINqzE2XWlFySYui7ABFxec0zBn-Ltq7rAH20C4I_wYhqnw7qj3CVXnziZOxymSG52D/s1600/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1MgdQwO2MIW0WPLU4NoR3fLsukqE9skXOspHVjYJIjAvy66aFfw4oC9YhGi8BEAtZF9BORPVuNINqzE2XWlFySYui7ABFxec0zBn-Ltq7rAH20C4I_wYhqnw7qj3CVXnziZOxymSG52D/s1600/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1MgdQwO2MIW0WPLU4NoR3fLsukqE9skXOspHVjYJIjAvy66aFfw4oC9YhGi8BEAtZF9BORPVuNINqzE2XWlFySYui7ABFxec0zBn-Ltq7rAH20C4I_wYhqnw7qj3CVXnziZOxymSG52D/s1600/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1MgdQwO2MIW0WPLU4NoR3fLsukqE9skXOspHVjYJIjAvy66aFfw4oC9YhGi8BEAtZF9BORPVuNINqzE2XWlFySYui7ABFxec0zBn-Ltq7rAH20C4I_wYhqnw7qj3CVXnziZOxymSG52D/s1600/noimage.png";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;  // kích thước chiều rộng ảnh

thumbheight = 70; // kích thước chiều cao ảnh

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;  //Số bài viết muốn hiển thị

home_page = "http://www.share123.vn/";  //Thay thành blog của bạn

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

</div>

Sau đó Lưu lại
Lưu ý ở đây nếu blog của bạn đã có file js


<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

thì bạn không cần thêm file js này vào nữa để tránh xung đột js.
Share123.vn chúc bạn thành công (Tổng hợp từ Blog 24word)

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free

blogger google

Tag liên kết

Xem nhiều

Bài mới nhất

Blog

Hướng dẫn quản trị

Mẫu blog mới