Tombol jejaring sosial seprti facebook, twitter, Google+, dan lain-lain bukanlah hal yang asing bagi kita, hampir semua website atau blog telah memasang fitur ini. Tujuan menggunakan fitur ini selain untuk mempromosikan suatu produk kepada pelanggan di sebuah akun jejaring sosial, juga berguna untuk mempercantik tampilan blog.
Banyak sekali style dari tombol jejaring sosial ini, dan kali ini saya akan berbagi satu demi satu dimulai dari 3D Social Media Buttons with CSS3 yang kodenya saya ambil dari www.flashuser.net. Tampilannya bisa dibilang sederhana namun cukup elegan setelah diberi sentuhan kode CSS3.
Banyak sekali style dari tombol jejaring sosial ini, dan kali ini saya akan berbagi satu demi satu dimulai dari 3D Social Media Buttons with CSS3 yang kodenya saya ambil dari www.flashuser.net. Tampilannya bisa dibilang sederhana namun cukup elegan setelah diberi sentuhan kode CSS3.
 |
| 3D Social Media Buttons with CSS3 |
Fitur 3D Social Media Buttons ini memiliki dua macam tampilan seperti yang terlihat pada screenshoot di atas. Langkah-langkah intallasinya pun cukup mudah, silahkan ikuti tutorial di bawah ini.
Membuat Template Cadangan
Masuk ke Blogger.com » Template » Cadangkan/Pulihkan » Unduh Template Lengkap. Tujuannya sebagai langkah antisipasi jika nanti terjadi kesalahan.
Menyisipkan Kode HTML
Dari halaman template sekarang masuk ke Edit HTML. Kita akan mencoba menempatkan widget ini di area post-footer, sekarang temukan kode berikut ini.
<div class='post-footer-line post-footer-line-1'>
Salin kode berikut ini kemudian letakkan di bawah kode
post-footer di atas.<div class="set-1">
<ul>
<li><a href="#" class="twitter-small">Twitter</a></li>
<li><a href="#" class="facebook-small">Facebook</a></li>
<li><a href="#" class="pinterest-small">Pinterest</a></li>
<li><a href="#" class="gplus-small">GPlus</a></li>
<li><a href="#" class="rss-small">RSS</a></li>
<li><a href="#" class="dribbble-small">Dribbble</a></li>
<li><a href="#" class="linkedin-small">Linkedin</a></li>
<li><a href="#" class="flickr-small">Flickr</a></li>
<li><a href="#" class="stumble-small">Stumbleupon</a></li>
<li><a href="#" class="vimeo-small">Vimeo</a></li>
</ul>
</div>
ganti tanda pagar # pada kode di atas sesuai dengan url akun jejaring sosial milik Anda
Menambahkan Kode CSS
Sekarang kita akan menambahkan kode CSS, salin kemudian tempel kode CSS berikut di atas kode
]]></b:skin>.set-1 ul li {
display:inline-block;
margin-left:20px;
margin-top:20px;
}
.set-1 a {
position: relative;
color: #ffffff;
text-decoration: none;
font-family: 'Oswald';
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 60px;
text-align: center;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
height:54px;
cursor:pointer;
overflow:hidden;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.set-1 a:active {
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}
a.twitter-small {
-webkit-box-shadow: 0px 6px 0px #2695BC;
-moz-box-shadow: 0px 6px 0px #2695BC;
box-shadow: 0px 6px 0px #2695BC;
}
a.twitter-small {
background:#2CA9E1 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
}
a.twitter-small:active {
-webkit-box-shadow: 0px 2px 0px #2695BC;
-moz-box-shadow: 0px 2px 0px #2695BC;
box-shadow: 0px 2px 0px #2695BC;
}
a.facebook-small {
-webkit-box-shadow: 0px 6px 0px #293F63;
-moz-box-shadow: 0px 6px 0px #293F63;
box-shadow: 0px 6px 0px #293F63;
}
a.facebook-small {
background:#3B5997 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
}
a.facebook-small:active {
-webkit-box-shadow: 0px 2px 0px #293F63;
-moz-box-shadow: 0px 2px 0px #293F63;
box-shadow: 0px 2px 0px #293F63;
}
a.pinterest-small {
-webkit-box-shadow: 0px 6px 0px #8C151B;
-moz-box-shadow: 0px 6px 0px #8C151B;
box-shadow: 0px 6px 0px #8C151B;
}
a.pinterest-small {
background:#CD1D1F url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
}
a.pinterest-small:active {
-webkit-box-shadow: 0px 2px 0px #8C151B;
-moz-box-shadow: 0px 2px 0px #8C151B;
box-shadow: 0px 2px 0px #8C151B;
}
a.gplus-small {
-webkit-box-shadow: 0px 6px 0px #141412;
-moz-box-shadow: 0px 6px 0px #141412;
box-shadow: 0px 6px 0px #141412;
position:relative;
}
a.gplus-small {
background:#353631 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
}
a.gplus-small:active {
-webkit-box-shadow: 0px 2px 0px #141412;
-moz-box-shadow: 0px 2px 0px #141412;
box-shadow: 0px 2px 0px #141412;
}
a.rss-small {
-webkit-box-shadow: 0px 6px 0px #C64802;
-moz-box-shadow: 0px 6px 0px #C64802;
box-shadow: 0px 6px 0px #C64802;
}
a.rss-small {
background:#FF6501 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
}
a.rss-small:active {
-webkit-box-shadow: 0px 2px 0px #C64802;
-moz-box-shadow: 0px 2px 0px #C64802;
box-shadow: 0px 2px 0px #C64802;
}
a.dribbble-small {
-webkit-box-shadow: 0px 6px 0px #B23D6D;
-moz-box-shadow: 0px 6px 0px #B23D6D;
box-shadow: 0px 6px 0px #B23D6D;
}
a.dribbble-small {
background:#E84D89 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/dribbble.png") no-repeat center center;
}
a.dribbble-small:active {
-webkit-box-shadow: 0px 2px 0px #B23D6D;
-moz-box-shadow: 0px 2px 0px #B23D6D;
box-shadow: 0px 2px 0px #B23D6D;
}
a.linkedin-small {
-webkit-box-shadow: 0px 6px 0px #005377;
-moz-box-shadow: 0px 6px 0px #005377;
box-shadow: 0px 6px 0px #005377;
}
a.linkedin-small {
background:#0073B2 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
}
a.linkedin-small:active {
-webkit-box-shadow: 0px 2px 0px #005377;
-moz-box-shadow: 0px 2px 0px #005377;
box-shadow: 0px 2px 0px #005377;
}
a.stumble-small {
-webkit-box-shadow: 0px 6px 0px #B7371D;
-moz-box-shadow: 0px 6px 0px #B7371D;
box-shadow: 0px 6px 0px #B7371D;
}
a.stumble-small {
background:#EA4B24 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
}
a.stumble-small:active {
-webkit-box-shadow: 0px 2px 0px #B7371D;
-moz-box-shadow: 0px 2px 0px #B7371D;
box-shadow: 0px 2px 0px #B7371D;
}
a.flickr-small, a.flickr-big {
-webkit-box-shadow: 0px 6px 0px #C10E78;
-moz-box-shadow: 0px 6px 0px #C10E78;
box-shadow: 0px 6px 0px #C10E78;
}
a.flickr-small {
background:#FC1090 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
}
a.flickr-small:active {
-webkit-box-shadow: 0px 2px 0px #C10E78;
-moz-box-shadow: 0px 2px 0px #C10E78;
box-shadow: 0px 2px 0px #C10E78;
}
a.vimeo-small {
-webkit-box-shadow: 0px 6px 0px #1993AF;
-moz-box-shadow: 0px 6px 0px #1993AF;
box-shadow: 0px 6px 0px #1993AF;
}
a.vimeo-small {
background:#20B9EB url("http://flashuser.net/tutorial/css3-social-media-buttons/images/vimeo.png") no-repeat center center;
}
a.vimeo-small:active {
-webkit-box-shadow: 0px 2px 0px #1993AF;
-moz-box-shadow: 0px 2px 0px #1993AF;
box-shadow: 0px 2px 0px #1993AF;
}
perhatikan url icon pada kode css di atas, icon tersebut masih menggunakan hosting milik flashuser, saya sarankan untuk menggunakan hosting milik Anda sendiri, atau mungkin Anda ingin menggunakan hosting gratis milik google code? semua terserah pada Anda
Simpan Pengaturan Template
Simpan pengaturan template Anda dan previes hasilnya.
Langkah di atas adalah proses installasi 3D Social Media Buttons style 1, lantas bagaimana kalau ingin menggunakan 3D Social Media Buttons style no. 2? Langkah-langkahnya tidak jauh beda, hanya saja kode HTML dan CSS-nya harus kita ganti menggunakan kode yang telah saya sediakan di bawah ini.
<div class="set-2">
<ul>
<li><a href="#" class="twitter-big">Twitter</a></li>
<li><a href="#" class="facebook-big">Facebook</a></li>
<li><a href="#" class="pinterest-big">Pinterest</a></li>
<li><a href="#" class="gplus-big">GPlus</a></li>
<li><a href="#" class="rss-big">RSS</a></li>
<li><a href="#" class="dribbble-big">Dribbble</a></li>
<li><a href="#" class="linkedin-big">Linkedin</a></li>
<li><a href="#" class="flickr-big">Flickr</a></li>
<li><a href="#" class="stumble-big">Stumbleupon</a></li>
<li><a href="#" class="vimeo-big">Vimeo</a></li>
</ul>
</div>
.set-2 ul li {
display:inline-block;
margin-left:20px;
margin-top:20px;
}
.set-2 a {
position: relative;
color: #ffffff;
text-decoration: none;
font-family: 'Oswald';
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size:16px;
padding:10px 15px 10px 60px;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.set-2 a:active {
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}
a.twitter-big{
-webkit-box-shadow: 0px 6px 0px #2695BC;
-moz-box-shadow: 0px 6px 0px #2695BC;
box-shadow: 0px 6px 0px #2695BC;
}
a.twitter-big {
background:#2CA9E1;
}
a.twitter-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.twitter-big:active {
-webkit-box-shadow: 0px 2px 0px #2695BC;
-moz-box-shadow: 0px 2px 0px #2695BC;
box-shadow: 0px 2px 0px #2695BC;
}
a.facebook-big {
-webkit-box-shadow: 0px 6px 0px #293F63;
-moz-box-shadow: 0px 6px 0px #293F63;
box-shadow: 0px 6px 0px #293F63;
}
a.facebook-big {
background:#3B5997;
}
a.facebook-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.facebook-big:active {
-webkit-box-shadow: 0px 2px 0px #293F63;
-moz-box-shadow: 0px 2px 0px #293F63;
box-shadow: 0px 2px 0px #293F63;
}
a.pinterest-big {
-webkit-box-shadow: 0px 6px 0px #8C151B;
-moz-box-shadow: 0px 6px 0px #8C151B;
box-shadow: 0px 6px 0px #8C151B;
}
a.pinterest-big {
background:#CD1D1F;
}
a.pinterest-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.pinterest-big:active {
-webkit-box-shadow: 0px 2px 0px #8C151B;
-moz-box-shadow: 0px 2px 0px #8C151B;
box-shadow: 0px 2px 0px #8C151B;
}
a.gplus-big {
-webkit-box-shadow: 0px 6px 0px #141412;
-moz-box-shadow: 0px 6px 0px #141412;
box-shadow: 0px 6px 0px #141412;
position:relative;
}
a.gplus-big {
background:#353631;
}
a.gplus-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.gplus-big:active {
-webkit-box-shadow: 0px 2px 0px #141412;
-moz-box-shadow: 0px 2px 0px #141412;
box-shadow: 0px 2px 0px #141412;
}
a.rss-big{
-webkit-box-shadow: 0px 6px 0px #C64802;
-moz-box-shadow: 0px 6px 0px #C64802;
box-shadow: 0px 6px 0px #C64802;
}
a.rss-big {
background:#FF6501;
}
a.rss-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.rss-big:active {
-webkit-box-shadow: 0px 2px 0px #C64802;
-moz-box-shadow: 0px 2px 0px #C64802;
box-shadow: 0px 2px 0px #C64802;
}
a.dribbble-big {
-webkit-box-shadow: 0px 6px 0px #B23D6D;
-moz-box-shadow: 0px 6px 0px #B23D6D;
box-shadow: 0px 6px 0px #B23D6D;
}
a.dribbble-big {
background:#E84D89;
}
a.dribbble-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/dribbble.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.dribbble-big:active {
-webkit-box-shadow: 0px 2px 0px #B23D6D;
-moz-box-shadow: 0px 2px 0px #B23D6D;
box-shadow: 0px 2px 0px #B23D6D;
}
a.linkedin-big {
-webkit-box-shadow: 0px 6px 0px #005377;
-moz-box-shadow: 0px 6px 0px #005377;
box-shadow: 0px 6px 0px #005377;
}
a.linkedin-big {
background:#0073B2;
}
a.linkedin-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.linkedin-big:active {
-webkit-box-shadow: 0px 2px 0px #005377;
-moz-box-shadow: 0px 2px 0px #005377;
box-shadow: 0px 2px 0px #005377;
}
a.stumble-big {
-webkit-box-shadow: 0px 6px 0px #B7371D;
-moz-box-shadow: 0px 6px 0px #B7371D;
box-shadow: 0px 6px 0px #B7371D;
}
a.stumble-big {
background:#EA4B24;
}
a.stumble-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.stumble-big:active {
-webkit-box-shadow: 0px 2px 0px #B7371D;
-moz-box-shadow: 0px 2px 0px #B7371D;
box-shadow: 0px 2px 0px #B7371D;
}
a.flickr-big {
-webkit-box-shadow: 0px 6px 0px #C10E78;
-moz-box-shadow: 0px 6px 0px #C10E78;
box-shadow: 0px 6px 0px #C10E78;
}
a.flickr-big {
background:#FC1090;
}
a.flickr-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.flickr-big:active {
-webkit-box-shadow: 0px 2px 0px #C10E78;
-moz-box-shadow: 0px 2px 0px #C10E78;
box-shadow: 0px 2px 0px #C10E78;
}
a.vimeo-big {
-webkit-box-shadow: 0px 6px 0px #1993AF;
-moz-box-shadow: 0px 6px 0px #1993AF;
box-shadow: 0px 6px 0px #1993AF;
}
a.vimeo-big {
background:#20B9EB;
}
a.vimeo-big:before {
background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/vimeo.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.vimeo-big:active {
-webkit-box-shadow: 0px 2px 0px #1993AF;
-moz-box-shadow: 0px 2px 0px #1993AF;
box-shadow: 0px 2px 0px #1993AF;
}
Cara Installasi Widget Di Sidebar
Bagi Anda yang ingin memasangnya pasa sidebar, langkah pertama adalah membungkus kode CSS dengan kode
<style>...</style> supaya nanti bisa dijadikan satu dengan kode HTML-nya. Perhatikan kode di bawah ini.<style type="text/css">
....
MASUKKAN KODE CSS STYLE 1 DI SINI
....
</style>
<div class="set-1">
<ul>
<li><a href="#" class="twitter-small">Twitter</a></li>
<li><a href="#" class="facebook-small">Facebook</a></li>
<li><a href="#" class="pinterest-small">Pinterest</a></li>
<li><a href="#" class="gplus-small">GPlus</a></li>
<li><a href="#" class="rss-small">RSS</a></li>
<li><a href="#" class="dribbble-small">Dribbble</a></li>
<li><a href="#" class="linkedin-small">Linkedin</a></li>
<li><a href="#" class="flickr-small">Flickr</a></li>
<li><a href="#" class="stumble-small">Stumbleupon</a></li>
<li><a href="#" class="vimeo-small">Vimeo</a></li>
</ul>
</div>
Selebihnya Anda bisa bereksperimen sendiri. Selamat mencoba semoga bermanfaat.
sumber: http://www.flashuser.net/
Ditulis
EM
—
Thursday, 9 May 2013
—
Add Comment
—
Blogger Hacks,
Blogger Widgets,
CSS3,
Social Media
Belum ada tanggapan untuk " 3D Social Media Buttons with CSS3"
Post a Comment
Note :
1. Berikan komentar Anda yang sesuai dengan isi artikel
2. Berkomentarlah dengan bijak dan mohon untuk tidak melakukan SPAM
3. Jangan menempelkan link hidup, karena tidak akan ditampilkan
Semoga tali Silaturrahmi kita terus terjalin dengan saling berbagi informasi
Regards,
Admin Ellmoo Blog