Metro Style Social Blogger - Tạo Nút Chia Sẻ Blogspot Lên Mạng Xã Hội Đẹp

Thủ thuật tạo các nút chia sẻ bài viết lên các trang mạng xã hội Social Button. Thủ thuật này được chia sẻ trên các Blog với tên gọi Metro Style Social Media Widget For Blogger. Thủ thuật này mang phong cách giao diện của Metro phẳng, rất hiện đại, đơn giản, dễ thương và dễ nhìn. Chắc chắn các bạn sẽ hài lòng .

Các bạn vào trang quản lý Blogspot , thực hiện thao tác : Blog Title → Layout → Add Widget → HTML/JavaScript

Lựa chọn vị trí hiển thị thích hợp trên Blog của bạn . Trong giao diện HTML/JavaScript , các bạn chép Code sau vào :( Thay đổi ABCabc bằng tên tài khoản của bạn )

<div class='metro-social'>

<li><a class="fb" href=http://www.facebook.com/ABCabc></a></li>

<li><a class="tw" href=http://twitter.com/ABCabc></a></li>

<li><a class="gp" href="https://plus.google.com/ABCabc"></a></li>

<li><a class="pi" href=http://pinterest.com/ABCabc></a></li>

<li><a class="in" href=https://www.linkedin.com/in/ABCabc></a></li>

<li><a class="yt" href=http://www.youtube.com/ABCabc></a></li>

<li><a class="fd" href=http://feeds.feedburner.com/ABCabc></a></li>

</div>

<style>

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}

.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}

.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}

.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}

.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}

.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}

.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuVMRwt3Jt9OmCDJ0LYVM2Fi8lX6f2pdhSaWCltLiimfbFz37FsWyJXwSxSQ7_tucDwClF5ZEjxfPMZpaGySiRJ1M49nn56pzKOWikwoWMYYTjMEdxwzN0eW8O8TKsFdpACRTKJ877n0l/s200/facebook.png) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVrL6tLhN7DiH4L4FhnSqZahikWCVJb5OaQ4s68TvHw5tQzyLg7XB6B0eIAcmqC4E4I08jKSZHSMuTcKTCnyLuSaQjFSdyQvbuDVzVQ_mZFAPW_h6-ZaZcl_1mGMnD8zea2Z2UOLUaEfF/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpyZQkjZMUAomMQC8FceZp7NWXcNYJKgdrgHa_Hm8NAJTx43qddwx_Mcb0ApWaYtY0scQLc2x_PlHgz3fDddMHwT0rJUU2Fy3JQC9tfNlcJgOhTOa5DeSTYtRdxsBhvK4IE3tuZQ6OK2RG/s200/google%252Bplus.png) no-repeat center center #da4a38}

.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjociNP61TFJ6htL9uM-D0ATgzB4GENW3pvuwuRSfeh_cWoV_wkNvcSXVzMP6hgW-ZKNjVXMJVCeyFvsklq0QzphBiUZxEa4QXjkuqDLFxvOhftiMGAhUDQRFePvk6hdzsct3IFVpP0Opg/s45/pinterest.png) no-repeat center center #d73532}

.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtcrMui8ElOga30EJ8-_97ASyAWAHNnEIVtptjuWHHd47EMjJGloevOoE-myq5CVreA2yTtMlrEfPQ7_OBwDFikJu_UDd-1J6IXSivWTNMkSk9zhs4jO18qxXDGb0O2GIM0rULhVYrjJY/s45/linkedin.png) no-repeat center center #0097bd}

.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWtYryC7G2-nACf6pAgpTMlZ62ODbIH5QRxCZ0fS2q0RRcfVbfSO5ebGALla7G-2SZsXQ2134k7_6f1sV1glq3KApa8va6r-thV8aDCKg9zdxrCmCtUuvRNqYPB5wlwYNPXL90B1c4DU/s45/youtube.png) no-repeat center center #e64a41}

.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNfaakKWgd2ZQoaWNKoj6wadzokvyxQhmoBRv3pIlWeX0to0SJ4McRyWalH38CaaneaY5gkOrJ3r4yAnhMCcLoTFJGT9uleYX75oLjqzIz32vmyBsX5fAO4Zqoqio-PnC1ImqVHYjks_g/s45/feed.png) no-repeat center center #e9a01c}

</style>