Peeling Stickers Social Media Widget cho Blogger

Peeling Stickers Social Media Widget In Blogger

Một Social Widget với hiệu ứng vân gỗ khá đẹp mắt.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS sau vào trước thẻ ]]></b:skin>

p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 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;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}

HTML

2Trở lại Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code sau vào

<center><p id="socialicons"> 
<a href="hhttps://www.facebook.com/pages/Iris-Tips/914163981938548" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOembWqZrfa3_8ZOvm2GccjDWapSHw2DezSyREqfik0RzxaRnjMRft9x4EDXDcOr7ZOQ2TSMtCWKm4kLQIb26hcgqmjGyWW5smKfDVjJR7kNixCws_LS9229IEqEZKsNmaGdp-UUquGm3f/s1600/iristips-facebook.png" /></a> 
<a href="https://twitter.com/Iris_Tips" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnYLda7-_1Iin33LaEzfCLvAZLrSwGTS7Y6rrcmes96heERdAnJU2-B2rlK3Cx1RzNMIdjK_Ncd0KhNY6kbFx5q8qYRhyWwpqzVJLYUUqBlXhvQHRAsBxMQ28bI6q09MXXVQUYX-6p9PP/s1600/iristips-twitter.png" /></a> 
<a href="https://www.stumbleupon.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28_VPnnZovTWwZ96cRBK2sP7O_UA9faS7Z723_DsXK94ndpTrWAp_7IcBZscio6lnLoOocYkXzk_31HL91pq4_pkOlyaHu4UFnF4YMc19myC4UPTiBo8_cfrplTsrTmQcs_48kPe-hMjZ/s1600/iristips-stumbleupon.png" /></a> 
<a href="http://feeds.feedburner.com/IrisTips/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjywkncLn-B4-ObD0nr5rEOCCWMC3KC14ScJTmEEdi1cBavEgB9lpejo-1dRMT0FfwzaRP26yPMD3-G9rNgzbdJYoHOhO-SbEEl4tcPvJ25dWj4TH6WUGNpfNDdlabaUfOaaySC32wHWezO/s1600/iristips-rss.png" /></a></p></center>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm