Tuesday, 21 July 2015

Memasang Multi Author Box di Bawah Postingan Blog






Memasang Multi Author Box di Bawah Postingan Blog - Karena banyak dari temen temen sobat Blog Billy-Art yang bertanya cara membuat Multi Author Box, nah ane bakalan share nih tutorialnya dan ada tambahan sosmed (sosial media)nya juga loh..


Tampilan Multi Author Box


Gimana? kalian tertarik? yuk langsung pasang!

1. Buka Blogger > Template > Edit HTML
2. Cari kode  <data:post.body/> biasanya kode ini lebih dari satu guys, kalian cari yang paling bawah sendiri
3. Kalian tambahkan kode dibawah ini tepat setelah kode  <data:post.body/>
    <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' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
    </a>
    </div>
    <div class='author_description_container'>
    <h4><a href='#' rel='author'><data:post.author/></a></h4>
    <p>
    DESKRIPSI       
    </p>
    <div class='authorsocial'>
    <a class='img-circle1' href='FACEBOOK' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
    <a class='img-circle2' href='TWITTER' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
    <a class='img-circle3' href='GOOGLE PLUS' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
    <div class='clr'/>
    </div>
    </div>
    </div>
    </div>
    <div style='clear:both'/>
    </b:if> 
Ganti :  
Deskripsi = dengan deskripsi yang kalian inginkan
Facebook,Twitter,Google Plus = ganti dengan link sosial media kalian

4. Selanjutnya, kalian taruh kode dibawah ini tepat sebelum kode  ]]></b:skin> atau  </style>
     /* CSS Multi Author Box */
    .authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
    .avatar-container {float:left;margin-right:20px;}
    .avatar-container img{width:110px;height:auto;}
    .author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
    .author_description_container h4 a{color:#ef4824}
    .author_description_container h4 a:hover{color:#404040}
    .author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
    .authorsocial a{display:inline-block;text-align:center;margin-right:10px}
    .authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
    .authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
    .authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
    .authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
    .authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;} 

5. Simpan Template

Okeh segini dulu tutorial tentang Memasang Multi Author Box di Bawah Postingan Blog semoga membantu kalian guys! jangan lupa COMMENT, SHARE, AND SUBSCRIBE BLOG! :)

Sumber : http://twistedshape.blogspot.com/2015/06/memasang-multi-auhor-box-di-bawah-postingan.html

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.