Nút Share trượt hình quả trứng cho blogspot

Hôm nay namkna sẽ hướng dẫn các bạn cách tạo một nút chia sẻ hình quả trứng cho blog. Tiện ích này đực namkna giới thiệu theo yêu cầu của bạn Mrdix89. Đặc điểm của tiện ích là ban đầu khi chưa rê chuột vào thì các nút share có hình quả trứng, sau khi rê chuột vào thì quả trứng tách đôi ra và hiện nên các nút share để bạn có thể tùy chọn.
Các bạn có thể xem Demo để thấy rõ hơn.

Demo for Post

☼ Cách tiến hành:

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

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sửa HTML

   4- Dán đoạn code sau vào trước thẻ đóng </head>.

<!-- Start Heart Bookmarking Gadget Code From http://namkna.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://namkna.blogspot.com/ -->

   4- Dán đoạn code sau vào trước thẻ đóng </body>.

<!-- Start Heart Share Code From http://namkna.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>
<a href="http://namkna.blogspot.com/2012/05/nut-share-truot-hinh-qua-trung-cho.html">Blogger Gadgets</a>
<!-- End Heart Share Code From http://namkna.blogspot.com/ -->

Trong đó:

• bottom: 2% là vị trí của tiện ích so với chân blog.
• left: 2% là vị trí của tiện ích so với cột tay phải.

  5-  Bấm Lưu   (save Widget) lại.

Chúc thành công! 

(spiceupyourblog.)

Chủ đề:

Thêm nút Google+1, Tweet, Like Facebook, Pin It buttons theo chiều ngang vào Blogspot

Mặc dù butthons Facebook Like, Twitter Tweet và Google+1. Các nút chia sẻ này có thể được dễ dàng thêm vào bài viết Blogger bằng cách làm theo hướng dẫn của mình, sắp xếp chúng một cách hoàn hảosao cho hợp với bố cục của mỗi blog.

Để không mất công ngồi giải thích cách sắp xép các nút like hiện tại của bạn, namkna nghĩ rằng nó dễ dàng hơn thông qua việc cung cấp cho các bạn một Code sẵn có để các bạn sử dụng. Đơn giản chỉ cần loại bỏ các nút like hiện tại của bạn và thêm mã mới.
Bạn có thể xem hình sau để thấy rõ hơn:

Cách tiến hành:

1. Đăng nhập vào Blogspot
2. Chọn Thiết Kế
3. Chọn Chỉnh sửa HTML
4. Chick vào ô Mở rộng tiện ích mẫu (Expand Widget Templates)
5. Tìm đoạn Code sau

<data:post.body/>

    6. Thêm vào trước nó đoạn Code sau:

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<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;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

Chúc thành công!

Chủ đề:

Thêm trang Google + badge vào blog của bạn

Nếu bạn đã tạo ra một trang Google + cho blog của bạn, tăng lượng độc giả của bạn bằng cách thêm một widget lên blog. thẻ cho phép người dùng thêm trang Google+ của bạn vào vòng kết nối của họ mà không cần rời khỏi blog của bạn, tương tự như Box Cũng giống như Facebook, nhưng tốt hơn.Thẻ  Google + sẽ không chỉ thúc đẩy blog của bạn trên Google + (mạng xã hội), nhưng sẽ giúp nó xếp hạng trong kết quả tìm kiếm của Google là tốt.

XEM DEMO

Dưới đây là một số lý do tại sao bạn sẽ muốn đưa Google + vào blog của bạn:

• Nó cung cấp cho người sử dụng đề nghị cá nhân khắp nơi trên web, bằng cách kết nối +1 cho blog của bạn với s +1 Google + trên trang của bạn.
• Nó có thể hội đủ điều kiện trang web của bạn cho Google + Kết nối trực tiếp, giúp người dùng tìm thấy Google + trang của bạn và cho phép họ thêm nó vào vòng tròn kết nối của họ trực tiếp từ bên trong Google Search.
• Nếu bạn đang ở trên Google Kết nối bạn bè, bây giờ là thời điểm tốt để bắt đầu mang theo GFC của bạn để trang + Google của bạn bởi vì Google đang nghỉ hưu GFC (đối với tất cả các trang web-Blogger) từ 01/03/2012.

I) Cách thêm Google+ badge

• Thêm vào blogger
  1. Đăng nhập (Login) vào blog của bạn.
  2. Chọn Thiết Kế (Design) > Phần tử trang (Page Elements).
  3. Click chọn Thêm Tiện ích (Add A Gadget) và chọn HTML/Javascript gadget.
  4. Copy code bên dưới và pate vào ô đó. 

<!-- Google +1 script -->

<link href="https://plus.google.com/115432539722668400541" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>
<!-- Link blog to Google+ page -->
<a style='display: block; height: 0;' href="https://plus.google.com/u/0/115432539722668400541/" rel="publisher">&nbsp;</a>
<!-- Google +1 Page badge -->
<g:plus href="https://plus.google.com/u/0/115432539722668400541/" height="131" width="300" theme="light"></g:plus>

Trong đó: Thay thế 115432539722668400541 thành Id Google + của bạn.
Xác định Id bằng cách:
- Đăng nhập vào Google +
- Bấm vào profile gó trên cùng bên trái.

Khi đó bạn được 1 URL như sau:

https://plus.google.com/Id google +/posts

Id chính là đoạn nằm giữa https://plus.google.com/ và /posts
Ví dụ URL như sau:

https://plus.google.com/u/0/115432539722668400541/posts

thì ID là:

u/0/115432539722668400541

2. Thay đổi, tùy biến giao diện của Google + badge.

Bạn có thể tùy chỉnh thông số trong đoạn code sau:

<g:plus href="PUT YOUR G+ PAGE URL HERE" height="131" width="300" theme="light"></g:plus>

Xin vui lòng tham khảo bảng dưới đây để biết thêm chi tiết.

1. Thay đổi chiều cao    height="131"  , thay đổi chiều cao  width="300".
2. Để thiết lập nền màu nền ví dụ đổi màu đen thay vì màu trắng, thay đổi  theme="light"  thành  theme="dark" .
3. Để thay đổi độ rộng của các thẻ, thay đổi Width.

• Giá trị tối đa cho chiều rộng là 1024 (px).
• Tối thiểu là 160 (px) cho thẻ tiêu chuẩn và 100 (px) cho thẻ nhỏ.

Kích thước	Badge	Thuộc tính	Giá trị
Standard badge	Chú thích: Các thành phần hiển thị của tiện ích phụ thuộc vào chiều cao, nếu bạn thu nhỏ chiều cao thig thành phần hiển thị sẽ ít đi.	height	131
Small badge		height	69
Dark theme		theme	dark
Badge width	(Với width="200" thì không có ảnh)	width	put width value here

- Các bạn có thể Truy cập vào đây để xem thêm:
- Chú ý: Lưu ý: Nếu tên trang Google + là đủ ngắn,  “We’re on” cụm từ ở phía trước của G màu đỏ + nút sẽ được thay thế bằng "[pagename] on".

Chúc thành công!

Chủ đề:

Cách đăng ký và sử dụng FeedBurner cho Blogspot

FeedBurner là một sản phẩm được Google mua lại vào năm 2007, giúp nhà xuất bản phân tích, tối ưu hoá, quảng bá, và kiếm thu nhập quảng cáo từ các nguồn cấp dữ liệu RSS của họ.

FeedBurner có rất nhiều tác dụng đặc biệt là trong quá trình thiết kế của một trang Web, hiện nây rất nhiều tiện ích yêu cầu phải có feed mới có thể chạy được. Do vvayj hôm nay namkna sẽ hướng dẫn các bạn đăng ký một FeedBurner cho blogspot của các bạn.

Các thực hiện:

- Bước 2: Đăng ký một Feed cho Blogspot.
Trước tiên các bạn phải có một địa chỉ gmail (Chính là địa chỉ mail đăng nhập vào Blog của bạn)

Các bạn truy cập vào trang sau:

http://www.feedburner.com/

- Tại đó các bạn đăng nhập bằng địa chỉ gmail của mình (Lưu ý: Đăng nhập bằng địa chỉ Gmail Blog của bạn như thế mới có thể sử dụng cho blog của các bạn được).

Sau khi đăng nhập tại ô "Burn a feed right this instant" bạn điền địa chỉ blog của bạn vào. 

 Tại cửa sổ tiếp theo có 2 lựa chọn là Atom hoặc RSS các bạn bấm chọn vào RSS.

Tiếp tục chọn next.

- Chọn Next

- Đến đây hoàn tất đăng ký Feed
- Bước 3 chỉnh sửa và lấy link feed:
Bạn bấm vào ô Edit Feed Detail..

Nếu bạn nào tạo rồi nhưng thoát ra từ trước rồi  thì thay đổi Tại phần quản lý http://www.feedburner.com/ bấm vào tên feed bạn vừa tạo. sau đó bấm vào Edit Feed Detail để lấy link dán vào blog.

Bạn cũng có thể tiến hành thay đổi tên feed bàng cách bấm vào Edit Feed Detail, tại ô Feed Address bạn thay đổi lại tên sao cho dễ nhớ sau đo bấm Save Feed Detail.

- Đó chính là link feed để dán vào blog của bạn:

- Bước 3: Sử dụng feed dán vào Blog.
+ Cách 1: Đối với các bạn sử dụng giao diện mới.

• Bạn đăng nhập vào Blog.
• Chọn Cài Đặt (Setting)
• Chọn Khác.
• Điền tên Feed ở trên vào ô URL Chuyển hướng Nguồn cấp dữ liệu Bài đăng.
• Chọn: Lưu Cài Đặt (Save Setting)

+ Cách 1: Đối với các bạn sử dụng giao diện mới.

• Bạn đăng nhập vào Blog.
• Chọn Cài Đặt (Setting)
• Chọn Nguồn Cấp trang Web.
• Điền tên Feed ở trên vào ô URL Chuyển hướng Nguồn cấp dữ liệu Bài đăng.
• Chọn: Lưu Cài Đặt (Save Setting)

Chúc thành công!

Chủ đề:

Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger

Để Blog đẹp hơn ta có thể áp dụng hiệu ứng cuộn tròn cho các hình ảnh. Với hiệu ứng này các nút Share sẽ quay vòng theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ tùy vào sự điều chỉnh của các ban.
Các bạn có thể xem Demo Demo:

Xem Demo

360 degree spin onMouseover and onMouseout

60 degree spin onMouseover and onMouseout

-360 degree spin onMouseover ONLY

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn tao hiệu ứng quay vòng:
Tiếp theo vào  Thiết kế  ->  Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-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;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Thêm một HTML/Javarscrip và thêm đoạn dưới vào:

<b>360 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons">
<a href="http://namkna.blogspot.com/feeds/posts/default">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqQXa8IBRRb7lQOctwX8l4d8glbONVh3-qHhxcWirLjoXVK_QkSCLRWVtjaOlJQgX-ku0as1rKiLZ4PONmQ1bvZUPpa5rL1XoawpKMqb8giC5tfWQ-U8etZCW88Zm4gnXLMSE5o6iA4cw/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3Cyubu5mxW_cmtmqUEv1eJD8ag_DF_tMElZr3fdMTzgHYHJEYuHRh6X8fJSBXLNCbmEJawnuceTact-iegjD6bMYbqzJDSLe1ujCbaUUWjCW2szGuJ0pBKXE0JmH-sYgb5uSQ3kQiPL7/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYfgrgaJwcIoFmMe0Skf4esPCTHOi3S7mqE8xx_cTF2bEYhhVyRHt6UQ-ogDVcjtq4QWzmFdtPkrcmiu1fbL8jGWV7X_4NYu4AgTa6CqSZH6SfIWd7Qgn-KlsjW9arnttN8YJAxi1yCG5/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNlVNlLfaI54DlyEP3ou5QBVm6hFirZg3XjMBo2C7tinexvsK75m27dIb7hRRarWHGGepsOw3sWcCTBfRBH9_NjbetnBr9BELbSdBWBhjgdXlQ3DK5p3MUV_ISM0I_JN1OplF_TdVQtpIS/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRq8BORIo-L9mxQ28PMHQzePLoWafZk1pinBf8cDNkKdEyQqTAYo078dskBDjIVK80tS96xV_zxK5Rsh8zfxtCVxmh6S1NgPG9VhzRo_vehEvUC7TVymmsaYfk7hz8QM9ZcgPpNK3wqxW/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>60 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons2">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqQXa8IBRRb7lQOctwX8l4d8glbONVh3-qHhxcWirLjoXVK_QkSCLRWVtjaOlJQgX-ku0as1rKiLZ4PONmQ1bvZUPpa5rL1XoawpKMqb8giC5tfWQ-U8etZCW88Zm4gnXLMSE5o6iA4cw/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3Cyubu5mxW_cmtmqUEv1eJD8ag_DF_tMElZr3fdMTzgHYHJEYuHRh6X8fJSBXLNCbmEJawnuceTact-iegjD6bMYbqzJDSLe1ujCbaUUWjCW2szGuJ0pBKXE0JmH-sYgb5uSQ3kQiPL7/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYfgrgaJwcIoFmMe0Skf4esPCTHOi3S7mqE8xx_cTF2bEYhhVyRHt6UQ-ogDVcjtq4QWzmFdtPkrcmiu1fbL8jGWV7X_4NYu4AgTa6CqSZH6SfIWd7Qgn-KlsjW9arnttN8YJAxi1yCG5/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNlVNlLfaI54DlyEP3ou5QBVm6hFirZg3XjMBo2C7tinexvsK75m27dIb7hRRarWHGGepsOw3sWcCTBfRBH9_NjbetnBr9BELbSdBWBhjgdXlQ3DK5p3MUV_ISM0I_JN1OplF_TdVQtpIS/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRq8BORIo-L9mxQ28PMHQzePLoWafZk1pinBf8cDNkKdEyQqTAYo078dskBDjIVK80tS96xV_zxK5Rsh8zfxtCVxmh6S1NgPG9VhzRo_vehEvUC7TVymmsaYfk7hz8QM9ZcgPpNK3wqxW/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>-360 degree spin onMouseover ONLY</b></p>

<p id="socialicons3">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqQXa8IBRRb7lQOctwX8l4d8glbONVh3-qHhxcWirLjoXVK_QkSCLRWVtjaOlJQgX-ku0as1rKiLZ4PONmQ1bvZUPpa5rL1XoawpKMqb8giC5tfWQ-U8etZCW88Zm4gnXLMSE5o6iA4cw/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3Cyubu5mxW_cmtmqUEv1eJD8ag_DF_tMElZr3fdMTzgHYHJEYuHRh6X8fJSBXLNCbmEJawnuceTact-iegjD6bMYbqzJDSLe1ujCbaUUWjCW2szGuJ0pBKXE0JmH-sYgb5uSQ3kQiPL7/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqYfgrgaJwcIoFmMe0Skf4esPCTHOi3S7mqE8xx_cTF2bEYhhVyRHt6UQ-ogDVcjtq4QWzmFdtPkrcmiu1fbL8jGWV7X_4NYu4AgTa6CqSZH6SfIWd7Qgn-KlsjW9arnttN8YJAxi1yCG5/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNlVNlLfaI54DlyEP3ou5QBVm6hFirZg3XjMBo2C7tinexvsK75m27dIb7hRRarWHGGepsOw3sWcCTBfRBH9_NjbetnBr9BELbSdBWBhjgdXlQ3DK5p3MUV_ISM0I_JN1OplF_TdVQtpIS/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRq8BORIo-L9mxQ28PMHQzePLoWafZk1pinBf8cDNkKdEyQqTAYo078dskBDjIVK80tS96xV_zxK5Rsh8zfxtCVxmh6S1NgPG9VhzRo_vehEvUC7TVymmsaYfk7hz8QM9ZcgPpNK3wqxW/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

Lưu ý: Ở trên mình phân làm 3 mầu khá nhau ứng với một loại menu khác nhau, nếu chỉ sử dụng 1 loại thì bạn xóa các màu còn lại đi nha.

Chúc thành công!

theo: dynamicdrive.

Chủ đề:

Tiện ích các nút Share trượt dọc cho Blogspot (sticky sidebar)

Đối với những người đang sở hữu web/blog thì công cụ chia sẻ lên mạng xã hội like, tweet... không thể, nó có thể giúp đọc giả chia sẻ bài viết hay làm tăng trafic cho web/blog. Có rất nhiều cách để đặt các tiện ích này, hôm nay namkna chia sẻ cùng các bạn cách bố trí các công cụ hữu ích này theo chiều dọc và với hiệu ứng trượt kế phần main mỗi khi bạn cuộn (scrollbar) chuột xuống phía dưới. Nó giống như dạng các banner quảng cáo trượt dọc 2 bên của blogspot mà namkna giới thiệu. 

Các bạn có thể xem Demo.

Demo for Post

Hình ảnh minh họa:

 Cách 1: Không sử dụng Javar Scip.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa Phần tử trang 
4. Chọn Thêm tiện ích (Add Widget) và Thêm đoạn code sau vào:

<style>
/* Fixed Positioned AddThis Toolbox */
.sharing_box_namkna {
position: fixed;
top: 10%;
right: 0;
border: 3px solid #00EE00;
padding: 5px 5px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #F0FFFF;
width: 60px;
min-height: 345px;
}
.sharing_box_namkna .item {
width: 50px;
margin: 5px 0 5px 0;
}
.twitter_float iframe
{
width:55px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box_namkna'>
<div style='text-align:center; margin-top:5px'>
<img alt='Share Emphasis' height='46px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMO0IAjK-s31LjABQOBNxLqAsyqe66ZdVk3RFDtm-KYoMPxhyphenhyphenqUXeuXYj4Cb_ALbSlMveUNy3eVcSHJHzWo-5Z7mLqD5JUuq66heDnxdYzhCuiXZGllJ9lsUYuiHxu6B-s283MnNllZ2G/s1600/obtenir-par-poste-icone-5533-48-+-namkna-blogspot-com.png' width='56px'/>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:3px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>

<!-- FACEBOOK -->
<div class='item' style='margin-left:3px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
<div id='fb-root'></div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:5px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:5px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<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/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
      li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- AddThis Button END --> 

5. Chọn lưu mẫu.
6. Tiếp theo chọn Chỉnh sửa HTML và thêm đoạn code bên dưới vào trước thẻ </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

8. Cuối cùng Lưu mẫu lại.

Cách 2: sử dụng JQuery.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ <head>

<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/stickysidebar.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
</script>

<style>
#share-buttons {
background:  #fff;
border: 1px solid #ccc;
margin-left: -82px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
</style>

- Lưu ý: Các bạn nên thể Download 2 File Js trên về Tại Đây và upload lên host riêng để dùng lâu dài.

6. Bây giờ bạn tìm đến dòng code bên dưới hoặc tương tự (do đặc điểm cấu tạo của mỗi blog nên có chút khác nhau nhỏ).

<div class='post-header-line-1'/>

7. Tiếp theo bạn chèn code bên dưới vào sau code vừa tìm được

<div id='share-buttons'>
<div class='twitter scount'>
<a
 class='twitter-share-button' data-count='vertical' data-text='List Only
 Post Titles On Blogger Labels Pages' 
data-url='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 data-via='paulcrowepro' 
href='http://twitter.com/share'>Tweet</a><script 
src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div class='facebook scount'>
<fb:like
 font='' 
href='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html'
 layout='box_count' send='false' show_faces='false' width='50'/>
</div>

<div class='stumble scount'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>

<div class='gplus scount'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>
</div>

Ở trên mình chỉ đưa một số công cụ phổ biến bạn có thể dựa vào đó để thay đổi bổ sung hoặc xóa bớt cho phù hợp với site của bạn.

8. Cuối cùng Lưu mẫu lại.

Chúc thành công!

Chủ đề: