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:

Membuat Profil Author Box Dengan CSS Kode

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 Indriyani
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 >>
= TERIMA KASIH =

23 komentar

  1. makasih mbak saya amankan pertamaax saya dulu xixi

    BalasHapus
    Balasan
    1. wah pertamaxnya sudah diangkut hehehe saya kedua tak apa dah. owh ya kalau di buat metro style mungkin akan semakin mantab

      Hapus
    2. Silahkan diangkut sist Friska,Tetapi sisain ya buat adminnya,,heeh

      Hapus
    3. Ide yang bagus juga tuh mas sarofudin, ntar mau coba desain widgetnya lagi dengan warna dan tampilan berbeda,dan mau pakai metro kali aja semakin keren..hehe

      Hapus
    4. besok di share ya mbak caranya

      Hapus
    5. insyaAllah mas,jika tidak lupa..hehe

      Hapus
  2. kalau gitu saya amankan keduaxnya...
    kalau ini sy pernah coba m'ba dan ternyata keren :)

    BalasHapus
    Balasan
    1. kode widgetnya sedikit saya rubah mas, sehingga nama author tampilannya dengan webkit border,nambah sedikit kerenlah..hehe

      Hapus
  3. ijin yimak kak salam kenal kunbal y

    BalasHapus
    Balasan
    1. salam kenal juga mas,happy blogging

      Hapus
  4. save dulu ntar dicoba setelah blogwalking

    BalasHapus
  5. jadi makin cakep yaa mbak kalau dipakein fotoo :D

    BalasHapus
    Balasan
    1. keren,dan sekalian pajang tampang adminnya mbak rani,,

      Hapus
  6. langsung dicoba dulu biar gak ketinggalan :D

    BalasHapus
    Balasan
    1. dipersilahkan mas, asal jangan coba-coba.hehe

      Hapus
  7. salam kenal mbak, oya apakah cara di atas bisa dimasukkan dibawah posting, terima kasih!!

    BalasHapus
    Balasan
    1. iya mas,widget ini akan tampil dibawah postingan blog, dan kodenya sudah saya setting agar secara otomatis mengikuti lebar blog, tinggal merubah warna jika mas ingin warna berbeda dari yang saya tampilkan pada gambar diatas.
      Terimakasih

      Hapus
  8. Makasih Neng, CSS dan HTML Code-nya udah dipasang di gm-computindo.blogspotDOTcom, silahkan kunjungi disalah satu pos, namun sudah saya modif warna dan lebar text areanya.

    Sumber pembuatan Box Author sudah saya cantumkan otomatis pula di setiap pos. Makasih ya...

    BalasHapus
    Balasan
    1. sama-sama mas. saya merangkai kode diatas bukan untuk permanen, jadi siapun pun yang mau menggunakan bebas mengeditnya, hanya sebagai blogger sejati diharapkan seperti mas ini yang menyertakan sumber desainnya.

      saya sudah melihat blognya ya mas, jadi semakin kereeenn,,,
      sukses selalu buat blognya..

      Hapus
    2. Sip,... sama-sama... cuma permintaan saya di google+ belum dikasih ni,.. minta source CSS atau HTMLnya buat menu seperti di blog ini Animasinya sangat menarik. menu paling atas itu lho yang ada "My Diary", "Artikel", dll...

      Hapus
    3. Kalo mau kasih, inbox aja ya ke email gmcomputindo@gmailDOTcom.. format notepad gpp,... hehehe

      Hapus
    4. lihat saja pada label artikel menu navigasi mas, kalau tidak salah menu diatas sudah pernah saya share tutorialnya, atau langsung kinjungi link ini
      http://sahabatblogger77.blogspot.com/2014/01/membuat-vavigasi-menu-fixed-full-rotatex.html

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK