Thêm author box vào trang Blog

Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ ]]></b:skin>

3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(' http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png' ); color:#444444; }
.wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; }
.wc-aboutpic { float:right; margin:0 0 0 10px; }
.wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; }
.wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px  rgba(0,0,0,.3); -moz-box-shadow:0 0 10px  rgba(0,0,0,.3); box-shadow:0 0 10px  rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); }
.wc-aboutsoc img { height:35px; margin-bottom:-13px; }
.wc-aboutsoc  p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

4- Nhấn Ctrl+F tìm thẻ <data:post.body/>

5- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-goO7oYjg_D8BWkx8764x5pgfFAZs_Nb-OKDgFKk0K0dzTNA0OUGRU_q8vKfS5yQp3J-hBqAjvPlR2DDiG_e7v7FCaTRS90eG97oltjQyVZ-0LqvQD9Mgb-52YrwTQFi_10HjkoN1ys/s1600/Co-Author.jpg' width='100'/>
 </div>
 <h5>About Me :</h5>
 <div style='text-align: justify;'>
 <b>YOUR BIO HERE</b></div>
 <div class='wc-aboutsoc'>
 <p> Find us on Socail Media
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLhbEGqHhMtnNAEhrplIAiK-SvP3uiFQY0KnQ2ALv6Q0p9y_CF2-1OPM5xZD_8tdiN9MEIq-_WfvSiLK4uT4jEi7ap88GiE4NXNblhF3OAVWG590Dtf8M5-r2GUWjUsCGmzLUU9AoJ3Jr/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghguD8EyafQB2zsBsM8J25UB1-TWH1wRcdl-EsAb9aAmt5k2BxAMftBz_UAC9PMhBQBFCxk5rXqfoGvd84UpFHEn5cNqKwCneu0OcK16g1qzgVgqZqSMjifI7LMOHdMF9_ZYxowTH1hZGR/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsGlN2x1S_tvCSquNUApdrTUSbZOD6on71PIDYFNUmVKTjwJX1By-274i3Mlyi0InxAaAzozM2hpESu0a5ZhAy7l4ml9S3tKkam-hwdGqNmTYPSLQ4yK5FbSDSQFLCbBfbxVKoO3gOwYi/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk1yL8aBqg7xosjNZBwOecpOX_4Kt6htvDosC0uf2jFjUn_XLbf_K5UCbQqXPguhJS-gFEp95GWSfBxiYxcvj8fdnouvHuxjkDCG6xLVL6ErFatgAzy9FGn0UXAIrgiQGCc9Jhf-4yE8i/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>

6- Save lại Templatebạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:

http://ngdkhanh12.blogspot.com/2014/05/meo-cua-nguoi-ai-cap-co-ai-xay-kim-tu.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog

Read More

Thiết kế social media buttons cho blogger

Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ <div class='post-footer-line post-footer-line-1'>

3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

<div class="don-share" data-bubbles="top" data-limit="4">
 <div class="don-share-total"></div>
 <div class="don-share-facebook"></div>
 <div class="don-share-twitter"></div>
 <div class="don-share-google"></div>
 <div class="don-share-pinterest"></div>
 <div class="don-share-linkedin"></div>
 <div class="don-share-tumblr"></div>
 <div class="don-share-stumbleupon"></div>
 <div class="don-share-reddit"></div>
 <div class="don-share-hackernews"></div>
 <div class="don-share-buffer"></div>
 <div class="don-share-xing"></div>
 <div class="don-share-pocket"></div>
 <div class="don-share-fancy"></div>
 <div class="don-share-yummly"></div>
 <div class="don-share-scoopit"></div>
 <div class="don-share-weibo"></div>
 <div class="don-share-vk"></div>
 <div class="don-share-mailru"></div>
 <div class="don-share-odnoklassniki"></div>
 <div class="don-share-hatena"></div>
</div>
<script type="text/javascript"> 
 (function() {
 var dr = document.createElement('script');
 dr.type = 'text/javascript'; dr.async = true;
 dr.src = '//share.donreach.com/buttons.js';
 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
 })();
</script>

4- Save lại Templatebạn mới vừa bổ sung.
5- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Xem bản Demo:

http://ngdkhanh12.blogspot.com/2014/04/menu-button-xanh-duong.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog

Read More

Chèn widget socializer 3 trong 1 bên dưới bài đăng

Ở những bài trước mình đã giới thiệu một số style sharing box chèn bên dưới bài đăng trong Blogger. Bài này mình sẽ chia sẻ một style nữa mà mình gọi là '3 trong 1' như hình trên. Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, nhấn Ctrl + F tìm dòng<data:post.body/>.

Bước 2: Chèn đoạn code sau vào bên dưới nó:

<!--Socializer Widget by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
 <style>
#kjsocializer {
    width: 500px;
    height: 240px;
    border: 1px solid #ddd;
    -webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
    background: #f1f1f1;
    -transition: background 0.50s;
    -webkit-transition: background 0.50s;
    -moz-transition: background 0.50s;
    margin-bottom: 10px;
    overflow: hidden;
}

#kjsocializer:hover {
    background: #fff;
}

#kjsocializer-title {
    text-align: center;
    border: 1px solid #2aa4cf;
    font-size: 20px;
    background: #2aa4cf;
    font-weight: 2000;
    font-family: oswald;
    padding: 5px;
    color: #fff;
}

#SocializeIt {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
    margin-top: 10px;
}

.tweet, .like, .plusone, .stumbleit {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

.heading {
    float: left;
    padding-right: 20px;
    padding-top: 15px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 30px;
    font-family: oswald;
}

#followus, #share {
    float: left;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
}

.likeonfb, .followontwitter, .sharing {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 15px;
}

#sw-credits {
    float: right;
    padding: 3px;
    font-size: 10px;
    margin-right: 10px;
}
</style>
   <script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
    var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
    if (!_0x2162x1['getElementById'](_0x2162x3)) {
        _0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
        _0x2162x1['id'] = _0x2162x3;
        _0x2162x1['src'] = '//platform.twitter.com/widgets.js';
        _0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
    };
})(document, 'script', 'twitter-wjs');
   </script>

<script type='text/javascript'>
    var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
    stLight.options({
            publisher: "
            ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
            doNotCopy: false,
            hashAddressBar: false
        });
</script>
 <center>
<div id='kjsocializer'>
 <div id='kjsocializer-title'>
   Socializer Widget by kjmagic.blogspot.com
 </div>
 <div id='SocializeIt'>
  <font class='heading'>SOCIALIZE IT →</font>
  <div class='tweet'>
   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </div>
  <div class='like'>
   <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
  </div>
  <div class='plusone'>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
   </div>
  </div>
  <div id='followus'>
   <font class='heading'>FOLLOW US →</font>
   <div class='likeonfb'>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&amp;send=false&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
   </div>
   <div class='followontwitter'>
    <a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/quocdoantrinh' rel='nofollow'/>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
  </div>
  <div id='share'>
   <font class='heading'>SHARE IT →</font>
   <div class='sharing'>
    <span class='st_facebook_large' displaytext='Facebook'/>
    <span class='st_twitter_large' displaytext='Tweet'/>
    <span class='st_googleplus_large' displaytext='Google +'/>
    <span class='st_pinterest_large' displaytext='Pinterest'/>
    <span class='st_linkedin_large' displaytext='LinkedIn'/>
    <span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
    <span class='st_email_large' displaytext='Email'/>
    <span class='st_sharethis_large' displaytext='ShareThis'/>
   </div>
  </div>
 </div>
 </center>
 </b:if>
<!--/Socializer Widget by kjmagic.blogspot.com-->

Những chỗ mình đánh dấu màu xanh là ID Facebook Fanpage và Twitter của bạn. 

Chúc các bạn thành công !
Nguồn terocket.com

Read More

Facebook, Twitter, Google Plus Ẩn Hiện Trong Cùng 1 Tiện Ích

Một điều trông đợi đối với tất cả những bạn làm Web/Blog là trang bài viết của mình, đứa con do mình tạo ra có nhiều người để ý. Độc giả của bạn càng nhiều, lượng thông tin trao đổi trên các trang mạng mới mang lại điều hữu ích.

Một trong những cách tốt nhất để tăng fan xã hội của bạn là thêm Jquery Pop-up Box xã hội cho Blog. Khi tiện ích này được cài đặt trên blog, khách truy cập sẽ thấy hiển thị hộp trượt ra với các tùy chọn như trang page Facebook, hoặc theo trên Twitter, hoặc thêm bạn trong vòng tròn kết nối của G+. Ưu điểm tiện ích này là tiết kiệm không gian trên trang. Vì nếu bạn thêm tất cả các widget trên trang web / blog , nó sẽ chiếm một không gian rộng lớn, làm cho khách truy cập  khó chịu. 

Cách làm như sau:

Vào Blogger trên Account Google, mỡ Bố cục(layout).

Thêm một widget tiện ích tên HTML/JavaScript

Chép Source Code dưới đây vào khung soạn thảo Code. Xong Save lại và chạy thữ Blogspot.

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://dautocrazy.googlecode.com/svn/trunk/in-out-StyleSheet.css" /> <script src="http://blogdautocrazy.googlecode.com/files/in-out-widget.js"></script><div id="on"><div id="facebook_right" style="top: 12%;"> <div id="facebook_div"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFk6k2SPeqzfUOH8cb5A6mWgniUzuGW1hYDd85PQXqzYUykYEcU7PGlHBr7aOfVwEWMcoM94iP-eVllPfHkGwtP39h_ZmXfuIo8UzVWPjLlNe2DdSDz77fzhAwRW12cs3AUa_i8wrcFLqK/s1600/DTCfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmaunhadepmoi&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 28%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTcdD1pllbEXJotnPmHuuB8B5p8z5iwbckEK1s854q_R7kNCO7gvmyB3UlkwBr5sIzgcCIt-eErmuJOl1i-2Np5EOeof_wMREj_Ri6eKKHQO6igX90gThzQ1dZVmMv80OIDMPGGGvj9zQ/s1600/DTCtwitter_right.png"/><script type='text/javascript'>function fanbox_init(screen_name){ document.getElementById('twitterfanbox').innerHTML = '<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=' + screen_name + '" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';} </script><div id="twitterfanbox"><script type="text/javascript"> fanbox_init("Dautocrazy");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 45%;"> <div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAtBTdUr0oO-d6iULR7FbpkZOzrYWPn9DxddZulD1P86r2_TDO-FI3QTFIq2iF6__fZ1aP4dlT64yoK3M5RD7AvVS5sX8KhOlgXigqmONpguWW16PjXq_qemk0Z4XdGO4_IJ7jSiIaU5r/s1600/DTCgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"><div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/100191916179620679177" data-source="blogger:blog:followers" data-width="270"></div><script type="text/javascript"> (function () {window.___gcfg = {'lang':'en'};
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})(); </script></div></div></div></div></div>Demo:

• DEMO

Thay: - maunhadepmoi thành ID page facebook của bạn
- Dautocrazy thành tên đăng nhập tiwitter của bạn
- 100191916179620679177 thành ID G+ của bạn
Lưu ý:https://www.facebook.com/maunhadepmoi
Đoạn bôi xanh chính là ID page facebook

Chúc các bạn thành công
Tham khảo Doisong24.com

Read More

Giới thiệu 31 mạng xã hội Việt Nam để xây dựng vệ tinh 2.0

Với SEOer mới thì việc xây dựng một website chuẩn seo đã khá chứ chưa nói tới việc xây dựng vệ tinh 2.0 cho landing page. Để giúp các bạn có những hệ thống vững chắc thì hôm nay Trung tâm đào tạo SEO Trí Tuệ Việt xin giới thiệu một vài mạng xã hội có thể dùng để làm vệ tinh khá tốt nếu bạn vận dụng đúng cách. Bạn có thể xây dựng theo kim tự thấp hoặc liên kết whell để giúp site chính thêm vững chắc đứng top google nhé.

1. Mạng xã hội online và giải trí http://me.zing.vn
2. Kênh sinh viên: http://kenhsinhvien.net ; http://ddth.com ; …
3. Mạng xã hội thông tin blog http://yume.vn/
4. Mạng xã hội doanh nhân trí thức Việt Nam http://11111.vef.vn/topblog
5. Mạng xã hội Tầm Tay http://tamtay.vn
6. Mạng xã hội CyWorld Việt Nam http://www.cyworld.vn/v2/
7. Mạng xã hội Clip http://clip.vn
8. Cộng đồng trực tuyến kết nối trí thức và chuyên gia cyvee http://www.cyvee.com
9. Mạng xã hội và Blog – Ngôi sao Blog http://ngoisaoblog.vn/
10. Mạng xã hội trường xưa http://www.truongxua.vn
11. Mạng xã hội cho những người yêu ca hát http://www.yeucahat.com/
12. Mạng xã hội Tìm Nhanh http://timnhanh.com.vn/
13. Mạng xã hội Việt Nam http://www.goonline.vn/
14. Mạng doanh nhân: http://veer.vn/
15. Mạng những người yêu Hà Nội: http://ilovehanoi.vn/
16. Mạng chuyên gia cao cấp: http://www.caravat.com
17. Mạng nghề nghiệp, Hướng nghiệp và giới công sở: http://www.motibee.com
18. Cho phép tạo chatroom riêng trên website của mình: http://ziczac.vn/
19. Mạng xã hội để tìm bạn cũ: http://www.yousecond.com/home.php
20. Mạng thông tin blog: http://yume.vn/
21. Mạng xã hội và kết bạn: http://vnvista.com/mangxahoi
22. Mạng xã hội cho Phụ Nữ: http://www.phununet.com
23. Mạng xã hội tìm việc nhanh http://www.timviecnhanh.com/
24. Mạng xã hội Thế giới Nghề nghiệp http://www.thegioinghenghiep.vn/
25. Mạng xã hội chia sẻ thông tin http://www.tagvn.com/
26. Mạng xã hội giải trí http://www.vietgiaitri.com/
27. Mạng xã hội Học làm giàu http://www.hoclamgiau.vn/
28. Mạng xã hội có công nghệ định vị đầu tiên ở Việt Nam http://yoo.vn/
29. Mạng xã hội Yêu Blog http://yeublog.vn/
30. Mạng xã hội trí thức và doanh nhân Việt Nam http://www.buddy.vn/
31. Mạng kết nối bạn bè http://Banbe.net

Nguồn http://seo.2016.vn/

Read More

Nút chia sẻ với hiệu ứng đóng mở cực ngầu cho Blogger

Một điều chắc chắn với hầu hết tất cả mọi website đều có nút chia sẻ qua các mạng xã hội thông dụng. Việc thêm vào các nút này giúp website giữ được lượng khách truy cập đáng kể. Do đó việc làm cho khách truy cập chú ý đến nó là vấn đề khá cần thiết đối với mọi quản trị của website, từ vị trí, đến giao diện, v.v.. Hôm nay mình xin chia sẻ với các bạn những nút chia sẽ với hiệu ứng đóng mở khả là ngầu bằng CSS và JS khá bắt mắt đến người dùng.

Nút chia sẻ với hiệu ứng đóng mở cực kì ngầu cho Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Bước 2: Tìm đến thẻ </head> và thêm đoạn css sau lên trên

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 70px auto 0;
}

.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 1px 0px #fdfdfd;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #c5c5c5;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #656565;
    line-height: 54px;
    font-family: Open Sans;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: -2px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-right: 0;
}

.credit {
    padding-left: 10px;
    font-size: 14px;
    color: #172b36;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: Open Sans;
}

.credit a {
    border-bottom: 2px solid #dc4106;
    text-decoration: none;
    padding: 0 0 2px;
    color: #172b36;
}
</style>

Bước 3: Tìm đến thẻ sau

<b:includable id='post' var='post'>

thêm đoạn mã sau ngay trên

<b:includable id='kslshare'>
<b:if cond='data:blog.pageType == "item"'>
<div id="buttons">
<div class="facebook button">
 <i class="icon-facebook"></i>
 <div class="social-container fb">
  <div class="slide">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.kslzone.net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21&amp;appId=191743990857285" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>
  </div>
   Facebook
 </div>
</div>
<div class="twitter button">
 <i class="icon-twitter"></i>
 <div class="social-container tw">
  <div class="slide">
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
   Tweet </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div>
   Twitter
 </div>
</div>
<div class="google button">
 <i class="icon-google-plus"></i>
 <div class="social-container tw">
  <div class="slide">
   <!-- Place this tag where you want the +1 button to render. -->
   <div class="g-plusone" data-size="medium">
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div>
   Google+
 </div>
</div>
<div class="linkedin button">
 <i class="icon-linkedin"></i>
 <div class="social-container tw">
  <div class="slide">
   <script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
   </script>
   <script type="IN/Share"></script>
  </div>
   LinkedIN
 </div>
</div>
</div>
<div style="text-align: right;">
<a href="http://goo.gl/3nMvSh" target="_blank" title="Lấy widget này"><span style="font-size: x-small;">get</span></a></div>
</b:if>
</b:includable>

thay www.kslzone.net thành địa chỉ page facebook của bạn

Bước 4: Tìm đến các thẻ

<data:post.body/>

và thêm đoạn mã này xuống dưới

<b:include name='kslshare'/>

Bước 5: Lưu lại giao diện hiện tại.

Nếu bạn chưa biết thẻ các thẻ includes là gì và sử dụng ra sao bạn có thể tham khảo tại bài viết

• Tạo và sử dụng thẻ includable trong Blogger

Như vậy là bạn đã chèn xong các nút chia sẻ thật là ngầu dưới chân bài viết của bạn, mong rằng nó giúp cho website có thêm thật nhiều khách truy cập!
Nguồn kslzone.net

Read More

[Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger

Trước đây thì Terocket đã giới thiệu rất nhiều thủ thuật blog liên quan đến nút social buttons rồi, những thủ thuật blog đó đều rất ấn tượng, đẹp mắt và phù hợp với mọi website. Hôm nay, tiếp tục với chủ đề về Social Buttons, Terocket giới thiệu đến các bạn một bộ nút khác, đơn giản hơn, ấn tượng hơn, hiện đại hơn và trẻ trung hơn có tên là [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger.

Thủ thuật blog Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này thực sự sẽ làm thay đổi bộ mặt website của bạn đấy!

Với thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mới này, sẽ có 4 nút Facebook, Twitter, Google+ và Feed RSS cả nhà nhé. Nó liên kết trực tiếp đến URL các fanpage và cộng đồng của các bạn. Mang màu sắc cổ điển, đơn giản và chủ đạo là đen trắng, nhưng có điểm nhấn ấn tượng hơn đó chính là khi rê chuột vào, nó sẽ ra các biểu tượng sinh động, màu sắc rất tươi mới, cảm giác thay đổi như thấy vườn địa đàng vậy. Chắc chắn bạn sẽ rất thích.

Live Demo

Và để thực hiện thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này, chỉ cần vài thao tác rất đơn giản. Nào cùng Terocket thiết kế nó nhé.

Để thực hiện tiện ích này, chỉ cần Add đoạn mã code sau vào HTML/Javascript và Lưu lại

Đầu tiên bạn vào Blog Title → Layout → Add Widget → Chọn HTML/JavaScript và chép đoạn mã code sau vào trong HTML của Widget và Lưu lại nhé.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/Terocket" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/Terocket" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/Terocket" target="_blank">Google plus</a></li>
<li><a class="rss" href="/feeds/posts/default?orderby=UPDATED" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MJ8i1PfbXyGdxsZszWStMB-94Fs5ZuGcCfUqjqnmBHY7NMua1q3BdkNQBLrVvnMfUnmwbgQD4gQxwvqsTZ77hzWBXv_l0J0yi9Pvi5DTL48GhyphenhyphenqSKbkrllcb8NL-h57Di3OciF0_Kg/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MJ8i1PfbXyGdxsZszWStMB-94Fs5ZuGcCfUqjqnmBHY7NMua1q3BdkNQBLrVvnMfUnmwbgQD4gQxwvqsTZ77hzWBXv_l0J0yi9Pvi5DTL48GhyphenhyphenqSKbkrllcb8NL-h57Di3OciF0_Kg/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Yq2WpbW51RgM4baU-8_f88I3loRqfL3WuzgVFkUKVLXt5YKS5gHG7nENDhXloOI2BbTKGLhho4Uj1TgmFlk4_Ht9ZvAtTeIjTx5Wb3nwZy6Y7zCcygXpt27HeyYDAb1-ie4FU6yD0w/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Yq2WpbW51RgM4baU-8_f88I3loRqfL3WuzgVFkUKVLXt5YKS5gHG7nENDhXloOI2BbTKGLhho4Uj1TgmFlk4_Ht9ZvAtTeIjTx5Wb3nwZy6Y7zCcygXpt27HeyYDAb1-ie4FU6yD0w/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbylo3bF7YrYGzSLJ0r0QORmGSXkyFaN4hgD1eNbdkGDhBZpomArHVJnsC6WddmHZ3XoJqU2SJdc6pxXtiwWxgIDZHTjijJ397uGigeO0nuGjLE6NdT6PVsTfZMJ3oqpobFm0qg6LTA/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbylo3bF7YrYGzSLJ0r0QORmGSXkyFaN4hgD1eNbdkGDhBZpomArHVJnsC6WddmHZ3XoJqU2SJdc6pxXtiwWxgIDZHTjijJ397uGigeO0nuGjLE6NdT6PVsTfZMJ3oqpobFm0qg6LTA/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7E01U7HI72lgVAxPNCNVh3XVArv4dKg8yZLsrXUYI9E6M5eDkIvsfmvzCFwxDkUzPzNjmt1mVXU-MbNzQB5BVHU1EiS3_RSAKD3B572rQ1MAWRFzftOWjrvncDqWZnBubZPzOpgbgOQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7E01U7HI72lgVAxPNCNVh3XVArv4dKg8yZLsrXUYI9E6M5eDkIvsfmvzCFwxDkUzPzNjmt1mVXU-MbNzQB5BVHU1EiS3_RSAKD3B572rQ1MAWRFzftOWjrvncDqWZnBubZPzOpgbgOQ/s1600/twitter.png) no-repeat 0 0}
</style>

Ghi chú: Bạn cần thay chữ Terocket thành địa chỉ các trang cộng đồng của bạn nha. Thế là xong!

Ok, vậy là thủ thuật [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mà Terocket vừa hướng dẫn trên đây đã xong rồi, chúc các bạn thành công và có được những blog thật đẹp nha. 

Nguồn Terocket

Ai đã làm được rồi, hãy share nội dung [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này đến bạn bè, ai chưa hiểu chổ nào thì gửi ý kiện bình luận, Terocket sẽ giải đáp cho các bạn nha!

Nguồn Terocket

Read More

[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger

Hôm nay Terocket sẽ hướng dẫn cả nhà thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger rất đẹp và ấn tượng. Thủ thuật này vô cùng đơn giản, nhưng lại tạo cảm giác thú vị, nhiều màu sắc, sống động cho người dùng, điểm ấn tượng của thủ thuật này đó là khi chúng ta rê chuột vào, ngoài các hình ảnh ấn tượng và nút button bắt mắt, thì nó sẽ tự động xoay 360 độ. Tạo sự mới lạ trong trải nghiệm người dùng.

Live Demo

Lợi thế của thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này, đó chính là làm hoàn toàn bằng CSS, tốc độ tải cực nhanh, chuẩn SEO...không làm nặng website, giúp tiết kiệm thời gian tải hơn so với các thủ thuật khác. Nào giờ thì cùng Terocket chúng tớ xử lý và thực hiện thủ thuật này nha!

Bước 1 - Chèn đoạn mã code sau vào một HTML/Javascript hoặc HTML của trang.

Đầu tiên hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript → Copy đoạn mã code sau vào và Lưu lại.

<style>/* Tips For Blogger by Terocket.com */
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
</style>
<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYGN0IgZ0TISMWkmi0I2c_Zcg9_CRBtOavOxTB5-o2-qZ9u_iBtTbMifz27eRUmQ68kYiK9n-wli2f3_D5-0MF4SDAYLxMO_u36p743m-4Ej6dWRyaimUANLzBu0KCCT3KXan2DrHZKG-/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&amp;loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBz1D6JWyNPKptJPVfE0DYVtHG28qo7kyYSWLN5ZByjxltEc00lTuenz2c3C3inCDIawoDP-5kk63zG_hR3Z6g84A6jSH48JZn8HkNjnF-vRCCiXKguVti17niLZVwYEuyKznFVa9jPnUP/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/fbpageurl" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFtSo-VRk39tWvuU_4_ZzO2ob8DraJ54fFoBpCKX1ZXgmtOaaaYpwNnfrXhIs4Wdknu5y0Fmmt6QiFuMqgHsHBrVxUmzkAkmu7QLMwTvC-UgzxZfqXE1OWn6MmHds1qUtPnMmA8hB57ZU/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/twitterurl" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcRd9jlUwxt2rfvY6vaTtZN_p__u7WQQZnPKRdLTbw5q2Q_51oXGmrPcMd6OgBAtYKvHStNxD61-XgA51wk8h2Rx8VNUmUZ2u-PnOYMTH0R-eksFEBtBQIqLSjTYAqNpHLyTXZ4MIY-y4V/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/googleplusurl" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRnAPTDmf5Uf5y4RdrBWtVNFZMlKe6gaOCq8GxO9Cl34Gpp8ClmnjYF6U15vQixJeb4DyDImSOopgrW0oNTSefOgGwTK12_vJCpxHVBsLqBoAI9YWE_hinTAOh7JYWhiPoLwXCrj6hNvyG/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/pinteresturl/" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMwU4FV78oHo5nKDQZOQkPZ5CDqQJT6Vg5oHfQ34pX90m27GtsBEdFhUDgRI7aYU0urNF7OTKjxA0RkKgvjubiwNwHE8O6XDmvKZHaxsZT8H-Gm0AmT5xOdhter3MY3yCDwAdEsuWubVEG/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>

Bước 2 - Thay URL tương ứng vào cho phù hợp

Các bạn chỉ cần thay đoạn Màu Xanh trên kia thành đoạn URL của các trang cộng đồng của mình, sau đó lưu lại. Thế là xong!

Vậy là xong thủ thuật blog này [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger tại Terocket rồi. Chân thành cảm ơn các bạn. Nếu bạn nào đã làm được rồi thì chia sẻ thủ thuật này đến bạn bè nhé, còn nếu chưa được, hãy gửi comment ở dưới đây, Terocket sẽ xem và trả lời các bạn.

Nguồn Terocket.com

Read More