Cara Membuat Kotak Profile Pengarang Keren Diblog

Cara Membuat Kotak Profile Pengarang Keren Diblog

Cara Membuat Kotak Profile Pengarang Keren DiblogCara yang saya pakai ini sangatlah simpel juga mudah, yaitu membuat kotak profile melalui menambahkan gadged.
Nantinya kotak profile akan seperti ini.

Cara Membuat Kotak Profile Pengarang Keren Diblog.

Ok langsung saja.
– Masuk ke Dashboard Blogger.
– Pilih “add gadged” atau “tambahkan Gadged”.

Cara Membuat Kotak Profile Pengarang Keren Diblog.

– Lalu pilih “HTML/JavaScript” lalu tambahkan.

Cara Membuat Kotak Profile Pengarang Keren Diblog.

– Akan seperti ini.

Cara Membuat Kotak Profile Pengarang Keren Diblog.

* Kotak atas silahkan isi sesuai keinginan.
* Kotak bawah isikan dengan kode html berikut.

<div class=kotak>
  <div id=myprofile>

  <img id=”profile” src=”https://3.bp.blogspot.com/-U3OeT8nvy6E/VwDxS_JclRI/AAAAAAAAAsw/yvbzvAoWVicoOpK4hjPmCWnEC00wp8RAQ/s1600/%25E2%2580%25AA%252B62%2B857-8477-8237%25E2%2580%25AC%2B20160106_130952.jpg” align=”left” / style=”color:#0000FF” /> Seorang blogger pemula yang ingin mendalami dunia blogging<br/> <a style=”color:#0000FF;”  href=”http://zaenbangza.blogspot.co.id/p/tentang-saya.html” rel=’nofollow’ target=’_blank’> Read More..</a><br/>
    <div class=’touchme’><!–Google Plus–> <a class=’googleplus’ href=”https://plus.google.com/u/0/102194242102717464039” rel=’external nofollow’ target=’_blank’></a> <!–Facebook–> <a class=’facebook’ href=”https://www.facebook.com/zaenbangza” rel=’external nofollow’ target=’_blank’></a> <!– Twitter –> <a class=’twitter’ href=”#” rel=’external nofollow’ target=’_blank’ ></a>

</div></div></div>
<style>
   #myprofile{border:1px solid #FFCC99; margin:0;padding:10px; overflow:hidden;background:#333333;border:1px solid #FFCC99;border-radius:4px;color:#ddd;box-shadow: 2px 2px 2px 2px #0000FF; }
   #profile{ border:2px solid #FFCC99; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height:150px;width: 120px;border-radius:4px;} #profile:hover { border:2px solid #ccc;cursor:pointer;text-align:justify; }
   .opacity:hover  {  -moz-box-shadow: 1px 1px 4px #0000FF; -webkit-box-shadow: 1px 1px 4px #0000FF; box-shadow: 1px 1px 4px #0000FF; }
   .touchme a { display:block;height:50px;width:37px;padding:0 5px;margin-top:10px; float:left;background:transparent url(https://1.bp.blogspot.com/-LcpFcjk1OXs/UdBRd-mQ_mI/AAAAAAAABrg/QRU5DBFAqBM/s1600/Sharing+Touch+Me.png) no-repeat;} .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; }
  </style>

Keterangan:
* warna merah : ganti dengan url image.
* warna orange : ganti dengan deskripsi yang nanti akan muncul.
* warna kuning : ganti dengan url about.
* warna hijau : ganti dengan url profile g+.
* warna biru muda : ganti dengan url facebook.
* warna biru tua atau “#” : ganti dengan url twitter.

– Langkah selanjutnya tinggal simpan dan lihat perubahan diblog.

Baca juga:
Cara Membuat Tombol Download Keren Dan Mudah.

Demikian cara Membuat kotak pengarang keren diblog.
Oh ya terimakasih juga buat www.seocips.com atas cara diatas. Tentunya sudah saya modifikasi.
Terimakasih juga atas kunjungannya. Dan semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top