Thư viện

Trải nghiệm

Thứ Năm, tháng 12 18, 2014

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

Hướng dẫn thủ thuật Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger tại Terocket. Cách làm nút social!

Chia sẻ:
[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger
Khi rê chuột vào nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này sẽ xoay 360 độ. Xem ở Demo nhé!

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="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/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="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/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="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/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="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/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="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/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="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/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.

Tham khảo một số thủ thuật liên quan đến Nút Button cho Blogspot tại Terocket

  1. [Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger
  2. [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
  3. [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger
  4. [Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger
  5. [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
  6. [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
  7. [Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
  8. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
  9. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  10. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1
Trứng Vịt - Terocket

5 nhận xét:

  1. Cho mình hỏi là mình muốn bộ nút trên nằm theo chiều dọc của trang và sát vào 1 bên lề thì làm như thế nào vậy ? Giống như bộ nút like và share ấy ? Xin cảm ơn bạn.

    Trả lờiXóa
  2. Khi inIn túi giấy ấn túi giấy để nếu muốn làm nổi bật quảng cáo thì các ý tưởng thIn túi giấy kraft giá rẻiết kế cần mang tính sáng tạo, đi từ sự đơn giản đến sang trọng sẽ luôn được cáIn túi xách giấy giá rẻc khách hàng tiềm năng đánh giá cao.
    Cơ sở chúng tôi nhận thiết kế miễn phí và làm các loại túi giấy có độ bền cao như:
    Túi giấy giá rẻ ( chất liệu duplex )

    Trả lờiXóa
  3. ng dich vụ, Pro nào đi qua ngó hộ em xem vì sao mãi nó k lên vs ạ. Nó cứ lẹt đẹt trang 3 mãi không lên được. trang c in tem bảo hành giá rẻ
    hà trọn gói" nhìn thì có vẻ dễ nhưng thực ra lại không đơn giản chút nào đâu bạn.Một miếng bánh mà nhiều người cùng muốn đượ
    ba kich
    chuối hột rừng uốn Giggs lên làm HLV vì sợ tương lai lớp trẻ, người muốn Mou về vì muốn thành công sớm, người muốn đuổi Val Gaal, người muốn Val Gaal ở lại. Không thống nhất thì làm sao mà ai dám ngồi ghê nóng tiếp quản MU. Thôi tôi vào FIFA game ngồi ghế nóng đưa MU nhuộmđỏ cả tr

    Trả lờiXóa