Widodo

Cara Membuat 3d Sosial Buttons Share pada Blog

Selamat pagi buat teman-teman blogger maupun developer, dalam sebuah blog maupun web sering kita jumpai sosial media didalam artikel maupun home page itu sendiri yaitu buttons share yaitu untuk memudahkan user atau pengunjung berbagi tautan ke sosial media, banyak sekali beragam button sosial media yang dibagikan oleh blogger maupun developer,untuk itu kami akan memberikan tutorial juga mengenai button sosial media dan mudah-mudahan tutorial yang kami berikan ini bisa menaikkan trafik web kami karena kemarin web kami bermasalah dengan google.com tidak ditemukan dipencarian dan saya berharap web kami secepatnya merayapi google seperti sebelumnya.

Sosial media ini terdiri dari Facebook, Twitter,  Google + dan Pinterest yang nantinya akan kita terapkan dibawah postingan artikel, untuk itu langsung aja kita ke TKP

1. Silahkan login Ke www.blogger.com

2. Lalu Pilih Template > Edit HTML

3. Setelah edit HTML terbuka lalu anda cari kode ]]></b:skin> untuk memudahkan pencarian kode tersebut anda bisa menggunakan tombol CTRL + F dan simpan CSS ini diatas kode ]]></b:skin>

.sosial-3d {width:90%; margin:auto; padding:5px;display:table}
.sosial-3d ul{list-style:none;}
.sosial-3d ul li {list-style:none; text-decoration:none; color:#ffffff; float:left; width:120px; margin:2px;}
.cube {font-family:arial;
width: 100%;
height: 50px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.default-state,.active-state {
height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}

.active-state a {text-decoration:none; color:#ffffff; font-family:arial}
.flip-to-top .active-state {
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-o-transform: rotateX(90deg) translateZ(75px);
-ms-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform: rotateX(-90deg) translateZ(-50px);
-o-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
-webkit-transform: rotateX(-89deg);
-moz-transform: rotateX(-89deg);
-o-transform: rotateX(-89deg);
-ms-transform: rotateX(-89deg);
transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state,
.active-state {
font-size: 16px;
text-transform: uppercase;
color: #fff;
line-height: 50px;
-webkit-transition: background 250ms ease;
-moz-transition: background 250ms ease;
-o-transition: background 250ms ease;
transition: background 250ms ease;
}
.cube:hover .default-state {
background: #000;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #019AD1;
}
.google-plus {
background: #D34836;
}
.pinterest {
background:#b81621;
}

4. Setelah itu anda cari kode <data:post.body/> dan taruh kode HTML ini dibawahnya.

<div class='sosial-3d'><ul>
<li>
<div class='cube flip-to-top'>
<div class='default-state facebook'>
<span>Facebook</span>
</div>
<div class='active-state facebook'>
<span><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Facebook'>Facebook</a></span>
</div>
</div></li>

<li><div class='cube flip-to-top google-plus'>
<div class='default-state'>
<span>Google+</span>
</div>
<div class='active-state google-plus'>
<span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Google Plus'>Google+</a></span>
</div>
</div></li>


<li><div class='cube flip-to-top twitter'>
<div class='default-state'>
<span>Follow</span>
</div>
<div class='active-state twitter'>
<span><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Twitter'>Twitter</a></span>
</div>
</div></li>

<li><div class='cube flip-to-top'>
<div class='default-state pinterest'>
<span>Pinterest</span>
</div>
<div class='active-state pinterest'>
<span><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=700,resizable=0,top=50,left=100&quot;);return false;' target='_blank' title='Share on Pinterest'>Pinterest</a></span>
</div>
</div></li>
</ul></div>

5. Setelah Itu simpan template

Sebelum Mengedit template alangkah baiknya backup template terlebih dahulu untuk menghindari template error.

Selamat mencoba semoga tutorial yang kami berikan ini bermanfaat dan berikan komentar dengan baik dan bijak untuk hasil DEMO nanti akan seperti ini.



Artikel Terkait

0 Komentar