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ư, 10 tháng 1, 2018

Menu Navigation neo đầu trang Web khi cuộn màn hình

Mẫu Menu Navigation có hình dáng như thế nầy:
Việc trước tiên, bạn hãy truy cập vào Blogger Dashboard bên trong tài khoản Google.
Mở phần Template ở mục  Chủ đề, chọn Tab Edit Html (Chỉnh sửa Html).
Trình tự dùng tổ hợp phím  Ctrl + F để tìm kiếm các thẻ màu xanh mình nêu bên dưới, để chép Code dán vào như hướng dẫn.
- Đặt trong thẻ đóng </header> đoạn Code sau:
<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='#'>Chapter 1</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 4</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 2</a>
</li>
<li><a href='#'>Chapter 3</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 4</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 5</a></li>
</ul>
</div>
</nav>
<div class='clear'/>
<!-- secondary navigation menu end -->
- Đặt trong thẻ </b:skin> đoạn Code sau:
/*----navi-----*/
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 100%;
height: 60px;
background:#000;
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:#fff;}
#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);
}
/* Page Navigation */
.pagenavi {
clear:both;margin:-5px 0 10px;margin-top:10px;padding:15px;text-align:left;font-size:13px;
}
.pagenavi span,.pagenavi a {
padding: 9px 15px;
display: inline-block;
background-color: #fff;
color: #333;
margin-left: 4px;
border: 1px solid #ddd;
margin-right: 4px;
transition: all .2s ease;}
.pagenav .pages {background-color:#f9f9f9;color:#999;transition:all .2s linear;}
.pagenavi a:hover {background-color:#20C1DD;color:#fff;}
.pagenavi .current { background-color: #20C1DD;
color: #fff;
border: 1px solid #20C1DD;}
.pagenavi .pages {
display:none;
}
- Đặt trên thẻ </head>  đoạn Code sau:
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true,
directionNav:true,
slideshowSpeed: 5000,controlNav: true,
smoothHeight: true,
slideDirection: 'horizontal'
});
jQuery('.slides').addClass('loaded');
});
var aboveHeight = $('#leader-wrapper').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > 200){
$('#main-nav').addClass('fixed-nav').css('top','0').next()
.css('padding-top','0px');
} else {
$('#main-nav').removeClass('fixed-nav').next()
.css('padding-top','0');
}
});
});
//]]>
</script>
Kết quả bạn sẽ có bản demo giống như template như sau:
Source code nầy mình sưu tập được từ một Free template. Các bạn có thể dùng thử và tùy biến nhé. Chúc các bạn thành công với những gì mà mình chia sẽ.

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

Bạn có thể xem thêm các chủ đề:
  • Làm thế nào đăng ký tài khoản Google?
  • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
  • vị trí của Javascript và Jquery

Share:

Thứ Hai, 1 tháng 1, 2018

Share Code trang báo lỗi 404 Đẹp cho Blogger Blogspot

Vì 1 lý do nào đó bài viết mà bạn từng đăng lên Blogger - Blogspot bị xóa mà vẫn có những lượng tìm kiếm nhất định với bài viết đó. Cách duy nhất là tạo 1 trang báo lỗi 404. Hôm nay Code SEO xin chia sẻ với các bạn cách làm trang báo lỗi 404 với giao diện phẳng - đơn giản - đẹp mà CodeSEO.net đang sử dụng... Bộ code này mình sử dụng css đơn giản và script đếm thời gian chuyển hướng trang nhìn khá đẹp

Đầu tiên các bạn có thể xem demo tại http://codeseo.net/404


» Bắt đầu code và cách dùng


1. Đăng nhập vào tài khoản Blogger
2. Vào phần mẫu  (Tempalte)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Bạn tìm đến trước thẻ </body> và dán vào code sau

Bộ này gồm css và javascript

<!--Error Page Not Found by codeseo.net-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}#error-404{margin:11% auto}#error-404 .box-404{width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative}#error-404 .box-404::after{content:&quot;width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%}#error-404 h1{text-transform:uppercase}#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}
</style>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Trang bạn tìm kiếm không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị ADMIN xóa bỏ</p>

Bạn sẽ trở về trang chủ <b>CodeSEO.net</b> sau <span id='time' style='color:red'>3</span> giây nữa<br/> 
<script type='text/javascript'> var jgt = 3; document.getElementById(&#39;time&#39;).innerHTML = jgt; function stime(){document.getElementById(&#39;time&#39;).innerHTML = jgt; jgt = jgt - 1; if(jgt == 0){clearInterval(timing); location = &#39;http://www.codeseo.net&#39;;} } var timing = setInterval(&quot;stime();&quot;,1000); </script>

  </div></div>
</b:if>
<!--/Error Page Not Found by codeseo.net-->
Các bạn thay các giá trị in đậm trong code theo ý muốn
3 là thời gian chuyển hướng trang
http://www.codeseo.net là địa chỉ mà bạn muốn chuyển hướng đến

Cảm ơn các bạn đã quan tâm có gì không hiểu hoặc không làm được các bạn có thể comment bên dưới

Share:

Hiển thị Widget ở những trang nhất định trong Blogspot


Đối với các blog có nhiều chủ đề thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Widget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ.

Việc bố trí các Widget trên Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.

Chính vì lý do đó, hôm nay Hueit.net sẽ giới thiệu đến bạn đọc những thủ thuật nhỏ để “hiển thị Widget ở những trang nhất định trong Blogspot”, tiến hành như sau :

» Bước 1: Xác định ID của Wdget tiện ích cần tùy biến theo thủ thuật này.


1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần xử lý



1.2 - Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML10 (trong trường hợp này là widget HTML10, đối với widget khác sẽ có ID khác)

- Sau khi xác định được Id của tiện ích bạn đóng cửa sổ popup đó lại và tiến hành bước tiếp theo nha.

Bước 2: Ẩn hiện  Widget ở những trang nhất định trong Blogspot

2.1- Bạn vào Mẫu (Template) => vào Chỉnh sửa HTML (Edit HTML) để tìm Id widget đó trong Template (trường hợp này là HTML10) Hãy sử dụng chức năng Tìm kiếm nội tuyến để tìm nó.

- Ngoài ra bạn có thể tìm kiếm trực tiếp nó trên thanh menu của phần chỉnh sửa blogger bằng cách bấm vào Chuyển đến tiện ích như hình dưới. 


- Bạn sẽ được chuyến đến tiện ích đó (nhưng nó sẽ bị thu nhỏ) do vậy hãy bấm vào mũi tên màu đen nằm ở trước đoạn code của tiệ ích để mở rộng nó ra:


- Sau khi mở rộng nó ra bạn sẽ được đoạn code tương tự như sau:
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

 - Như vậy, ta đã xác định được ID cũng như vị trí và nội dung của Widget, Bây giờ Mình sẽ thêm lệnh ẩn hoặc hiện  Widget ở 2 vị trí là:
  • Vị trí 1: Sau thẻ mở <b:includable id='main'> Phần này bạn thay dổi theo các mã mình cung cấp bên dưới.
  • Vị trí 2: Thêm lệnh </b:if> vào trước thẻ đóng  như sau </b:includable> phần này dung chung cho tất cả các thủ thuật bên dưới.
- Khi đó bạn có đoạn code mới dạng như sau:
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
<-- Vị trí 1 -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

2.2-  Đến đây bạn thay chữ <-- Vị trí 1 --> thành một trong các đoạn code tương ứng bên dưới:

2.2.1. Chỉ hiển thị Widget ngoài trang chủ

- Thay chữ <-- Vị trí 1 --> thành đoạn code sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
2.2.2. Chỉ hiển thị Widget ở trang Archive

- Thay chữ <-- Vị trí 1 --> thành đoạn code sau:
<b:if cond='data:blog.pageType  == &quot;archive&quot;'>
3. Chỉ hiển thị Widget ở trang bài viết
- Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
4. Chỉ hiển thị Widget ở trang Static Page
- Thay chữ Vị trí 1 thành đoạn code sau: 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
5. Chỉ hiển thị Widget ở những trang với liên kết cụ thể
- Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.url == "URL của trang chỉ định"'>
- Trong đó URL của trang chỉ định là địa chỉ của trang nhãn hay bài viết. 
Ví dụ mình muốn HTML10 bên trên chỉ hiển thị trong bài viết này thì mình thay chữ Vị trí 1 bằng đoạn code sau:
<b:if cond='data:blog.url == "http://www.hueit.net/2016/01/hien-thi-widget-o-nhung-trang-nhat-inh.html"'>

6. Chỉ hiển thị Widget ở Trang chủ, trang Label và trang Archive
- Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;index&quot;'>

* Ở trên bạn có thể thấy mình cố ý đánh dấu “==” bằng màu đỏ, có nghĩa là, bạn hoàn toàn có thể thay dấu “==” bằng dấu “!=” sẽ mang ý nghĩa khác.

Qui ước : 
== : “bằng” hoặc tương đương - Tức là chỉ hiện thị khi thỏa mãn điều kiện mà ta đưa ra.!= : “khác” hoặc không tương đương - Tức là không hiển thị khi thỏa mãn điều kiện ta đưa ra.
Ví dụ, nếu bạn muốn Widget HTML10 hiển thị ở tất cả các trang khác ngoại trừ trang chủ, thì ta thay chữ Vị trí 1 bằng đoạn code sau:
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Tùy biến nâng cao sử dụng kết hợp các điều kiện

Vì một lý do nào đó, bạn chỉ muốn hiển thị widget ở trang A và trang B hoặc hiển thị khi thỏa mãn là trang A hoặc trang B, ta sẽ kết hợp các điều kiện với nhau như sau :
- Khi đó ta phải thêm 2 thẻ đóng  </b:if> vào trước thẻ đóng </b:includable> của Widget như sau:
<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
 Vị trí 1
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
 </b:if></b:if>
</b:includable>
</b:widget>

- Trong đó phần màu vàng là nội dung của Widget. 
- Tiếp theo thay lệnh điều kiện cho các Wiget như sau:

A. Trường hợp 1 : chỉ hiển thị widget khi thỏa mãn 2 hay nhiều điều kiện
- Thay chữ Vị trí 1 thành đoạn code sau:
<b:if cond='data:blog.url != "Điều kiện 1"'>
<b:if cond='data:blog.url != "Điều kiện 2"'>
- Ví dụ, hiển thị widget ở tất cả các trang ngoại trừ chuyên mục BOOT và GHOST :
<b:if cond='data:blog.url != "http://www.hueit.net/search/label/BOOT"'>
<b:if cond='data:blog.url != "http://www.hueit.net/search/label/GHOST "'>
nội dung widget
</b:if></b:if>
B. Trường hợp 2 : chỉ hiển thị widget khi thỏa mãn một trong các điều kiện
- Thay chữ Vị trí 1 và đoạn màu vàng thành đoạn code sau:
<b:if cond='data:blog.url == "Điều Kiện 1"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
<b:else/>
<b:if cond='data:blog.url == "Điều Kiện 2"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
<b:else/>
Ví dụ, chỉ hiển thị widget ở chuyên mục BOOT hoặc  GHOST
<b:if cond='data:blog.url == "http://www.hueit.net/search/label/BOOT"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
<b:else/>
<b:if cond='data:blog.url == "http://www.hueit.net/search/label/GHOST"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
<b:else/>
</b:if></b:if>
Bạn Save Template Lưu Mẫu  Xem kết quả nha.

Nguồn Hueit.net

Share:

Thống kê Blogspot

  • Total visitors::
  • Lưu trữ Blog

    Bài có nhiều người xem nhất

    Comments trên Blog

    Bài đăng ngẫu nhiên

     
    BACK TO TOP