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

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>
Tuy nhiên, đế cho biến mất hẳn những nút Next Home Preview cuối mỗi bài đăng, là một mặc 
định của trình thiết kế Blogger, bạn cần tìm các đoạn mã sau trong Template nhé:
#blog-pager-newer-link{float:left;display: none;}
#blog-pager-older-link{float:right;display: none;}
#blog-pager{text-align:center;display: none;}
Trong từng hàng Code trên, chỉ cần tìm cho đúng các mã màu xanh bên trái và thêm vào đó phía sau các thuộc tính mã Code display: none;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.thành công.
Người viết: Nguyễn Đạt Khánh

Share:

Thứ Hai, 28 tháng 8, 2017

Nhạc và thơ của Hồng Thúy - Houston, Texas


Mời quý anh chị đọc Thiên Sứ Mùa Đông và Như Khói Đông Phai với nhạc nền Saxo Một Cõi Đi Về của Trịnh Công Sơn


On Monday, February 13, 2017 10:56 AM, Hong Thuy via YouTube
Nhận ngày 14/02/2017


ÁO THẮM- Thơ Hồng Thúy, Thiên Anh, Đăng Vương Quân, Tâm Thư

ÁO THẮM 
Nhạc : Thiên Anh
Thơ: Hồng Thúy
Ca sĩ : Tâm Thư
Hoà âm : Đăng Vương Quân
Trình bày : Nguyệt Nga

LỜI THƠ
Rũ mềm óng ả
Khoan thai dáng mơ
Thướt tha dài trắng
Dịu dàng nắng khơi
Tung tăng sóng lượn
Gót nhẹ tơ êm
Hồn theo mộng trải
Gởi bao giấc tình
Em đi phố thắm
Hương tóc mượt mây
Gió mềm lụa trải
Chiều lên bước đầy
Tinh hoa dệt gấm
Theo dòng ước mơ
Xuân xanh khép hở
Người thương …cuối trời
Ô! Khuy cài ru tiếng
Dặt dìu điệu lơi
Đây tà áo hội
Chơi vơi hương đồng
Rộn ràng áo nối
Tình nghĩa vẹn đôi
Nhớ xưa ấm lối
Những ngày nắng thơ
Yêu! Áo dài em mặc
Áo tình…thủy chung




On Tuesday, April 25, 2017 10:43 AM, Hong Thuy via YouTube <noreply@youtube.com> wrote:

NẾU MAI EM VỀ, Thơ HồngThúy, TrầnThiên Anh,TâmThư, Hùng Đặng

NẾU MAI EM VỀ
Thơ: Hồng Thúy
Nhạc: Trần Thiên Anh
Hòa âm: Đặng Vương Quân
Ca sĩ: Tâm Thư

THƠ NẾU MAI EM VỀ….
Nếu mai em về…
Thăm lại Sài Gòn xưa
Những con đường hoa rất đẹp
Bước chiều qua gió đùa

Nếu mai em về …
Khung trời kỷ niệm thơ
Mang giùm tôi…viễn xứ
Mảnh trăng thề ước mơ

Nhắn tim tôi tiếng gọi
Trường cũ, bạn thân ơi!
Vẫn nghe tiếng lòng thổn thức
Tường rêu phong, ngói mờ...

Giữ hồn tôi bướm nhỏ
Chạm từng nhánh cỏ cây
Thả thân diều uốn lượn
Bay giữa trời nắng say

Nếu em có về…
Hái ngọn lá thanh xuân
Điểm tô tà áo mới
Vui tháng năm muộn màng

Nếu mai em về…
Trao lời… tôi nhớ thương
Gởi tình tôi …biển sóng
Đến yêu thương ngàn trùng.

Tôi ngỡ như giấc mộng
Về bến nắng mênh mông
Bờ bình minh tỏa khắp
Thắp gác chuông bụi chùng.

Nếu mai em về...
Ngõ vườn ai…đứng đợi
Dạ hẹn hò … ước mong
Hứng hạt ngâu vừa rụng
Đắp phận buồn biển sông
Hồng Thúy


Jul 21 at 9:04 AM

CHỈ CÒN LẠI NỖI NHỚ, Thơ: Hồng Thúy, Phạm Mạnh Cương,TâmThư, DVB

CHỈ CÒN LẠI NỖI NHỚ
Thơ:Hồng Thúy
Nhạc: Phạm Mạnh Cương
Ca sĩ Tâm Thư
Hòa âm: Đặng Vương Quân
Karafun by: Dĩ Vãng Buồn
Thơ CHỈ CÒN LẠI NỖI NHỚ

Dấu thời gian chưa xóa
Nét buồn vương sắc mây
Đan bóng chiều rơi lối
Sương chùng lạnh thấm vai

Ngỡ rằng mình quên lãng
Dĩ vãng …đã hư không
Nhưng sao lòng khao khát
Vẫn nhớ nhung … tình hồng

Sợi khói vào… vương mắt
Gửi niềm đau chất ngất
Xuân qua… tuổi úa vàng
Còn nuối tiếc mênh mang

Như con sông… mịt mùng
Lỡ trôi cuộc tình đầu
Vòng tay nào hờ hững
Nên…đốm lửa tình tàn mau

Đôi ta… phương trời biệt
Tình rồi cũng thoáng qua
Hương tình cũng phôi pha
Nhớ thuở tình mơ hoa…

Chỉ còn là …bài thơ mầu tím

Hồng Thúy


Người nhận: Nguyễn Đạt Khánh
Xem Comments trên Youtube:
Khánh Nguyễn: Thơ Hồng Thúy trầm lắng, suy tư. Ngắn gọn, khúc chiết nhưng không đơn điệu, chán chường. Đặc biệt với âm hưởng hài hòa của toàn ban nhạc, với chất giọng của ca sĩ Tâm Thư đã khiến cho tâm hồn mình như chìm đắm trong một biển lòng thổn thức mênh mang, nhẹ nhàng, êm dịu. Nghe xong rồi như vẫn nuối tiếc, thương yêu. Cảm ơn Thúy và toàn ban nhạc nhé. Mình đã nhận được 4 - 5 bài mà Thúy gữi về qua thư Mail!Yahoo. Bởi vì lâu quá không sử dụng đến hộp thư nầy, nếu có tác phẫm nào khác, Thúy có thể gữi về Mail Box: nguyendatkhanh1964@gmail.com theo địa chỉ nầy. Mình sẽ nhận mau hơn, và qua lại với các bạn dễ dàng. Những tác phẫm nầy của Thúy mà mình nhận được đều được mình đưa vào đăng trên trang Web: http://www.ngdkhanh.com Chúc Thúy cùng toàn ban nhạc vui vẽ và có nhiều tác phẫm thật hay nhé. 
Hồng Thúy: Cám ơn anh Khánh Nguyễn cho thơ nhạc của HT ghé vào trang nhà của anh, thật hân hạnh, Cám ơn những lơì bình rất thân tình đã dành cho bai thơ nhac này của HT, có nhạc mới sẽ gởi đến anh qua email như yêu cầu ạ. Hồng Thúy

Share:

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ả
http://ketbancungkhanhnguyen5.blogspot.com/

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


      http://ketbancungkhanhnguyen5.blogspot.com/






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


      http://ketbancungkhanhnguyen7.blogspot.com/






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


      http://ketbancungkhanhnguyen8.blogspot.com/

      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

    Lưu trữ Blog

    Bài có thể xem

    Mời tham gia CLB

     
    Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
    Nhóm Công khai · 1.614 thành viên
    Tham gia nhóm
    Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
     
     
    BACK TO TOP