Showing posts with label Thủ thuật Blogspot. Show all posts
Showing posts with label Thủ thuật Blogspot. Show all posts

Sunday, November 5, 2017

Tạo nút Lên đầu trang (Back to top) cho Blogspot

Tạo nút Lên đầu trang (Back to top) cho Blogspot

      Comment  
Button "Back to Top" sẽ rất hữu ích với blog của bạn. Thay vì phải rê chuôt nhiều lần, button này giúp người đọc dễ dàng di chuyền lên đầu trang một cách nhanh chóng. Nếu bạn vẫn chưa biết cách tạo button "Back to Top" cho Blogspot thì bài viết này là dành cho bạn.

Sunday, October 8, 2017

Nút bài viết ngẫu nhiên/Random Post cho Blogspot

Nút bài viết ngẫu nhiên/Random Post cho Blogspot

      Comment  
Hôm nay Star Tuấn sẽ hướng dẫn các bạn cách làm một thủ thuật đến Bài viết ngẫu nhiên/Random Post cho Blogspot. Đây là thủ thuật blog cực kỳ thú vị và mang đến nhiều trải nghiệm cho người dùng, giúp tăng lượt xem và tính tương tác của người dùng trên website. Cùng xem thủ thuật Nút bài viết ngẫu nhiên/Random Post cho Blogspot Blogger nào!

Saturday, October 7, 2017

Bài viết liên quan đẹp cho blogspot

Bài viết liên quan đẹp cho blogspot

      Comment  
Bài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Quảng cáo, Bài viết liên quan đẹp cho blogspot

Ở bài viết này mình phân bố bên trái là bài viết liên quan cho blogspot chuẩn HTML5, bên phải dành cho quảng cáo với kích thước chuẩn 300x250 hoặc 300x300 rất tiện lợi mà không làm mất thẩm mỹ của template của các bạn.


Tiến hành chèn code vào template:

Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> hoặc </style> Copy đoạn CSS bên dưới và Paste trên nó.
@media (max-width: 600px) {
    .post-ads {
        width: 100%;
    }
    .post-right {
        margin-left: 0 !important;
        width: 100%;
        float: left;
    }
}.post-right {
    margin: 0 0 0 310px;
    padding: 0 0 10px
}
.post-ads {
    float: left;
    margin: 0 10px 10px 0;
    position: relative
}
p.post-excerpt {
    margin: 0;
    padding: 10px;
    background-color: #ECF0F1;
    font-size: 17px;
    line-height: 1.5em;
    color: #09f
}#related-posts {
    margin: 10px 0
}
#related-posts ul li {
    list-style-type: none;
    color: #2980C1;
    font-size: 16px;
    line-height: 22px;
    max-height: 22px;
    overflow: hidden
}
#related-posts ul li a {
    color: #09f
}
#related-posts ul li a:hover {
    color: #F90053
}
#related-posts h4 {
    color: #f90053;
    border-bottom: 1px dashed #f90053;
    padding: 5px 0;
    font-size: 18px;
    margin-bottom: 5px
}
#related-posts ul {
    margin-left: 0;
padding: 0
}
#related-posts .fa {
    margin-right: 5px
}
#related-posts ul li a:before {
    content: "\f046";
    font-family: 'FontAwesome';
    color: #f90053;
    padding-right: 5px
}
#related-posts1 ul li:before {
    display: none;
}
Sau khi chèn đoạn CSS xong các bạn copy đoạn code javascript dưới đây vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
var titles = new Array();
var titlesNum = 0;
var urls = new Array();
var time = new Array();

function related_results_labels(c) {
    for (var b = 0; b < c.feed.entry.length; b++) {
        var d = c.feed.entry[b];
        titles[titlesNum] = d.title.$t;
        for (var a = 0; a < d.link.length; a++) {
            if (d.link[a].rel == "alternate") {
                urls[titlesNum] = d.link[a].href;
                time[titlesNum] = d.published.$t;
                titlesNum++;
                break
            }
        }
    }
}

function removeRelatedDuplicates() {
    var b = new Array(0);
    var c = new Array(0);
    e = new Array(0);
    for (var a = 0; a < urls.length; a++) {
        if (!contains(b, urls[a])) {
            b.length += 1;
            b[b.length - 1] = urls[a];
            c.length += 1;
            c[c.length - 1] = titles[a];
            e.length += 1;
            e[e.length - 1] = time[a]
        }
    }
    titles = c;
    urls = b;
    time = e
}

function contains(b, d) {
    for (var c = 0; c < b.length; c++) {
        if (b[c] == d) {
            return true
        }
    }
    return false
}

function printRelatedLabels(a) {
    var y = a.indexOf('?m=0');
    if (y != -1) {
        a = a.replace(/\?m=0/g, '')
    }
    for (var b = 0; b < urls.length; b++) {
        if (urls[b] == a) {
            urls.splice(b, 1);
            titles.splice(b, 1);
            time.splice(b, 1)
        }
    }
    var c = Math.floor((titles.length - 1) * Math.random());
    var b = 0;
    document.write("<ul>");
    if (titles.length == 0) {
        document.write("<li>Không có bài viết liên quan → </li>")
    } else {
        while (b < titles.length && b < 20 && b < maxresults) {
            if (y != -1) {
                urls[c] = urls[c] + '?m=0'
            }
            document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
            if (c < titles.length - 1) {
                c++
            } else {
                c = 0
            }
            b++
        }
    }
    document.write("</ul>");
    urls.splice(0, urls.length);
    titles.splice(0, titles.length)
};
//]]>
</script>

Chèn Bài viết liên quan vào nơi bạn muốn hiển thị trong blog

Copy đoạn code bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='qc-header-post'>
<div class='post-ads'>
Đặt quảng cáo của bạn ở đây
</div>
<div class='post-right'>
<p class='post-excerpt'>
<data:post.snippet/>
</p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h4>
<i class='fa fa-bullhorn'/>
Bài viết liên quan:
</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startuanit.net/" style="position: absolute;visibility: hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>

Tìm đoạn code tương tự dưới đây
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
Và chèn trước thẻ <data:post.body/> nếu bạn muốn tiện ích bài viết liên quan xuất hiện ở trên đầu bài viết hoặt chèn sau thẻ <data:post.body/> nếu bạn muốn nó xuất hiện ở cuối cùng bài viết.
Lưu ý:
  • Tìm kiếm với đoạn code <data:post.body/> sẽ cho kết quả chính xác nhất.
  • Đôi khi trong template blogspot của bạn có nhiều hơn 1 đoạn code này nên bạn chèn code trên lần lượt vào những đoạn code bạn tìm được, tới khi nào nó xuất hiện trong bài viết thì ngừng nhé.


Bước 4: Lưu lại và xem kết quả

Lưu ý:
  1. numPosts: 5: Số lượng bài viết liên quan
  2. "Đặt quảng cáo của bạn ở đây" Thay banner hoặc code hiển thị quảng cáo
Chúc các bạn thành công

Nguồn : http://www.startuanit.net/2016/06/bai-viet-lien-quan-dep-cho-blogspot.html

Sunday, July 30, 2017

Hộp đăng ký nhận bài viết qua Email cho Blogspot

Hộp đăng ký nhận bài viết qua Email cho Blogspot

      Comment  
 
Chào mọi người, Hôm nay mình sẽ share cho các bạn một tiện ích cho blogger/blogspot đó là Hộp đăng ký nhận bài viết qua Email. Code này do mình edit từ code trên twistblogger.com nhá.
Chức năng của nó là biểu mẫu cho phép mọi người đăng ký theo dõi các bài viết mới trên Blog.Việc tạo một Hộp đăng ký nhận bài viết qua Email (Subscribe by email) chuyên nghiệp và bắt mắt ắt hẳn sẽ giúp bạn tăng số lượng người dùng đăng kí.

Xem demo

Xem demo tại đây >>

Bắt đầu thủ thuật

Đầu tiên bạn vào Blogger => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head> và Lưu mẫu.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
Tiếp đến bạn vào Blogger => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu.
<style>#twist-blogger-sbox-v2{padding:0;padding-bottom:5px;font-family:Arial,Helvetica;display:block;margin:0;width:100%;border-radius:1px;border:0;background:#333}#twist-blogger-sbox-v2 .main_tagline{padding:0;line-height:2.5em;font-size:26px;margin:0;height:90px!important;overflow:hidden;font-weight:normal;color:#FFF;text-align:center;border:0;background-color:#03a9f5}#twist-blogger-sbox-v2 .email_icon{display:table;transition: all .5s;margin:-35px auto 0;font-size:25px;padding:12px;height:25px;width:25px;background-color:#03a9f5;color:#FFF;border-radius:50px;border:10px solid #fff;line-height:0}#twist-blogger-sbox-v2:hover .email_icon{transform: rotate(360deg);}#twist-blogger-sbox-v2 p{font-size:15px;color:#f9f9f9;text-shadow:0 -1px 0 #000;line-height:20px;padding:7px 10px 0;text-align:center;width:90%;margin:0 auto}#twist-blogger-sbox-v2 .rssform{padding:0;margin:0 auto;display:block}#twist-blogger-sbox-v2 .rssform input{padding:8px;margin:15px auto;font-size:13px;color:#000;text-align:center;display:block;font-family:Arial,Helvetica;font-weight:normal;width:90%;height:38px;text-transform:uppercase;outline:none!important;border:1px solid #fff;border-radius:1px;background-color:#fcfcfc;box-sizing:border-box!important}#twist-blogger-sbox-v2 .rssform .button:hover{opacity:.8}#twist-blogger-sbox-v2 .rssform .button{background:#03a9f5;border:0;color:white!important;margin-top:15px;outline:none!important;transition:all .3s ease-in-out;padding:5px 2px!important;float:none;text-transform:uppercase;font-size:15px;font-weight:normal;cursor:pointer}#twist-blogger-sbox-v2 .social_profiles{line-height:1.2em;display:table;float:none;margin:0 auto;text-align:center;min-width:157px;padding:5px 0;border:0}#twist-blogger-sbox-v2 .social_profiles a:hover{color:#FFF;background-color:#ff5959;border-color:#FFF}#twist-blogger-sbox-v2 .social_profiles a{color:#000;margin:0 5px;text-align:center;float:left;display:table;padding:4px 5px;background-color:#fff;border-radius:50px;border:2px solid #2d2d2d;width:15px;height:15px;line-height:0;font-size:16px;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}#twist-blogger-sbox-v2 form{margin-bottom:10px!important}</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline">
Đăng kí nhận tin</div>
<div class="email_icon">
<i class="fa fa-envelope"></i></div>
<p>Nhập Email để nhận bài viết mới nhất từ Star Tuấn Blog</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=StarTuan','popupwindow','scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Địa chỉ Email của bạn..." />
<input type="hidden" value="StarTuan" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input value="Đăng kí ngay" class="button" type="submit" />
</form>
</div>
</div>

Tùy chỉnh:

Thay #03a9f5 thành mã màu bạn thích.
Thay Nhập Email để nhận bài viết mới nhất từ Star Tuấn Blog thành nội dung bạn muốn.
Thay đổi địa chỉ StarTuan thành địa chỉ URL FeedBurner Blog của bạn.

Vậy là xong. Chúc các bạn thành công!

Sunday, June 4, 2017

Tiện ích Bình Luận Gần Đây Cho Blogspot

Tiện ích Bình Luận Gần Đây Cho Blogspot

      Comment  
Một thủ thuật nhỏ cho blogger, đây là thủ thuật tạo một khung hiển thị những bình luận mới nhất như bài trước của mình Tạo trang hiển thị bình luận mới cho Blogspot nhưng cái này tiện hơn là widget ngay trên blog của bạn luôn.


Bước tiến hành:

Bước 1 : Đăng Nhập Vào Blog -> Bố Cục -> Tạo một tiện ích HTML/Javascript tại nơi mà bạn muốn hiện.
Bước 2 : Dán đoạn code sau đây vào

<style type="text/css" scoped>.startuanit_recent li{display:block;clear:both;border: 1px solid #151515;overflow:hidden;list-style:none;max-height:150px;padding:3px!important;margin:3px 0;background:#151515}ul.startuanit_recent{max-height:320px;overflow:auto;list-style:none;margin:0;padding:0}.startuanit_recent li:hover{background:#111;border:1px solid #00BFF3!important}.avatarImage{padding:3px 10px 0 3px;float:left;position:relative;overflow:hidden}.startuanit_recent li span{margin-top:7px;color:#aaa;display:block;font-size:12px;line-height:1.4}</style>
<script type="text/javascript">var numComments=20,showAvatar=true,avatarSize=35,roundAvatar=false,characters=40,defaultAvatar="http://img1.blogblog.com/img/b16-rounded.gif",hideCredits=true;maxfeeds=50,adminBlog="";</script>
<script type="text/javascript">/*<![CDATA[*/function hp_d11(l){var j="",g=new Array(),k="",h=0;for(i=0;i<l.length;i++){c=l.charCodeAt(i);if(c<128){c=c^2}k+=String.fromCharCode(c);if(k.length>80){g[h++]=k;k=""}}j=g.join("")+k;return j}var numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://www.gravatar.com/avatar/?d=mm",moreLinktext=moreLinktext||" More &raquo;",showAvatar=typeof showAvatar==="undefined"?true:showAvatar,showMorelink=typeof showMorelink==="undefined"?false:showMorelink,roundAvatar=typeof roundAvatar==="undefined"?true:roundAvatar,hideCredits=hideCredits||false,maxfeeds=maxfeeds||50,adminBlog=adminBlog||"Kang Asep";function startuanit_recent(z){var w;w='<ul class="startuanit_recent">';ntotal=0;for(var x=0;x<maxfeeds;x++){var y,t,v,a;if(x==z.feed.entry.length){break}if(ntotal>=numComments){break}var l=z.feed.entry[x];for(var A=0;A<l.link.length;A++){if(l.link[A].rel=="alternate"){y=l.link[A].href}}for(var r=0;r<l.author.length;r++){t=l.author[r].name.$t;v=l.author[r].gd$image.src}if(t!=adminBlog&&ntotal<numComments){ntotal++;w+='<a href="'+y+'"><div>';w+="<li>";if(v.indexOf("/s1600/")!=-1){v=v.replace("/s1600/","/s"+avatarSize+"-c/")}else{if(v.indexOf("/s220/")!=-1){v=v.replace("/s220/","/s"+avatarSize+"-c/")}else{if(v.indexOf("/s512-c/")!=-1&&v.indexOf("http:")!=0){v="http:"+v.replace("/s512-c/","/s"+avatarSize+"-c/")}else{if(v.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){v=defaultAvatar+"&s="+avatarSize}else{v=defaultAvatar}}else{v=v}}}}if(showAvatar==true){if(roundAvatar==true){a="avatarRound"}else{a=""}w+='<div class="avatarImage '+a+'"><img class="'+a+'" src="'+v+'" alt="'+t+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}w+="<b>"+t+"</b>";var s=l.content.$t;var B=s.replace(/(<([^>]+)>)/gi,"");if(B!=""&&B.length>characters){B=B.substring(0,characters);B+="&hellip;";if(showMorelink==true){B+=""+moreLinktext+""}}else{B=B}w+="<span>"+B+"</span>";w+="</li></div></a>"}}w+="</ul>";var u="";if(hideCredits==true){u="display:none;"}w+='<span style="font-size:8px;display:block;text-align:right;display:none"><a href="http://startuanit.net" target="_blank">StarTuanIT</a><br><a href="http://www.startuanit.net/2017/06/tien-ich-binh-luan-moi-nhat-cho-blogspot.html" target="_blank">Get this widget</a></span>';document.write(w)};/*]]>*/</script>
<script type="text/javascript" src="http://diachi.blogspot.com/feeds/comments/default?alt=json&amp;callback=startuanit_recent&amp;&amp;max-results=50"></script>
<span style="font-size:8px;display:block;text-align:right;display:none;"><a href="http://startuanit.net" target="_blank">StarTuanIT</a><br /><a href="http://www.startuanit.net/2017/06/tien-ich-binh-luan-moi-nhat-cho-blogspot.html" target="_blank">Get this widget</a></span>
<a href="http://diachi.blogspot.com/p/comments.html" style="
"><div style="text-align:center;border: 1px solid #00BFF3;background: #222;border-left:5px solid #00BFF3;border-right:5px solid #00BFF3;margin-top: 5px;padding:3px;color: #ddd;">Xem thêm bình luận</div></a>
Thay thế
  • http://diachi.blogspot.com thành địa chỉ blog của bạn
  • http://diachi.blogspot.com/p/comments.html thành url trang bình luận của bạn tạo ở đây
Bước 4: Bấm Lưu
Thế là xong, Chúc các bạn thành công!

Sunday, May 21, 2017

Tiện ích đăng ký theo dõi đẹp cho Blogspot

Tiện ích đăng ký theo dõi đẹp cho Blogspot

      Comment  
Chào các bạn, để cho người đọc tiện theo dõi các bài viết mới của bạn thì khung theo dõi có tích hợp mạng xã hội là một lựa chọn rất tốt. Vì thể trong bài viết này mình xin hướng dẫn các bạn tạo "Tiện ích theo dõi bài viết đẹp cho Blogspot". Hy vọng nó mang lại nhiều hữu ích cho website của bạn!

Hình Minh Họa:

 

Code:

<div class="bsd-container">
<div class="sidebar_about_author">
<div class='inner_wrapper'>
<div class='bsdbox-img'>
<img alt="StarTuan" class="img-responsive" height="auto" src="//3.bp.blogspot.com/-7wKGgvEtb18/Vv__yOuo8cI/AAAAAAAAF0Q/o4Ve_2_7YkYeGBOqe-ZvR0cOwG-YVEbeg/s300/subscribe%2Bto%2Bbloggersstand%2Bfeed.jpg" title="Star Tuấn Blog" width="300" />
<div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=1312517308711429360' rel='nofollow' target='_blank' title='Đăng Ký Ngay +'><i class='fa fa-laptop'></i> Đăng Ký Ngay</a></span></div>
</div>
</div>
<div class='bsdbox-info'>
<h4><span>Star Tuấn Blog</span></h4>
<p>Thủ Thuật - Ảnh Bìa Chất</p>
</div>
<div class='bsdbox-wrap'>
<ul class='bsdextend'>
<li class='bsdbox-icon facebook'>
<a href='https://www.facebook.com/Admin.StarTuan' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook fa-fw'></i>Theo Dõi</a>
</li>
<li class='bsdbox-icon twitter'>
<a href='https://twitter.com/StarTuanIt' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter fa-fw'></i>Theo Dõi</a>
</li>
<li class='bsdbox-icon circle'>
<a href='https://plus.google.com/u/0/117714201034435404331' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus fa-fw'></i>Theo Dõi</a>
</li>
</ul>
</div>
</div>
</div>
<style>.bsd-container{position:relative;display:block;background:#fff;padding:10px;border:1px solid #eee;overflow:hidden}.bsdbox-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:110%}.bsdbox-img{position:relative;max-height:135px;overflow:hidden}.bsdbox-img img{max-width:100%;width:100%;transition:all .6s}.bsdbox-img:hover img{transform:scale(1.2) rotate(-9deg)}.bsdbox-img:before{content:'';background:rgba(0,0,0,0.2);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}.bsdbox-img:hover:before{background:rgba(0,0,0,0.5)}.joinfloat-img{width:56%;position:absolute;top:36%;bottom:36%;left:22.6%;z-index:4}.bsdbox-float{text-align:center;display:table;width:100%;height:100%}.bsdbox-float a{background:transparent;color:#00bcd4;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:1px solid #00bcd4;border-radius:4px;transition:all .3s}.bsdbox-float:hover a{background:#00bcd4;color:#fefefe;border-color:transparent}.bsdbox-float a i{font-weight:normal;margin:0 6px 0 0}.bsdbox-wrap{display:block;margin:14px auto;position:relative}.bsdbox-wrap .bsdextend{width:100%;display:block}.bsdextend{text-align:center;font-size:17px}.bsdextend .bsdbox-icon{display:inline-block;border:0;margin:0;padding:0;width:32%}.bsdextend .bsdbox-icon a{background:#768187;display:inline-block;font-weight:410;color:#fefefe;padding:0 12px;line-height:32px;border-radius:4px;font-size:11px;width:100%}.bsdextend .bsdbox-icon i{font-family:fontawesome;margin:0 4px 0 0}.bsdbox-icon.facebook a{background:#3b5998}.bsdbox-icon.twitter a{background:#19bfe5}.bsdbox-icon.circle a{background:#d64136}.bsdbox-icon.facebook a:hover,.bsdbox-icon.twitter a:hover,.bsdbox-icon.circle a:hover{background:#415471}.extender .bsdbox-icon:hover a,.extender .bsdbox-icon a:hover{color:#fefefe}.bsdbox-info{margin:11px 0 0 0;font-size:12px;text-align:center}.bsdbox-info p{margin:6px 0}.bsdbox-info h4{position:relative;margin-bottom:11px;font-size:15px;text-transform:uppercase;color:#00bcd4;font-weight:600}.bsdbox-info h4 span{position:relative;display:inline-block;padding:0 11px;margin:0 auto}.bsdbox-info h4:before,.bsdbox-info h4:after{position:absolute;top:52%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.07)}.bsdbox-info h4:before{margin-left:-50%;text-align:right}</style>

Thêm tiện ích vào blogspot:

Truy cập vào Blogger -> thêm tiện ích -> paste đoạn code sau -> Lưu (Bạn hãy chèn nó vào vị trí thích hợp nhé, thông thường là ở phía sidebar)
Tùy chỉnh
1312517308711429360 thành ID của blogger bạn
màu xanh thành nội dung bạn muốn
màu đỏ thành địa chỉ facebook, twitter và google plus của bạn.
Chúc các bạn thành công!

Code by bloggersstand.com

Sunday, April 16, 2017

Tạo trang hiển thị bình luận mới cho Blogspot

Tạo trang hiển thị bình luận mới cho Blogspot

      Comment  
Chào các bạn! Như thường lệ mỗi ngày chủ nhật cuối tuần mình dành ra ít thời gian để đăng bài. Bài này mình hướng dẫn các bạn Tạo trang bình luận mới (Recent comments) cho Blogspot để tạo ra một trang mà bạn theo dõi được nhưng bình luận mới, sẽ phản ứng kịp thời với những spammer hay trả lời nhanh nhất cho những câu hỏi của các độc giả đặt ra trong các chủ đề của bạn.
Live Demo

Đọc thêm

Bắt đầu thủ thuật

Đầu tiên bạn vào Blogger => Trang => Trang mới


Sau đó bạn đặt tên cho trang là Bình luận hay Comment gì đó tùy ý. Chuyển qua tab HTML rồi dán đoạn code dưới đây và bấm Xuất bản


<style scoped="scoped">.post-body ul li:before{display:none}DIV.cm-content{background:#fafafa;color:#000;padding:5px}.thongtintg{width:100px;height:40px;loat:left}.noidungcm{width:400px;height:40px;loat:left}.tentacgia{background:#00bff3;padding:3px}.tentacgia a{color:#fff;font-weight:bold}.tentacbaiviet a{color:#3bb9ff}.cm-outer{margin:0 auto;padding:0;font:normal normal 11px/normal Arial,Sans-Serif;border-top:0;background:#fafafa}.cm-text{font-size:13px}.cm-outer li{margin:0;padding:7px 10px 12px;list-style:none;clear:both;border-top:1px solid #fafafa}.cm-outer .cm-header{margin:0 0 5px;background:#f4f4f4;color:#444;padding:5px}.cm-outer .cm-content{overflow:hidden}.cm-outer img{display:block;float:right;margin:2px 10px 2px 0;border:1px solid black;background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;overflow:hidden}ul.cm-outer{padding:10px 0!important}</style><br />
<div id="comments-container">
Loading…</div>
<script>
var cm_config = {
    home_page: "http://www.startuanit.net/",
    max_result: 50,
    t_w: 32,
    t_h: 32,
    summary: 9999,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: "Nhận xét mới!",
    interval: 30000,
    alert: true
};
</script><br />
<script src="https://rawgit.com/tuan2308/js/master/cmt.js" type="text/javascript"></script>

Tùy chỉnh

Thay thế những đoạn được bôi màu cho phù hợp với bạn nhé

  • home_page: "http://www.startuanit.net/": Địa chỉ của blog bạn
  • max_result: 50 : hiện số bình luận tối đa
  • t_w: 32 : Chiều rộng avatar
  • t_h: 32 : Chiều dài avatar
  • new_tab_link: true  : Mở liên kết trong tab mới (không muốn thì thay thành false)
  • new_cm: "Nhận xét mới!" : Chữ hiện thông báo

Thật đơn giản phải không nào? Chúc các bạn thành công!

Sunday, March 26, 2017

Hướng dẫn sử dụng template Star Tuấn đang dùng

Hướng dẫn sử dụng template Star Tuấn đang dùng

      Comment  
Chào các bạn ở bài viết trước đây mình đã Share template blog mà mình đang dùng và được nhiều bạn quan tâm và chú ý nhưng cũng nhiều bạn chưa biết sử dụng, tùy biến sao nên hôm nay mình sẽ hướng dẫn chi tiết các bạn sử dụng và mình sẽ update nhẹ cho template này.

Download:

Download Template Download Phiên bản cũ

Hướng dẫn tùy chỉnh template:

Upload template

B1: Các bạn truy cập vào link dow ở trên và copy toàn bộ code
B2: Các bạn truy cập vào Blogger > Chủ đề > Chỉnh sửa HTML và thay thế toàn bộ bằng code copy ở B1.
B3: Bấm lưu chủ đề

Thiết lập menu (Chỉ áp dụng cho phiên bản mới)

Hình ảnh chỉ mang tính chất minh họa
Đầu tiên vào Bảng điều khiển > Bố cục > Chỉnh sửa Main Menu >  Định cấu hình Danh sách Liên kết Trên phần  "Tên trang web mới", thêm tiêu đề và phụ đề của bạn như sau: 
Menu Tiêu đề [Subtitle]
Và trên "URL trang web mới" thêm địa chỉ URL của bạn.
Ví dụ: 
Tips [Thủ thuật]   
Để thêm một menu thả xuống vào phần  "Tên Trang web Mới" thêm 
_Submenu

Bố cục trang chủ

Hình ảnh chỉ mang tính chất minh họa

Các loại bố cục: slider, fbig1 , fbig2 , list , column1 , column2 , carousel , videos , gallery
Vào Bố cục > Home layout > Thêm tiện ích > HTML/JavaScript thêm
[Nhãn của bạn ở đây][Bố cục][Mã màu của bạn]

Để thêm Bố cục ở Trang chủ chỉ cần làm theo cách này và thay đổi Bố cục và Nhãn của bạn và Màu bạn muốn. Bạn có thể lấy mã màu tại đây.
Ví dụ: 
[Thủ thuật][fbig2][#fc0000]

Tiện ích (widget)

Hình ảnh chỉ mang tính chất minh họa

Bài viết ngẫu nhiên
randomposts
Bài viết mới
recentposts
Bình luận mới
recentcomments

Mạng xã hội
Bố cục > Chỉnh sửa mạng xã hội
Trên "Tên Trang web Mới" thêm Tên mạng xã hội [Counter] . Và trên "URL Trang web Mới" thêm Url mạng xã hội của bạn.
Ví dụ:
  facebook [2.1k]
  twitter [1k]
  gplus [250]
  rss [860]
  youtube [4,5k]
  dribble [10,2]
  instagram [502]
  Pinterest [120]

Sunday, February 26, 2017

Tạo Sitemap đẹp cho blogspot

Tạo Sitemap đẹp cho blogspot

      Comment  
Bài viết hướng dẫn các bạn tạo sitemap cho blogspot. Lưu ý là sitemap này khác với sitemap mà bạn tạo để gửi trên Google master tool nhé.

Đây là dạng sơ đồ web/blog động nó cập nhật bài viết liên tục trên blog của bạn. Nó giúp cho người đọc có một cái nhìn tổng thể về trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm.
Live Demo: Sitemap

Cách tiến hành:

- Đầu tiên bạn vào Blog => Trang => Trang mới => Chọn HTML và dán đoạn mã code dưới đây vào.
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
    var tabbedTOC = {
        blogUrl: "http://www.startuanit.net/", // Blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: false, // `true` to show the post date
        showSummaries: false, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Thumbnail size
        noThumb: "http://lh3.ggpht.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        newTabLink: true, // Open link in new window?
        maxResults: 99999, // Maximum post results
        preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
        sortAlphabetically: true, // `false` to sort posts by published date
        showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
        newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
    };
</script>
<link type='text/css' rel='stylesheet' href='https://rawgit.com/tuan2308/css/master/tabbed-toc.css'></link>
<script src="https://rawgit.com/tuan2308/js/master/tabbed-toc.js" type="text/javascript"></script>

- Thay dòng: http://www.startuanit.net/thành địa chỉ blogspot của bạn.
- Cuối cùng là bấm chọn xuất bản và chúc bạn thành công.

Share: http://thuthuat30s.blogspot.com/

Sunday, October 9, 2016

Tạo widget cố định (Sticky widget) cho Blogspot

Tạo widget cố định (Sticky widget) cho Blogspot

      Comment  
Demo (đang cập nhật)
Thông thường khi bạn xem một bài viết trên blog và kéo xuống dưới thì những widget ở trên sẽ bị ẩn dần đi. Tuy nhiên bạn cũng có thể giữ cố định một hay nhiều widget khi người đọc kéo xuống dưới để tăng sự tương tác với blog.

Việc này có thể mang đến cho bạn một số lợi ích như:
  1. Cố định widget Bài đăng phổ biến để tăng lượt view và thời gian xem blog. Điều này tốt cho SEO.
  2. Cố định widget Like fanpage hoặc Subscribe by email để tăng lượt theo dõi blog qua email hoặc các mạng xã hội.
  3. Một chú ý là bạn không nên đặt quảng cáo của Google Adsense hoặc quảng cáo nào khác cố định trên blog, bạn có thể bị các trang quảng cáo phạt vì việc này.
OK. Giờ chúng ta bắt tay vào làm thôi, để thực hiện điều này bạn chỉ cần thêm đoạn code sau vào trước thẻ </body> trong chỉnh sửa mẫu là được. 
<script type='text/javascript'>
//<![CDATA[
(function(b){var c={topSpacing:0,bottomSpacing:0,className:"is-sticky",center:false},f=b(window),e=b(document),d=[],h=f.height(),a=function(){var j=f.scrollTop(),q=e.height(),p=q-h,l=(j>p)?p-j:0;for(var m=0;m<d.length;m++){var r=d[m],k=r.stickyWrapper.offset().top,n=k-r.topSpacing-l;if(j<=n){if(r.currentTop!==null){r.stickyElement.css("position","").css("top","").removeClass(r.className);r.currentTop=null}}else{var o=q-r.elementHeight-r.topSpacing-r.bottomSpacing-j-l;if(o<0){o=o+r.topSpacing}else{o=r.topSpacing}if(r.currentTop!=o){r.stickyElement.css("position","fixed").css("top",o).addClass(r.className);r.currentTop=o}}}},g=function(){h=f.height()};if(window.addEventListener){window.addEventListener("scroll",a,false);window.addEventListener("resize",g,false)}else{if(window.attachEvent){window.attachEvent("onscroll",a);window.attachEvent("onresize",g)}}b.fn.sticky=function(i){var j=b.extend(c,i);return this.each(function(){var l=b(this);if(j.center){var k="margin-left:auto;margin-right:auto;"}stickyId=l.attr("id");l.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+k+'"></div>').css("width",l.width());var m=l.outerHeight(),n=l.parent();n.css("width",l.outerWidth()).css("height",m).css("clear",l.css("clear"));d.push({topSpacing:j.topSpacing,bottomSpacing:j.bottomSpacing,stickyElement:l,currentTop:null,stickyWrapper:n,elementHeight:m,className:j.className})})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#WIDGET_ID").sticky({topSpacing:0,bottomSpacing:500});
   });
</script>
Tùy chỉnh
Thay thế
500 là điểm dừng từ chân trang đến widget cố định đơn vị là pixel
WIDGET_ID thành tiện ích mà bạn muốn cố định
Để biết được WIDET ID bạn vào Bố cục nhấp vào chỉnh sửa Widget muốn lấy ID. Khi Popup hiện lên bạn sẽ thấy ở cuối thanh địa chỉ URL có dạng như sau widgetId = và đến ID Widget.

Saturday, September 3, 2016

Tiện ích Facebook Messenger Chatbox Cho Blogspot

Tiện ích Facebook Messenger Chatbox Cho Blogspot

      Comment  
Thêm tiện ích Facebook Messenger Chatbox Cho Blogspot - Blogger

Giới thiệu:

Đây là code  Facebook Messenger Chatbox dành cho Blogger do mình rút code ra từ plugin của Wordpress. Giúp liên hệ giữa khách xem blog và admin website rất tiện lợi. :)

Demo:


Xem thêm:Code Tạo hộp chatbox hỗ trợ online cho fanpage facebook

Code:

<!-- StarTuanIt.Net Facebook Messenger  -->
<div class="drag-wrapper drag-wrapper-right">
<div data-drag="data-drag" class="thing">
<div class="circle facebook-messenger-avatar facebook-messenger-avatar-type0">
<img class="facebook-messenger-avatar" src="https://rawgit.com/tuan2308/fm/master/facebook-messenger.svg" />
</div>
<div class="content">
<div class="inside">
<div class="fb-page" data-width="310" data-height="310" data-href="https://www.facebook.com/Admin.StarTuan" data-tabs="messages" data-small-header="true" data-hide-cover="false" data-show-facepile="true" data-adapt-container-width="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/Admin.StarTuan"><a href="https://www.facebook.com/ninjateam.org">Loading...</a></blockquote></div></div>
</div>
</div>
</div>
<div class="magnet-zone">
<div class="magnet"></div>
</div>
</div>
<link type='text/css' rel='stylesheet' href='https://rawgit.com/tuan2308/css/master/style.css' />
<script type='text/javascript' src='https://rawgit.com/tuan2308/js/master/jquery.event.move.js'></script>
<script type='text/javascript' src='https://rawgit.com/tuan2308/js/master//rebound.min.js'></script>
<script type='text/javascript' src='https://rawgit.com/tuan2308/js/master/index.js'></script>
<!-- StarTuanIt.Net Facebook Messenger  -->

Hướng dẫn thêm vào blog:

  1. Copy toàn bộ code trên
  2. Vào chỉnh sửa mẫu chèn toàn bộ code trên thẻ </body>
  3. Thay Admin.StarTuan/ thành địa chỉ fanpage của bạn
  4. Lưu mẫu và xem kết quả

Lưu ý:

Nếu như click vào icon Messenger mà không hiện lên là do blog bạn chưa thêm jQuery
Chèn đoạn code sau trước thẻ </head> trong html:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>
Nếu Fanpage tin nhắn không hiện là do chưa thêm Fb root
Chèn đoạn code sau trước thẻ </body> trong html:
<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 = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.7&amp;appId=802908549822264";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Sunday, July 17, 2016

Thêm hiệu ứng lazyload ảnh vào blogspot

Thêm hiệu ứng lazyload ảnh vào blogspot

      Comment  
Xin chào các bạn. Hôm nay mình muốn giới thiệu tới các bạn thủ thuật làm thế nào để tạo hiệu ứng Lazy Load cho blogspot. Nếu blogspot của bạn quá "cồng kềnh" với trang chủ hay trong mỗi bài viết thì thủ thuật này sẽ cứu được blog của bạn trong mắt khách hàng và các công cụ tìm kiếm đấy. Ngay bây giờ hãy cùng Star Tuấn Blog tạo hiệu ứng Lazy Load cho blog của bạn nhé. Cũng khá đơn giản thôi !

Demo

1. Hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
// Lazy Load StarTuanIt.Net
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://lh5.googleusercontent.com/-NkR_NSweopU/V8OktAG8VxI/AAAAAAAAD2c/xPXdM_PM-OA9VBqDK7pf0qgV1FMHJpsqQCK4B/s1600/startuan.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Nếu blog bạn chưa thêm jquery thì thêm đoạn code sau dưới thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'>
</script>
2. Bước cuối cùng là lưu lại và tận hưởng thành quả của bạn vừa làm.

Hãy để lại comment nếu như bạn có bất kỳ khó khăn hay thắc mắc nào khi làm thủ thuật này với blog của bạn nhé. Nếu bạn thấy các bài viết trên Star Tuấn Blog hay và có giá trị bạn hãy like và subcribe email để nhận tin tức mới nhất từ Star Tuấn Blog nha bạn. Cảm ơn các bạn rất nhiều !

Tuesday, April 5, 2016

Sunday, April 3, 2016

Tạo nút lên, xuống bên phải Sidebar cho Blogger

Tạo nút lên, xuống bên phải Sidebar cho Blogger

      Comment  

Tạo nút lên, xuống bên phải thanh trượt cho Blogger

Tạo Nút back to top và back to bottom đơn giản không hiệu ứng cho blogspot

Saturday, April 2, 2016

Wednesday, February 24, 2016

Friday, February 5, 2016

Saturday, January 30, 2016

Font Awesome Icons và cách sử dụng

Font Awesome Icons và cách sử dụng

      Comment  
Hôm nay,Star Tuấn xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Thời gian này Tuấn đang thay áo có Blog Star Tuấn nên cũng tìm hiểu thêm một số thủ thuật để làm đẹp cho blog. Tình cờ tuấn đọc được bài viết về Font Awesome icons thấy khá là có ích nên chia sẻ cùng các bạn luôn tuấn hy vọng sẽ có ích cho các bạn.

Font Awesome Icons và cách sử dụng


Font Awesome theo tuấn thì vô cùng thú vị và hữu ích, nó là một công cụ cần thiết cho các coder sự tiện dụng dễ dàng chỉnh sửa mà lại thay thế cho rất nhiều icon bằng hình ảnh. Bài viết này được Star Tuấn blog chỉnh sửa và rút gọn từ nguồn chính nếu bạn muốn tìm hiểu kỹ hơn thì có thể xem thêm tại: http://fortawesome.github.io/Font-Awesome, bạn có thể xem thêm ở trang này. Bây giờ các bạn cùng mình bắt tay vào thực hiện nhé.

Trước tiên là cài đặt font cho Blogspot

Việc đầu tiên các bạn hãy đặt đoạn code sau dưới thẻ </head> :
<link rel ="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
Nếu bạn không muốn có sự cố gì hãy tải lại file css về và up lên host của chính bạn cho dễ quản lý nhé.

Cách sử dụng font Awesome

Để sử dụng font Awesome thì việc đầu tiên là bạn phải năm đc tên icon mà mình muốn thêm vào. Để biết được điều này bạn có thể vào ĐÂY để tham khảo hoặc  tìm kiếm ngay trong bài viết này.
Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau 
<i class="fa fa-download"></i> Bạn sẽ được kết như hình phía trước code

Tiếp theo là phần biến hóa của font Awesome

1. Thay đổi kích thước icon

Ngoài ra các bạn cũng có thể tuỳ biến kích thước bằng các đặt các ký hiệu sau đằng sau tên của icon fa-lg (tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:
<i class="fa fa-download fa-lg"></i> fa-lg
<i class="fa fa-download fa-2x"></i> fa-2x
<i class="fa fa-download fa-3x"></i> fa-3x
<i class="fa fa-download fa-4x"></i> fa-4x
<i class="fa fa-download fa-5x"></i> fa-5x
Và kết quả chúng ta thu được:
fa-lg fa-2x fa-3x fa-4x fa-5x

2. Trình bày dạng danh sách

Các bạn có thể trình dưới dạng danh sách bằng cách:
  • List icons
  • can be used
  • as bullets
  • in lists
Bằng mã code sau:<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

3. Sử dụng icon động

Icon động thú vị phải không các bạn? Icon động theo tuấn sẽ giúp blog thêm bắt mắt hơn tạo nét riêng cho blog của bạn sử dụng làm các nút loding hay một số mũi tên v.v... nhẹ nhàng và tiện lợi không lo die link như cách sử dụng hình ảnh. Vậy thì làm thế nào để tạo icon động đây, các bạn chỉ việc thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:

Để có icon như trên Star Tuấn Blog's sử dụng đoạn code sau:<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
<i class="fa fa-refresh fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

4. Xếp chồng các icon lên nhau

Xoay đã rất thú vị rồi nhưng Font Awesome còn có thể làm các icon xếp chồng lên nhau bạn tin không? Không tin thì xem bên dưới nhé:
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
Sử dụng code:<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera

5. Xoay icon

Các bạn cũng có thể xoay icon cố định ở những góc độ mình thích hãy tham khảo đoạn code bên dưới nhé:
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Bạn có thể tham khảo đoạn code sau <i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Và cuối cùng là danh sách các icon dành cho bạn

Và đây là danh sách icon cho các bạn đỡ mất công tìm kiếm hiện tại có 479 icon. Star Tuấn Blog sẽ cập nhập thêm:
fa-glass "\f000"
fa-music "\f001"
fa-search "\f002"
fa-envelope-o "\f003"
fa-heart "\f004"
fa-star "\f005"
fa-star-o "\f006"
fa-user "\f007"
fa-film "\f008"
fa-th-large "\f009"
fa-th "\f00a"
fa-th-list "\f00b"
fa-check "\f00c"
fa-times "\f00d"
fa-search-plus "\f00e"
fa-search-minus "\f010"
fa-power-off "\f011"
fa-signal "\f012"
fa-cog "\f013"
fa-trash-o "\f014"
fa-home "\f015"
fa-file-o "\f016"
fa-clock-o "\f017"
fa-road "\f018"
fa-download "\f019"
fa-arrow-circle-o-down "\f01a"
fa-arrow-circle-o-up "\f01b"
fa-inbox "\f01c"
fa-play-circle-o "\f01d"
fa-repeat "\f01e"
fa-refresh "\f021"
fa-list-alt "\f022"
fa-lock "\f023"
fa-flag "\f024"
fa-headphones "\f025"
fa-volume-off "\f026"
fa-volume-down "\f027"
fa-volume-up "\f028"
fa-qrcode "\f029"
fa-barcode "\f02a"
fa-tag "\f02b"
fa-tags "\f02c"
fa-book "\f02d"
fa-bookmark "\f02e"
fa-print "\f02f"
fa-camera "\f030"
fa-font "\f031"
fa-bold "\f032"
fa-italic "\f033"
fa-text-height "\f034"
fa-text-width "\f035"
fa-align-left "\f036"
fa-align-center "\f037"
fa-align-right "\f038"
fa-align-justify "\f039"
fa-list "\f03a"
fa-outdent "\f03b"
fa-indent "\f03c"
fa-video-camera "\f03d"
fa-picture-o "\f03e"
fa-pencil "\f040"
fa-map-marker "\f041"
fa-adjust "\f042"
fa-tint "\f043"
fa-pencil-square-o "\f044"
fa-share-square-o "\f045"
fa-check-square-o "\f046"
fa-arrows "\f047"
fa-step-backward "\f048"
fa-fast-backward "\f049"
fa-backward "\f04a"
fa-play "\f04b"
fa-pause "\f04c"
fa-stop "\f04d"
fa-forward "\f04e"
fa-fast-forward "\f050"
fa-step-forward "\f051"
fa-eject "\f052"
fa-chevron-left "\f053"
fa-chevron-right "\f054"
fa-plus-circle "\f055"
fa-minus-circle "\f056"
fa-times-circle "\f057"
fa-check-circle "\f058"
fa-question-circle "\f059"
fa-info-circle "\f05a"
fa-crosshairs "\f05b"
fa-times-circle-o "\f05c"
fa-check-circle-o "\f05d"
fa-ban "\f05e"
fa-arrow-left "\f060"
fa-arrow-right "\f061"
fa-arrow-up "\f062"
fa-arrow-down "\f063"
fa-share "\f064"
fa-expand "\f065"
fa-compress "\f066"
fa-plus "\f067"
fa-minus "\f068"
fa-asterisk "\f069"
fa-exclamation-circle "\f06a"
fa-gift "\f06b"
fa-leaf "\f06c"
fa-fire "\f06d"
fa-eye "\f06e"
fa-eye-slash "\f070"
fa-exclamation-triangle "\f071"
fa-plane "\f072"
fa-calendar "\f073"
fa-random "\f074"
fa-comment "\f075"
fa-magnet "\f076"
fa-chevron-up "\f077"
fa-chevron-down "\f078"
fa-retweet "\f079"
fa-shopping-cart "\f07a"
fa-folder "\f07b"
fa-folder-open "\f07c"
fa-arrows-v "\f07d"
fa-arrows-h "\f07e"
fa-bar-chart "\f080"
fa-twitter-square "\f081"
fa-facebook-square "\f082"
fa-camera-retro "\f083"
fa-key "\f084"
fa-cogs "\f085"
fa-comments "\f086"
fa-thumbs-o-up "\f087"
fa-thumbs-o-down "\f088"
fa-star-half "\f089"
fa-heart-o "\f08a"
fa-sign-out "\f08b"
fa-linkedin-square "\f08c"
fa-thumb-tack "\f08d"
fa-external-link "\f08e"
fa-sign-in "\f090"
fa-trophy "\f091"
fa-github-square "\f092"
fa-upload "\f093"
fa-lemon-o "\f094"
fa-phone "\f095"
fa-square-o "\f096"
fa-bookmark-o "\f097"
fa-phone-square "\f098"
fa-twitter "\f099"
fa-facebook "\f09a"
fa-github "\f09b"
fa-unlock "\f09c"
fa-credit-card "\f09d"
fa-rss "\f09e"
fa-hdd-o "\f0a0"
fa-bullhorn "\f0a1"
fa-bell "\f0f3"
fa-certificate "\f0a3"
fa-hand-o-right "\f0a4"
fa-hand-o-left "\f0a5"
fa-hand-o-up "\f0a6"
fa-hand-o-down "\f0a7"
fa-arrow-circle-left "\f0a8"
fa-arrow-circle-right "\f0a9"
fa-arrow-circle-up "\f0aa"
fa-arrow-circle-down "\f0ab"
fa-globe "\f0ac"
fa-wrench "\f0ad"
fa-tasks "\f0ae"
fa-filter "\f0b0"
fa-briefcase "\f0b1"
fa-arrows-alt "\f0b2"
fa-users "\f0c0"
fa-link "\f0c1"
fa-cloud "\f0c2"
fa-flask "\f0c3"
fa-scissors "\f0c4"
fa-files-o "\f0c5"
fa-paperclip "\f0c6"
fa-floppy-o "\f0c7"
fa-square "\f0c8"
fa-bars "\f0c9"
fa-list-ul "\f0ca"
fa-list-ol "\f0cb"
fa-strikethrough "\f0cc"
fa-underline "\f0cd"
fa-table "\f0ce"
fa-magic "\f0d0"
fa-truck "\f0d1"
fa-pinterest "\f0d2"
fa-pinterest-square "\f0d3"
fa-google-plus-square "\f0d4"
fa-google-plus "\f0d5"
fa-money "\f0d6"
fa-caret-down "\f0d7"
fa-caret-up "\f0d8"
fa-caret-left "\f0d9"
fa-caret-right "\f0da"
fa-columns "\f0db"
fa-sort "\f0dc"
fa-sort-desc "\f0dd"
fa-sort-asc "\f0de"
fa-envelope "\f0e0"
fa-linkedin "\f0e1"
fa-undo "\f0e2"
fa-gavel "\f0e3"
fa-tachometer "\f0e4"
fa-comment-o "\f0e5"
fa-comments-o "\f0e6"
fa-bolt "\f0e7"
fa-sitemap "\f0e8"
fa-umbrella "\f0e9"
fa-clipboard "\f0ea"
fa-lightbulb-o "\f0eb"
fa-exchange "\f0ec"
fa-cloud-download "\f0ed"
fa-cloud-upload "\f0ee"
fa-user-md "\f0f0"
fa-stethoscope "\f0f1"
fa-suitcase "\f0f2"
fa-bell-o "\f0a2"
fa-coffee "\f0f4"
fa-cutlery "\f0f5"
fa-file-text-o "\f0f6"
fa-building-o "\f0f7"
fa-hospital-o "\f0f8"
fa-ambulance "\f0f9"
fa-medkit "\f0fa"
fa-fighter-jet "\f0fb"
fa-beer "\f0fc"
fa-h-square "\f0fd"
fa-plus-square "\f0fe"
fa-angle-double-left "\f100"
fa-angle-double-right "\f101"
fa-angle-double-up "\f102"
fa-angle-double-down "\f103"
fa-angle-left "\f104"
fa-angle-right "\f105"
fa-angle-up "\f106"
fa-angle-down "\f107"
fa-desktop "\f108"
fa-laptop "\f109"
fa-tablet "\f10a"
fa-mobile "\f10b"
fa-circle-o "\f10c"
fa-quote-left "\f10d"
fa-quote-right "\f10e"
fa-spinner "\f110"
fa-circle "\f111"
fa-reply "\f112"
fa-github-alt "\f113"
fa-folder-o "\f114"
fa-folder-open-o "\f115"
fa-smile-o "\f118"
fa-frown-o "\f119"
fa-meh-o "\f11a"
fa-gamepad "\f11b"
fa-keyboard-o "\f11c"
fa-flag-o "\f11d"
fa-flag-checkered "\f11e"
fa-terminal "\f120"
fa-code "\f121"
fa-reply-all "\f122"
fa-star-half-o "\f123"
fa-location-arrow "\f124"
fa-crop "\f125"
fa-code-fork "\f126"
fa-chain-broken "\f127"
fa-question "\f128"
fa-info "\f129"
fa-exclamation "\f12a"
fa-superscript "\f12b"
fa-subscript "\f12c"
fa-eraser "\f12d"
fa-puzzle-piece "\f12e"
fa-microphone "\f130"
fa-microphone-slash "\f131"
fa-shield "\f132"
fa-calendar-o "\f133"
fa-fire-extinguisher "\f134"
fa-rocket "\f135"
fa-maxcdn "\f136"
fa-chevron-circle-left "\f137"
fa-chevron-circle-right "\f138"
fa-chevron-circle-up "\f139"
fa-chevron-circle-down "\f13a"
fa-html5 "\f13b"
fa-css3 "\f13c"
fa-anchor "\f13d"
fa-unlock-alt "\f13e"
fa-bullseye "\f140"
fa-ellipsis-h "\f141"
fa-ellipsis-v "\f142"
fa-rss-square "\f143"
fa-play-circle "\f144"
fa-ticket "\f145"
fa-minus-square "\f146"
fa-minus-square-o "\f147"
fa-level-up "\f148"
fa-level-down "\f149"
fa-check-square "\f14a"
fa-pencil-square "\f14b"
fa-external-link-square "\f14c"
fa-share-square "\f14d"
fa-compass "\f14e"
fa-caret-square-o-down "\f150"
fa-caret-square-o-up "\f151"
fa-caret-square-o-right "\f152"
fa-eur "\f153"
fa-gbp "\f154"
fa-usd "\f155"
fa-inr "\f156"
fa-jpy "\f157"
fa-rub "\f158"
fa-krw "\f159"
fa-btc "\f15a"
fa-file "\f15b"
fa-file-text "\f15c"
fa-sort-alpha-asc "\f15d"
fa-sort-alpha-desc "\f15e"
fa-sort-amount-asc "\f160"
fa-sort-amount-desc "\f161"
fa-sort-numeric-asc "\f162"
fa-sort-numeric-desc "\f163"
fa-thumbs-up "\f164"
fa-thumbs-down "\f165"
fa-youtube-square "\f166"
fa-youtube "\f167"
fa-xing "\f168"
fa-xing-square "\f169"
fa-youtube-play "\f16a"
fa-dropbox "\f16b"
fa-stack-overflow "\f16c"
fa-instagram "\f16d"
fa-flickr "\f16e"
fa-adn "\f170"
fa-bitbucket "\f171"
fa-bitbucket-square "\f172"
fa-tumblr "\f173"
fa-tumblr-square "\f174"
fa-long-arrow-down "\f175"
fa-long-arrow-up "\f176"
fa-long-arrow-left "\f177"
fa-long-arrow-right "\f178"
fa-apple "\f179"
fa-windows "\f17a"
fa-android "\f17b"
fa-linux "\f17c"
fa-dribbble "\f17d"
fa-skype "\f17e"
fa-foursquare "\f180"
fa-trello "\f181"
fa-female "\f182"
fa-male "\f183"
fa-gittip "\f184"
fa-sun-o "\f185"
fa-moon-o "\f186"
fa-archive "\f187"
fa-bug "\f188"
fa-vk "\f189"
fa-weibo "\f18a"
fa-renren "\f18b"
fa-pagelines "\f18c"
fa-stack-exchange "\f18d"
fa-arrow-circle-o-right "\f18e"
fa-arrow-circle-o-left "\f190"
fa-caret-square-o-left "\f191"
fa-dot-circle-o "\f192"
fa-wheelchair "\f193"
fa-vimeo-square "\f194"
fa-try "\f195"
fa-plus-square-o "\f196"
fa-space-shuttle "\f197"
fa-slack "\f198"
fa-envelope-square "\f199"
fa-wordpress "\f19a"
fa-openid "\f19b"
fa-university "\f19c"
fa-graduation-cap "\f19d"
fa-yahoo "\f19e"
fa-google "\f1a0"
fa-reddit "\f1a1"
fa-reddit-square "\f1a2"
fa-stumbleupon-circle "\f1a3"
fa-stumbleupon "\f1a4"
fa-delicious "\f1a5"
fa-digg "\f1a6"
fa-pied-piper "\f1a7"
fa-pied-piper-alt "\f1a8"
fa-drupal "\f1a9"
fa-joomla "\f1aa"
fa-language "\f1ab"
fa-fax "\f1ac"
fa-building "\f1ad"
fa-child "\f1ae"
fa-paw "\f1b0"
fa-spoon "\f1b1"
fa-cube "\f1b2"
fa-cubes "\f1b3"
fa-behance "\f1b4"
fa-behance-square "\f1b5"
fa-steam "\f1b6"
fa-steam-square "\f1b7"
fa-recycle "\f1b8"
fa-car "\f1b9"
fa-taxi "\f1ba"
fa-tree "\f1bb"
fa-spotify "\f1bc"
fa-deviantart "\f1bd"
fa-soundcloud "\f1be"
fa-database "\f1c0"
fa-file-pdf-o "\f1c1"
fa-file-word-o "\f1c2"
fa-file-excel-o "\f1c3"
fa-file-powerpoint-o "\f1c4"
fa-file-image-o "\f1c5"
fa-file-archive-o "\f1c6"
fa-file-audio-o "\f1c7"
fa-file-video-o "\f1c8"
fa-file-code-o "\f1c9"
fa-vine "\f1ca"
fa-codepen "\f1cb"
fa-jsfiddle "\f1cc"
fa-life-ring "\f1cd"
fa-circle-o-notch "\f1ce"
fa-rebel "\f1d0"
fa-empire "\f1d1"
fa-git-square "\f1d2"
fa-git "\f1d3"
fa-hacker-news "\f1d4"
fa-tencent-weibo "\f1d5"
fa-qq "\f1d6"
fa-weixin "\f1d7"
fa-paper-plane "\f1d8"
fa-paper-plane-o "\f1d9"
fa-history "\f1da"
fa-circle-thin "\f1db"
fa-header "\f1dc"
fa-paragraph "\f1dd"
fa-sliders "\f1de"
fa-share-alt "\f1e0"
fa-share-alt-square "\f1e1"
fa-bomb "\f1e2"
fa-futbol-o "\f1e3"
fa-tty "\f1e4"
fa-binoculars "\f1e5"
fa-plug "\f1e6"
fa-slideshare "\f1e7"
fa-twitch "\f1e8"
fa-yelp "\f1e9"
fa-newspaper-o "\f1ea"
fa-wifi "\f1eb"
fa-calculator "\f1ec"
fa-paypal "\f1ed"
fa-google-wallet "\f1ee"
fa-cc-visa "\f1f0"
fa-cc-mastercard "\f1f1"
fa-cc-discover "\f1f2"
fa-cc-amex "\f1f3"
fa-cc-paypal "\f1f4"
fa-cc-stripe "\f1f5"
fa-bell-slash "\f1f6"
fa-bell-slash-o "\f1f7"
fa-trash "\f1f8"
fa-copyright "\f1f9"
fa-at "\f1fa"
fa-eyedropper "\f1fb"
fa-paint-brush "\f1fc"
fa-birthday-cake "\f1fd"
fa-area-chart "\f1fe"
fa-pie-chart "\f200"
fa-line-chart "\f201"
fa-lastfm "\f202"
fa-lastfm-square "\f203"
fa-toggle-off "\f204"
fa-toggle-on "\f205"
fa-bicycle "\f206"
fa-bus "\f207"
fa-ioxhost "\f208"
fa-angellist "\f209"
fa-cc "\f20a"
fa-ils "\f20b"
fa-meanpath "\f20c"
Chúc các ban thành công!