Pada artikel sebelumnya pernah aku bagikan artikel yang sama ihwal Cara menciptakan social share button lengkap dengan Whatsapp, Line dan BBM, namun kali ini Social Share yang aku bagikan sangat simple dan gampang untuk diterapkan diblog.
Terdapat 3 tombol share umum yang aku letakan pada social share kali ini, ialah Facebook, Twiter dan Google+.
Untuk penerapannya, ikuti langkah-langkah berikut:
Langkah 1
Letakan arahan CSS berikut diatas </style>
/* Simple Socshare With Font Awesone */ .shareku span {font-size:16px} .shareku a, .shareku a:hover {color:#fff} .fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px} .fb { background-color:#1358BA} .twit { background-color:#03C7E9} .gplus { background-color:#FE1635} .fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}Langkah 2
Cari arahan <div class='post-footer-line-1'> dan letakan arahan berikut sempurna dibawahnya:
<b:if cond='data:blog.pageType == "item"'> <div class='shareku'> <span>Bagikan Artikel:</span> <a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> <a class='twit' expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a> <a class='gplus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a> </div> </b:if>Langkah 3
Karena Social share ini memakai Font Awesome, pastikan anda sudah menambahkan arahan berikut ke dalam template sempurna di atas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Lewati langkah ke 3 bila sudah terdapat arahan tersebut di dalam template anda.
Selesai, simpan template dan lihat hasilnya.
Demikian Cara menciptakan Cara Simple Membuat Social Share button dengan Font Awesome. Selamat beraktifitas.