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

Chủ Nhật, 10 tháng 8, 2014

Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao

Nặc danh tháng 8 10, 2014 chia se template blogpsot, edit-widgets, template blogger, them tien ich nang cao blogspot, thiet ke web blogspot, thiet ke website blogger, tien ich blogspot, video, widgets No comments

Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao. Floating mạng xã hội giúp website của bạn đẹp hơn và chuyên nghiệp hơn rất nhiều.

Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao

LINK CODE Ở ĐÂY

VIDEO HƯỚNG DẪN

Hướng dẫn thiết kế webiste trên nền tảng blogpsot. Mình cho ra một loạt video hướng dẫn từ cơ bản đến nâng cao dành cho những người không biết về IT. Hi vọng loạt video này có ích cho cộng đồng BLOGGER Việt.

Tags: thiet ke website blogger, template blogger, chia se template blogpsot, thiet ke web blogspot, tien ich blogspot, them tien ich nang cao blogspot...

Bài 08: Hướng dẫn chèn comment facebook vào blogspot

Bài 08: Hướng dẫn chèn comment facebook vào blogspot Tiện ích nâng cao. Hiện nay Facebook rất phổ biến, vì vậy việc thêm tiện ích Comment Facebook vào website của bạn vô cùng quan trọng.

Bài 08: Hướng dẫn chèn comment facebook vào blogspot Tiện ích nâng cao

LINK CODE
http://billquy.blogspot.com/2014/06/huong-dan-chen-comment-facebook-vao.html

VIDEO HƯỚNG DẪN

Tags: thiet ke website blogger, template blogger, chia se template blogpsot, thiet ke web blogspot, tien ich blogspot, them tien ich nang cao blogspot...

Bài 07: Hướng dẫn sử dụng tiện ích

Bài 07: Hướng dẫn sử dụng tiện ích. Tiện ích sẽ giúp website của bạn đẹp hơn - giúp bạn cung cấp thêm thông tin cho khách hàng. Tiện ích giúp bạn thêm Video, Thông tin liên hệ, Banner quảng cáo và nhiều ứng dụng khác nữa. Bạn nên tìm hiểu nhiều hơn về phần này nhé.

Bài này mình sẽ hướng dẫn một số tiện ích phổ biến nhất cho các bạn tham khảo thôi nhé.

Bài 07: Hướng dẫn sử dụng tiện ích

VIDEO HƯỚNG DẪN

Tags: thiet ke website blogger, template blogger, chia se template blogpsot, thiet ke web blogspot, tien ich blogspot, them tien ich nang cao blogspot...

Hướng dẫn thêm "BACK TO TOP" vào blogspot bằng CSS

Nặc danh tháng 6 07, 2014 widgets No comments

Cách này chỉ sử dụngh hinh ảnh và đơn giản hơn rất nhiều. do vậy nhìn sẽ không mượt như cách trên.

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào Mẫu (Template)

3- Chọn Bố Cục. (Layout)

4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a66Bp6-BIapmmZng3KxhrgUvIqEe49xuurgbNgfRSqVximzOERkD5Dhr-gBAOGQFQsoGHdXzqUzVfnv4o6MFeYOPn8aYHDqS4ICSMlfdm2lRBT2ksiH4AdOa5OvsSEao-oiXRCelU44/s1600/top-namkna-blogspot-com.gif"/></a>

Trong đó

Thay đổi chữ "Back to Top" thành hàng chữ nào mình thích (thí dụ: về đầu trang, lên trên...),

Thay đổi link ảnh màu đỏ thành link ảnh bạn mong muốn.

- Sau đó bấm Lưu Mẫu lại.

Một số link ảnh tham khảo. Bạn có thể dùng phần mềm tự tạo ra cái bạn thích nhất.

Hướng dẫn chèn comment facebook vào blogspot

Nặc danh tháng 6 07, 2014 comments, widgets No comments

Facebook đã trở nên phổ biến và quen thuộc mỗi khi chúng ta muốn lên đây để ... "chém gió". Và hôm nay Namkna sẽ giới thiệu cho các bạn Chèn comment của facebook vào blogspot. hướng dẫn cho các bạn đem cái công cụ "chém gió" này vào blog của các bạn. Với việc thay thế comment của blogspot bằng comment của facebook hy vọng blog của các bạn sẽ sôi động hơn.

Có thể nói thủ thuật chèn comment của facebook vào mỗi bài viết blogspot cũng không mới lạ gì, 1 số blog thủ thuật nước ngoài đã đăng tải rồi (các bạn có thể vào google search với từ khóa facebook comments for blogger là có kết quả ngay).Hiện nay Facebook đang chặn Ip Việt Nam nên mình giới thiệu mẫu có sẵn.

Có bao nhiêu cách chèn vào blog?

Cách 1 là chỉ có 1 form comment của facebook.

Cách 2 là chạy 2 comment cùng 1 lúc, mặc định là form comment của blogspot, nếu muốn xem bên form comment của facebook thì click vào liên kết chuyển form.

Cách 1: chỉ có 1 form comment của facebook.

1- Bước đầu tiên bạn phải làm là đóng comment của blogger lại bằng cách vào Cài Đặt => bài đăng và nhận xét => Facebook comments for blogger - Chèn comment của facebook vào blogspot

- Lưu cài đặt lại.

2- Vào phần Mẫu (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọn Mở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào trước thẻ đóng </head>.

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>

Trong đó:

data-width là độ rộng của comment box.

data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)

data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết

3- Chèn đoạn code bên dưới vào sau thẻ <body> .

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

4- Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5- Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

6- Lưu Mẫu (Save template). và ra xem kết quả.

Cách 2: là chạy 2 comment cùng 1 lúc, mặc định là form comment của blogspot, nếu muốn xem bên form comment của facebook thì click vào liên kết chuyển form.

Sau đây là các bước thực hiện: lưu ý là ở bản cập nhật này các bước thực hiện vẫn tương tự, chỉ có khác là không vào phần cài đặt để ẩn comment mà thôi. Vì thế nếu đã thực hiện bản cũ muốn update lên ở bản này thì các bạn cứ việc thay thế code đã thêm ở bản cũ bằng code của bản này là được.

1. Vào phần Mẫu (Template) -> chỉnh sửa HTML -> nhấp chọn mở rộng tiện ích mẫu.

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>.

<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var purl= location.href;
var cm_form = purl.GetValue("cm_form");
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>

Trong đó:

data-width là độ rộng của comment box.

data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)

3- Chèn đoạn code bên dưới vào sau thẻ <body>.

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

4. Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5. Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cmnav' style='text-align:center;'> <a 
href='?cm_form=blogger#cmnav'>Blogger Comments</a> | <a 
href='?cm_form=facebook#cmnav'>Facebook Comments</a> 
</div>

<script type='text/javascript'>
if (cm_form==&quot;facebook#cmnav&quot;) {
document.write(fbcm); 
var fbcss = document.createElement(&quot;style&quot;);
fbcss.type = &quot;text/css&quot;;
fbcss.innerHTML = &quot;#comments { display:none }&quot;;
document.body.appendChild(fbcss);
}
</script></b:if>

Ở bước 5 này có 1 lưu ý nhỏ. Bạn phải xác định thẻ div chưa nội dung của phần comment của blogger là gì, đa số nó sẽ là #comments. Tùy theo template của bạn đang xài, và tùy theo người Rip template thì có thể nó sẽ khác. Việc xác định nó cũng không khó nên mình không hướng dẫn ở đây.

- 1 điều nữa là phần liên kết chuyển form comment (href='?cm_form=blogger' và href='?cm_form=facebook'). Cái giá trị cm_form=facebook thì bạn phải giữ nguyên, còn giá trị cm_form=blogger thì các bạn có thể thay đổi theo ý thích. Cái này chỉ có tác dụng load lại trang để sang chế độ comment của blogger mà thôi. Như ở đây mình khuyên cũng nên giữ nguyên để cho nó đẹp, pro 1 tý.

6. Lưu mẫu lại..

Tạo Menu sổ xuống tích hợp Nhận xét và bài đăng mới nhất cho blogger

Nặc danh tháng 6 07, 2014 menu, widgets No comments

Hẳn các bạn đã quyen với các tiện ích Bài viết mới nhất và Nhận xét mới nhất được trình bày theo phương pháp truyền thống trong một tiện ích HTML rồi phải không, Để tạo phong cách riêng và mới lạ cho cả tác giả và độc giả của blog trong cách trình bày của 2 tiện ích này, bài viết này mình sẽ hướng dẫn thêm hai tiện ích này vào trong thanh menu. Bình thường chúng sẽ được ẩn ở dưới tiêu đề của menu và sẽ hiện ra dạng sổ dọc khi người dùng dê chuột hoặc bấm vào tiêu đề đó như trên trang facebook. Khá thú vị phải không? Vậy còn chần chừ gì nữa hãy bắt tay vào làm thôi.

Để hiểu rõ hơn nguyên tắc hoạt động của menu này các bạn vui lòng xem ảnh động bên dưới:

Trên thưc tế menu này được viết bởi tác giả dte.web.id một blogger nổi tiếng của malaysia. Mình giới thiệu cho những ai chưa biết. Để có được một menu như thế bạn chỉ cần làm theo các bước ở bên dưới:

» Cách tạo Menu xổ dọc tích hợp bài đăng mới nhất và nhận xét mới nhất cho blogspot.

1. Đăng nhập vào blog.

2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).

3. Dán đoạn code bên dưới vào trước thẻ </head>

<style type='text/css'>
#autonav {
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
  z-index:9999;
  margin:0px 0px;
  padding:0px 0px;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  border-bottom:2px solid #333;
  -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  box-shadow:0px 1px 7px rgba(0,0,0,.4);
}

#autonav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
  background-color:#0F5079;
}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0px 0px;
  padding:0px 0px;
  position:relative;
}

#autonav ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0px 0px;
  padding:0px 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,.4);
  color:white;
  font-weight:bold;
}

#autonav ul li a:hover {
  background-color:#0F486C;
}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0px;
  z-index:99;
  background-color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  box-shadow:0px 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;
}

#autonav ul ul:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;
}

#autonav ul ul li {
  display:block;
  float:none;
}

#autonav ul ul li a {
  border:none;
  color:#999;
}

#autonav ul ul ul {
  top:0px;
  left:100%;
}

#autonav li:hover > ul {
  display:block;
}

/* Khusus JSON */
#autonav ul.json-dropdown {
  overflow:hidden;
}

#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0px 0px;
  overflow:hidden;
}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0px 0px;
}

#autonav ul.json-dropdown li a:hover {
  text-decoration:underline;
  background:transparent;
}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {
  background-color:#222;
}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0px 0px;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0px 10px 0px 0px;
  width:40px;
  height:40px;
}

#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Arial,Sans-Serif;
  color:#666;
  font-size:9px;
}

/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {
  width:400px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numposts = 7,
    cmtext = "Nhận xét",
    pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIxKL3HXZJO450Vy9kpCgscWUAcjXrYxjh9pMPE465MWyL9AF2DzDlTJr4ZQ6ftczHWzdiZDmIu_ZRmUK9_SRk9ptZ4i0CNVENumIKAR6CEmEBtbEQPJ2lGiF3S_uaqHkSUXtp7_PVsHk/s512/no-image.png",
    numcomment = 7,
    cmsumm = 100;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>

» Tùy chỉnh code:

var numposts = 7, Số bài viết mới nhất sẽ hiện thị khi menu xổ dọc xuống phía dưới.

cmtext = "Nhận xét", là ký tự xuất hiện trong phần đếm số comment của mỗi bài viết như hình minh họa bên dưới:

Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger

numcomment = 7, Số nhận xét mới nhất sẽ hiện thị khi menu của bạn xổ dọc xuống.

http://....no-image.png link ảnh thay thế cho các bài viết mới nhất không có hình ảnh minh họa. Bạn nên sử dụng hình ảnh có kích thước 72x72 picel để tối ưu được tốc độ load trang web của bạn.

cmsumm = 100; là số ký tự mô tả (tóm tắt) của phần nhận xét mới nhất trong menu bạn có thể chỉnh lại theo ý muốn của bạn. Tuy nhiên không nên để quá lớn như vậy bố cục giữa những nhận xét ngắn và nhận xét dài sẽ không đẹp.

http://......../json-dropdown.js link của file Js. Bạn hãy tải về tại đây và upload lên host riêng để dùng lâu dài nha.

4- Tiếp tục dán đoạn code bên dưới vào trước thẻ </body> . (Bạn cúng có thể dán ở các vị trí khác trong mẫu của bạn, nếu không xác định được vị trí cần chèn theo ý của bạn thì hãy comment bên dưới mình sẽ chỉ đoạn đó cho các bạn).

<nav id='autonav'>
    <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>Music</a></li>
        <li><a href='#'>Recent post</a>
            <ul class='json-dropdown subposts wide'>
                <script src='http://billquy.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Reccent comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='http://billquy.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
            </ul>
        </li>
        <li><a href='#'>Liên hệ</a>
            <ul>
                <li><a href='#'>Sub menu 1</a></li>
                <li><a href='#'>Sub menu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

» Tùy chỉnh code:

Thay thế http://billquy.blogspot.com/ thành link blog của bạn hoặc link blog bạn muốn lấy bài viết cho vào trong menu.

Thay các đoạn màu xanh thành các tiêu đề của menu theo ý thích và nội dung của blog bạn nha.

Nguồn: http://namkna.blogspot.com

Chỉnh sữa lỗi font chữ menu và tiêu đề bài đăng Blogger

Nặc danh tháng 4 04, 2013 font, widgets No comments

1. Chỉnh sữa lỗi Font chữ MENU

Các bạn vào chỉnh sữa HTML tìm đến mã code sau:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Sau đó thay font của bạn vào vị trí như chữ Oswald (được bôi màu đỏ).

==> Xem lại và lưu lại mẫu nếu như đúng với mong muốn của bạn.

Lưu Ý: Bạn nên thay bằng font ARIAL

2. Chỉnh sữa lồi Font chữ tiêu đề bài đăng:

ương tự đang ở trong trình chỉnh sửa HTML bạn tìm đến khóa ]]> </ b: skin>

Sau đó dán đoạn code này vào vị trí trước nó:

h3.post-title {font-family: 'CustomFontName', serif;}

Bây giờ ta chỉ việc thay font Serif bằng font bạn muốn.

==> Xem và lưu lại.

Nguồn: www.amalink.vn

Floating Social Bookmark trượt đẹp cho blogspot

Nặc danh tháng 4 01, 2013 bookmark, widgets No comments

Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn.

Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó.

Để giảm thiểu tối đa việc sử dụng các file javascrip do vậy namkna sẽ sử dụng các mã CSS và hiệu ứng css spriter với một hình ảnh icon duy nhấtcho các mạng xã hội để giảm requet kết hợp với thư viện Jquery do cậy rất mượn mà không gấy ảnh hưởng đến mức độ tương tác của trang web.

Các bạn có thể xem ảnh minh họa hoặc blog demo để thấy rõ hơn.

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin>:

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5s5MXW2ORSUVAKIW0sg8yoZH6wWsRYCKb80lDEa9BAji1KFvHw-aNEjD1pm1rwJrODTQGG-vRfoEwMDeP6cJWi4qdaxmFXYFoVS-YzBP7NpH3nqjgBX3Eu3G16XCipM2BCEOIIrhygKyg/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

5. THêm đoạn mã bên dưới vào trước thẻ </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

- Nếu blog của bạn đã có thư viện jquery rồi thì hãy xóa file màu xanh đi.

6. THêm mã bên dưới vào trước thẻ đóng </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

- Thay các phàn màu xanh thành các id của bạn tương ứng.

7. Lưu lại là oke.

Nguồn: http://namkna.blogspot.com

Blog Chia Sẽ Kiến Thức

Học Tập - Chia Sẽ

Chủ Nhật, 10 tháng 8, 2014

Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao

Bài 08: Hướng dẫn chèn comment facebook vào blogspot

Bài 07: Hướng dẫn sử dụng tiện ích

Thứ Bảy, 7 tháng 6, 2014

Hướng dẫn thêm "BACK TO TOP" vào blogspot bằng CSS

Hướng dẫn chèn comment facebook vào blogspot

Tạo Menu sổ xuống tích hợp Nhận xét và bài đăng mới nhất cho blogger

Thứ Năm, 4 tháng 4, 2013

Chỉnh sữa lỗi font chữ menu và tiêu đề bài đăng Blogger

Thứ Hai, 1 tháng 4, 2013

Floating Social Bookmark trượt đẹp cho blogspot

Popular Posts