Membahas Tombol Share dibawah postingan seperti tidak ada habisnya. Setelah sebelumnya Kang AP membahas tentang cara memasang tombol share dibawah postingan, cara mudah membuat tombol share keren dibawah postingan. Sekarang ini Kang AP akan membahas trik cara membuat tombol share efek 3D, tentunya tombol share ini tidak kalah keren dengan tombol share sebelumnya. Baiklah tanpa membuang waktu lagi, ikuti langkah-langkah dibawah ini !
1. Pertama, login dulu ke Blogger
2. Pilih Template » Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini diatas kode ]]></b:skin>
/*sosial */
.share-wrapper {width:98%;margin:auto;background:#F9FAFA;border: solid 1px #eeeeee;padding:5px;margin:auto;margin-bootm:10px;}
.share-wrapper h2 {float:left; font-family:Arial, Helvetica, sans-serif;font-size:17px;color:#999999;text-shadow: 0 1px #ffffff;margin-right:10px;line-height:35px;}
.button-share {
margin: 0 0 5px;
padding: 5px 7px;
height: 30px;width:30px;
line-height: 28px;
font-size: 14px;text-align:center;
font-weight: bold;
color: #555555;
text-decoration: none;
text-shadow: 0 1px white;
background: #dfdfdf;
border-width: 1px 1px 0;
border-style: solid;
border-color: #cecece #bababa #a8a8a8;
outline: 0;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
background-image: -moz-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
background-image: -o-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
background-image: linear-gradient(to bottom, #f1f1f1, #dfdfdf 70%, #dadada);
background-image: linear-gradient(to bottom, #f1f1f1, #dfdfdf 70%, #dadada);
-webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}
.button-share:hover, .button-share:active {
background: #dfdfdf;
border-top-color: #c9c9c9;
}
.button-share:active{
vertical-align: -5px;
margin-bottom: 0;
padding: 5px 7px;
height: 30px;width:30px;
border-width: 1px 1px 0;
border-style: solid;
border-color: #cecece #bababa #a8a8a8;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}
.button-share img{margin-top:5px;}
5.Sekarang cari kode <data:post.body/>
6.Seperti biasa, letakan kode dibawah ini dibawah kode <data:post.body/> yang kedua atau ketiga
Baca juga :
» Cara Mudah Membuat Efek Shadow Pada Garis Pinggir Blog
» Cara Agar Postingan Blog Cepat Terindek
» Cara Paling Gampang Membuat Navigasi Menu Diatas Header Blog
<!-- start:share -->
<div class='share-wrapper'><h2> Please Share ►►►</h2><a class='button-share' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6Xs1Nis9WC6MSlMx02HDv7orGk01FkBTFR8RdDmv8wTDOdNfi9H1SVS-IfWjs4QldYfBnKRclzlFDS0g7zs1TBwDcnDTLdayKIyTSqM4s7XNp-aZkl7K-HXDN02MzIrn2dGpPyVsOsk/s1600/facebook.png'/></a>
<a class='button-share' expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGdIcTRFByMJ-H-alAF8d7y0UUxuPFiFckKfUzZsulm8qRaEWNu48tGDFPB4xlU5oXaBa-YXc9HUvg4rO7mpfHLYV1ZsHHoqfCeONwbAxSPuMxBlRVU-4j0JNOeAjCM2rnXHJ4fnujejw/s1600/twitter.png'/></a>
<a class='button-share' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6rs4mc5gnlrOr9iLPvP2TIuCJ9V4MnS0go1IrsKEK_VuVG3-NT3ZRkiXOoGevRZ3V6RYoWlBaR7yyT33voT1_6UZ6Pxc7WiFKgPeChCI0kt84XiH37xR7fhP5tlTZk0GlpN3_g6sK_Xc/s1600/googleplus.png'/></a>
<a class='button-share' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-m4TLD7WJTvxKuTIEcST8uBzvOSvfLOINze8kOj7Eyc9NQ3aoFG3UZ-Ac_ie1DA02aMlNu77DFKkFNc55ea7F7njqUjVGQOJFpDBx3W5NIrKuJCu8CxEEOUuokuhhXGY4-V05jx7qoQ/s1600/linkedin.png'/></a>
<a class='button-share' expr:href='"https://www.facebook.com/Tips-and-Trik-AP-Thea-244153772609151/timeline?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAi6rptXGdgdI1fdTs_4CZDLHSHbhUa-H3xoB72zf6xUUl39ijBhjrR7AIkoQpjcX8K9C3Ynz1Cij5BPtBTAu-jkTsFzOejwB0CeW6Zmg1cGJtSoYKbi96hb17cceIhHdM9xuH4uQ7RGC/s1600/icon+like+kang+ap.png'/></a>
</div>
<!-- end:share -->
7.Simpan template dan lihat hasilnya
Demikian cara membuat tombol share efek 3D, semoga dapat bermanfaat. Happy blogging...!
0 Response to "Cara Membuat Tombol Share Efek 3D"
Post a Comment