Social Media Share Button for Hypothesis Skin Template

Social media share button for hypothesis dibuat tanpa mengikuti CSS konsep design template. Artinya widget share button ini stand alone dengan CSS tersendiri di bawah posting blog. Berikur fitur-fiturnya :

Lokasi Penempatan

Widget ini secara default kami tempatkan di bawah posting blog tepatnya di  <div class='post-footer-line post-footer-line-3'/> Secara fungsinya memang post-footer line dibuat responsive terlebih dahulu yaitu dengan memecah lebar (width) antara post footer line 1 (for related post) dan post footer line 2 (for post footer ads) menjadi 50%

CSS Kode Warna

Mengambil warna dari brandcolor.net kita mendapat warna seperti facebook dan beberapa situs social media sebagai berikut :
Facebook : #3b5998
Stumbleupon : #eb4924
Twitter : #55acee
Google+ Red : #dd4b39
Linkedin Blue Primary : #0077b5

Fungsi Social Share

Selain responsive, button ini juga langsung terintegrasi di bawah class 'grt' jika digunakan di hypothesis skin template. Apabila tidak maka atribut class grt tidak terpengaruh. Social button ini otomatis terpasang di setiap posting tanpa perlu mengedit url lagi.

Auto Every Post

Anda ingin memasangnya? Silahkan copy kode berikut ini! Untuk template hypothesis skin template sudah terpasang otomatis.

.animate{transition:all 0.1s;-webkit-transition:all 0.1s;}

.action-button{position:relative;padding:5px 20px;margin:0px 5px 5px 0px;float:left;border-radius:3px;font-family:"Pacifico", Georgia, serif;font-size:16px;color:#2f3840;text-decoration:none;}

.facebook{background-color:#3b5998;border-bottom:5px solid #3b5998;}

.pinterest{background-color:#cc2127;border-bottom:5px solid #cc2127;}

.twitter{background-color:#55acee;border-bottom:5px solid #55acee;}

.googleplus{background-color:#dd4b39;border-bottom:5px solid #dd4b39;}

.linkedin{background-color:#0077b5;border-bottom:5px solid #0077b5;}

.stumble{background-color:#eb4924;border-bottom:5px solid #eb4924;}

.action-button:active{transform:translate(0px,5px);-webkit-transform:translate(0px,5px);border-bottom:1px solid;color:#2f3840;background-color:#ffffff;}



<div class='post-footer-line post-footer-line-3'/><!--[ FIND THIS HTML SECTION ]-->

<b:if cond='data:blog.pageType == &quot;item&quot;'><!--[ EXPRESSION TO SHOW ONLY ON POST ]-->

<div class='simple-social-icons'>

<a class='action-button shadow animate facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'> Facebook</a>

<a class='action-button shadow animate twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Twitter</a>

<a class='action-button shadow animate googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Google+</a>

<a class='action-button shadow animate stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On StumbleUpon !'> Stumble it</a>

<a class='action-button shadow animate linkedin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> LinkedIn</a>

</div>

<div style='clear: both;'/><!--[ CHANGE LINE ]-->

</b:if>



<!--[ DIV POST FOOTER END ]-->

</div>

Ranking: 5

Facebook Twitter Google+ Stumble it LinkedIn