Hot Post

Tạo khung Thông tin tác giả bài viết dạng tab cho Blogger

3/22/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Fanciest Author Box for Blogger

Đây là 1 plugin khá đẹp dành cho Wordpress và nó có giá 10$. Bạn có thể xem thêm về plugin này tại đây. Hôm nay Iris Tips sẽ mang nó về để làm đẹp cho Blogger/Blogspot hoàn toàn miễn phí.


Tạo khung Thông tin tác giả bài viết dạng tab cho Blogger

1Đầu tiên bạn vào tab Mẫu >> Chỉnh sửa HTML tìm tất cả (Ctrl+F) các đoạn code <div class='post-footer'> và chèn vào trước nó đoạn code sau 
 <!--Fanciest Author Box by Iris-Tips.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-16747'>
<ul class='ts-fab-list'>
<li class='ts-fab-bio-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-bio-below-16747'>Tác giả</a></li>
<li class='ts-fab-twitter-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-twitter-below-16747'>Twitter</a></li>
<li class='ts-fab-facebook-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-facebook-below-16747'>Facebook</a></li>
<li class='ts-fab-googleplus-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-googleplus-below-16747'>Google+</a></li>
<li class='ts-fab-latest-posts-link'><a href='http://www.blogger.com/blogger.g?blogID=YOUR-BLOG-ID-HERE#ts-fab-latest-posts-below-16747'>Bài viết</a></li>
</ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>YOUR-NAME</h3>
</div>
<div class='ts-fab-content'> YOUR-BIO-HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='http://twitter.com/YOUR-TWITTER-USERNAME'>@YOUR-TWITTER-HANDLE</a></h3>
<div class='ts-fab-description'>
CEO &amp; Editor, <a href='http://www.YOUR-SITE.com/' target='_blank' title='http://www.YOUR-SITE.com'>YOUR-SITE</a></div>
</div>
<br/>
<div class='ts-fab-follow'>
<a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/YOUR-TWITTER-USERNAME'>Follow @YOUR-TWITTER-HANDLE</a></div>
<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>
   </div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div id='fb-root'>
</div>
<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;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
     fjs.parentNode.insertBefore(js, fjs);
     }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  
    <br/>
<div class='ts-fab-header'>
<h3>
<a href='http://www.facebook.com/YOUR-FACEBOOK-USERNAME'>YOUR-NAME</a></h3>
</div>
<div class='fb-subscribe' data-href='http://www.facebook.com/YOUR-FACEBOOK-USERNAME' data-layout='standard' data-show-faces='false' data-width='320'>
</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
<a href='https://plus.google.com/YOUR-GOOGLEPLUS-ID?rel=author'>+YOUR-GOOGLEPLUS-USERNAME</a></h3>
</div>
<!-- /.ts-fab-header -->
    <g:plus height='69' href='https://plus.google.com/YOUR-GOOGLEPLUS-ID' width='320'/>
   </div>
</div>
<div class='ts-fab-tab' id='ts-fab-latest-posts-below-16747'>
<div class='ts-fab-avatar'>
<img alt='ALT-TEXT' class='photo' height='80' src='LINK-TO-YOUR-PHOTO-HERE' width='80'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h3>
Latest posts by YOUR-NAME <span class='latest-see-all'>(<a href='http://www.YOUR-SITE.com/'>see all</a>)</span></h3>
</div>
<ul class='ts-fab-latest'>
<div id='hlrpsa'>
<script src='https://sites.google.com/site/iristipsblogger/file/recent-posts-with-snippets.js'>
</script>
<script>
var numposts = 3;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
</script>
<script src='http://YOUR-SITE.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
</script>
</div>
</ul>
</div>
</div>
</div>
</div> 
</b:if>
<!--Fanciest Author Box by Iris-Tips.blogspot.com-->

Chỉnh sửa: YOUR-BLOG-ID-HERE, YOUR-SITE, LINK-TO-YOUR-PHOTO-HERE, YOUR-FACEBOOK-USERNAME, YOUR-GOOGLEPLUS-ID, YOUR-GOOGLEPLUS-USERNAME, YOUR-TWITTER-USERNAME, YOUR-TWITTER-HANDLE cho phù hợp với blog của bạn

2Tiếp tục tìm đến thẻ </head> và chèn vào trước nó (nếu blog bạn có script này rồi thì bạn bỏ qua tiếp đến bước 3) 
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

3Lưu template của bạn lại. Vào tab Bố cục >> Thêm tiện ích HTML/JavaScrip và dán vào đoạn code sau 
 <!--Fanciest Author Box by Iris-Tips.blogspot.com-->
<script>jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});</script>

<style>.ts-fab-wrapper{margin:0 0 2em;clear:both}.ts-fab-wrapper a{text-decoration:none!important}.ts-fab-wrapper img{border:none!important}.ts-fab-list{overflow:hidden;padding:0 0 0 5px!important;margin:0!important}.ts-fab-list li{display:block;float:left;list-style:none;margin:0 5px 0 0!important}.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#e9e9e9;border:1px solid #e9e9e9;border-bottom:none!important;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none!important;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.ts-fab-list li a:hover{color:#333}.ts-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}.ts-fab-list li a{background-image:url('http://www.pagetrafficbuzz.com/wp-content/plugins/fanciest-author-box/images/fab_tab_icons.png')}.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-bio-link.active a{background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link a{background-position:8px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link.active a{background-position:-276px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-latest-posts-link a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-latest-posts-link.active a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-custom-link a,.ts-fab-list li.ts-fab-additional-link a{background-image:none!important}.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0!important}.ts-fab-tab{display:none;border:2px solid #333;padding:12px;background:#fff;min-height:80px}.ts-fab-tab:after{content:'';display:table;clear:both}.ts-fab-tab:first-child{display:block}.ts-fab-widget .ts-fab-tab{padding:8px}.ts-fab-avatar{display:block;float:left;width:64px;height:64px}.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}.ts-fab-avatar img{display:block;border:none!important}.ts-fab-text{margin-left:104px;line-height:1.5}.ts-fab-no-float .ts-fab-text{margin-left:0}.ts-fab-header{margin-bottom:10px}.ts-fab-text h4{clear:none;font-size:18px;line-height:1!important;font-weight:bold;margin:0 0 .2em!important;line-height:1;padding:0}.ts-fab-description{font-size:12px}.ts-fab-follow{margin-top:10px}.ts-fab-latest{margin:0!important;padding:0!important}.ts-fab-latest li{list-style:none!important;line-height:1.1;margin:0 0 .6em!important}.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}.ts-fab-wrapper iframe{margin-bottom:0!important}body.rtl .ts-fab-avatar{float:right}body.rtl .ts-fab-text{margin-left:0;margin-right:76px}body.rtl .ts-fab-list{padding:0 5px 0 0!important}body.rtl .ts-fab-list li{float:right;margin:0 0 0 5px!important}.fb_iframe_widget>span,.fb_iframe_widget>span iframe{min-height:64px!important}
</style>  
<!--Fanciest Author Box by Iris-Tips.blogspot.com-->

4Xong rồi đó ^^ từ bây giờ khung thông tin tác giả sẽ xuất hiện sau mỗi bài viết của bạn.

See the Pen JYYxYR by Iris Tips (@IrisTips) on CodePen.


Created by Iris Tips / crackroach
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Tạo khung Thông tin tác giả bài viết dạng tab cho Blogger"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)