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 độ.





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ạ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:






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&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>
#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&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.