THÊM WIDGET ĐẸP BOOKMARKING XÃ HỘI (CSS / JQUERY) CHO BLOGGER / BLOGSPOT

Thêm Widget đẹp Bookmarking xã hội (CSS / jQuery) cho Blogger / Blogspot


Logo  Đẹp chia sẻ mạng xã hội  đánh dấu widget cho blog của bạn với CSS3 và jQuery. một tiện ích tuyệt vời và cái nhìn tốt đẹp với CSS3 và jQeury hiệu ứng di chuột.

LÀM THẾ NÀO ĐỂ THÊM WIDGET NÀY VỚI CSS3?

  1. Blogger Bảng điều khiển > Thiết kế tab> Edit HTML tab
  2. Chack Mở rộng Widget Templates hộp kiểm
  3. Thêm vào Dưới đây Mã ngay trước khi </ head> tag

    <style type="text/css">
        /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
        ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }  
        ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
        ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }  
        ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}  
        ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }  
        ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }   
        ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }  
        ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }  
        ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }  
        ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }  
        ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }  
        ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }  
        ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); }  
        #way2blogging-cssanime:hover li { opacity:0.2; }  
        #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }  
        #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }  
        #way2blogging-cssanime li:hover { opacity:1; }  
        #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }  
        /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
            </style>
  4. Tìm kiếm <data:post.body/> tag
  5. Và thêm vào bên dưới Mã Sau khi nó!

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <ul class='way2blogging-social' id='way2blogging-cssanime'>
            <li class='way2blogging-facebook'>
            <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
            </li>
            <li class='way2blogging-twitter'>
            <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
            </li>
            <li class='way2blogging-googlebuzz'>
            <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
            </li>
            <li class='way2blogging-stumbleupon'>
            <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
            </li>
            <li class='way2blogging-digg'>
            <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
            </li>
            <li class='way2blogging-delicious'>
            <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
            </li>
            <li class='way2blogging-linkedin'>
            <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
            </li>
            <li class='way2blogging-reddit'>
            <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
            </li>
            <li class='way2blogging-technorati'>
            <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
            </li>
            </ul>
            </b:if>
  6. Lưu Mẫu Bây giờ! Xong!

LÀM THẾ NÀO ĐỂ THÊM WIDGET NÀY VỚI JQUERY?

  1. Blogger Bảng điều khiển > Thiết kế tab> Edit HTML tab
  2. Chack Mở rộng Widget Templates hộp kiểm
  3. Thêm vào Dưới đây Mã ngay trước khi </ head> tag

    <style type="text/css">
        /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
        ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }  
        ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
        ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }  
        ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}  
        ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }  
        ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }   
        ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }  
        ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }  
        ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }  
        ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }  
        ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }  
        ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }  
        ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); }  
        /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
            <script type="text/javascript">
        // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org 
        $(document).ready(function () {
        $("#way2blogging-jqueryanime li").each(function () {
        $("a strong", this).css("opacity", "0");
        });
        $("#way2blogging-jqueryanime li").hover(function () {
        $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
        $("a strong", this).stop().animate({
        opacity: 1,
        top: "-10px"
        }, 300);
        }, function () {
        $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
        $("a strong", this).stop().animate({
        opacity: 0,
        top: "-1px"
        }, 300);
        });
        });
        // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org 
            </script>
  4. Tìm kiếm <data:post.body/> tag
  5. Và thêm vào bên dưới Mã Sau khi nó!

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <ul class='way2blogging-social' id='way2blogging-jqueryanime'>
            <li class='way2blogging-facebook'>
            <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
            </li>
            <li class='way2blogging-twitter'>
            <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
            </li>
            <li class='way2blogging-googlebuzz'>
            <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a>
            </li>
            <li class='way2blogging-stumbleupon'>
            <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
            </li>
            <li class='way2blogging-digg'>
            <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
            </li>
            <li class='way2blogging-delicious'>
            <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
            </li>
            <li class='way2blogging-linkedin'>
            <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
            </li>
            <li class='way2blogging-reddit'>
            <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
            </li>
            <li class='way2blogging-technorati'>
            <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
            </li>
            </ul>
            </b:if>
  6. Lưu Mẫu Bây giờ! Xong!
Bạn thực hiện.
Hãy Thả Bình luận có giá trị của bạn Giới thiệu về bài viết này và Blog Chúc mừng!

Sưu tầm bởi : www.meovatcuocsong.blogspot.com

Comments

Post a Comment

Popular posts from this blog

Tự làm mỳ hình chiếc nơ không cần máy

Image
Có nhiều tỉ lệ trứng với bột khác nhau, tùy nơi làm, nhưng chúng tôi khuyên bạn dùng 1 quả trứng với ½ cup bột mỳ. - Bạn đổ bột mỳ thành đống hình núi. - Sau đó làm một hố như hình núi lửa rồi đập trứng vào. - Rắc lên chút muối và dùng dĩa quấy nhẹ trứng, từ từ đánh bột mỳ xung quanh vào. - Một khi hỗn hợp bột bắt đầu sền sệt thì bạn có thể dùng tay để nhào cho kỹ hơn. Bạn có thể cần cho thêm chút nước nếu bột khô quá. Khi bột đã thực sự nhuyễn, bạn nặn thành quả bóng và dùng nilon thực phẩm bọc lại rồi để khoảng nửa tiếng. Bột sẽ được nghỉ và dễ thao tác hơn sau đó. - Cắt quả bóng thành đôi hoặc thành tư, bắt đầu dùng chày cán mỏng từng phần một, cố gắng cán thành hình chữ nhật và thật mỏng. Sau đó, bạn dùng dao sắc cắt thành các hình chữ nhật nhỏ 4x2,5cm. Bạn bóp ở trung điểm 2 chiều dài vào với nhau để tạo thành hình cái nơ. Xem bài viết đầy đủ
Read more

Thưởng thức bánh ngon 3 miền mùa thu

Image
Trong không khí mát mẻ của mùa thu, với những cơn mưa bất chợt vào buổi chiều se lạnh, được thưởng thức những loại bánh nóng hổi, giòn tan như bánh xèo, bánh đúc, bánh chuối hấp... thật sự hấp dẫn. Bánh xèo là món ăn đặc trưng của miền Trung và Nam bộ. Để có được chiếc bánh xèo giòn tan thì khâu pha bột là rất quan trọng. Với cách làm bánh xèo này, bạn nên cho thêm chút bia khi pha bột để bánh giòn lâu hơn và lúc pha bột xong bạn nên để bột ngấm đủ nước, thi thoảng khuấy đều để bột không bị lắng xuống dưới. Bánh xèo miền Trung tuy không có mầu vàng tươi của bột nghệ nhưng vẫn rất hấp dẫn bởi màu trắng đục của bột gạo, với những con tôm đỏ tươi bên trong thật hấp dẫn. Không chỉ thơm ngon, nóng hổi, bánh xèo miền Trung còn chinh phục người ăn bởi sự phong phú của nước chấm. Ngoài chén nước chấm chua ngọt như cách ăn của người miền Nam, còn có chén nước chấm mắm nêm được pha đậm đà, vừa ăn hay chén nước chấm pha với đậu phụng thơm ngon và có vị hơi béo. Chiếc bánh nhỏ, nóng hổi và giòn rụ
Read more

Cùng Linh Tây đón Giáng sinh tại Doha cafe

Image
Nằm nổi bật ở ngõ 178 Thái Hà, Doha cafe – Cái tên gắn gọn dễ đọc dễ nhớ. Tên quán được thiết kế theo kiểu nửa vòng tròn và một vòng tròn với ý nghĩa tượng trưng cho sự “tròn vị” trong cả đồ ăn lẫn đồ uống. Nó là sự hòa trộn của các vị cay, chua, mặn, ngọt. Ngoài ra, chính màu sắc của tên quán cũng tượng trưng cho điều này. Vị cay là đỏ, xanh là chua, mặn là trắng và ngọt là vàng. Tên quán được thiết kế theo kiểu nửa vòng tròn và một vòng tròn với ý nghĩa tượng trưng cho sự “tròn vị” trong cả đồ ăn lẫn đồ uống. Nó là sự hòa trộn của các vị cay, chua, mặn, ngọt. Ngoài ra, chính màu sắc của tên quán cũng tượng trưng cho điều này. Vị cay là đỏ, xanh là chua, mặn là trắng và ngọt là vàng. Không gian ở quán nhỏ xinh, đơn giản nhưng vẫn toát lên được sự sang trọng, lịch sự, ấm cúng. Đặc biệt bên cạnh những đồ uống quen thuộc và cả cocktail, mocktail thì  menu đồ ăn cực kỳ phong phú mà giá cả lại rất phải chăng cho teen chúng mình nhé. Linh tây cực kì nghiện món pizza hải sản và soup hải sản
Read more