Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

Chủ Nhật, 19 tháng 2, 2017

Ẩn Bài Viết Trên Trang Chủ Cho Blogger

Xin chào, vừa tìm được thủ thuật này trên google mang về hướng dẫn lại cho mọi người luôn cách "Ẩn Bài Viết Trên Trang Chủ Cho Blogger"


Có 2 cách để thực hiện việc ẩn bài viết này, mình sẽ hướng dẫn từng cách một nhé!

Cách 1: Lùi ngày đăng bài viết.

  1. Các bạn vào 1 bài viết bất kì mà muốn bài viết đó không hiện nên trang chủ.
  2. Chọn tab lịch biểu -> đặt ngày và giờ (ở bước này bạn chọn thời gian lùi về trước càng lâu càng tốt để bài viết đó không thể hiện trên trang chủ được)

Đặt thời gian lùi về càng lâu càng tốt.

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

Cách 2.1: Ẩn bài viết theo nhãn blog

  • Vào Mẫu -> Chỉnh sửa HTML và tìm code :
<b:include data='post' name='post'/>
  • Thay thế bằng đoạn code sau :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == "true"'>
            <b:if cond='data:label.name != "hidden"'>
                <b:include data='post' name='post' />
            </b:if>
        </b:if>
    </b:loop>
<b:else/>
    <b:include data='post' name='post' />
</b:if>

Chú ý: Khi đăng bài nếu muốn bài viết đó không hiện trên trang chủ thì đính kèm nhãn là 'hidden' .

Cách 2.2: Ẩn tất cả bài viết của blog:

  • Vào Mẫu -> Chỉnh sửa HTML và tìm code :
<b:include data='post' name='post'/>
  • Thay thế bằng đoạn code sau :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == "true"'>
                <b:include data='post' name='post' />
            </b:if>
    </b:loop>
<b:else/>
    <b:include data='post' name='post' />
</b:if>

Cách 2.3: Ẩn bài viết theo ID:

  • Khi đăng bài viết bạn chú ý trên thanh địa chỉ của trình duyệt sẽ hiện ra ID của bài viết đó.

Thứ Hai, 6 tháng 2, 2017

Share Template Blogspot Đẹp 2017

Xin chào, lướt fb kiếm được share cho các bạn 😋. Thấy Template này hơi giống giống blog Bác Sĩ Windows.

Demo:

Thứ Tư, 25 tháng 1, 2017

Bài Viết Theo Nhãn Đẹp Trên Trang Chủ Cho Blogger

Xin chào, lâu không post bài cho chuyên mục blogger 😅. Hôm nay share cho các bạn widget bài viết theo nhãn đơn giản mà đẹp cho blogger 😍😍.

Demo


Thứ Ba, 17 tháng 1, 2017

Trang Trí Hiệu Ứng Pháo Hoa Tết Cho Blog

Xin chào, năm hết tết sắp đến chạy quanh cũng kiếm được một vài kiểu pháo hoa đẹp mắt cho blogspot mang về chia sẻ để anh em sử dụng tạm.


Thứ Hai, 16 tháng 1, 2017

Thêm Tiện Ích Facebook Messenger Chatbox Cho Blogger

Xin chào, lướt mấy site thấy cái này hay nên view-source code lấy về share cho anh em 😆😆.

Demo :

Thứ Bảy, 31 tháng 12, 2016

Share Code Bắn Pháo Hoa Trang Trí WebSite/Blog Tết

Xin chào, tranh thủ những ngày cuối năm - bài viết này mình sẽ hướng dẫn bạn trang trí blog/website nhân dịp tết 2017. Code Pháo Hoa Trang Trí Website Blog

Thứ Ba, 27 tháng 12, 2016

Thêm bài viết liên quan bằng Google Custom Search Engine

Thêm bài viết liên quan cho Blogspot bằng Google Custom Search Engine.
Chào các bạn,
Như các bạn thường thấy, sau mỗi bài viết trên các Blog hay website chúng ta thường sẽ thấy một danh sách các bài viết liên quan. Và chúng ta cũng có khá nhiều cách để thêm bài viết liên quan cho Blogspot.
Tuy nhiên, hôm nay mình sẽ chia sẻ tới các bạn một cách khá hay nữa đó là dùng công cụ Google Custom Search Engine.

Các bước thực hiện

Bước 1: Đăng nhập vào gmail và truy cập vào địa chỉ sau: cse.google.com
Bước 2: Click vào Tạo công cụ tìm kiếm tùy chỉnh.

Chủ Nhật, 27 tháng 11, 2016

Chia Sẻ Template Blog Vũ Tiến Anh Bản V1

Xin Chào, Hôm nay mình sẽ share bản template của blog VuTienAnh bản hiện tại :D. Demo Như Dưới Ảnh.


Demo : Trang Chủ Trên Pc 
Trang Chủ Trên Điện Thoại
Bài Viết : 
Chuyên Mục : Trên Pc
Trên Điện Thoại


Còn Lại Tự Tìm Hiểu :)
- Template Responsive
- Boostrap Khoảng 60%
- Tốc Độ load khá ổn 
- Về Seo Thì Mình không dám chắc :D (Gà việc này) :D

Dowload Template Ở Phía Dưới

=========Hướng Dẫn Cài Tiếp Các Tiện Ích========
1.Tiện Ích Theo Dõi Blog
<div class="lightsosmed-img">
<img alt="tu-hoc-seo-online" class="img-responsive" height="180" src="https://img1.steemit.com/0x0/http://www.skipprichard.com/wp-content/uploads/2013/01/iStock_000012933486Small-583x343.jpg" title="Blogspot VN" width="300" />
<div class="aboutfloat-img"><span class="lightsosmed-float"><a href="https://www.blogger.com/follow-blog.g?blogID=1730051984977787828" rel="nofollow" target="_blank" title="Theo dõi"><i class="fa fa-heart"></i> THEO DÕI</a></span></div>
</div>
Thay ID 1730051984977787828 Thành ID của Blog Bạn.
2. Nhận Xét Mới 
<div class='widget-content'>
<style type="text/css">
ul.blmoi a{font-weight:400;}
ul.blmoi{padding:0;list-style:none}
ul.blmoi li{margin-bottom:10px;border-bottom:1px dashed #d2d2d2;padding-bottom:10px}
</style>
<script>
//<![CDATA[
var sl_nhanxet = 5,
    kt_nhanxet = 25;
function nhanxetmoi(json){var entry,commurl,commsum;document.write('<ul class="blmoi">');for(var i=0;i<sl_nhanxet;i++){entry=json.feed.entry[i];if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){commurl=entry.link[k].href;break;}}
commsum=("content"in entry)?entry.content.$t:("summary"in entry)?entry.summary.$t:"";commsum=commsum.replace(/<.*?>/g,"");if(commsum.length>kt_nhanxet)commsum=commsum.substring(0,kt_nhanxet)+"...";document.write('<li><strong><a rel="nofollow" href="'+commurl+'">'+entry.author[0].name.$t+':</a></strong> <span>'+commsum+'</span></li>');}
document.write('</ul>');}
//]]></script>
<script src='/feeds/comments/summary?alt=json-in-script&amp;callback=nhanxetmoi'></script>
</div>
3. Nút Demo Và Dowload
<div id="wrap"> <a class="btn down" href="http://blogvutienanh.blogspot.com/" rel="nofollow" target="_blank">Demo <i class="fa fa-paper-plane"></i></a><br /> 
<a class="btn down" href="http://vutienanh.pro" rel="nofollow" target="_blank">Dowload <i class="fa fa-file"></i></a>
</div> 
Update Bổ Sung Sau :) :3.

Lời Kết: Template Này Mình Lấy Ý Tưỏng Từ Anh Đồng Việt (DongViet.Net) Do Là Lần Đầu Làm Template Cho Blogger Sẽ Không Được Hoàn Hảo. Mọi Người sử Dụng Nếu Có Lỗi Gì Hãy Comment Phía Dưới Mình Sẻ Giải Đáp. 
Theo Vũ Tiến Anh Blog - VuTienAnh.Pro

Thứ Ba, 15 tháng 11, 2016

Hướng Dẫn Tạo Tiện Ích Thống Kê Blog Đơn Giản Đẹp

Như các bạn đã biết Blogger hỗ trợ 1 Widget giúp thống kê cho blog hiển thị số lượt truy cập vào Blog. Nhưng mặc định của nó không được đẹp. Nên hôm nay mình sẽ chia sẽ 1 mẫu Thống kê cho Blog được tùy biến lại so với bản gốc của Blogger.
Mẫu này thì mình tách từ một template khác :D các bạn mang về có thể chỉnh sửa lại cho ưng ý. Giờ thì bắt tay vào làm thôi nhỉ :D.
Hướng Dẫn :
Bước 1: Các bạn đăng nhập vào Blog của các bạn => Bố cục
Bước 2: Chọn Thêm Tiện ích => Thống kê blog => Chọn kiểu thứ 2 (như hình dưới) rồi Lưu
Lưu ý: Các bạn để ý vào link của Widget các bạn vừa tạo và nhớ cái ID sau cùng của dòng link. Thường thì mặc định của Widget này là Stats1.
Bước 3: Các bạn chọn Mẫu => Chỉnh sửa HTML => Chọn đến tiện ích lúc nãy các bạn vừa thêm, như của mình là Stats1


Lúc này các bạn sẽ thấy 1 đoạn code:
  <b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
      </span>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>
Bước 4: Các bạn thay đoạn code bên trên bằng đoạn code phía dưới:

  
  <b:widget id='Stats1' locked='false' mobile='yes' title='Thống Kê Truy Cập' type='Stats' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <b:if cond='data:showAnimatedCounter and data:showSparkline'><div class='stats-overlay'/></b:if>
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' class='sts-chart img-responsive' expr:id='data:widget.instanceId + &quot;_sparkline&quot;'/>
      </b:if>
      <div class='stats-container'><label><b:with value='&quot;pageViews&quot;' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;mat-counter graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/></div>
    </div>
    <div class='stats-container'><label><b:with value='&quot;postsNumber&quot;' var='translateLan'><b:include name='translateLan'/></b:with></label><div expr:class='(data:showGraphicalCounter ? &quot;mat-counter &quot; : &quot;&quot;) + &quot;total-posts-counter&quot;'/></div>
<script>
function totalPosts(json){$(&quot;.total-posts-counter&quot;).append(json.feed.openSearch$totalResults.$t);};
$( document ).ready(function() {
var sTP = document.createElement(&quot;script&quot;);
sTP.type = &quot;text/javascript&quot;;
sTP.src = &quot;/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts&quot;;
$(&quot;head&quot;).append(sTP);
});
</script>

     <!-- <b:include name='quickedit'/>-->
  </div>
</b:includable>
    <b:includable id='translateLan'>
<b:with value='{&quot;af&quot;, &quot;de&quot;, &quot;am&quot;, &quot;ar&quot;, &quot;bn&quot;, &quot;kn&quot;, &quot;zh_HK&quot;, &quot;zh_CN&quot;, &quot;zh_TW&quot;, &quot;es&quot;, &quot;es_419&quot;, &quot;fil&quot;, &quot;fr_CA&quot;, &quot;fr&quot;, &quot;el&quot;, &quot;gu&quot;, &quot;hi&quot;, &quot;id&quot;, &quot;en&quot;, &quot;en_GB&quot;, &quot;it&quot;, &quot;ja&quot;, &quot;ml&quot;, &quot;ms&quot;, &quot;mr&quot;, &quot;or&quot;, &quot;pt_BR&quot;, &quot;pt_PT&quot;, &quot;ru&quot;, &quot;ta&quot;, &quot;te&quot;, &quot;ur&quot;}' var='langsAvailable'>
<b:if cond='data:langsAvailable any (language =&gt; language == data:blog.locale )'>
<b:with value='{0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31}' var='langNum'>
<b:with value='{&quot;Bladkyke&quot;, &quot;Seitenaufrufe&quot;, &quot;የገጽ ዕይታዎች&quot;, &quot;المشاركات&quot;, &quot;পৃষ্ঠাদর্শন&quot;, &quot;ಪುಟವೀಕ್ಷಣೆಗಳು&quot;, &quot;網頁檢視次數&quot;, &quot;网页浏览次数&quot;, &quot;個網頁瀏覽數&quot;, &quot;Páginas vistas&quot;, &quot;Páginas vistas&quot;, &quot;Mga Pageview&quot;, &quot;Pages vues&quot;, &quot;Pages vues&quot;, &quot;Προβολές σελίδας&quot;, &quot;પૃષ્ઠ દૃશ્યો&quot;, &quot;पृष्ठ देखे जाने की संख्या&quot;, &quot;Penayangan&quot;, &quot;Pageviews&quot;, &quot;Pageviews&quot;, &quot;Visualizzazioni di pagine&quot;, &quot;ページビュー&quot;, &quot;പേജ്‌കാഴ്‌ചകള്‍‌&quot;, &quot;Paparan halaman&quot;, &quot;पृष्ठदृश्ये&quot;, &quot;Pageviews&quot;, &quot;Visualizações de página&quot;, &quot;Visualizações de páginas&quot;, &quot;Просмотры страницы&quot;, &quot;பக்கக்காட்சிகள்&quot;, &quot;పేజీ వీక్షణలు&quot;, &quot;صفحہ دیکھے جانے کی تعداد&quot;}' var='totalPageViewsMessage'>
<b:with value='{&quot;Plasings&quot;, &quot;Posts&quot;, &quot;ልጥፎች&quot;, &quot;مرات مشاهدة الصفحة&quot;, &quot;পোস্টগুলি&quot;, &quot;ಪೋಸ್ಟ್‌ಗಳು&quot;, &quot;文章&quot;, &quot;帖子&quot;, &quot;發表文章&quot;, &quot;Entradas&quot;, &quot;Publicaciones&quot;, &quot;Mga Post&quot;, &quot;Messages&quot;, &quot;Articles&quot;, &quot;Αναρτήσεις&quot;, &quot;પોસ્ટ્સ&quot;, &quot;संदेश&quot;, &quot;Pos&quot;, &quot;Posts&quot;, &quot;Posts&quot;, &quot;Post&quot;, &quot;投稿&quot;, &quot;പോസ്റ്റുകള്‍&quot;, &quot;Catatan&quot;, &quot;पोस्ट्स&quot;, &quot;ପୋଷ୍ଟ ସମୂହ&quot;, &quot;Postagens&quot;, &quot;Mensagens&quot;, &quot;Сообщения&quot;, &quot;இடுகைகள்&quot;, &quot;పోస్ట్‌లు&quot;, &quot;اشاعتیں&quot;}' var='totalPostsMessage'>
<b:with value='data:langNum first (x =&gt; data:langsAvailable[x] == data:blog.locale)' var='currentLang'>
<b:if cond='data:currentLang'>
<b:if cond='data:translateLan == &quot;pageViews&quot;'>
<b:eval expr='data:totalPageViewsMessage[data:currentLang]'/>
</b:if>
<b:if cond='data:translateLan == &quot;postsNumber&quot;'>
<b:eval expr='data:totalPostsMessage[data:currentLang]'/>
</b:if>
</b:if>
</b:with>
</b:with>
</b:with>
</b:with>
<b:else/>
<b:if cond='data:translateLan == &quot;pageViews&quot;'>
Lượt Xem
</b:if>
<b:if cond='data:translateLan == &quot;postsNumber&quot;'>
Bài Đăng
</b:if>
</b:if>
</b:with>
</b:includable>
  </b:widget>
Bước 5: Các bạn chèn đoạn code phía dưới vào trước và trên thẻ </head> 

<style> .widget.Stats, .Stats{background-color:<data:skin.vars.accentColor/>;color:<data:skin.vars.fallbackTextColor/>;}
.Stats .counter-wrapper, .Stats .total-posts-counter{display: inline-block;opacity: .87;font-size: 20px;border: 2px solid #03A9F4;border-radius: 10px;padding:10px 16px;}
.sts-chart{width:100%;height:120px;}
.stats-container{display: inline-block;float:left;width:50%;background-color: <data:skin.vars.fallbackBackground/>;margin-bottom: 15px;padding: 16px;text-align: center;}
.Stats .total-posts-counter{border: 2px solid #ff9800;}
label{display:block;opacity:.75;font-weight:400;}
.stats-overlay.counted{position: absolute;top: 0;right: 0;width: 100%;height: 120px;background-color: <data:skin.vars.accentColor/>;-webkit-transition: width 3s ease-in; -moz-transition: width 3s ease-in; -o-transition: width 3s ease-in; transition: width 3s ease-in;}
.stats-overlay.counted.animated{width: 0%;}</style>
Bước 6: Lưu lại và xem thành quả
Lời Kết : Chúc các bạn thành công. Nếu có thắc mắc thì Comment bên dưới mình sẽ giải đáp cho các bạn.

Chủ Nhật, 13 tháng 11, 2016

Gắn nhãn New cho Bài viết mới nhất trên Blogger

Label New for first post on Blogger

Đây là một thủ thuật nhỏ nhưng khá thú vị đang được áp dụng trên Iris Tips. Có bạn đã hỏi nên mình sẽ chia sẻ cho mọi người. Thủ thuật này sẽ tự động gắn nhãn New vào bài viết mới nhất trên blog của bạn.

Thứ Tư, 26 tháng 10, 2016

Cách Thêm Button Chia Sẻ Mạng Xã Hội Cho Blogger Đẹp

Button chia sẻ mạng xã hội ( Social Share Button ) là một widget cần thiết mà mọi Blog nên có. Đây là một cách thức hiệu quả và miễn phí để tăng truy cập cho Blog. Khi người đọc tìm được một thông tin, một bài viết hữu ích trên Blog của bạn, họ sẽ muốn chia sẻ nó lên mạng xã hội và đã gián tiếp quảng bá cho Blog của bạn.

Bài viết này mình sẽ hướng dẫn các bạn cách thêm button chia sẻ mạng xã hội vào Blogger cụ thể, là vào phần bài viết.
Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mục đích của việc này là chúng ta sẽ sử dụng Font Awesome để tạo các icon, biểu tưởng mạng xã hội
Bước 2 : Thêm đoạn code dưới đây vào vị trí bạn muốn hiển thị button
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet' class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share' class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share' class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></a>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' class="icon-button linkedin "><i class="fa fa-linkedin"></i><span></span></a>
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' class="icon-button pinterest "><i class="fa fa-pinterest-p"></i><span></span></a>

Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-header'>
Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-footer'>

Bước 3 : Thêm đoạn code vào trên thẻ ]]></b:skin> để thấy hiệu ứng

.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}
.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;width:0}
.icon-button:hover span{width:40px;height:40px;border-radius:40px;margin:-20px}
.icon-button:hover i{transform:rotate(360deg)}
.twitter span{background-color:#4099ff}
.facebook span{background-color:#3B5998}
.google-plus span{background-color:#db5a3c}
.linkedin span{background-color:#0976b4}
.pinterest span{background-color:#cc2127}
.icon-button i{background:none;color:white;height:40px;left:0;line-height:40px;position:absolute;top:0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;width:40px;z-index:10}
.icon-button .fa-twitter{color:#4099ff;border:1px solid #4099ff;border-radius:40px}
.icon-button .fa-facebook{color:#3B5998;border:1px solid #3B5998;border-radius:40px}
.icon-button .fa-google-plus{color:#db5a3c;border:1px solid #db5a3c;border-radius:40px}
.icon-button .fa-linkedin{color:#0976b4;border:1px solid #0976b4;border-radius:40px}
.icon-button .fa-pinterest-p{color:#cc2127;border:1px solid #cc2127;border-radius:40px}
.icon-button:hover i{color:white;border:none}

Lưu lại

Vậy là OK, giờ các bạn F5 lại Blog để xem thành quả, nếu có vướng mắc gì hãy để lại comment để được giúp đỡ. Demo Dưới Bài Viết Nhé :D. Chúc các bạn thành công.

Thứ Ba, 25 tháng 10, 2016

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger

Khung thông tin tác giả ( Author Box ) là một widget nhỏ nhưng khá hữu ích, nó giúp người đọc có thể dễ dàng tìm thấy thông tin về tác giả bài viết.

Một số đặc điểm nổi bật
  • Dễ dàng sử dụng
  • Responsive.
  • Button mạng xã hội.
  • Giao diện đơn giản.

Hướng dẫn tạo khung thông tin tác giả ( Author Box ) cho Blogger


Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Mình sẽ sử dụng FontAwesome để tạo icon cho mạng xã hội, nên nếu bạn nào chưa thêm FontAwesome vào Blog thì thêm vào nhé.

Bước 2 : Thêm đoạn code dưới đây vào phía sau thẻ <div class='post-footer'> hoặc bất kì chỗ nào bạn muốn để khung tác giả

<div class="post-author-box">
<div class='post-author-box-content'>
<div class="post-author-box-image">
<img alt="" height="100" src="https://graph.facebook.com/100009580369715/picture" width="100">
</div>
<div class="post-author-box-name">
<h4>Vũ Tiến Anh</h4>
<p>
VuTienAnh.Pro - blog chia sẻ Tổng Hợp
</p>
</div>
</div>
<div class='post-author-box-social'>
<a href='http://fb.com/vutienanh.vn'><i class="fa fa-facebook"></i></a>
<a href='https://twitter.com/vta2901'> <i class="fa fa-twitter"></i></a>
<a href='https://plus.google.com/+Ti%E1%BA%BFnAnh2901/posts'> <i class="fa fa-google-plus"></i></a>
<a href='http://fb.com/vutienanh.vn'> <i class="fa fa-linkedin"></i></a>
<a href='http://fb.com/vutienanh.vn'><i class="fa fa-pinterest"></i></a>
</div>
</div>

Các bạn chỉnh sửa lại các thông tin về tác giả và đường link mạng xã hội cho đúng

Bước 3 : Thêm đoạn code dưới đây vào trên thẻ ]]></b:skin>

.post-author-box-content {border : 1px solid #11A3D4;min-height:100px;padding:15px;border-bottom:none;color:#2D3438;}
.post-author-box-image img {float:left;border-radius:50%;margin-right:35px;width:100px;height:100px;}
.post-author-box-name h4 {color:#11A3D4;font-wight:bold;font-size:20px;margin-top:10px;margin-bottom:0;}
.post-author-box-social {clear:both;background-color:#11A3D4;padding:10px 15px;color:#fff;font-size:20px;}
.post-author-box-social a {margin-right:10px;color:#fff;}
@media screen and (max-width:640px) {
.post-author-box {text-align:center;}
.post-author-box-image img {float:none;margin:0 auto;}
}

Cuối cùng Save template lại. Chúc các bạn thành công