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....
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'>Thay bằng đoạn này
<b:widget id='Header1' locked='false' title='Template blogspot doiguocmoc (Tiêu đề)' type='Header'>
...
</b:section>
<b:section class='header' id='header-logo' maxwidgets='1' showaddelement='yes'>Bước 2: Fix h1 cho title bài viết.
<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 == "BEHIND"'>
<!--
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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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 == "index"'>
<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
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'>Sửa thành
<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>
<b:if cond='data:blog.pageType != "item"'>Đọc thêm: Tối ưu template blogspot chuẩn SEO
<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>
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'>Thành link ảnh của bạn muốn để hoặc bằng đoạn ads.
<img alt='Kho template blogspot đẹp' height='251' id='Image1_img' original='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmZZ57IHO1Sv3M5m09SBVrN7px8r7vQPX_Q5eb52nGJ4XDJBe1rxs58A9L6eTVti5FtV6PKhyphenhyphenooHSgDaCHE68fDhdoJu9y-r8uXnnR5l4p8-htWPLydC6Mc4EHYhQBDAHuC7erQ_mgsg/s1600/template-blogspot.gif' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmZZ57IHO1Sv3M5m09SBVrN7px8r7vQPX_Q5eb52nGJ4XDJBe1rxs58A9L6eTVti5FtV6PKhyphenhyphenooHSgDaCHE68fDhdoJu9y-r8uXnnR5l4p8-htWPLydC6Mc4EHYhQBDAHuC7erQ_mgsg/s1600/template-blogspot.gif' width='295'/></a>
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 '/>
إرسال تعليق
إرسال تعليق