Them blogger cá nhân free chuẩn seo doiguocmoc

Hôm nay share123template tiếp tục chia sẻ cho các bạn một theme blogger chuẩn seo làm trang blog cá nhân nữa. Đây là một template đã được chia sẻ bởi Doiguocmoc.com.

Một số tính năng cơ bản của template blogspot này

- Giao diện 2 cột, khá đẹp, phù hơp làm một trang blog cá nhân
- Đã được tối ưu chuẩn SEO, code sạch, tốc độ load trang nhanh
- Menu dropdown, Full responsive
- Phân trang chuẩn, bài viết liên quan
- Template blogspot được tối ưu vị trí đặt quảng cáo, rất phù hợp với những bạn chơi Adsense.... 

DemoDownload

Hướng dẫn cài đặt template blogspot này

Template này khá dễ sử dụng, bạn chỉ cần tải về và up lên blog của bạn theo 2 cách.
- Cách 1: Mở bằng notepad++ và copy trực tiếp vào trong mẫu
- Cách 2: Dùng tính năng sao lưu mẫu của blogger để chọn file .xml từ chính máy tính của bạn
Đọc thêm: Cách cài đặt template blogspot

Hướng dẫn fix thẻ h1 cho template này ( cho người đã sử dụng)

Bước 1: Fix h1 cho toàn trang.
Tìm đoạn code này

<b:section class='header' id='header-logo' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Template blogspot doiguocmoc (Tiêu đề)' type='Header'>
...
</b:section>

Thay bằng đoạn này

<b:section class='header' id='header-logo' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Template blogspot doiguocmoc (Tiêu đề)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<!--

      Show image as background to text. You can't really calculate the width

      reliably in JS because margins are not taken into account by any of

      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum

      width if the user is using shrink to fit.

      This results in a margin-width's worth of pixels being cropped. If the

      user is not using shrink to fit then we expand the header.

      -->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:include name='title'/>
</div>
<b:include name='description'/>
</div>
<b:else/>
 <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
 <div class='titlewrapper' style='background: transparent'>
 <b:include name='title'/>
</div>
<b:include name='description'/>
 </div>
</b:if>
<b:else/>
 <!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1><data:blog.title/></h1>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
 </a>
 <!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
 <b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:include name='title'/>
</div>
<b:include name='description'/>
 </div>
</b:if>
</b:includable>
 <b:includable id='description'>
 <div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h2>
</b:if>
</b:includable>
</b:widget>
</b:section>

Bước 2: Fix h1 cho title bài viết.
Tìm thẻ <b:includable id='post' var='post'>  ngay dưới có đoạn này:
<b:if cond='data:post.title'>

<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
 <a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
 </b:if>
 </h2>
 </b:if>

Sửa thành

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

Đọc thêm: Tối ưu template blogspot chuẩn SEO

Thay ảnh đầu tiên trong bài viết

Phần này mình sẽ hướng dẫn các bạn thay ảnh quảng cáo trong bài viết. Các bạn có thể đọc hướng dẫn cài template blogspot mình đã viết để biết được cách cài đặt và sửa template cơ bản nhất.
Một là bạn thay thành bằng ảnh bạn hoăc ads thì thay đoạn sau thẻ <div class='post-ads'>

<a href='http://www.congnghewebblog.com/' target='_blank'>
<img alt='Kho template blogspot đẹp' height='251' id='Image1_img' original='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgKyWH_h3oaQEnryrw5gH-1tS7WW0sqQo5LpqMJC0UzAxDig5R7Tg0RLHzAk2K51D6dVoZy7YVeG2JzxS68lb1XXyidLMkwgPIrIkIaD1hCas37SgCLQ12r3CbkjFEXREhIJ7LiknD4k/s1600/template-blogspot.gif' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgKyWH_h3oaQEnryrw5gH-1tS7WW0sqQo5LpqMJC0UzAxDig5R7Tg0RLHzAk2K51D6dVoZy7YVeG2JzxS68lb1XXyidLMkwgPIrIkIaD1hCas37SgCLQ12r3CbkjFEXREhIJ7LiknD4k/s1600/template-blogspot.gif' width='295'/></a>

Thành link ảnh của bạn muốn để hoặc bằng đoạn ads.
Nếu bạn muốn tự động hiển thị ảnh đầu tiện của bài viết thì thay đoạn trên bằng đoạn này:

<img width="300px" height="250" class='thumbnail' expr:alt='data:post.title' expr:src= 'data:post.firstImageUrl  '/>