Template Mobile Clone Trang tin tức 24h.Com.VN

Trang tin tức 24h đã được cộng đồng mạng sử dụng khá lâu, chắc ai cũng biết đến rồi, tin tức được cập nhật hàng ngày, tin nhảm nhí hầu như không có, chất lượng về cả nội dung và giao diện, nay mình chính thức chia sẻ cho mọi người phiên bản giống với 24h hiện tại - Template Mobile Clone Trang tin tức 24h.Com.Vn với giao diện mobile cực đẹp.




Có một số bạn đã cho rằng bản này đã được chia sẻ lâu rồi nhưng mình đã biết, hầu hết đều là bản rác, không chuẩn, chỉ có code html thủ công, bố trí code thừa rất nhiều, khó hiểu khi chỉnh sửa, đặc biệt là chưa tích hợp trực diện vào Bố cục giao diện blogger như chuyên mục, bài viết, đường dẫn,... Nói chung mọi người tải về dùng sẽ biết chất lượng hjhj

Template Clone 24h có gì đặc biệt ?

Không hẳn đặc biệt cho lắm, với kiểu hiển thị bài viết theo từng chuyên mục này đã được tích hợp vào bản Template Mobile Clone Facebook từ lâu, nhưng nay mình cải tiến hơn là hiển thị bài viết đầu tiên có ảnh, đồng thời kết hợp Javascript lấy ảnh thumb (tải ảnh lên khi viết bài) chứ không lấy ảnh tự động trong bài viết nên đảm bảo được tốc độ ổn định.

Sử dụng Javascript thích - chia sẻ bài viết lên các trang mạng xã hội đẹp hơn cái mặc định của Blogger, đẹp hơn, dễ dùng hơn hẳn cái mặc định.

Hướng dẫn và Giới thiệu Template 24h

1. Chuyên mục chọn
Menu chuyên mục chọn đầu trang giúp tiết kiệm thao tác chuyên dụng cho giao diện điện thoại :

<form action="#"><fieldset id="selfieldset"><select name="dropmenu-name" id="dropmenu" class="dropTop" onchange="location = this.options[this.selectedIndex].value;">
    <option class="opt" value="">Chọn chuyên mục</option>
    <option class="opt" value="/">Trang chủ</option>
    <option class="opt" value="/search/label/Thủ Thuật Blogger">Thủ Thuật Blogger</option>
</select></fieldset></form>

Cách sử dụng đơn giản, các bạn chỉ cần thêm đoạn chữ đậm đỏ là ok liền, với :
- Nền vàng : link liên kết.
- Nền xanh : tên hiển thị khi chọn.

2.Top navi
Thanh menu đầu trang này chỉnh sửa chỉ cần thêm hoặc xóa một thẻ liên kết sau :

<div id='menu'>
    <a href='/'>Trang chủ</a>
    <a href='#'>Bóng đá</a>
    <a href='#'>Tin tức</a>
    <a href='#'>Tin tức</a>
    <a href='#'>Hình sự</a>
    <a href='#'>Cười</a>
</div>

Các liên kết được sắp xếp liền nhau chứ không cần có bất cứ giãn cách nào giữa các link.

3. Bài viết theo chuyên mục kèm tab
Mình đã chú thích trong Template từng chuyên mục hiển thị như 1, 2, 3,... Và đây là đoạn code cho bạn tùy chỉnh :

<div class='chuyen-muc'>
  <div class='ten-chuyen-muc'><h2>Máy Tính</h2> | <a href='#'>Laptop</a> | <a href='#'>PC</a></div>
<script type='text/javascript'>
//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/Máy Tính?max-results="+5+"&orderby=published&alt=json-in-script&callback=baiviet\"><\/script>");
//]]>
</script>
<div class='xem-them'>>><a href='/search/label/Máy Tính?max-results=10'> Xem thêm Máy Tính</a></div>
</div>

Trong đó chú ý :
- Chữ đỏ đậm : chuyên mục cần hiển thị.
- Chữ xanh : số bài viết được hiển thị.
- Nền xanh : các tab chuyên mục cùng loại.


4. Ảnh thumb bài viết
Khi bạn viết bài chỉ cần đơn giản vài giây tải ảnh lên bạn sẽ cải thiện việc SEO khá tốt đó, vốn dĩ các mã nguồn blog nổi tiếng như " Wordpress và Blogspot " đều sử dụng cách lấy thumb ảnh khi tải lên là Tốc độ và SEO đó, ví dụ các bạn tìm trên google từ khóa : template mobile green các bạn sẽ thấy hình ảnh bài viết của mình đã có trong trang 1 của bộ tìm kiếm này :


Như vậy các bạn đã hiểu về việc mình luôn cố gắng thiết kế template yêu cầu các bạn cải thiện SEO Top Google rồi chứ ? khi mà bài viết không được top nhưng hình ảnh sẽ bù lại, bởi hình ảnh nó nằm ở hosting của thằng Google mà, nó tất nhiên phải có top rồi đúng không ? hjhj

Và đây cách các bạn tùy biến nó hiện thị trong template này như sau :

<b:if cond='data:post.thumbnailUrl'>
    <img class='img-thumb' height='72' width='72' expr:src='data:post.thumbnailUrl'/>
<b:else/>
    <img class='img-thumb' height='72' width='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1EZN0V4QNZvnNgIvL9iwQUji3VvU2s1CKcG1of7965tp6rRnR_YGpCRxLF5-qQrS1T3W8JTr3WtvLZtOrATiHOceXK-ow6BM53MbsTdVqMrOU34xn-1rVKrJe_GanfVAaXQCt9pYqDQ/s1600/no-photo.jpg'/>
</b:if>

- Màu đỏ : kích cỡ ảnh được hiển thị, nên để nhỏ hơn hoặc bằng 72.
- Màu vàng : là ảnh thumb hiển thị nếu trong bài viết bài không tải ảnh lên.

5. Like & Share
Đoạn code javascript này có thể nó nặng hơn code mặc định của blogger nhưng nó đẹp mắt và có thể chỉnh sửa thêm được, toàn bộ code đây :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<div class='clear'/>
<div class='post-body entry-content' itemprop='articleBody'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> 
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
<div style='clear: both;'/>
</div>
</div>

Các chú thích màu đỏ để các bạn dễ nhận biết, thêm hoặc xóa tùy ý các bạn.


6. Phân trang Page Navi
Quá quen thuộc rồi đúng không? nếu các bạn không muốn dùng phân trang số mà dùng kiểu xem tiếp, quay lại như mình đang dùng thì các bạn làm như sau :

Tìm đoạn :

    <b:include name='page-navi'/>

Thay bằng :

    <b:include name='nextprev'/>

7. ADS quảng cáo
Việc sử dụng này giúp các bạn phân phối game ứng dụng và kiếm doanh thu từ click ads khá tốt, chỉ cần kiếm 1 ảnh kích thước tương tự như link ảnh sẽ phù hợp với template này hơn :

<div style='text-align:center;'>
    <a href='http://store.fchiase.com/2013/12/msub-tron-goi-giai-tri-khong-gioi-han.html'>
    <img src='http://blog.mwork.vn/wp-content/uploads/2013/12/banner_giaitri_300x50.gif'/></a>
</div>

- Màu xanh : liên kết quảng cáo.
- Màu đỏ : địa chỉ ảnh quảng cáo hiển thị.

8. Menu chuyên mục
Chỉnh sử chuyên mục hiện ra được mình tích hợp vào 2 tiện ích riêng biệt " Cột 1 và Cột 2 "
nên việc chỉnh sửa các bạn chỉ cần vào Bố cục tùy chọn bấm vào tiện ích rồi cài đặt :


- 1 và 2 là chọn sang chức năng tùy chỉnh nhãn (lựa chọn từng nhãn được hiện) .
- 3 là nếu bạn tích vào thì số lượng bài viết có trong 1 chuyên mục sẽ được hiện (không nên vì không phù hợp với template này).

Đọc thêm cách tải mới

Các bạn đã đọc bài Hướng dẫn tải và sử dụng Template không bị lỗi chưa ? mình đã hướng dẫn cách tải và sử dụng template tại Dropbox, nhưng để tiện hơn cho các bạn dùng điện thoại thì mình bổ sung thêm link Pastebin cho mọi người tải : Tải về ở đây hoặc Xem rồi copy về máy.

Thân gửi các bạn độc giả ! xin hãy tôn trọng mình một chút, khi dùng Template xin hãy để cho mình 1 link về blog ở cuối trang của các bạn. Mình chỉ mong có thế để blog mình phát triển đẹp hơn. Đặc biệt mình sẽ không giúp đỡ bất cứ lỗi gì với những bạn không biết " tôn trọng bản quyền " tác giả nhé !


Kết bài : khá công sức mới hoàn thành được, mong các bạn ủng hộ nhé, Gạch đá mình nhận hết hjhj Chúc các bạn thành công trong cuộc sống !

Tags : template mobile clone 24h.com.vn, template mobile 24h.com.vn free, mien phi template 24h.com.vn, free template clone 24h.com.vn for blogspot, template mobile 24h.com.vn for blogger, template blogspot free, template clone 24h.com.vn blogspot đẹp, mẫu template 24h.com.vn cho blogspot đẹp, template giống 24h.com.vn cho blogger, template blogger dep, template mẫu blogger, free template html xml, template free html xml, download template 24h.com.vn html xml, template 24h.com.vn free blogspot, blogspot template, 24h.com.vn template for blogspot, theme 24h.com.vn blogger đẹp, template mobile 24h.com.vn, theme clone 24h.com.vn...