Membahas Tombol Share dibawah postingan menyerupai tidak ada habisnya. Setelah sebelumnya Kang AP membahas ihwal cara memasang tombol share dibawah postingan, cara gampang menciptakan tombol share keren dibawah postingan. Sekarang ini Kang AP akan membahas trik cara menciptakan tombol share imbas 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 arahan ]]></b:skin>
4. Letakan arahan dibawah ini diatas arahan ]]></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 arahan <data:post.body/>
6.Seperti biasa, letakan arahan dibawah ini dibawah arahan <data:post.body/> yang kedua atau ketiga
Baca juga :
» Cara Praktis 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/AVvXsEg-1n964FqqNKEe9rhSist2OxnsMi_VAJn5_2GlxDhvs4dznNp0Gw_eLeg8vMe8EVJSWWuqjQ_LFkDmrDm71ATvfSdyYNxvkVEwluFsRmqaKnlmC27A3jNznB7qitngQmFoRFGOVlvHbxk/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/AVvXsEjr76iEFDEAw7NkMM8-QGThpTH_GU0KEpIkKT_gA5CgWOBMATN5u0fZ7ER-PuenZakjKToentPpGjdi8Gfk4BylK3Vvrypk1NY-NolCHFPIOFlAuhQs5KWHpeux0-xCnQqbq-IQlXEh0No/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/AVvXsEgsDVuuuoeY1Ua2M4njEu6h-33VU_b2eBHPo_Bj-YoSCEGZnrSaQk141S6ll3FHb1Gsbm-NJriZLUyKcHB5rqovDI8TeFL4-7VfG_RS_1kzxohMrL-3TRDGibgONKik6AtDEhA2-zfDHyw/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/AVvXsEjZxjs3ZOGFu8Jc2nBYWUB1jRvMlfSoy_RAho0yT3rI3WYokoWpa62M0D3DdZEZmvDtyLTnssqcAhKlNMvb6D7QUdCMQHnxla3uG_rnrHWWSuKi2U1iIbVkcVwEF_i3TN__7wZ4zI7xEI4/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/AVvXsEiyTj8jdTDmBalgKN_khGLVSB_sULi4x_9rO91mhVj3qiULqvdQcfKiTgjcSTip7WItE8tNw2AwsNmlUDX47dO8TRp_c0x6KxbLwFn5yWwE-GpE6ia9Hwkc8JbH4wN0sBI2NH7WWyBedwjI/s1600/icon+like+kang+ap.png'/></a>
</div>
<!-- end:share -->
7.Simpan template dan lihat hasilnya
Demikian cara menciptakan tombol share imbas 3D, biar sanggup bermanfaat. Happy blogging...!
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon