Author box Responsive

mungkin sobat pernah melihat Author Box yang terpasang pada sebuah blog,dan yang kita tahu blog/website tersebut sudah responsive sayang sekali saat kita lihat dengan menggunakan resulusi tertentu (dibawah 320px)Author box tersebut sengaja di hilangkan karena Author-box yang dia pasang tidak responsive.Nah kali ini Admin akan memberi solusi buat sobat blogger yang templatenya sudah responsive dan ingin juga pasang Author box yang responsive.Untuk demonya sudah saya gunakan pada blog kesayangan saya ini dan jika sobat ingi tahu cara membuatnya silahkan ikuti petunjuk Admin secara lengkap :

1. Cari kode ]]></b:skin> atau </style> letakkan css berikut tepat di atasnya 

   #author-box {
       background: none repeat scroll 0 0 #98B7DB;
       box-shadow: 2px 3px 2px #000000;
       margin: 8px 5px;
       min-height: 120px;
       padding: 5px 2px;
       position: relative;
       text-align: justify;
       width: 98%;
   }
   
   #title-content {
       padding: 5px 30px;
       text-align: left;
       text-transform: uppercase;
       color: #fff;
       background: #1274B5;
       position: relative;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       box-shadow: 1px 2px 1px#000;
   }
   
   #title-content:before {
       content: "
       \f040";font-family: fontAwesome;
       color: red;
       background: blue;
       position: absolute;
       left: 0;
       bottom: 0;
       padding: 5px;
   }
   
   .avatar {
       clear: left;
       float: left;
       margin-bottom: 0.5em;
       margin-right: 0.2em;
       margin-top: 0.2em;
       text-align: justify;
       width: 80px;
       height: 80px;
       position: relative;
       background: red;
   }
   
   .avatar:before {
       content: "
       ADMIN";position: absolute;
       bottom: -10px;
       left: 7px;
       background: #000;
       color: #fff;
       padding: 0 6px;
   }
   
   .photo-avatar {
       width: 70px;
       height: 70px;
       margin: 5px;
   }

2. Selanjutnya cari kode <data:post.body/> letak kan html dibawah ini tepat di bawah kode <data:post.body/>berikut kode Html nya

   <div id='author-box'>
       <div id='title-content'>Judul Artikel :<a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></div>
   <div class='avatar'>
     <img alt='photo-avatar' class='photo-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoogr8FbjiESMMlVuywBeZiTNS0Oeqkvw0rp8Z2LbSruJBFJBiTUGXciy1QmNG7mTBB5UK4zjy3zLCIF93S2ZqpxAHpWPtY7OPkY538Su7K5uhHEi-2LUIyblHlUtsSZ6M-8uWlAOcs5Q/s200/mahfid.jpg' title='Mahfid Mayanto'/></div>Terima Kasih Sobat sudah membaca Artikel saya Tentang <i style="color:red;"><data:blog.pageName/></i> Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. 
       Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih</div>

3. Silahkan sobat ubah bagian Narasi pada html dengan kata kata sobat sendiri lakukan preview dulu jika jika sudah tidak ada error kode silahkankan Save Template..Selamat mencoba

Judul Artikel :Author box Responsive

Terima Kasih Sobat sudah membaca Artikel saya Tentang Author box Responsive Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih