Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ thuật Blogger. Hiển thị tất cả bài đăng

Thứ Tư, 30 tháng 8, 2017

Hiện Next & Previous kèm tiêu dề bài viết cho blogspot dưới chân trang


  • Tuyệt vời khi bạn tùy biến được tất cả. Đối với Template của một Blogger, Google chỉ cung cấp cho chúng ta những thiết kế chuẩn, thật là chán mỗi khi chỉ nhìn thấy ở cuối chân trang những hàng chữ: nhỏ xíu, không có nét, không có hồn, không có tên, không có tuổi luôn...
    Mình tình cờ tìm thấy được những Source code nầy mà thôi, và...còn thấy chúng nhiều ở vô số nơi trên mạng. Chỉ việc chép về ...và ngâm cứu mãi cho đến hôm nay mới thực hành và chia sẽ lại cùng bạn bè.
    Tiến trình rất đơn giản, gồm các bước:
    Bước 1: Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
    /*################ Show Next &amp; Previous Post Titles in Blogger with jQuery Navigation  ##########################*/
        .bogger-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
        .bogger-pager li.next { float: right; padding:0px; background:none; margin:0px;}
        .bogger-pager li.next a { padding-left: 24px; }
        .bogger-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
        }
        .bogger-pager li.previous a { padding-right: 24px;  }
        .bogger-pager li.next:hover, .bogger-pager li.previous:hover  {background:#333333; }
        .bogger-pager li { width: 50%; display: inline; float: left; text-align: center; }
        .bogger-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
        .bogger-pager li i { color: #ccc; font-size: 18px; }
        .bogger-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
        .bogger-pager li a span {<span style="box-sizing: border-box; color: red;">font-size: 18px</span><b style="box-sizing: border-box;">;</b> <span style="box-sizing: border-box; color: purple;"><b style="box-sizing: border-box;">color: #666</b></span>;<span style="box-sizing: border-box; color: orange;"><b style="box-sizing: border-box;">font-family:Arial, Tahoma, sans-serif</b></span>; margin:0px}
        .bogger-pager li a:hover span,
        .bogger-pager li a:hover i { color: #ffffff; }
        .bogger-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
        .bogger-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; }
        .bogger-pager li.next i, .bogger-pager li.previous i ,
        .bogger-pager li.next,  .bogger-pager li.previous{
        -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
        -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
        -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
        transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
        .fa-chevron-right {padding-right:0px;}
    Tùy biến CSS:
    • font-size: 18px là font chữ tiêu đề bài viết
    • color: #666 là màu chữ tiêu đề bài viết
    • font-family:Arial, Tahoma, sans-serif là loại font chữ của tiêu đề bài viết
    Bước 2: Tiếp tục thêm Jquery và một số font chức năng mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau thẻ <head>:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    Chú ý:
    • Nếu blog của bạn đã có file Jquery rồi thì hãy bỏ đoạn code màu xanh đi.
    • Đoạn font màu vàng chỉ dành cho blog chuyên viết tiếng anh. 
    • Nếu bạn viết blog bằng tiếng việt thì  xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn trong Google Fonts.
    Như trong hình trên, sau khi bạn Click vào link trên bạn sẽ mở ra ứng dụng Google Fonts. Bạn chỉ việc kéo thanh cuộn bên phải để chọn lựa Fonts như ý. Để chọn lựa, trên góc phải trên của từng khuôn Fonts có một dấu + (cộng), bạn chỉ việc Click chuột vào chọn để Add và chép lấy Source Code bên trong nhé.

    Bước 3:  Chúng ta sẽ tìm vị trí cố định để thêm tiện ích này. Như đã nói ở trên chúng ta thêm nó vào ngay sau nội dung của bài đăng nên các bạn tìm đoạn code bên dưới: 
    <data:post.body/>
    - Dán vào sau nó đoạn code sau: 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <ul class='bogger-pager'>
                <li class='next'>
        <b:if cond='data:newerPageUrl'>
        <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
        <b:else/>
        <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>Bạn đang xem bài đăng mới nhất trên blog này</span></a>
        </b:if>
        </li>
            <li class='previous'>
        <b:if cond='data:olderPageUrl'>
        <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
        <b:else/>
        <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>Bạn đang xem bài đăng cũ nhất trên blog này</span></a>
        </b:if>
        </li>
            </ul>
        <script type='text/javascript'>
        //<![CDATA[
        (function($){   
            var newerLink = $('a.newer-link');
            var olderLink = $('a.older-link');
            $.get(newerLink.attr('href'), function (data) {
             newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
            },"html");
            $.get(olderLink.attr('href'), function (data2) {
             olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
            },"html");
        })(jQuery);
        //]]>
        </script>
              </b:if></b:if>

    Tùy biến XML:
    • Bạn có thể thay đổi phần màu đỏ theo ý của bạn.
    • Phần màu tím là thông báo khi bạn đang xem bài đăng mới nhất và bài đăng cũ nhất trên blog đó.

     Bước 4:   Thực hiện thao tác ẩn đi các liên kết bài đăng cũ hơn và mới hơn mặc định của blogger. Trong trình chỉnh sữa Html của Template, nhấn Ctrl+ F tìm đoạn code có dạng:

    <b:includable id='nextprev'>
      <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:newerPageUrl'>
          <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
          </span>
        </b:if>
        <b:if cond='data:olderPageUrl'>
          <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
          </span>
        </b:if>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
        <b:if cond='data:mobileLinkUrl'>
          <div class='blog-mobile-link'>
            <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
          </div>
        </b:if>
      </div>
      <div class='clear'/>
    </b:includable>
    

    Sau khi tìm được (chỉ cần tìm được 1 hàng màu vàng thôi)  bạn hãy làm tiếp 2 bước bên dưới:

    1- Thêm vào sau đoạn màu vàng  phía đầu source code 2 đoạn mã bên dưới

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    2- Thêm vào trước đoạn màu xanh ở cuối source code đoạn mã bên dưới: 

    </b:if></b:if>
    Xong chưa? Giờ thì bạn  lưu mẫu  lại và  kiểm tra thử hoạt động của Blogspot nhé. Chúc các bạn thành công.
    Người viết: Nguyễn Đạt Khánh

    Share:

    Thứ Hai, 28 tháng 8, 2017

    Menu Navigation xổ xuống màu sắc trang nhã cho các Blogger

  • Trang thực hành ứng dụng:
    Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 
    • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
    Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:
    Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.
    Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </header> và chép dán Source dưới đây  phía dưới trên nó: (Tùy kiểu mà bạn muốn)
    Nếu Đặt dưới thẻ </header>: Menu sẽ xuất hiện dưới Banner.
    Nếu đặt dưới thẻ <Body>: Menu sẽ xuất hiện trên đầu cùng trang Web.

    Nếu đặt trên thẻ </body> đóng như vầy: Nó sẽ xuất hiện phía dưới cùng trang Web.
    Bạn cũng có thể dùng Widget Html để đặt nó vào nơi như ý trên Layout  thử xem nhé.
    <nav class='pi-navigation' id='main-nav'>
    <div class='main-menu'>
    <ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
    <li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
    <li><a href='#'>Business</a>
    <ul class='sub-menu'>
    <li itemprop='name'><a href='#' itemprop='url'>Featured Image</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Slider</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>SoundCloud</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Video</a></li>
    </ul>
    </li>
    <li itemprop='name'><a href='#' itemprop='url'>Fashion</a>
    </li>
    <li><a href='#'>Sports</a>
    <ul class='sub-menu'>
    <li itemprop='name'><a href='#' itemprop='url'>Full Width</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Right Sidebar</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Left SIdebar</a></li>
    </ul>
    </li>
    <li itemprop='name'><a href='#' itemprop='url'>Games</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Technology</a></li>
    <li itemprop='name'><a href='http://bit.ly/2ijV1ge' itemprop='url'>Contact Us</a></li>     
    </ul>
    <div id='searchformfix'>
    <form action='/search' id='searchform'>
    <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search for games, music, movies...'/>
    <input type='submit' value=''><i class='fa fa-search'/></input>
    </form>
    </div>
    </div>
    </nav>
    <div class='clear'/>
    Đặt trên thẻ đóng </b:skin>:
    .main-menu {
    width: 1160px;
    margin: 0 auto;
    }
    #main-nav {
    margin: 0 auto;
    width: 100%;
    height: 60px;
    background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 2px solid #5aa628;
    }
    #main-nav .menu-alert{
    float:left;
    padding:18px 0 0 10px ;
    font-style:italic;
    color:#FFF;
    }
    #top-menu-mob , #main-menu-mob{ display:none; }
    #main-nav ul li {
    text-transform: uppercase;
    font-family: 'Droid Sans', sans-serif;
    font-size:16px;
    position: relative;
    display: inline-block;
    float: left;
    height:60px;
    }
    #main-nav ul li:last-child a{border-right:0 none;}
    #main-nav ul li a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 0 16px;
    text-decoration: none;
    color: #b6b5b5;
    font-family: Oswald,sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    font-weight: 400;
    line-height: 60px;
    margin: 0;
    padding: 0 .9em;
    }
    #main-nav ul li a.active {
    color:#000;
    }
    #main-nav ul li a .sub-indicator{}
    #main-nav ul li a:hover {}
    #main-nav ul ul{
    display: none;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 180px;
    z-index: 99999;
    float: left;
    background: #2c2c2c;
    }
    #main-nav ul ul li, #main-nav ul ul li:first-child {
    background: none !important;
    z-index: 99999;
    min-width: 180px;
    border: 0 none;
    font-size: 15px;
    height: auto;
    margin: 0;
    }
    #main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
    #main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
    #main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
    #main-nav ul.sub-menu a ,
    #main-nav ul ul li.current-menu-item a,
    #main-nav ul ul li.current-menu-parent a,
    #main-nav ul ul li.current-page-ancestor a{
    border: 0 none;
    background: none !important;
    height: auto !important;
    line-height: 1em;
    padding: 10px 10px;
    width: 160px;
    display: block !important;
    margin-right: 0 !important;
    z-index: 99999;
    color: #fff !important;
    }
    #main-nav ul li.current-menu-item ul a,
    #main-nav ul li.current-menu-parent ul a,
    #main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
    #main-nav ul li:hover > a, #main-nav ul :hover > a { color:#000;}
    #main-nav ul ul li:hover > a,
    #main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
    #main-nav ul li:hover > ul {display: block;}
    #main-nav ul li.current-menu-item,
    #main-nav ul li.current-menu-parent,
    #main-nav ul li.current-page-ancestor{
    margin-top:0;
    height:50px;
    border-left:0 none !important;
    }
    #main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
    #main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
    #main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
    #main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
    #main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
    #main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
    text-shadow:0 1px 1px #b43300;
    color:#FFF;
    height:50px;
    line-height:50px;
    border-left:0 none !important;
    }
    #main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
    #main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
    #main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
    #main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
    #main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
    #main-nav ul li.menu-item-home ul li a,
    #main-nav ul ul li.menu-item-home a,
    #main-nav ul li.menu-item-home ul li a:hover{
    background-color:transparent !important;
    text-indent:0;
    background-image:none !important;
    height:auto !important;
    width:auto;
    }
    #main-menu-mob,#top-menu-mob{
    background: #222;
    width: 710px;
    padding: 5px;
    border: 1px solid #000;
    color:#DDD;
    height: 27px;
    margin:13px 0 0 10px;
    }
    #top-menu-mob{
    width: 350px;
    margin:2px 0 0 0;
    }
    #main-nav.fixed-nav{
    position:fixed;
    top:0;
    left:0;
    width:100% !important;
    z-index:999;
    opacity:0.9;
    -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
    }}
    Mời các bạn thử qua công việc Hướng dẫn thiết kế Template Blogger nếu chưa biết, để làm cho bằng được một Web site ưng ý. Đây là một công việc kỹ thuật giúp các bạn có thể tự tin để tạo dựng cho mình một Web/Blog vào đời.

    Chúc các bạn thành công.
    Người viết: Nguyễn Đạt Khánh



    Share:

    Thứ Bảy, 26 tháng 8, 2017

    Hướng dẫn rút gọn bài viết trên trang chủ blogger

  • Làm thế nào để rút gọn bài viết trên trang chủ với một ảnh thumbnail ngay bên trái và một nút  Đọc thêm ngay bên dưới như mô tả trong hình vẽ sau.

    Để làm được điều này trình tự thực hiện  như sau:

    Bước 1: Mở khung soạn thảo html của blogger.
    Đăng nhập vào blog của bạn. Tìm đến Template / Edit HTML
    Khung Code Template sẽ hiện ra như bên dưới



    Bước 2: Hiển thị bài viết dạng rút gọn
    Sau khi khung soạn thảo sẽ hiện ra, nhấp vào một vị trí bất kỳ và bấm CTRL + F để tìm đoạn mã sau:
    <data:post.body/>
    Sẽ có hai đến ba vị trí chứa đoạn mã này. Thường thì mình tìm đến vị trí xuất hiện thứ hai, tuy nhiên cũng có lúc phải tìm đến những vị trí khác, Và chép code dưới đây chồng lấp lên đoạn mã trên bằng đoạn code mới như sau:
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
    <span class='readmore' style='font-weight:bold;padding:5px;float:right;'><a expr:href='data:post.url'>Đọc tiếp &#187;</a></span>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

    Bước 3: Xác định kích thước ảnh thumbnail và nội dung tóm tắt bài viết
    Làm tương tự như trên. Tìm đến dòng
    </head>
    Ngay phía trên dòng này, dán vào đoạn code sau:
    <script type='text/javascript'>
    posts_no_thumb_sum = 490;
    posts_thumb_sum = 400;
    img_thumb_height = 160;
    img_thumb_width = 180;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID, pURL, pTITLE){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = posts_no_thumb_sum;
    if(img.length>=1) {
    imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
    summ = posts_thumb_sum;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-footer {display: none;}
    .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;text-align:justify}
     .readmore a {text-decoration: none; }
    </style>
    </b:if>
    </b:if>
    Lưu ý: 

    • Bạn có thể thay đổi số lượng ký tự hiển thị trên trang chủ bằng cách thay đổi giá trị 490 (khi không có ảnh thumbnail) và 400 (khi có ảnh)
    • Để thay đổi kích thước ảnh: ta chỉ cần đổi giá trị có màu xanh.

    Bước 4: Ấn nút Save Template và xem lại thành quả
    Trên đây chỉ là những thủ thuật hay mình sưu tập, tìm kiếm được những lúc rỗi rãnh. Tuy mê vọc Code nhưng cũng chẳng thể nào rãnh rang, còn phải lo toan cái sự đời hằng ngày mỗi bữa. Hy vọng các bạn chia sẽ, tiếp giúp ý kiến nhé.
    Chúc mọi người có nhiều niềm vui và thành tựu.
    Bạn có thể xem thêm các tư liệu:
    • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

    Người viết: Nguyễn Đạt Khánh

    Share:

    Thứ Sáu, 25 tháng 8, 2017

    Seo nhãn (Label) trên Widget chuẩn của Blogger

  • Mặc định, để tạo nhãn Label theo chương mục trên Blogger, mình thường hay sử dụng thiết kế chuẩn của nó. Blogger là một ứng dụng thiết kế Web của Google, luôn luôn có sẳn các thiết kế chuẩn. Nhiều tiện ích được phát triển và tích hợp ở đây. Trên nền tảng Layout, có sẳn cả một giao diện để thiết kế bố cục cho một Website mà bạn đã từng thấy, có nghĩa là bạn muốn Add Widget thêm các tiện ích hiển thị, chỉ cần Click chuột vào đó và chọn lựa.
    Tuy nhiên, Blogger chỉ cung ứng những thứ đủ xài, không tốn phí nên chúng ta cần phải tùy biến nhiều thứ lắm, để chúng trở thành cái của riêng ta. Widget Label cũng vậy, trông rất đơn điệu, làm hoài cũng chán. Ở phần thiết kế Template, vào Edit Html, bạn có thể tùy biến được rất nhiều trên chính Source code của nó.

    Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 
    • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
    • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
    Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:
    - Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.
    Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </b:skin> và chép dán Source dưới đây lên phía trên nó: (Tùy kiểu mà bạn muốn)




  • Kiểu 1:

  • .Label a {
        padding-left: 20px;
        background: #000;
        padding: 0 10px;
        color: #fff!important;
        border-radius: 70px;
        -moz-border-radius: 70px;
        height: 27px;
        line-height: 32px;
        text-transform: uppercase;
        text-decoration: none;
        border: none !important;
        -webkit-transition: all .3s ease-in-out !important;
        t: 20pxt: 20px;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        font-size: 10px;
    }
    .Label a:hover {
        color: #000 !important;
        background: #ff0;
    }
    Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. Mình cũng đã làm như thế. Có thể các bạn vào phần demo dưới để xem thử nhé.!






  • Kiểu 2:

  • .widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
      padding: .25em 0;
      margin: 0;
      text-indent: 0;}
    .label-size {
    float: left;
    font-size: 13px;
    }
    .list-label-widget-content ul,
    .list-label-widget-content li {
    list-style: none outide none;
    }
    .list-label-widget-content li a {
    background: #F3F3F3;
    color: #525252;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    float: left;
    padding: 5px;
    margin-bottom: 5px;
    line-height: 16px;
    width: 153px;
    }
    .list-label-widget-content li span {
    color: orangered;
    background: #F3F3F3;
    border-radius: 3px;
    min-width: 40px;
    float: right;
    padding: 6px;
    margin-bottom: 5px;
    text-align: center;
    border: 1px solid #E2E2E2;
    }
    .list-label-widget-content li span:first-child {
    background: #F3F3F3;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    border-right: 10px solid;
    border-left: 10px solid;
    width: 113px !important;
    float: left;
    padding: 5px;
    margin-bottom: 5px;
    line-height: 16px;
    width: 250px;
    }
    .list-label-widget-content li a:hover,
    #footer-nav .list-label-widget-content li a:hover {
    background: orangered;
    color: #fff;
    }
    .cloud-label-widget-content .label-size {
    font-size: 100%;
    float: left;
    }
    .cloud-label-widget-content .label-size a {
    color: #666;
    float: left;
    font-size: 12px;
    margin: 0px 5px 5px 0px;
    padding: 5px;
    text-decoration: none;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    }
    .label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
    background-color: #FD4326;
    color: #FFF;
    text-decoration: none;
    transition: all 0.2s ease-out 0s;
    }
    .cloud-label-widget-content .label-size span {
    color: #666;
    float: left;
    font-size: 12px;
    margin: 0px 5px 5px 0px;
    padding: 5px;
    text-decoration: none;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    }
    .cloud-label-widget-content .label-size span:first-child,
    .cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
    background: #FD4326;
    color: #FFF;
    }
    Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






  • Kiểu 3:
  • - Thêm đoạn css sau trên ]]></b:skin>

    .Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
    .Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
    .Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
    .Label ul li a:hover{color:#fff!important;text-decoration:none}
    .Label ul li a:hover:after{background:#ff4e47}
    .Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
    .Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
    .Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}
    

    CHỈNH SỬA WIDGET LABEL

    - Nếu Widget Label trong Blogger của bạn chỉ có mỗi một, bạn mở Template kiễm tra thử sẽ thấy nó có tên duy nhất là Label1 và không có bất kỳ một Widget nào khác có tên Label.
    - Tìm đoạn code sau trong widget Label1 bên trong Template:
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        <b:if cond='data:showFreqNumbers'>
          <span dir='ltr'>(<data:label.count/>)</span>
        </b:if>
      </li>
    </b:loop>
    
    Thay thế đoạn code vừa tìm thành đoạn code dưới đây:
    <b:loop index='i' values='data:labels' var='label'>
      <b:if cond='data:i &lt; 5'>
        <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
      </b:if>
    </b:loop>
    
    Con số 5 màu đỏ ở trên là số tên nhãn mà bạn muốn xuất hiện.
    Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 


    Từ những Code trên, bạn có thể tùy biến thữ dược rất nhiều hình dạng khác nhau, mà bạn có thể vọc cho biết. Mình chỉ sưu tầm được cái nào thì chia sẽ cái đó. Chúc các bạn nhiều may mắn.

    Người viết: Nguyễn Đạt Khánh.

    Share:

    Thống kê Blogspot

  • Số khách đang xem:
  • Tìm người - Tìm việc

    Lưu trữ Blog

     
    BACK TO TOP