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.
<b:if cond='data:blog.pageType == "item"'> <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.
comment 0 komentar:
more_vertsentiment_satisfied Emoticon