Cara Membuat Tombol Sosial Media (Social Icon) Keren di Blog

Cara Membuat Tombol Socil Icon Button di Blog-Kali ini Algofixs akan berbagi tutorial mengenai cara memasang Tombol widget Social Button di Blog.
Baca juga : Cara Membuat Burung Twitter Terbang di Blog
 
Mudahnya navigasi berbagi merupakan nilai plus bagi anda, selain bisa meningkatkan traffic pemasangan widget social butto juga bisa di sebut brander auto, maksutnya secara tidak sengaja artikel anda secara suka rela di bagikan ke media sosial oleh pengunjung. Itulah kenapa sebuah konten berkualitas di perlukan.

Lalu apa dampaknya jika saya memasang social icon di blog?
Pertanyaan yang cermat, dampaknya adalah menambah navigasi pages/halaman yang di share pengunjung menjadi sebuah spam dan meningkatkan reputasi jejaring sosial anda.
Jadi jika judul artikel menarik, kemungkinan besar banyak orang pula yang secara suka rela mengunjungi blog anda.
Dan yang terakhir, dampak memasang social widget adalah menambah followers dan reputasi.
Kesimpulannya, memasang widget ini sama saja anda membangun sebuah populeritas sebuah situs, semakin anda populer semakin banyak pula orang yang tertarik dengan link situs anda di media sosial, karena jika situs sudah di percaya, tidak ada cara yang sulit untuk mendatangkan traffic.
Jika anda tertarik silakan ikuti langkahlangkah berikut ini :
Baca juga : Cara Mudah Memasang Tombol Followers Pada Blog

Cara Memasang Social Icon di Blog

• Login ke akun blogger anda
• Di menu dashboard pilih Layout
• Klik HTML/JavaScript
• Lalu masukan kode dibawah ini :

<style type="text/css">

/*start Facebook Icon*/

#SC a.sos1{

opacity:0.7;

margin:5px 5px 20px 20px;

padding:7px 5px 5px 5px;

background:#0282c2;

box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);

transform:matrix(0.866,0.1,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */

text-transform: uppercase;

border-radius: 5px;

float:left;

text-decoration:none;

height:20px;

color: transparent;

font: 12px 'Arial black';

letter-spacing:1px;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlfm0Ibj8Dm7ZDcvECzXLrDbe3Pmz7rAIAuByg39kq6XcRljuuv3uyeuCgxQvQwJ-mtYnUWD_JZM7W6164hf2nDPXXMWQry97-oMX__Q9v2s15jG4166j-QXxrfmjViIp1392OZYde3MD/s1600/Web-Facebook+icon.png');

background-repeat:no-repeat;

background-position:center;

background-size: 100% 100%;

}

#SC a.sos1:hover{

opacity:1;

box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);

}

/*End Facebook Icons*/

/*Start Google+ Icons*/

#SC a.sos2{

opacity:0.7;

margin:5px;

padding:7px 5px 5px 5px;

background:#d44137;

box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);

transform:matrix(0.866,0.1,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */

text-transform: uppercase;

border-radius: 5px;

float:left;

text-decoration:none;

height:20px;

color: transparent;

font: 12px 'Arial black';

letter-spacing:1px;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg044Op-BWtdTryc0axpcLUkLlKkZjgK1sqrxGBgkl6zu1LNAt9Io261Rv6-tRMTmIRVuxfF4ex38V6pH9zTsaRSTMJNVtOrmfy6zO6c6A8w-8LbrUmtPeVG-HbcVN22JtBZIcBA9t8TzrC/s1600/Web-Google+icon.png');

background-repeat:no-repeat;

background-position:center;

background-size: 100% 100%;

}

#SC a.sos2:hover{

opacity:1;

box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);

}

/*End Google+ Icons*/

/*Start Twitter Icons*/

#SC a.sos3{

opacity:0.7;

margin:5px;

padding:7px 5px 5px 5px;

background:#63c8f7;

box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);

transform:matrix(0.866,0.1,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */

text-transform: uppercase;

border-radius: 5px;

float:left;

text-decoration:none;

height:20px;

color: transparent;

font: 12px 'Arial black';

letter-spacing:1px;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_ED569bha3Nn9Byl0ncL8_oNxKaJCMqpEqfyLCxNiCG8955OfXoozlbgplv56jknNAm8I5I2hyT-q9zQbdSk8deNqYPV29tUSgRxG90WYHt4Z9SAqDsKUKTEzKGnJc2D6awD9C5Az-5x/s1600/Web-Twitter+icon.png');

background-repeat:no-repeat;

background-position:center;

background-size: 100% 100%;

}

#SC a.sos3:hover{

opacity:1;

box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);

}

/*End Twitter Icons*/

/*Start RSS Icons*/

#SC a.sos4{

opacity:0.7;

margin: 5px;

padding:7px 5px 5px 5px;

background:#fc9c14;

box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);

transform:matrix(0.866,0.1,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */

text-transform: uppercase;

border-radius: 5px;

float:left;

text-decoration:none;

height:20px;

color: transparent;

font: 12px 'Arial black';

letter-spacing:1px;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqFbYS3VtN6WQNbopYa7L9BvXjvG58Sd3eulvTp_SD3orXFnhMEvTl2Z7AST1gP4oBGdJ0lBkv499ilOOj8KLUHWmQOATHgCqAGeBwR-QvBJPdgiw1-FB-8taeVvhT8gykhCpVWTo4am-/s1600/Web-RSS+icon.png');

background-repeat:no-repeat;

background-position:center;

background-size: 100% 100%;

}

#SC a.sos4:hover{

opacity:1;

box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);

}

/*End RSS Icons*/

</style>

<center><div id="SC">

<a href="<span style="color: #ff0000;">URL-FACEBOOK-PROFILE</span>" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a>

<a href="<span style="color: #ff0000;">URL-GOOGLE PLUS-PROFILE</span>" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>

<a href="<span style="color: #ff0000;">URL-TWITTER-PROFILE</span>" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>

<a href="<span style="color: #ff0000;">URL-RSS-FEED</span>" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>

</div></center>[Get This Icon]</small></a></div>

• Jangan lupa tekan save

Coba refresh blog anda dan lihat hasilnya.
Bagaimana, mudah bukan cara membuat social icon keren di blog? Jika masih ada pertanyaan silakan tinggalkan komentar anda di bawah. Semoga artikel ini bermanfaat.
Baca juga : Cara Mudah Memasang widget Instagram Pada Blog

Share :