Biểu tượng xã hội CSS cho Blogger

Hôm nay Hồng Designer sẽ cho bạn biết làm thế nào bạn có thể thêm Biểu tượng xã hội CSS cho Blogger mà đi kèm với hiệu ứng Hover trong Blogger. Khi được quét qua các biểu tượng CSS Transition diễn ra và các biểu tượng này di chuyển vòng 360 độ. Bạn có thể 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.

Thêm Biểu tượng xã hội CSS cho Blogger

Bước 1 : 

Thêm code HTML

Tới Blog Tiêu đề → Layout → 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/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsW6HlA9INz5OB_rrpq5iYrMqUmJVcAAf3jvrzrJjdsNBXSeqeBUgmloPr5nMA3SH4zIehOuRrEEW8GMaDi0rbI5ErI9HYISkDZ4I8ezUX84QrCkBrO028V6La7w3Y4iAMCHP-4SykUaXO/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTo_nomxU-_lerKgCP5fgFXaK994lblWVuZqjzdsh3hnym2JYDd8bwFptP_O-q7Di_QSmVrhv8a82bcsu_K4NOSMeGFEveYJ9y_yc05EhExfh65zXNTE6lNmFoRJLmoErJhxAGK19Ac3mu/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsZl1ywdpIm9Th-M3OjyKPzCrhuhfNvw0b13eIRpTOOD21Yv9lNspommc7gVO2OZLdrMs_keVM6JLsCVSr9NNGymzlO2bz9c-RWnzWIiI33XxlRho25Do4HMkTccf6T1cozv8yX0T4Pzu/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLtNc7r-BSbxvGuYod6RFdvNpiQMcmfngRicHKzJ33hZxYMv_Z4hYw9h2myvWMqS4IEwr0F3U5jZFu6_5F9HjNZuaJzb62zxgncpL9maOMR_19EGoDyr_mqm0BU0RAIddgkkrVQ9cZrW8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5Xk-qDc72JQaDSALn8Zdj3yqqzqFBVWYo7TyKQU1tC86LhnkGDqeRmsDW7cUbfj7Y91ge3nrjLcCnbN4flddtyTXq-L8y_FQD3wHBU0zIS1SJE9ISMGMddsnLicJ-6cYe_NlDvbNFKvc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlMRk-LIQ0Y2gLMJkpSc2cRdv9MBvIfj4Gs9Wwk8mvHWHKzyVKGWC1XjbEA9WgoGMq53lrbpublNGj1nXw7jTKo4bvr0CGECxcHaiUucYbcyjT-v7kWswbbnDj4dJJO0HN5fOah427IDM/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 các liên kết tô màu thành link của bạn. Hồng Designer chúc các bạn thành công.