Tạo chuyên mục theo nhãn ngoài trang chủ Blogspot

VIEW:

BÀI LIÊN QUAN

Hướng dẫn tạo chuyên mục ngoài trang chủ blog như trên website của mình. Lưu ý vì thêm file .js nên tốc độ load trang sẽ bị giảm xuống, các bạn lưu ý và căn nhắc việc sử dụng tiện ích này hay không.

Bài viết khác cho tạo menu nhãn ngoài trang chủ: https://blogtopviet.blogspot.com/2016/09/tao-menu-nhan-trong-trang-chu-blogspost.html

Bắt đầu thôi!!

Bước 1: Như thường lệ vào Blogger dưới quyền admin, vào Mẫu, chỉnh sửa HTML
Bước 2: Tìm đến thẻ ]]></b:skin>, chèn đoạn code sau phía trước thẻ ]]></b:skin>

thangbme.com

/*topviet247*/
.menu a,h7,h7 li{float:left}.menu a,
.mota,h7{position:relative}.menu a,
.mota,.mota span{text-decoration:none}
h7{overflow:hidden;width:100%;border-bottom:5px solid #7f5409;
background:#ffa812;box-shadow:0 2px 3px 0 #7f5409;
height:45px;display:inline;font-family:Times!important;
font-size:18px;font-weight:700;text-transform:uppercase;margin:0}
h7 li{list-style:none}
.menu a{padding:0 0 0 10px}
h7 li:first-child a{color:#000;font-size:19px;width:100%;float:left;font-family:"Comic Sans MS",cursive,sans-serif}
h7 li:first-child a::after{border-left-color:#007ABE;color:#FFF}
h7 li:first-child a:hover{background:#99640a;color:#000;font-size:24px;text-decoration:none}
.mota{z-index:0;font-family: serif}.mota a{color:red}
.mota:hover{color:red;background-color:transparent;z-index:50}
.mota span{position:absolute;background:#eee;padding:5px;left:-1000px;border:1px solid #ccc;visibility:hidden;color:#000}
.mota span img{border-width:0;padding:2px}
.mota:hover span{padding:5px;visibility:visible;top:20px;left:100px;width:250px;background:#ccc;text-align:justify}
.summerypost a{font-size:15px;font-family:cursive;color:red;font-weight:700}
.summerypost a:hover{color:#006}.summerypost{color:#000;font-family:serif}
.readm a{color:red}.readm a:hover{color:#063}.repost{color:#36f;font-family:arial}
.repost a{color:#06c}.repost a:hover{color:red}

Bước 3: Tìm tới đoạn mã:
       <b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
Thêm đoạn code này phía trên đoạn mã vừa tìm được.

thangbme.com

<b:section class='tabbertab' id='Nhãn' maxwidgets='1'>
    <b:widget id='HTML6' locked='false' title='' type='HTML' version='1' visible='true'>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <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>
  </b:section>

Bước 4: Lưu mẫu. Sau đó quay lại phần bố cục sẽ thấy Widget HTML Nhãn được tạo sẵn. Bạn mở widget HTML đó, copy đoạn code phía dưới này vào đó.

<h7><a href="http://www.topviet247.tk/search/label/%E1%BB%A8ng%20D%E1%BB%A5ng" 
style=" color: #000; font-size: 19px; width: 100%; float: left;
 font-family: "Comic Sans MS", cursive, sans-serif; padding: 8px;
"><i class="fa fa-puzzle-piece fa-lg"></i>
 Ứng Dụng <i aria-hidden="true" class="fa fa-hand-o-left fa-1g">
</i></a></h7>
<script language="JavaScript">imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;t
ablewidth = 245;
cellspacing = 1;
borderColor = "#ff0000";
bgTD = "";imgw = 130; 
imgh = 100; 
imgwidth = 60;
imgheight = 60;
fntsize = 15; 
fontsize = 22; 
fontsizecm = 13;
acolor = "";t
itlecolor = "";aBold = false;
icon = "";text = "Nhận xét";
showPostDate = true;
 poston = "Ngày đăng :";
minisummaryPost= 200;
 summaryPost = 350; 
summaryFontsize = 16; 
summaryColor = "#000";
icon2 = "";numposts = 15; 
label = "Ứng Dụng"; 
home_page = "http://www.topviet247.tk/";</script>
<script src="http://data-traidatmui.appspot.com/scripts/tin247_post.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/tin247_related_post.js" type="text/javascript"></script>

Thay phần màu đỏ phù hợp với blog của bạn. Sau đó lưu lại tiện ích HTML đó và thưởng thức thành quả.

Chú ý: Nếu bạn muốn ẩn những bài viết ngoài trang chủ, các bạn quay lại chỉnh sửa HTML trong mẫu, tìm tới thẻ </head> copy đoạn copy sau, vào phía trên thẻ</head>

<!--an bai viet--> 
<style><b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;}</b:if></style>

Chúc các bạn thành công!! Nếu có gì thắc mắc hãy để lại comment cho tôi, nếu hay hãy like và share cho mọi người.

Có thể bạn quan tâm: Thủ thuật chèn code vào bài viết trong blog