Iklan

Membuat Author Post Simple & Keren di Blogger

Simple Author Post di Blog
Author post biasanya di gunakan untuk menampilkan deskripsi ataupun biodata wacana si pembuat atau admin blog tersebut. Dengan menambahkan widget author ini visitor atau pengunjung dapat mengetahui dan lebih mengenal dari admin blog.

Cara Membuat Author Post Simple & Keren


Widget author post yang gue bagikan kali ini simple dan keren, maka dari itu Anda  harus mencoba widget author post ini ke blog Anda. Widget ini juga di lengkapi dengan kolom biodata, jadi jikalau Anda ingin memberikan pesan atau curhat sekalipun terserah Anda.

Dan tidak ketinggalan pula icon sosial media yang di sediakan pada widget ini, dan akan memudahkan pengunjung mengetahui sosial dari Anda, jadi silakan disimak tutorial dibawah ini dengan benar supaya dapat bekerja dengan baik.

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy dan Paste arahan CSS dibawah ini di atas arahan ]]></b:skin> atau </style>.

/* Post author informasi */ .post_info{background:#ece3d2;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden} .post_info:before{content:'';display:block;width:100%;height:88px;background:#5fa281;position:absolute;top:0;left:0;right:0;z-index:0} .author-photo{display:inline-block;float:left;position:relative;z-index:1} .about-author{z-index:1;position:relative;display:inline-block;float:right;width: calc(100% - 125px);} .author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #f3ebdc} .author{font-size:20px;font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase} .author a,.author a:hover{color:#fff} .author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777;} ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0} ul.sosmed-saya li{display:inline-block} ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#545454;text-align:center;border-radius:2px} ul.sosmed-saya li a:hover{opacity:1} ul.sosmed-saya li a.efbi{background-color:#4a7fbb} ul.sosmed-saya li a.tewe{background-color:#00aced} ul.sosmed-saya li a.iige{background-color:#c4906e} ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #dbd2c0;padding:0 15px;font-style:italic;font-size:14px;color:#999}

Langkah kedua :

Silakan Anda taruh arahan HTML dibawah ini di atas arahan </article> atau arahan HTML share button Anda. Contoh penerapan punya gue ialah sempurna dibawah arahan share button.

Contoh penerapan widget author post

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <span class='author-photo'> <img alt='' src='https://lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg' title=''/> </span> <span class='about-author vcard'> <span class='author'> <span class='fn'><a class='g-profile' href='https://plus.google.com/105611265751427996934' itemprop='url' rel='author' title='author profile'><span itemprop='name'></span></a></span> </span> <span class='author-desc'> Hanya bermodalkan Notepad, Paint, dan alat - alat bawaan windows ku mulai membuat postingan satu - persatu. </span> <ul class='sosmed-saya'> <li><a class='fb' href='https://www.facebook.com/mrsdzgn/' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li> <li><a class='tw' href='https://www.twitter.com/afriza_mohammad' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li> <li><a class='ig' href='#' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li> <li class='site'>http://mrdzgn.blogspot.com</li> </ul> </span> </span>   </b:if>

Silakan ganti goresan pena merah dengan url sosial media dan gambar Anda.

Silakan Anda Save template Blog Anda, dan lihat hasilnya. Sekian dari gue semoga bermanfaat.

0 Response to "Membuat Author Post Simple & Keren di Blogger"

Posting Komentar