Hướng dẫn sửa lỗi cấu trúc dữ liệu trên blogspot

LongAnIT 5/13/2019 Bình luận
Hello! Xin chào các bạn chúng ta lại gặp nhau trong chuyên mục thủ thuật blogger. Trong bài viết ngày hôm nay longanit sẽ hướng dẫn các bạn cách khắc phục một số lỗi trong cấu trúc dữ liệu của blogspot. Trong các bài viết trước mình đã có giới thiệu về cấu trúc dữ liệu của blogspot cũng như hướng dẫn các bạn cách chúng ta cấu trúc dữ liệu blogspot lại theo chuẩn.

Các lỗi thường gặp nhất khi kiểm tra dữ liệu cấu trúc blogspot thường sẽ là thiếu trường name, tên tác giả, ngày tháng, header,...Vậy thì chúng ta khắc phục nó thế nào. Các bạn hãy xem các hướng dẫn dưới đây để sửa nhé.

Đầu tiên chúng ta quay lại một chút xíu để test cấu trúc trang blogspot. Các bạn truy cập vào link sau:

https://search.google.com/structured-data/testing-tool/u/0/


Trước khi thực hiện việc kiểm tra bạn phải thông báo cho blogspot biết bằng việt thêm code sau đây vào trước thẻ đóng </body>
 <script type='application/ld+json'>
// <![CDATA[
{
  "@context" : "http://schema.org",
  "@type" : "WebSite",
  "name" : "All Blogger Things",
  "alternateName" : "ABT",
  "url" : "https://www.longanit.com"
}
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.longanit.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.longanit.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
// ]]>
      </script>

Thay thế địa chỉ https://www.longanit.com thành địa chỉ blogspot của bạn nhé. Ok bây giờ chúng ta bắt đầu việc sửa lổi.

Sửa lỗi Web Page Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <body> trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <body>
<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>

 #Nhấn save để hoàn thành. Bạn nên làm đến đâu thì save đến đó nếu báo lổi thì dễ có hướng khắc phục nhé.

Sửa lỗi Header Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <header> trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <header>

 <header itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

#Nhấn Save đế hoàn thành.

Sửa lỗi Menu Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <nav> trong template 
  3.  Thay thế thẻ <nav> bằng đoạn code bên dưới
 <nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
# Nhấn save để hoàn thành.

Sửa lỗi Sidebar

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='sidebar-wrapper'>  trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <div id='sidebar-wrapper'> 
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

# Nhấn save để hoàn thành

Sửa lỗi Footer

  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='footer-wrapper'> trong template
  3. Thay thế thẻ <div id='footer-wrapper'> bằng đoạn code bên dưới
 <div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Sửa lỗi Blog Error

  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='main-wrapper'> trong template
  3. Thay thế thẻ <div id='main-wrapper'> bằng đoạn code bên dưới
  <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
# Save đề hoàn thành

Sử lỗi Blog Posting Error


  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div class='post hentry uncustomized-post-template'> trong template
  3. Thay thế thẻ <div class='post hentry uncustomized-post-template'> bằng đoạn code bên dưới

  <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
 #4: Tiếp tục tìm từ khóa <div class='post hentry'> or <article class='post hentry'>

 #5: Tiến hành thay thế bằng đoạn code bên dưới
 <div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
Sửa lỗi hCard Errors
  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code
 <span class='post-author vcard' >                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></span>
                  </b:if>
                </b:if>
              </span>
3. Tiến hành thay thế bắng đoạn code bên dưới
 <span class='post-author vcard' itemscope='itemscope'  itemtype='http://schema.org/Person'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>


Sửa lỗi Article Errors

Tất cả các lỗi này bao gồm: Main Entity Of Page, Publisher, Article Name, Image, URL, Updated Date, and Published Date Errors.

Bước 1: Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Tìm đoạn code sau  <div class='post hentry'> or <article class='post hentry'>

Bước 3: Thay thế bằng đoạn code bên dưới
    <meta content='data:post.link : data:post.url' expr:itemid='data:post.link' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
    <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
      <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
        <meta content='https://2.bp.blogspot.com/-bYkKfIQpPX4/W5o7M85ORcI/AAAAAAAAAF8/kUER1t54X1knI0i7bO6l7EjiQz2AZyotwCK4BGAYYCw/s1600/longanitvn.png' itemprop='url'/>
        <meta content='320' itemprop='width'/>
        <meta content='60' itemprop='height'/>
      </div>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
      <meta expr:content='data:blog.title' itemprop='name'/>
    </div>
    <a expr:name='data:post.id'/>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
    <b:else/>
    <a expr:href='data:post.url'/>
    </b:if>
      </b:if>
Bước 4: Thay thế địa chỉ link logo tô màu đỏ phía trên thành địa chỉ link logo blog của bạn nhé.

Bước 5: Sửa lỗi date published tìm đoạn code sau  <data:post.timestamp/>

Bước 6: Thay thế đoạn code trên bằng đoạn code bên dưới
 <span class='updated' itemprop='datePublished'><data:post.timestamp/></span>
Bước 7: Save để hoàn thành chỉnh sửa lỗi cấu trúc. Và bây giờ bạn hãy quay lại trang kiểm tra cấu trúc trang blog của bạn xem kết quả như thế nào sau khi tiến hành sửa lỗi nhé.

Kết luận: Như vậy qua bài viết này tôi đã hướng dẫn các bạn cách để chúng ta sửa một số lỗi cơ bản về cấu trúc dữ liệu trên nền tảng blogspot. Dĩ nhiên là bài viết còn nhiều sai xót trong quá trình hướng dẫn rất mong các bạn thông cảm và đóng góp ý kiến bằng cách để lại comments bên dưới để góp ý. Chúc các bạn thành công và SEO nhanh lên top nhé.

Bài viết có tham khảo nguồn: https://www.allbloggerthings.com

Hướng dẫn cài đặt tên miền riêng cho blogspot

LongAnIT 5/10/2019 Bình luận
Hiện nay tính phổ biến của blogspot là vô cùng lớn trong cộng đồng blogger. Việc tạo cho mình một blog cá nhân sử dụng blogspot ngày càng nhiều. Thậm chí là nhiều SEOer sử dụng blogsppot để làm site vệ tinh cực kỳ hiệu quả,..

Việc sở hữu cho mình một tên miền riêng ở thời điểm hiện tại thì quá dễ dàng bạn chỉ cần bỏ vài trăm nghìn đồng là có thể mua ngay cho mình một tên miền cá nhân quá đẹp có đúng không nào?

Trong bài viết ngày hôm nay tôi sẽ hướng dẫn cho các bạn cách cài đặt tên miền riêng cho blogspot .  Chúng ta hãy bắt đầu với việc thực hiện các bước như bên dưới tôi hướng dẫn nhé.

Cấu hình tên miền vào blogger

Bước 1: Đăng nhập vào trang quản trị của bạn -> Cài đặt
Bước 2: Nhìn phía bên phải mục địa chỉ blog + Thiết lập URL của bên thứ 3 cho blog của bạn như hình bên dưới

Cấu hình tên miền vào blogger
Hướng dẫn cài đặt tên miền riêng cho blogspot
Tại mục thiết lập tên miền bạn gõ địa chỉ tên miền vào đây ví dụ www.longanit.com nhớ là phải có www ở đầu nhé.
cài đặt tên miền tại trang quản trị blogspot
Trang thông tin cài đặt tên miền tại trang quản trị blogspot

Tuy nhiên trong lần đầu tiên bạn sẽ gặp thông báo lỗi là không thể xác minh được tên miền đừng quá lo lắng hãy để ý hình bên dưới mình đã đánh dấu với 2 tên là CNAME1CNAME2

Thông báo lỗi giúp bạn tìm được 2 CNAME để thêm vào trang cấu hình domain
Thông báo lỗi giúp bạn tìm được 2 CNAME để thêm vào trang cấu hình domain

Bước 3: Truy cập vào Cpanel của trang quản trị tên miền và tiến hành thêm các thông số sau đây

3.1) Tạo 2 CNAME  như trong hình bên dưới: Thông tin CNAME bạn nhìn hình phía trên mình đã minh họa nhé.
Thêm giá trị cho CNAME 01 tại trang quản trị tên miền
Thêm giá trị cho CNAME 01 tại trang quản trị tên miền 

Tương tự như vậy chúng ta lại thêm 01 CNAME nữa  và kết quả bạn có thể xem như hình bên dưới

Thêm giá trị cho CNAME 02 tại trang quản trị tên miền
Thêm giá trị cho CNAME 02 tại trang quản trị tên miền 

Bước 4: Ngoài ra làm thế nào để không cần gõ www.longanit.com mà chỉ cần gõ longanit.com cũng có thể truy cập được thì chúng ta nên cấu hình 4 giá trị bên dưới ở bản ghi A (address).

Tạo 04 giá trị bản ghi Address cho blogspot
Tạo 04 giá trị bản ghi Address cho blogspot
Cấu hình xong bạn Save lại. Quay lại trang quản trị cấu hình blogger mục huyển hướng sang https bạn tiến hành check vào có và chờ giây lát cho hệ thồng xử lý để hoàn thành nhé.
Cấu hình chuyển hướng https trong blogspot
Cấu hình chuyển hướng https trong blogspot

Quá trình cài đặt đã kết thúc. Hãy kiểm tra bằng cách truy cập blogspot của bạn với tên miền mà bạn vừa cấu hình ở trên.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách để cài đặt tên miền cho website sử dụng trên nền tảng blogspot. Nếu gặp khó khăn trong quá trình cài đặt vui lòng comments bên dưới để trao đổi cũng như support. Chúc các bạn SEO nhanh lên TOP

Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot

LongAnIT 5/09/2019 Bình luận
Dưới đây là danh sách các loại thẻ dữ liệu data mặc định của Blogspot được mình tổng hợp lại và đây chỉ là những thẻ thường được hầu hết các blogger tìm kiếm sử dụng trong Blog thôi còn nếu tạo danh sách đầy đủ thì dài lắm mà một số loại thẻ dữ liệu lại không thường được sử dụng.

Vậy loại thẻ dữ liệu này có gì hay thì mình xin nói là nó cực kỳ quan trọng nếu như bạn nào muốn phát triến blogspot của mình lên một tầm cao mới nó giúp cho các bạn rất nhiều trong việc thiết kế template cũng như là làm chủ blogspot kết hợp với các thẻ điều kiện nữa thì vô cùng tuyệt vời.

Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot
Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot

1. data:view

Loại dữ liệu cho các chế độ xem khác nhau trong Blog.


<data:view.postId/>
<data:view.pageId/>
<data:view.type/>
<data:view.featuredImage/>
<data:view.title/>
<data:view.description/>
<data:view.url/>
<data:view.isPost/>
<data:view.isPage/>
<data:view.isHomepage/>
<data:view.isSearch/>
<data:view.isArchive/>
<data:view.isError/>
<data:view.isLabelSearch/>
<data:view.isSingleItem/>
<data:view.isMultipleItems/>
<data:view.isMobile/>
<data:view.isPreview/>
<data:view.isLayoutMode/>
<data:view.search.resultsMessageHtml/>
<data:view.search.resultsMessage/>
<data:view.search.query/>
<data:view.search.label/>
<data:view.archive.rangeMessage/>
<data:view.archive.day/>
<data:view.archive.month/>
<data:view.archive.year/>


 2. data:blog

Loại dữ liệu chung của Blog


<data:blog.blogId/>
<data:blog.title/>
<data:blog.pageTitle/>
<data:blog.pageName/>
<data:blog.pageType/>
<data:blog.view/>
<data:blog.url/>
<data:blog.homepageUrl/>
<data:blog.searchUrl/>
<data:blog.blogspotFaviconUrl/>
<data:blog.bloggerUrl/>
<data:blog.metaDescription/>
<data:blog.analyticsAccountNumber/>
<data:blog.locale/>
<data:blog.localeUnderscoreDelimited/>
<data:blog.languageDirection/>
<data:blog.encoding/>
<data:blog.hasCustomDomain/>
<data:blog.httpsEnabled/>
<data:blog.enabledCommentProfileImages/>
<data:blog.isPrivate/>
<data:blog.isPrivateBlog/>
<data:blog.adultContent/>
<data:blog.isMobileRequest/>
<data:blog.mobileClass/>
<data:blog.feedLinks/>
<data:blog.googleProfileUrl/>
<data:blog.postImageUrl/>
<data:blog.postImageThumbnailUrl/>
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>
<data:blog.dynamicViewsScriptSrc/>
<data:blog.dynamicViewsCommentsSrc/>
<data:blog.ieCssRetrofitLinks/>
<data:blog.adsenseHostId/>
<data:blog.adsenseClientId/>
<data:blog.adsenseHasAds/>
<data:blog.plusOneApiSrc/>
<data:blog.gPlusViewType/>
<data:blog.jumpLinkMessage/>
<data:blog.hasCustomJumpLinkMessage/>
<data:blog.sharing.googlePlusBootstrap/>
<data:blog.sharing.googlePlusShareButtonWidth/>
<b:loop values='data:blog.sharing.platforms' var='platform'>
  <data:platform.name/>
  <data:platform.key/>
  <data:platform.shareMessage/>
  <data:platform.target/>
</b:loop>


 3. data:messages


Là kiểu dữ liệu hiển thị bằng văn bản.

<data:messages.adsGoHere/>
<data:messages.archive/>
<data:messages.at/>
<data:messages.authorSaid/>
<data:messages.authorSaidWithLink/>
<data:messages.blogArchive/>
<data:messages.blogAuthors/>
<data:messages.by/>
<data:messages.byAuthor/>
<data:messages.byAuthorLink/>
<data:messages.comments/>
<data:messages.configurationRequired/>
<data:messages.copy/>
<data:messages.copyToClipboard/>
<data:messages.deleteComment/>
<data:messages.edit/>
<data:messages.emailAddress/>
<data:messages.emailPost/>
<data:messages.euCookieNotice/>
<data:messages.euCookieNotice2018/>
<data:messages.euCookieResponsibility/>
<data:messages.euCookieResponsibility2018/>
<data:messages.featured/>
<data:messages.getEmailNotifications/>
<data:messages.gotIt/>
<data:messages.hidden/>
<data:messages.home/>
<data:messages.image/>
<data:messages.joinTheConversation/>
<data:messages.keepReading/>
<data:messages.labels/>
<data:messages.latestPosts/>
<data:messages.learnMore/>
<data:messages.linkCopiedToClipboard/>
<data:messages.loadMorePosts/>
<data:messages.loading/>
<data:messages.moreEllipsis/>
<data:messages.morePosts/>
<data:messages.myBlogList/>
<data:messages.myFavoriteSites/>
<data:messages.myPhoto/>
<data:messages.newer/>
<data:messages.newerPosts/>
<data:messages.newest/>
<data:messages.noResultsFound/>
<data:messages.noTitle/>
<data:messages.numberOfComments/>
<data:messages.ok/>
<data:messages.older/>
<data:messages.olderPosts/>
<data:messages.oldest/>
<data:messages.onlyTeamMembersCanComment/>
<data:messages.on/>
<data:messages.photo/>
<data:messages.popularPosts/>
<data:messages.popularPostsFromThisBlog/>
<data:messages.postAComment/>
<data:messages.postLink/>
<data:messages.postedBy/>
<data:messages.postedByAuthor/>
<data:messages.postedByAuthorLink/>
<data:messages.posts/>
<data:messages.poweredByBlogger/>
<data:messages.poweredByBloggerLink/>
<data:messages.readMore/>
<data:messages.recentPosts/>
<data:messages.reportAbuse/>
<data:messages.search/>
<data:messages.searchBlog/>
<data:messages.searchThisBlog/>
<data:messages.share/>
<b:eval expr='data:blog.sharing.platforms[0].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[1].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[2].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[3].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[4].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[5].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[6].shareMessage'/>
<data:messages.showAll/>
<data:messages.showLess/>
<data:messages.showMore/>
<data:messages.skipToMainContent/>
<data:messages.someOfMyFavoriteSites/>
<data:messages.subscribe/>
<data:messages.subscribeTo/>
<data:messages.subscribeToThisBlog/>
<data:messages.templateImagesBy/>
<data:messages.templateImagesByLink/>
<data:messages.theresNothingHere/>
<data:messages.title/>
<data:messages.viewAll/>
<data:messages.viewMyCompleteProfile/>
<data:messages.visible/>
<data:messages.visitProfile/>
<data:messages.visitSite/>
<data:messages.widget/>
<data:messages.widgetNotAvailableInPreview/>
<data:messages.widgetNotAvailableOnHttps/>
<data:messages.youMayLikeThesePosts/>

 4. data:widget Blog1 version 1


Loại dữ liệu sử dụng trong widget Blog1 version 1

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='1' >
  <b:includable id='main'>
    <data:title/>
    <data:description/>
    <data:numPosts/>
    <data:mobile/>
    <data:postLabelsLabel/>
    <data:timestampLabel/>
    <data:authorLabel/>
    <data:commentLabel/>
    <data:postLocationLabel/>
    <data:reactionsLabel/>
    <data:showTimestamp/>
    <data:showLocation/>
    <data:showAuthor/>
    <data:showPostLabels/>
    <data:showReactions/>
    <data:showDummy/>
    <data:showPlusOne/>
    <data:showMobileShare/>
    <data:showEmailButton/>
    <data:showBlogThisButton/>
    <data:showTwitterButton/>
    <data:showFacebookButton/>
    <data:showPinterestButton/>
    <data:olderPageUrl/>
    <data:olderPageTitle/>
    <data:newerPageUrl/>
    <data:newerPageTitle/>
    <data:mobileLinkUrl/>
    <data:mobileLinkMsg/>
    <data:desktopLinkUrl/>
    <data:desktopLinkMsg/>
    <data:homeMsg/>
    <data:navMessage/>
    <data:postCommentMsg/>
    <data:blogCommentMessage/>
    <data:blogTeamBlogMessage/>
    <data:feedLinksMsg/>
    <data:commentPostedByMsg/>
    <data:shareMsg/>
    <data:shareToTwitterMsg/>
    <data:shareToFacebookMsg/>
    <data:shareToPinterestMsg/>
    <data:blogThisMsg/>
    <data:emailThisMsg/>
    <data:emailPostMsg/>
    <data:editPostMsg/>
    <data:deleteCommentMsg/>
    <data:adCode/>
    <data:cmtIframeInitialHeight/>
    <data:showCmtPopup/>
    <b:loop values='data:feedLinks' var='feedLink'>
      <data:feedLink.url/>
      <data:feedLink.name/>
      <data:feedLink.feedType/>
      <data:feedLink.mimeType/>
    </b:loop>
    <b:loop values='data:posts' var='post'>
      <data:post.id/>
      <data:post.title/>
      <data:post.body/>
      <data:post.snippet/>
      <data:post.longSnippet/>
      <data:post.url/>
      <data:post.link/>
      <data:post.thumbnailUrl/>
      <data:post.firstImageUrl/>
      <data:post.date/>
      <data:post.dateHeader/>
      <data:post.timestamp/>
      <data:post.timestampISO8601/>
      <data:post.lastUpdatedISO8601/>
      <data:post.author/>
      <data:post.authorUrl/>
      <data:post.authorProfileUrl/>
      <data:post.authorAboutMe/>
      <data:post.authorPhoto.url/>
      <data:post.authorPhoto.width/>
      <data:post.authorPhoto.height/>
      <data:post.hasJumpLink/>
      <data:post.jumpText/>
      <data:post.isFirstPost/>
      <data:post.isDateStart/>
      <data:post.adminClass/>
      <data:post.editUrl/>
      <data:post.allowComments/>
      <data:post.allowNewComments/>
      <data:post.noNewCommentsText/>
      <data:post.numComments/>
      <data:post.commentLabelFull/>
      <data:post.addCommentUrl/>
      <data:post.addCommentOnclick/>
      <data:post.commentPagingRequired/>
      <data:post.hasOlderLinks/>
      <data:post.oldLinkClass/>
      <data:post.oldestLinkUrl/>
      <data:post.oldestLinkText/>
      <data:post.olderLinkUrl/>
      <data:post.olderLinkText/>
      <data:post.hasNewerLinks/>
      <data:post.newLinkClass/>
      <data:post.newerLinkUrl/>
      <data:post.newerLinkText/>
      <data:post.newestLinkUrl/>
      <data:post.newestLinkText/>
      <data:post.commentRangeText/>
      <data:post.commentFormIframeSrc/>
      <data:post.embedCommentForm/>
      <data:post.showThreadedComments/>
      <data:post.commentSrc/>
      <data:post.commentFeed/>
      <data:post.commentJso/>
      <data:post.commentHtml/>
      <data:post.commentMsgs/>
      <data:post.commentConfig/>
      <data:post.avatarIndentClass/>
      <data:post.includeAd/>
      <data:post.allowIframeComments/>
      <data:post.iframeCommentSrc/>
      <data:post.viewType/>
      <data:post.commentSource/>
      <data:post.dummyTag/>
      <data:post.googlePlusShareTag/>
      <data:post.emailPostUrl/>
      <data:post.sharePostUrl/>
      <data:post.reactionsUrl/>
      <data:post.cmtfpIframe/>
      <data:post.appRpcRelayPath/>
      <data:post.location.mapsUrl/>
      <data:post.location.name/>
      <b:loop values='data:labels' var='label'>
        <data:label.name/>
        <data:label.url/>
        <data:label.isLast/>
      </b:loop>
      <b:loop values='data:feedLinks' var='feedLink'>
        <data:feedLink.url/>
        <data:feedLink.name/>
        <data:feedLink.feedType/>
        <data:feedLink.mimeType/>
      </b:loop>
      <b:loop values='data:comments' var='comment'>
        <data:comment.id/>
        <data:comment.inReplyTo/>
        <data:comment.cmtBodyIdPostfix/>
        <data:comment.url/>
        <data:comment.body/>
        <data:comment.timestamp/>
        <data:comment.timestampValue/>
        <data:comment.timestampAbs/>
        <data:comment.author/>
        <data:comment.authorUrl/>
        <data:comment.authorPhoto.url/>
        <data:comment.authorPhoto.width/>
        <data:comment.authorPhoto.height/>
        <data:comment.favicon/>
        <data:comment.authorAvatarSrc/>
        <data:comment.authorAvatarImage/>
        <data:comment.anchorName/>
        <data:comment.deleteUrl/>
        <data:comment.isDeleted/>
        <data:comment.adminClass/>
        <data:comment.authorClass/>
      </b:loop>
      <b:loop values='data:enclosures' var='enclosure'>
        <data:enclosure.url/>
        <data:enclosure.mimeType/>
      </b:loop>
    </b:loop>
  </b:includable>
</b:widget>


 5. data:widget Blog1 version 2


Loại dữ liệu sử dụng trong widget Blog1 version 2


<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='2' >
  <b:includable id='main'>
    <data:title/>
    <data:description/>
    <data:olderPageUrl/>
    <data:newerPageUrl/>
    <data:navMessage/>
    <data:adCode/>
    <data:adClientId/>
    <data:cmtIframeInitialHeight/>
    <data:showCmtPopup/>
    <data:messages.blogComment/>
    <b:loop values='data:feedLinks' var='feedLink'>
      <data:feedLink.url/>
      <data:feedLink.name/>
      <data:feedLink.feedType/>
      <data:feedLink.mimeType/>
    </b:loop>
    <b:loop values='data:posts' var='post'>
      <data:post.id/>
      <data:post.title/>
      <data:post.body/>
      <data:post.snippets.short/>
      <data:post.snippets.long/>
      <data:post.url/>
      <data:post.link/>
      <data:post.thumbnailUrl/>
      <data:post.featuredImage/>
      <data:post.date/>
      <data:post.lastUpdated/>
      <data:post.author.name/>
      <data:post.author.profileUrl/>
      <data:post.author.aboutMe/>
      <data:post.author.authorPhoto.image/>
      <data:post.author.authorPhoto.width/>
      <data:post.author.authorPhoto.height/>
      <data:post.hasJumpLink/>
      <data:post.adminClass/>
      <data:post.postAuthorClass/>
      <data:post.allowComments/>
      <data:post.allowNewComments/>
      <data:post.noNewCommentsText/>
      <data:post.numberOfComments/>
      <data:post.commentsUrl/>
      <data:post.commentsUrlOnclick/>
      <data:post.commentPagingRequired/>
      <data:post.hasOlderLinks/>
      <data:post.oldLinkClass/>
      <data:post.oldestLinkUrl/>
      <data:post.olderLinkUrl/>
      <data:post.hasNewerLinks/>
      <data:post.newLinkClass/>
      <data:post.newerLinkUrl/>
      <data:post.newestLinkUrl/>
      <data:post.commentRangeText/>
      <data:post.commentFormIframeSrc/>
      <data:post.embedCommentForm/>
      <data:post.showThreadedComments/>
      <data:post.commentSrc/>
      <data:post.commentFeed/>
      <data:post.commentJso/>
      <data:post.commentHtml/>
      <data:post.commentMsgs/>
      <data:post.commentConfig/>
      <data:post.avatarIndentClass/>
      <data:post.includeAd/>
      <data:post.adNumber/>
      <data:post.allowIframeComments/>
      <data:post.iframeCommentSrc/>
      <data:post.viewType/>
      <data:post.commentSource/>
      <data:post.emailPostUrl/>
      <data:post.shareUrl/>
      <data:post.reactionsUrl/>
      <data:post.cmtfpIframe/>
      <data:post.appRpcRelayPath/>
      <data:post.location.mapsUrl/>
      <data:post.location.name/>
      <b:loop values='data:labels' var='label'>
        <data:label.name/>
        <data:label.url/>
      </b:loop>
      <b:loop values='data:feedLinks' var='feedLink'>
        <data:feedLink.url/>
        <data:feedLink.name/>
        <data:feedLink.feedType/>
        <data:feedLink.mimeType/>
      </b:loop>
      <b:loop values='data:comments' var='comment'>
        <data:comment.id/>
        <data:comment.inReplyTo/>
        <data:comment.cmtBodyIdPostfix/>
        <data:comment.url/>
        <data:comment.body/>
        <data:comment.timestamp/>
        <data:comment.timestampValue/>
        <data:comment.timestampAbs/>
        <data:comment.author/>
        <data:comment.authorUrl/>
        <data:comment.authorUserType/>
        <data:comment.authorPhoto.url/>
        <data:comment.authorPhoto.width/>
        <data:comment.authorPhoto.height/>
        <data:comment.authorAvatarSrc/>
        <data:comment.authorAvatarImage/>
        <data:comment.anchorName/>
        <data:comment.deleteUrl/>
        <data:comment.isDeleted/>
        <data:comment.adminClass/>
      </b:loop>
      <b:loop values='data:enclosures' var='enclosure'>
        <data:enclosure.url/>
        <data:enclosure.mimeType/>
      </b:loop>
    </b:loop>
  </b:includable>
</b:widget>

Kết Luận: Như vậy qua bài viết trên tôi đã liệt kê cho các bạn danh sách tổng hợp các loại thẻ dữ liệu mặc định của blogger. Hi vọng qua bài viết này các bạn có cái nhìn mới hơn về cấu trúc của Blogger để từ đó giúp các bạn tốt hơn trong việc thiết kế template blogspot. Chúc các bạn thành công và SEO nhanh lên top.

Hướng dẫn cách tạo Responsive Youtube Video Cho Blogger

LongAnIT 5/04/2019 Bình luận
Hello chào các bạn hôm nay chúng ta lại băt đầu với bài viết nhúng video youtube vào blogger. Nghe có vẻ chẳng có gì mới cả đúng không nào?

Responsive video youtube cho Blogspot
Responsive video youtube cho Blogspot

Tuy nhiên trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách nhúng video youtube vào blogspot với tính năng Reponsive trên tất cả các thiết bị smartphone. Vậy cách làm như thế nào chúng ta cùng điểm qua một số cách dưới đây

Cách 1: Viết một đoạn CSS sau đó gọi class HTML vào


Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy đoạn code bên dưới dán vào trước thẻ đóng ]]></b:skin>

.youtube-video-longanit {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden;}
.youtube-video iframe, .youtube-video object, .youtube-video embed {position:absolute;top:0;left:0;width:100%;height:100%;}

Bước 3: Gọi class thôi rất đơn giản bạn chỉ cần chèn mã nhúng video youtube vào giữa 2 thẻ <div> này thế là xong

<div class="youtube-video-longanit">
<iframe width="560" height="315" src="https://www.youtube.com/embed/j4HAWwnIbxM" frameborder="0" allowfullscreen></iframe></div>

Chú ý: dòng màu đỏ là mã nhúng video youtube. Để lấy được mã nhúng này rất dễ bên dưới mỗi video youtube bạn click vào dòng "chia sẻ" sau đó click vào mã nhúng và copy toàn bộ đoạn code bên trong dán vào là xong?

Cách 2: Sử dụng code Javascript

Cách này dĩ nhiên sẽ làm chậm tốc độ tải trang blog bạn một xíu nếu bạn nào lười có thể dùng code mình chia sẻ bên dưới.

<script type='text/javascript'>
//<![CDATA[
$(function() {
 
    var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");
   
 $allVideos.each(function() {

   $(this)
     // jQuery .data does not work on object/embed elements
     .attr('data-aspectRatio', this.height / this.width)
     .removeAttr('height')
     .removeAttr('width');

 });

 $(window).resize(function() {
 
   $allVideos.each(function() {
 
     var $el = $(this);
        var newWidth = $el.parents('figure').width();
     $el
         .width(newWidth)
         .height(newWidth * $el.attr('data-aspectRatio'));
 
   });

 }).resize();
});
//]]>
</script>

Kết luận:
Như vậy qua bài viết trên tơi đã hướng dẫn các bạn cách cơ bản để nhúng video youtube vào trong blogspot Reponsive trên tất cả các thiết bị. Chúc các bạn thành công nhé.

Tạo navbar với Bootstrap 3 cho blogspot

LongAnIT 5/03/2019 Bình luận
Như các bạn đã biết thư viện Bootstrap 3 rất đa dạng ngoài việc tạo các bố cục Reponsive cho webiste thì compoment của nó còn rất nhiều thứ rất hay. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách tạo Navbar cho blogspot thông qua thư viện Bootstrap 3 tạm gọi là Bootstrap Menu Generator thông qua một site trung gian giúp chúng ta có thể tùy biến màu sắc cũng như code trước khi đưa code vào website.

Tạo navbar với Bootstrap 3 cho blogspot
Tạo navbar với Bootstrap 3 cho blogspot

Bước 1: Đầu tiên bạn truy cập vào địa chỉ sau:http://bootstrap3-menu.codedorigin.com/#sthash.Vz7KuG1y.dpbs

Bước 2: Tùy chỉnh giao diện rất đơn giản như hình trên bạn có thể thấy

  1. Phần trên của site là menu review giúp bạn có thể xem trước menu của mình như thế nào
  2. Phần ở giữa là màu sắc: Có 3 cột là màu nền, màu viền và màu text bạn có thể thay đổi trực tiếp màu sắc tại đây
  3. Phần cuối cùng: có 2 cột chứa HTML và CSS sau khi hoàn thành chỉnh sửa 
Bước 3: truy cập vào quản trị Blogger - Chủ đề - Chỉnh sửa HTML ở đây chúng ta có 2 code là CSS và HTML bạn copy và pase và đúng vị trí là xong. Bạn có thể lấy code bên dưới từ longanit đề sử dụng và tùy chỉnh nhé

Code CSS
 /*** mau nen thanh menu nav longanit.com ****/
.navbar-default {background-color:#0073aa}
.navbar {position: relative;min-height: 50px;margin-bottom: 0px!important; border: 1px solid transparent;}
.navbar-default .navbar-brand { color: #ffffff;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #e5dbdb;}
.navbar-default .navbar-text {color: #d7e2e9;}
.navbar-default .navbar-nav > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav > li > .dropdown-menu {background-color: #69899f;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {background-color: #69899f;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-toggle {border-color: #425766;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #425766;}
.navbar-default .navbar-toggle .icon-bar {background-color: #d7e2e9;}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {border-color: #d7e2e9;}
.navbar-default .navbar-link {color: #d7e2e9;}
.navbar-default .navbar-link:hover {color: #e5dbdb;}
&#160;@media (max-width: 767px)
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {color: #e5dbdb;background-color: #425766; }
}

Code HTML cho Menu
<nav class='navbar navbar-default' id='menu'>
<div class='container-fluid'>
<div class='row'>
<div class='navbar-header'>
<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='https://www.longanit.com/'>LongAnIT</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='https://www.longanit.com/'>Trang chủ <span class='sr-only'>(current)</span></a></li>
<li><a href='https://www.longanit.com/p/gioi-thieu.html'>Giới thiệu</a></li>
<li><a href='https://www.longanit.com/p/rules.html'>Quy định</a></li>
<li><a href='https://www.longanit.com/p/contact.html'>Liên hệ</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Web Tools <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/p/css.html'>Tool CSS </a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Reponsive'>Reponsive </a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>Blogger <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/Blogging tips'>Blogging tips</a></li>
<li><a href='https://www.longanit.com/search/label/Widgets'>Widgets</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Templates'>Templates</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Bootstrap'>Bootstrap</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>SEO<span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/SEO'>SEO Tips </a></li>
<li><a href='https://www.longanit.com/search/label/SEO Onpage'>SEO Onpage</a></li>
<li><a href='https://www.longanit.com/search/label/SEO Offpage'>SEO Offpage </a></li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='http://longanit.forumvi.com/'>Diễn đàn</a></li>
<li><a href='https://www.longanit.com/p/backlink.html'>Liên kết</a></li>
<li><a href='https://www.longanit.com/p/sitemap.html'>Sitemap</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Admin <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.blogger.com'>Login</a></li>
<li class='divider' role='separator'></li>
<li><a href='#'>Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách cơ bản để tạo cho blogspot một Menu Reponsive rất đẹp mắt. Bạn có thể xem thêm tại link trang chủ của bài viết: https://getbootstrap.com/docs/3.3/components/#navbar

Chúc các bạn thành công và SEO nhanh lên top nhé!

Hướng dẫn tăng tốc blogspot bằng cách xóa CSS và Javascript mặc định

LongAnIT 4/20/2019 1 Bình luận
PageSpeed Insights - Google Developers
Google Page Speed Insights

Hello các bạn quay lại với chuyên mục thủ thuật bogspot. Trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách cơ bản để tăng tốc blogspot nhằm đạt được điểm cao trên các công cụ test của google từ đó tăng điểm SEO cho site của bạn.
tăng tốc blogspot toàn tập
Tăng tốc blogspot bằng cách xóa CSS và Javascript mặc định

Như các bạn đã biết templates blogspot có cấu trúc cơ bản các phần như sau:
<html>
<head>
</head>
<body>
</body>
</html>

1. Chỉnh sửa lại cấu trúc template blogspot

 <head> thay đổi thành &lt;head&gt;
</head> thay đổi thành  &lt;/head&gt;&lt;!--<head/>--&gt;
<body> thay đổi thành &lt;body&gt;
</body> thay đổi thành &lt;!--<body/>--&gt; hoặc &lt;!--</body>--&gt;&lt;/body&gt;

Sau đó tiến hành lưu mẫu và kiểm tra thì bạn sẽ cảm thấy tốc độ tải trang blogspot tăng điểm lên rất nhiều. Để kiểm tra tốc độ tải trang các bạn có thể kiểm tra tại đây

2. Xóa bỏ 2 file css mặc định mặc định của blogspot:


Bước 1: Các bạn truy cập html của blogspot tìm kiếm đoạn mã sau đây: <b:skin><![CDATA[

Bước 2: Thêm đoạn mã &lt;!--<style type='text/css'/>--&gt; vào ngay trước đoạn mã trên.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách đơn giản để tăng tốc cho blogspot. Hi vọng sau khi thực hiện thì blog của bạn sẽ có được tốc độ tốt nhất khi tải trang nhé!

Chú ý: Đây là cách hướng dẫn dành cho template blogspot version 1. Nếu bạn nào đã nâng cấp lên version 2 và 3 thì có thể dùng cách khác