إنضم لنا

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://2.bp.blogspot.com/-wi0fLrGVQcc/WsJOjV6I60I/AAAAAAAACZA/dOxTi8bD9e07SNPdWhAzdoucSkIEceh0QCLcBGAs/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://2.bp.blogspot.com/-wi0fLrGVQcc/WsJOjV6I60I/AAAAAAAACZA/dOxTi8bD9e07SNPdWhAzdoucSkIEceh0QCLcBGAs/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


Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail