MEMBUAT TOMBOL SOCIAL MEDIA PADA BLOGGER LEBIH UNIK DENGAN CSS3
Asslamualakum, selamat malam agan agan para mastah yang saya hormati, apa kabar hari ini gan?baik? :) dengan tidak mengurangi rasa hormat saya pada anda sekalian, malam ini saya ingin berbagi sedikit ilmu yang saya bisa yakni membuat tombol social media lebih menarik dengan CSS3 yang bisa diterapkan pada blog anda, agar lebih menarik, dan berikut adalah caranya.
Pertama-tama silahkan anda masuk ke edit HTML pada blogger, lalu masukan kode CSS berikut tepat diatas penutup b:skin ]]></b:skin>, agar anda mudah menemukannya kembali,
- .tt-wrapper{
- padding: 0;
- width: 435px;
- height: 70px;
- margin: 80px auto 30px auto;
- }
- .tt-wrapper li{
- float: left;
- }
- .tt-wrapper li a{
- display: block;
- width: 68px;
- height: 70px;
- margin: 0 2px;
- outline: none;
- background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOw1yCu27ZI-nD65pV2CVJrmT95qZKF0VjBhUvqtQmR0cE05K0tpboz8und8bshnjcNueWKAhGhJkRxYBHC-TEWg6KBtSexgY5CcwiKiWcnYQRqa4ufKuqvWQKkiWwl4GALWnVlvDfLQ/s1600/growcase_the_social_gunman_icons.png) no-repeat top left;
- text-indent: -9000px;
- position: relative;
- }
- .tt-wrapper li .tt-gplus{
- background-position: 0px 0px;
- }
- .tt-wrapper li .tt-twitter{
- background-position: -68px 0px;
- }
- .tt-wrapper li .tt-dribbble{
- background-position: -136px 0px;
- }
- .tt-wrapper li .tt-facebook{
- background-position: -204px 0px;
- }
- .tt-wrapper li .tt-linkedin{
- background-position: -272px 0px;
- }
- .tt-wrapper li .tt-forrst{
- background-position: -340px 0px;
- }
- .tt-wrapper li a span{
- width: 100px;
- height: auto;
- line-height: 20px;
- padding: 10px;
- left: 50%;
- margin-left: -64px;
- font-family: 'Alegreya SC', Georgia, serif;
- font-weight: 400;
- font-style: italic;
- font-size: 14px;
- color: #FFF;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
- text-align: center;
- border: 4px solid #333;
- background: rgba(0,0,0,0.3);
- text-indent: 0px;
- border-radius: 5px;
- position: absolute;
- bottom: 70px;
- opacity: 0;
- visibility: visible;
- pointer-events: none;
- box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
- -webkit-transform: translate(35px) rotate(25deg) scale(1.5);
- -moz-transform: translate(35px) rotate(25deg) scale(1.5);
- -o-transform: translate(35px) rotate(25deg) scale(1.5);
- -ms-transform: translate(35px) rotate(25deg) scale(1.5);
- transform: translate(35px) rotate(25deg) scale(1.5);
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- -ms-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- }
- .tt-wrapper li a span:before,
- .tt-wrapper li a span:after{
- content: '';
- position: absolute;
- bottom: -15px;
- left: 50%;
- margin-left: -9px;
- width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid rgba(0,0,0,0.1);
- }
- .tt-wrapper li a span:after{
- bottom: -14px;
- margin-left: -10px;
- border-top: 10px solid #333;
- }
- .tt-wrapper li a:hover span{
- visibility: visible;
- opacity: 0.9;
- -webkit-transform: translate(0px) rotate(0deg) scale(1);
- -moz-transform: translate(0px) rotate(0deg) scale(1);
- -o-transform: translate(0px) rotate(0deg) scale(1);
- -ms-transform: translate(0px) rotate(0deg) scale(1);
- transform: translate(0px) rotate(0deg) scale(1);
- }
Selanjutnya jika anda telah mem-Paste kode css tersebut, disave saja templatenya dan jika sudah disave, silahkan anda masuk ke page element blogger, yang ada di samping kiri Edit html, untuk memasukan kode tomblonya kedalam gadget HTML/JAVA SCRIPT.
klik add a new gadget, lalu pilih HTML/JAVASCRIPT, dan copy-paste kode berikut kedalamnya, jika sudah silahkan save, dan lihat hasilnya.
<ul class="tt-wrapper">
<li><a class="tt-gplus" href="LINK 1"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="LINK 2"><span>Twitter</span></a></li>
<li><a class="tt-dribbble" href="LINK 3"><span>Dribbble</span></a></li>
<li><a class="tt-facebook" href="LINK 4"><span>Facebook</span></a></li>
<li><a class="tt-linkedin" href="LINK 5"><span>LinkedIn</span></a></li>
<li><a class="tt-forrst" href="LINK 6"><span>Forrst</span></a></li>
</ul>
Selanjutnya anda tinggal mengganti link-linknya deh. Untuk demo tombol social media yang pake CSS3, pada sidebar blog saya dipasang toombol facebook dan twitter, nah kira-kira seperti itulah hasilnya.
Dan akhir kata saya uacapkan banyak-banyak terimakasih atas kunjungannya keblog sederhana saya ini, mohon maaf apala bila terdapat kata yang salah. :)
By: loefa-cebook
Semoga artikel MEMBUAT TOMBOL SOCIAL MEDIA PADA BLOGGER LEBIH UNIK DENGAN CSS3 bermanfaat bagi Anda.
+ comments + 2 comments
gan mw nanya, cara dia atas udah tak lakuin
Terimakasih Marmut Ungu atas Komentarnya di MEMBUAT TOMBOL SOCIAL MEDIA PADA BLOGGER LEBIH UNIK DENGAN CSS3tombolnya udah keluar di blog ane
tpi ane ngak tau cara ngeliks ke fb ato twitter ane
bhubung ane newbie mohon pencerahanya :)
thanks.......
http://piranharis.blogspot.com/
coba liat script yg kedua gan disana dan ada "LINK1" sampai "LINK6" agan ganti tulisan itu dgn link ke FB ato twitter agan. :D
Post a Comment