CSS biểu tượng xã hội với Hover Effect cho Blogger

Hôm nay tôi sẽ cho bạn biết làm thế nào bạn có thể thêm CSS biểu tượng xã hội mà đi kèm với hiệu ứng Hover trong Blogger. Khi được quét qua các biểu tượng CSS chuyển tiếp diễn ra và các biểu tượng này di chuyển vòng 360 độ.


Bạn sẽ nhìn thấy cùng một loại biểu tượng trên blog SpiceUpYourBlog.com phổ biến.  Bạn có thể thêm các biểu tượng của RSS, Email, Facebook, Twitter, Google+ và Pinterest. Các thử nghiệm trực tiếp của các nút này có thể được nhìn thấy dưới đây:


IconIconIconIconFollow Me on Pinterest
Vì vậy, để thêm các biểu tượng xã hội mát mẻ vào blog blogger của bạn. Thực hiện theo các bước dưới đây

Bước 1: Thêm HTML


Đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript. Dán mã dưới đây vào hộp.

<style>

#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/vnnpay" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCKGDr3qxbkzamc2Hq_XvMz0aQDDU4pmlSeKqymvc_JZuhlb_vwdhoTfeLbJ1lfffl6-f7KxR27XlysdSKT3GrLJzVQsOG5lmmjhppk71mI3EW2hasC54su_XGrpABHF4IpwA82fdYWVyG/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=vnnpay&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/AVvXsEg9QruxK5AsDbthTyWGno4TpnvdcqrM0VMWi38ldLEAzrBLNNq8EQFdN8oGKwTihpuxX4rvZNhSpe3g-FUJnXx4cDdwNrtRTGY6_3EYQoLM9U_yMFrOdIwfauVF0pkElsYyUmkfLpB7l6oE/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/vnnpay" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEKq9ovXVeEwUygR4X62RS6ilXs9JrHeDW7xs2KyNryV05vJ3mNUz269N1L2nz6kVMc88YsfRgAbZygQ1Ng0oeGKnZK83KmGWUzINsGDpyXPPuXwcsEyJD8YAtpkr25FACaZudMFwIcRh/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/lutip_com" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQ5Pzt1_dnnYFx49uOmEl8cZ5e19exWDSbwNprJ9qbULYMvUN8pQJDefBpzYKyAqPWie2m8e5D9kWA6YV2-DnmzpuRHUkf3eneYlvcQbuqfRhJbBlIbJxMuEwVSP0A51v3xbPAsIF6rtO/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/+Lutipdaomynhan" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKOQuB3pyBCvf153dKpNYkjgB8JlxSeH4L9w6URGx7pwdJIkbN1VT9Vn-Lc3UZxyjgOvcTmSRUrCEGRwpfUr6favrvWvjzHxlfvQ5ug0dC7EdX215gp-xaZR08E25y3aIS-ZNIixryoNp/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/vnnpay/" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQQf9htBqr1bKCPdMhIh29JDNFuBscA0jRK7ZRPwbk_DMsf05NWYLAEbtTmQSyR6eld32yZbv8XK_yAaHHZZK6McCiik1HEIqTfFi7AoiJoYEPuI9nTrN5cRzuZHJ8rAC8lxdvT3XJy2Z4/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>

Bước 2: Chỉnh sửa Liên kết


Chỉnh sửa văn bản màu xanh với URL mong muốn của bạn. Lưu các Widget. Sau khi lưu các phụ tùng, lưu mẫu. Bạn đang làm bây giờ. Bây giờ bạn và truy cập của bạn có thể thấy các biểu tượng xã hội mát mẻ trên blog của bạn.
Các tin khác