Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Author Box Keren Dengan CSS3

by Irsyad Aslam , at 8/03/2013 , has 6 komentar
Sebelumnya saya sudah pernah menulis mengenai cara membuat kotak admin pada blogger, namun kali ini saya akan membagikan cara untuk membuat author box. Author Box berguna untuk menampilkan sedikit cuplikan tentang author blog, dan sedikit descripsi mengenai posting yang telah dibaca. author box ini dibuat dengan kode css3 yang cukup unik, dilengkapi dengan, foto author, label author, 7 buah social ikon, author bio, posting yang telah di baca, dan sebagai pelengkap, efek transisi pada gambar, yang dibuat seunik mungkin dan lebih baru dari yang lain.

Cara Menambahkan Author Box Keren Dengan CSS3
  • Silahkan Masuk Ke Akun Blogger Anda.
  • Setelah itu, Klik Menu Template, --> simpan terlebih dahulu template yang anda gunakan, --> Klik Tombol Edit HTML.
  • Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F.
  • Tambahkan kode CSS berikut ini di atas kode ]]></b:skin> :


/* Author Box YBB
----------------------------------------------- */

.YBBpostauthorbox {
  position:relative;
  margin:5px auto;
  padding:15px;
  width:600px;
  min-height:170px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  text-shadow:1px 0 0 #000000;
  background:#AFB0B0;
  background:-moz-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#AFB0B0),color-stop(15%,#8B8B8B),color-stop(36%,#656565),color-stop(86%,#8B8B8B),color-stop(99%,#8B8B8B),color-stop(100%,#AFB0B0));
  background:-webkit-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-o-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-ms-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:linear-gradient(top bottom,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB0B0',endColorstr='#AFB0B0',GradientType=0 );
  border:4px solid #333;
  padding:10px 15px 10px 15px;
  -webkit-box-shadow:inset -5px -9px 100px -18px #333;
  -moz-box-shadow:inset -5px -9px 100px -18px #333;
  -o-box-shadow:inset -5px -9px 100px -18px #333;
  -ms-box-shadow:inset -5px -9px 100px -18px #333;
  box-shadow:inset -5px -9px 100px -18px #333;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  -o-border-radius:7px;
  -ms-border-radius:7px;
  border-radius:7px;
  background-color:#000000;
  color:#EBEBEB;
  font-size:14px;
  -ms-border-radius:1.0em;
}

.YBBpostauthoravatar {
  background:#fff;
  border:1px solid #D3D3D3;
  float:left;
  height:128px;
  width:128px;
  padding:5px;
  position:relative;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 4px 0 #d9d9d9;
  -moz-box-shadow:0 0 4px 0 #d9d9d9;
  box-shadow:0 0 4px 0 #d9d9d9;
}

.YBBpostauthoravatar img {
  height:128px;
  width:128px;
  border-radius:5px;
  opacity:0.5;
  -moz-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  -webkit-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

.YBBpostauthoravatar:hover img {
  opacity:1;
}

.YBBpostauthorlabel {
  background:url("http://3.bp.blogspot.com/-9fMjYNCaHUk/UfyRJTAXaDI/AAAAAAAAEBI/LCuLofy7IFU/s1600/admin.png") no-repeat center transparent;
  display:block;
  height:30px;
  position:absolute;
  bottom:-35px;
  width:128px;
}

.YBBpostauthorcontent {
  margin-left:160px;
}

.YBBpostauthorhead {
  border-bottom:1px solid #c4c4c4;
  margin-bottom:5px;
  padding:0 0 10px 0;
  position:relative;
}

.YBBpostauthorbox h5 {
  font-family:Trebuchet MS;
  color:#EBEBEB;
  font-size:25px;
  font-weight:normal;
  line-height:30px;
  margin:0;
  border:none;
  text-transform:none;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a {
  color:#EBEBEB !important;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a:hover {
  color:#A1A1A1 !important;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox p.postAuthorbio {
  line-height:18px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  color:#111;
}

.YBBpostauthorbox p a {
  color:#E65002;
}

.YBBpostauthorbox-footer {
  padding:10px 0;
  font:bold 12px Trebuchet MS;
}

#social,
#social li {
  list-style:none;
  float:left;
  margin:0;
  padding:0;
}

#social {
  margin-left:5px;
}

#social li {
  position:relative;
  padding:0 3px;
}

#social li:active {
  top:1px;
}

#social a {
  line-height:25px;
  display:block;
  font-size:0;
  text-indent:-9999px;
  width:25px;
  height:25px;
  background-color:#3F3F3F;
  background-image:url(http://1.bp.blogspot.com/-NpcvokiTdD8/UfyRL6t3i7I/AAAAAAAAEBQ/cgzoU7_HQvs/s1600/social_icons.png);
  background-position:0 0;
  background-repeat:no-repeat;
  -moz-border-radius:9999px;
  -webkit-border-radius:9999px;
  border-radius:9999px;
}

#social a.fbisocial {
  background-position:-25px 0;
}

#social a.fbisocial:hover {
  background-color:#0166E6;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.twisocial {
  background-position:0 0;
}

#social a.twisocial:hover {
  background-color:#2ABAFD;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.goplussocial {
  background-position:-50px 0;
}

#social a.goplussocial:hover {
  background-color:#DF230A;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.pinisocial {
  background-position:-129px 0;
}

#social a.pinisocial:hover {
  background-color:#F00202;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.linisocial {
  background-position:-100px 0;
}

#social a.linisocial:hover {
  background-color:#036CCE;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.rssisocial {
  background-position:-75px 0;
}

#social a.rssisocial:hover {
  background-color:#E05B03;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}
  • Setelah itu, Cari Kode <div class='post-footer'> dengan menekan CTRL+F.
  • Tambahkan kode HTML berikut ini di atas kode <div class='post-footer> :
<div class='YBBpostauthorbox'>
<div class='YBBpostauthoravatar'>
<img alt='Nama Anda' src='URL Foto Anda'></div>
</div>
<div class='YBBpostauthorcontent'>
<div class='YBBpostauthorhead'>
<h5>
                            Ditulis Oleh: 
                            <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a>
</h5>
</div>
<div class='postAuthorbio'>
                          Irsyad Aslam Adalah Pemilik Dari Blog Your-BelajarBLOG. kesukaan saya adalah blogging, dan mengubah-ubah kode-kode, membuat widget, dan lain sebagainya. Terimakasih Telah Membaca Artikel Diatas Yang Berjudul 
                          <b>
<a expr:href='data:post.url'><data:post.title/></a>
</b>
</div>
<div class='YBBpostauthorbox-footer'>
                            <div style="float:left;">Join Me On:</div> 
                            <ul id='social'>
<li><a class='fbisocial' href='URL Akun Facebook Anda'>Facebook</a></li>
<li><a class='twisocial' href='URL Akun Twitter Anda'>Twitter</a></li>
<li><a class='goplussocial' href='URL Akun Google Plus Anda'>Google+</a></li>
<li><a class='pinisocial' href='URL Akun Pinterest Anda'>Pinterest</a></li>
<li><a class='linisocial' href='URL Akun Linkedin Anda'>Linkedin</a></li>
<li><a class='rssisocial' href='URL Akun Feeds Burner (RSS) Anda'>RSS</a></li>
</ul>
</div>
</div>

Keterangan :
  1. Ganti Kode yang berwarna merah dengan Nama, Dan Foto Profile Anda.
  2. Ganti Text yang berwarna orange dengan Bio Anda.
  3. Ganti Kode yang berwarna biru dengan URL Akun Facebook Anda.
  4. Ganti Kode yang berwarna biru muda dengan URL Akun Twitter Anda.
  5. Ganti Kode yang berwarna merah muda dengan URL Akun Google Plus Anda.
  6. Ganti Kode yang berwarna kuning dengan URL Akun Pinterest Anda. 
  7. Ganti Kode yang berwarna ungu dengan URL Akun Linkedin Anda.
  8. Ganti Kode yang berwarna ungu muda dengan URL Akun Feeds Burner (RSS) Anda.

  • Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Author Box Keren Dengan CSS3 - written by Irsyad Aslam , published at 8/03/2013, categorized as Trik Blogger , Widget . And has 6 komentar
6 komentar Add a comment
Wah ane kira post yang ada di halaman utama.. kalau boleh request dong kaka... thx
Reply Delete
Kunjungi balik ya caplin-division.blogspot.com
Reply Delete
mau request min, kalo bikin border warna-warni di top menu gimana yah, trims kalo berkenan menjawab
Reply Delete
wow! asli keren, lg malas ngubah,izin nyimpan aja dulu kunjung balik di descriptionist.blogspot.com
Reply Delete
yup dah dcoba bs dcek di
irwansulistyanto.blogspot.com
Reply Delete
Asik nih di https://www.youtube.com/watch?v=g7s_XaotP3I dan learningbasedweb.blogspot.com
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger