Membuat Profil Author Box Dengan CSS Kode

Membuat Profil Author Box Dengan CSS Kode - Profil berarti berhubungan dengan bio data penulis/admin/author atau sekedar untuk membuat sebuah permanen link yang telah di modifikasi dengan balutan box, Profil Author box ini tidak jauh berbeda seperti widget profil google+ pada sidebar blog pada umumnya, yang mana memuat foto author dengan link "Mengenai Saya". Akan tetapi banyak pengguna blogger kurang menyukai tampilan widget default tersebut, sehingga banyak yang menghilangkan/menghapusnya dan menggantikannya dengan permanen link box di bawah postingan seperti yang sebelumnya pernah saya share tentang Cara Membuat Permanen Link

Pada artikel sebelumnya, saya hanya menggunakan kode HTML tanpa ada sentuhan CSS kode pada widgetnya, sehingga hanya menampilkan sekumpulan text untuk menerangkan judul artikel, nama author, rating post dan permanen link yang mengarah pada title post. Seperti yang banyak kita jumpai pada blog sahabat lain, berawal dari widget ini timbul suatu ide bagaimana jika permanen link tersebut sedikit modifikasi dengan menambahkan foto author pada box widgetnya, sehingga tampilannya akan terlihat seperti gambar dibawah ini:

Desain Terbaru - Widget Profil Penulis Dengan Background Blur Efek



Buat SAHABAT BLOGGER 77 yang ingin membuat perubahan pada widget sebelumnya, Berikut tutorial cara Membuat Profil Author Box Dengan CSS Kode:

/*
Widget author box with css only
css design: authorbox-style="sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*/
.sb77-authorbox {
   position: relative;margin: 15px auto;
   padding: 10px;width:auto;
   border: 2px solid #52e052;
   background: #e9fbe9;
   height:auto;overflow:auto;}

.sb77-avatar {
   background: #52e052;
   float: left; height: 145px;
   width: 135px;left: -5px;
   padding: 5px 5px 5px 5px;
   position: relative;}

.sb77-avatar img {height: 135px; width: 125px; border: 2px solid #000;}
.sb77-authorcontent {margin-left: 150px;}
.sb77-titlebox {
   box-shadow:7px 7px 7px rgb(174, 185, 195);
   border-radius:17px 17px 17px 17px;
   -webkit-border-radius:17px 17px 17px 17px;
   background: #52e052;width:auto;
   left: -2px;margin-bottom: 7px;
   padding: 5px 0px 5px 20px;position: relative;}

.sb77-authorbox h3 {
   font:bold 14px Verdana;
   color: #000;
   line-height: 20px; margin: 0;}

.sb77-info {font:12px Trebuchet MS; text-align:justify; color:#000;}
.sb77-info a {color: #000; text-decoration: none;}
.sb77-footerbox {padding:10px 0 0 0; font:12px Trebuchet MS;}
.sb77-social {overflow: hidden;}

.sb77-social a {
   display: block;
   color: #FFFFFF !important;
   font-weight: 600;
   font-family: "Tahoma",Verdana,Arial;
   text-decoration: none;
   transition: border-radius 0.50s;}

.sb77-social a:hover {border-radius: 10px 0px;}
.sb77-social div {float: left; margin-right: 6px; width: 79px;}
.sb77-social .sb77facebook a {padding: 7px 0px; text-align: center; background: #3B5999;}
.sb77-social .sb77facebook a:hover {background: #52e052;}
.sb77-social .sb77twitter a {padding: 7px 0px; text-align: center; background: #01BBF6;}
.sb77-social .sb77twitter a:hover {background: #52e052;} 
.sb77-social .sb77googleplus a {padding: 7px 0px; text-align: center; background: #D54135;}
.sb77-social .sb77googleplus a:hover {background: #52e052;}
.sb77-social .sb77rss a {padding: 7px 0px; text-align: center; background: #fb8938;}
.sb77-social .sb77rss a:hover {background: #52e052;}
.sb77-social .sb77menu a {padding: 7px 0px; text-align: center; background: green;}
.sb77-social .sb77menu a:hover {background: #52e052;}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='sb77-authorbox'>
            <div class='sb77-avatar'><img alt='Sahabat blogger 77' src='http://URL-Gambar.jpg' title=''/>
     </div>
           <div class='sb77-authorcontent'>
                        <div class='sb77-titlebox'>
                          <h3>Penulis: <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3>
                        </div>
               <div class='sb77-info'>
Judul <a expr:href='data:post.url'><span style='color:red;font-weight:bold;'><data:post.title/></span></a><br/>Jika ingin menyalin (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya :
<textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
              </div>

  <div class='sb77-footerbox'>
             <div class='sb77-social'>
                  <div class='sb77facebook'>
                     <a href='https://URL-facebook' title='Join To Facebook'>Facebook</a>
                 </div>
                 <div class='sb77twitter'>
                    <a href='https://URL-twitter' title='Join To Twitter'>Twitter</a>
                 </div>
                 <div class='sb77googleplus'>
                    <a href='https://URL-google+' title='Join To Google+'>Google+</a>
                 </div>
                 <div class='sb77rss'>
                    <a href='http://URL-rss' title='Join To RSS'>RSS</a>
                 </div>
                 <div class='sb77menu'>
                    <a href='http://sahabatblogger77.blogspot.com' title='Cari Artikel Klik Disini'>Menu Blog</a>
                </div>
                   </div>
            </div>
        </div>
</div>
</b:if>

DEMO SHOW

SAATNYA MENERAPKAN PROFIL PADA BLOG

1. Login ke akun blogger anda
2. Pada dashboard pilih Template >> EDIT Template
3. Copy kode CSS diatas, lalu Paste tepat diatas atau sebelum ]]></b:skin>
4. Selanjutnya Cari kode <data:post.body/> kemudian pastekan kode HTML setalahnya atau tepat dibawahnya
5. Simpan Template

KETERANGAN KODE

1. Agar terlihat lebih rapi, Tampilan Widget ini sudah saya setting agar sesuai dengan semua kondisi lebar pada blog, selanjutnya anda tinggal sesuaikan warna agar sesuai dengan style blog anda
2. pada kode HTML, sudah saya beri warna Merah pada kodenya, silahkan anda ganti sesuai dengan profil blog anda,
3. Penempatan kode HTML ini yang sedikit sulit karena pada Template blog ada sekitar 2-3 atau lebih kode <data:post.body/>, saat melakukan demo saya menempatkan pada kode <data:post.body/> yang terakhir. Jika pada template blog anda sama seperti yang saya jelaskan tadi, silahkan tempatkan kode HTML diatas tepat dibawah kode terakhir <data:post.body/>

Semoga Membuat Profil Author Box Dengan CSS Kode ini dapat memperindah tampilan profil blog anda. Selamat bersenang-senang dan Happy blogging.

Diperbaharui - June 16, 2014
Oleh Devy Indriyani

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Profil Author Box Dengan CSS Kode
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/02/membuat-profil-author-box-dengan-css-kode.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77