-->

Blog Yang Mempelajari Dunia Teknologi

Cara Membuat Author Box di Bawah Postingan Blogspot

author box memang sangat di perlukan, dimana pengunjung yang ingin tahu profil penulis artikel blog itu, dimana pengunjung tidak perlu lagi pergi ke halaman-halaman yang lain untuk memperjelas profil pengarang atau penulis artikel blog tersebut. tapi kalo saya untuk saat ini belum memasang karna waktu saya belum sempat untuk membuat scriht nya.

Bagi anda yang tertarik ingin memasang author bocx di blognya silahkan ikuti langkah di bawah ini dengan hati yang tenang dan tidak menimbulkan emosi.

Cara Membuat Author Box di Bawah Postingan Blogspot
  • Login ke blogger.com
  • Dasbor blog + Pilh template + edit HTML
  • Copas code berikut dan letak kan di atas code </style> atau ]]></b:skin>
    /* Author Box */
    .authorboxwrap{background:#fafafa;padding:15px;overflow:hidden;margin-left:-20px;margin-right:-20px;margin-bottom:-21px;border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6}
    .avatar-container {float:left;margin-right:10px;}
    .avatar-container img{background:#eee;width:70px;height:auto}
    .author_description_container h4{font-weight:600;font-size:16px;display:block;margin-bottom:10px}
    .author_description_container h4 a{color:#333}
    .author_description_container h4 a:hover{color:#111;text-decoration:underline}
    .author_description_container p{margin:0 0 10px;color:#333;line-height:normal;font-size:95%}
  •  Kemudian letakkan code di bawah ini tepat di atas code </article>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='authorboxwrap'>
    <div class='authorboxfull'>
    <div class='avatar-container'>
    <a href=''>
    <img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/>
    </a>
    </div>
    <div class='author_description_container'>
    <h4><a href='#' rel='author'><data:post.author/></a></h4>
    <p>
    <data:post.authorAboutMe/>       
    </p>
    </div>
    </div>
    </div>
    <div style='clear:both'/>
     </b:if>

  • Kemudian simpan atau save
Bagai mana mudah bukan, mungkin hanya sampai situ saja jika ada kesalahan mohon di maafkan.

Previous
Next Post »

Posting Komentar

Bagaimana saran anda tentang artikel ini atau apakah anda mempunyai pertanyaan tentang artikel ini !!!!

Formulir Kontak

Nama

Email *

Pesan *