Memasang Multi Author Box di Bawah Postingan Blog

Agen Togel







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

Menulis dari berbagai pengalaman pribadi, jika bermanfaat bagi kalian silahkan share. Connect With Me..