Tạo icon share cho Blogspot

BDL 9/11/2014

Một kiểu icon share khá nhiều blog đã sử dụng và mình xin chia sẻ một số style trong đó. Ngoài ra các bạn có thể thay đổi CSS để tạo ra một phong cách khác, cá tính theo cách của bạn. Đây là icon share cho từng bài viết.

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML tìm kiếm dòng sau:

</b:skin>

Thêm CSS sau vào trước nó:

/*Social Sharing Widget
----------------------------------------------- */
.social_fix {
margin:10px 0 0!important;
padding:10px!important;
border:1px solid #DDD;
background:#fff;
}
.social_txt span {
float:left;
text-transform:uppercase;
font-weight:normal;
padding:5px!important;
background:#2e2e2e;
margin-right:5px!important;
color:#ffffff
}
ul.social_menu {
list-style:none;
display:inline-block;
margin:0 0 0 10px!important
}
ul.social_menu li {
display:inline;
float:left;
background-repeat:no-repeat
}
ul.social_menu li a {
display:block;
width:40px;
height:33px;
padding-right:10px!important;
position:relative;
text-decoration:none
}
ul.social_menu li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px!important
}
ul.social_menu li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUrJHSwEjgfcYvtC2vC91I39YkfbhBe8tFdDFv_8RL-qeyp6DIfx3j_VBDKmXq8TUM1mqRZO3Uv1OJITAH8YRiqUdYxIefpqO7y4CMVEjFxpA-TYCBhejw29gdHf4uYrKAgkicGYPDgzo/s320/facebook.png)
}
ul.social_menu li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHAgkjzfRvAIlYxxfY1R4xkZq58qU7LT9maWt2SsQ_Ws2fAhSfH15f7qNWrSrBa-3XZgUr6qlRjJHvYZmtPRH7AOddIKk1QChHNiJ0FvdFNmqkeLzQOLfHLWPo8S3tS0GBpLtV36xvh0/s320/twitter.png)
}
ul.social_menu li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fBQrlLXGZ53goD1lSXXKTrXdc8-yun16X5NQAQYg4DE-pCLvX_upcQ9dv4uOfyWrDH1ESbGFo8TJ05EqF04IAeupqzf-_1ny_BEz_uTtuezh45vGs_29Gad6McJKB0bCL5RvbLMoIfs/s320/gplus2.png)
}
ul li.abpinterest {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5Ek_d4Ra6TpGMjOUjNzoCto-OUPBTG_tSe8XXrCmu8W4LtJRG8WVA10FjfDnx7GuHUsmE0i4VsnqYIqTNLdEvXkwhXEBlmJKfp4VtZHxr8swZiNZ0X9HAtBCPX6ROE9ljnQoNT1N7cw/s320/pinterest.png)
}
ul.social_menu li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfqKjRixgpjGKRY0TP9lswU6SHLfnP98Z0ZeS2iEJXPLBnr4IuH-jhw82JGs2NIJIc0ReSHca9m0vq0ZECmd4fdIc9O4kZ709V2E5azVSbig5K0VZndATz8pi54LDyGz0TV193H-aAv0/s320/stumbleupon.png)
}
ul.social_menu li.abdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifwd0sjVpDGfsf6fSj64fsFH7SRfuxpVyMa7lrchc-1pPvW32R5xtyz0iiQFQAsx6ZrCmJ6-SdtJS82souJhANzR0Cd80mDO2Zbwc4KP_Xo1G6ZufJLV79RUAvdPyU2o4VY6MPmBaLl04/s320/digg.png)
}
ul.social_menu li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYOHYBg9ZscgBXGNh9q1DsT04SPwyfBBO1aNhhgo1-woGB2fTXO7JKd7RUv21Ol2y1ZaGOHgHoMzDpYzugOgGyFIXV577dI7Hsy1ZIZ92e1K9fKMkR2wqhj3gTxAvp-j54GTOprM-kP4/s320/linkedin.png)
}
ul.social_menu li.abrdit {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKUbPqavMDXcVCfdQix4lZ8gOosgm26oXu_eVyrGNu1ZR8fIlOSsv197UZq3eDJdJ81ESI9ExTIe_fYTlrcXmLLvJfRL5xRkznOct1qBx8qDkyKjYXk1smunxZ2PnrKwTZ5Bx7WClWFE/s1600/redit.png")
}
#social_menu_animation:hover li {
opacity:0.2
}
#social_menu_animation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms
}
#social_menu_animation li a strong {
opacity:0;
-webkit-transition-property:opacity,top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity,top;
-moz-transition-duration:300ms
}
#social_menu_animation li:hover {
opacity:1
}
#social_menu_animation li:hover a strong {
opacity:1;
top:-15px
}

Bước 2: Tìm kiếm một trong những dòng sau:

post-footer-line post-footer-line-1
post-footer-line post-footer-line-2
post-footer-line post-footer-line-3

Tùy theo bạn muốn đặt nó ở đâu của bài viết thì chèn nó vào vị trí đó.
Tiếp theo thêm code XML sau:

<b:if cond='data:blog.pageType == "item"'>
<div class='social_fix'>
<div class='social_txt'><span>Share Article:</span>
<ul class='social_menu' id='social_menu_animation'>
<li class='abfacebook'>
<a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false; ' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='" http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow' title='Share this on Google+'><strong>Google+</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' rel='nofollow' title='Share This on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>

<li class='abdig'>
<a expr:href='" http://digg.com/submit?phase=2& url=" + data:post.url + " & title=" + data:post.title' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='abpinterest'>
<a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " & media=" + data:post.thumbnailUrl + " & description=" + data:post.title' rel='nofollow' title='Share This on Pinterest'><strong>Pinterest</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
</ul>
</div>
</div>
</b:if>

Chỉ đơn giản vậy thôi. ^^! nhưng mà nếu viết lại CSS thì cũng mất kha khá thời gian đó :)

Tạo icon share cho Blogspot

Bùi Đình Luyện

Bài viết Liên quan

Nhận xét

1 nhận xét từ bài viết ''Tạo icon share cho Blogspot"

Rating

Bài đăng phổ biến