Cara membuat profile keren untuk blogger

Cara membuat profile keren untuk blogger
Bukan tidak mungkin kalo kita membutuhkan sebuah profile yang akan menjadi identitas kita untuk sebuah blog atau web. Biar pengujung situs web tau nama dan wajah kita yang nantinya akan di sisipkan sebuah foto berukuran 50x50

baiklah untuk mempersingkat waktu kalian bisa lihat Demonstrasi terlebih dahulu Di bawah ini atau bisa KLIK DI SINI


Saya membuat ini memnggunakan css murni supaya nanti bisa kalian pasang di blogger atau situs web pribadi , karna jika saya menggunakan style jenis SCSS, SASS, atau LESS tidak semua layanan mendukung jenis style tersebut, dan saya juga tidak menggunakan javascrip,js atau yang lainnya dengan alasan supaya nanti tidak Berat loading blog kalian,


Jika kalian ingin mencoba silahkan codenya ada di bawah

  <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

<link rel='stylesheet prefetch' href='//cdn.rawgit.com/cenggini/pro/master/profile.css'>



  <div class="header"/>

<div class="container">

  <div class="interior">

    <a href="#open-modal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK96KLkOJidsQsYQqQoA-t05nQotuwaWDmNCP2aIks86Sg2VTJY02x5T2jAZZKL0D0-0i_GGB7R3Gby_syWm9fR3P0eNzQFgB7QxDo7CR07q9P9xixaauaTFZM5FMvta9VQ4LRqFWxWhY/s1600/toat-sarang.jpg"></a>

  </div>

</div>

</div>

<div id="open-modal" class="modal-window">

  <div>

    <a href="#modal-close" title="Close" class="modal-close">Close</a>

    <h5>Cenggini sarang</h5>

    <div><img class="cs" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK96KLkOJidsQsYQqQoA-t05nQotuwaWDmNCP2aIks86Sg2VTJY02x5T2jAZZKL0D0-0i_GGB7R3Gby_syWm9fR3P0eNzQFgB7QxDo7CR07q9P9xixaauaTFZM5FMvta9VQ4LRqFWxWhY/s1600/toat-sarang.jpg"><p>Halo Nama Ku Toat sarang Ini adalah cara sederhana membuat profile dengan popup hanya dengan css murni tidak memakai SCSS, LESS, atau SASS</p><div id="social">

    <ul class="navigation--primary">

      <li class="navigation--primary--item last-and-firs">

        <a class="facebookBtn smGlobalBtn" href="#" ></a></li>  <li class="navigation--primary--item">

      <a class="twitterBtn smGlobalBtn" href="#" ></a></li>  <li class="navigation--primary--item">

      <a class="googleplusBtn smGlobalBtn" href="#" ></a></li>  <li class="navigation--primary--item">

      <a class="linkedinBtn smGlobalBtn" href="#" ></a></li>  <li class="navigation--primary--item">

      <a class="pinterestBtn smGlobalBtn" href="#" ></a> </li> <li class="navigation--primary--item">

      <a class="tumblrBtn smGlobalBtn" href="#" ></a></li>  <li class="navigation--primary--item">

      <a class="rssBtn smGlobalBtn" href="#" ></a></li>

        </ul>

  </div> 

      <b><a href="//webcensar.com" target="_blank">Seorang Penulis <i class="fa fa-pencil" aria-hidden="true"></i></a></b></div>

    </div>

</div>

Css sengaja saya hosting biar tidak terlalu memakan tempat untuk saya search di sini jika kalian memerlukan css dalam bentuk source tinggal kalian buka sajah

PENTING!
Ganti Tulisan Yang menurut kalian harus di ganti Yang ada di dalam kode tersebut, selebihnya jika ada yang kurang dalam penulisan tutur dan bahasa mohon di maafkan ,

Semoga bermanfaat

Baca juga