Cara Membuat Tombol Sosial Share Menggunakan CSS3

Cara Membuat Tombol Sosial Share Menggunakan CSS3

Cara Membuat Tombol Sosial Share Menggunakan CSS3, LokerJakarta CSS3 benar-benar menakjubkan. Ini memberikan desainer web kemampuan untuk
membuat elemen desain yang fleksibel dan mudah digunakan kembali, dan mengurangi ketergantungan kita pada gambar dan editor grafis. Ini adalah panduan menunjukkan kepada Anda bagaimana untuk menciptakan gaya tombol media sosial menggunakan CSS3, HTML, dan beberapa tersedia secara bebas ikon media sosial.







Cara Pemasangan :


Berikut kode HTML-nya 
 <div class="inset">
<ul>
  <li>
   <a href="mailto:putrakefa@gmail.com">
    <img src="images/gmail_16.png" alt="gmail icon" />
    <span class="site">E-Mail Anda</span>
   </a>
  </li>
  <li>
   <a href="http://linkedin.com" title="Your LinkedIn URL">
    <img src="images/linkedin_16.png" alt="LinkedIn icon" />
    <span class="site">LinkedIn</span>
   </a>
  </li>
  <li>
   <a href="http://facebook.com/nilulat" title="Your Facebook Page URL">
    <img src="images/facebook_16.png" alt="Facebook icon" />
    <span class="site">Facebook</span>
   </a>
  </li>
  <li>
   <a href="http://twitter.com/markuskono" title="Your Twitter Page URL">
    <img src="images/twitter_16.png" alt="Twitter icon" />
    <span class="site">Twitter</span>
   </a>
  </li>
  <li>
   <a href="http://flickr.com" title="Your Flickr Page URL">
    <img src="images/flickr_16.png" alt="Flickr icon" />
    <span class="site">Flickr</span>
   </a>
  </li>
 </ul>
</div>

 Tambahkan kode CSS di bawah ini sebelum ]]></b:skin>


 .inset {
font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.inset li a {
  background-color: gray;
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
}

.inset li a:hover {
  border: 1px solid #b4b7bb;
}

.inset li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
    border: none;
}

.inset li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /* width: 70px; Uncomment this to add a fixed width */
}
  
span.site { font-size: 14px; line-height: 20px; }


Selamat mencoba semoga berhasil :)

Comments

  1. cantik sekali tampilannya sob tapi saya nggak berani utak atik template

    ReplyDelete
  2. [pre].inset {font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    list-style-type: none;
    margin: 10px 0 0 10px;
    }

    .inset ul { list-style-type: none; display: block; }

    .inset li {
    float: left;
    height: 30px;
    margin: 0 8px 7px 0;
    }

    .inset li a {
    background-color: gray;
    color: #424242;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    padding-left: 27px;
    padding-top: 6px;
    position: relative;
    text-decoration: none;
    border: 1px solid #bfc1c6;
    }

    .inset li a:hover {
    border: 1px solid #b4b7bb;
    }

    .inset li a img {
    height: 16px;
    left: 7px;
    margin-right: 7px;
    position: absolute;
    top: 7px;
    width: 16px;
    border: none;
    }

    .inset li a span {
    display: block;
    height: 22px;
    padding-right: 7px;
    overflow: hidden;
    /* width: 70px; Uncomment this to add a fixed width */
    }


    span.site { font-size: 14px; line-height: 20px; }[/pre]

    ReplyDelete
    Replies
    1. " SAAT INI SAYA SEDANG SIBUK DI DUNIA OFFLINE(FOKUS KULIAH), JADI KOMENTAR YANG MASUK TIDAK DAPAT SAYA BALAS.TERIMA KASIH"

      Delete
    2. overflow: hidden;
      /* width: 70px; Uncomment this to add a fixed width */
      }

      pan.site { font-size: 14px; line-height: 20px; }

      Delete

Post a Comment

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

☭ Copyright © 2014 - 2015 - Anaktimor17 Blog® by Markus Kono ✓

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online