SEO Responsive Author Box Untuk Blog
Apakabar semua...
Jumpa lagi dengan topik Snippet (Html/CSS).
Kali ini kami akan share Snippet SEO RESPONSIVE AUTHOR BOX untuk blog kalian nih.
Author Box ini mempunyai kelebihan dalam SEO. Yaitu:
HTML:
Jumpa lagi dengan topik Snippet (Html/CSS).
Kali ini kami akan share Snippet SEO RESPONSIVE AUTHOR BOX untuk blog kalian nih.
Author Box ini mempunyai kelebihan dalam SEO. Yaitu:
- Ditambah Schema Structure Untuk:
- Persons
- Organization
- OrganizationRole
- Responsive:
- Author box ini fleksibel untuk semua macam ukuran device user, mulai dari java, bb, android, iphone, dan desktop sekalipun
HTML:
<div class="dimaslanjaka" itemscope="" itemtype="http://schema.org/contributor"> <div class="about-author" itemscope itemprop="Person" itemtype="http://schema.org/Person"> <h3> <i class="fa fa-user-circle-o"> </i> About Author: </h3> <img align="left" src="https://res.cloudinary.com/dimaslanjaka/image/fetch/https://imgdb.net/images/3184.jpg" itemprop="image"/> <p itemprop="description">My Name Is <span itemprop="name">Dimas Lanjaka </span>. I started studying in the world of programming starting from 2011. In this Website I will share the tools to manage the websites that you have. </p> <p class="w3-container" itemscope="" itemtype="http://schema.org/Organization">Let's Get Connected: <i class="fa fa-twitter"> </i> <a href="https://twitter.com/DimasSkynetCybe" rel="nofollow" target="_blank" itemprop="sameAs url"> <font color="#00aced" itemprop="name">Twitter </font> </a> | <i class="fa fa-facebook-f"> </i> <a itemprop="sameAs url" href="https://www.facebook.com/dimaslanjaka1" rel="nofollow" target="_blank"> <font color="#3b5998" itemprop="name">Facebook </font> </a> | <i class="fa fa-google-plus-circle"> </i> <a href="https://plus.google.com/108171489708218648681" rel="nofollow" itemprop="sameAs url"> <font color="#dd4b39">Google Plus </font> </a> | <span> <a itemprop="url department" href="https://webmanajemen.xyz"> <span itemprop="memberOf">https://webmanajemen.xyz </span> </a> </span> </p> <div itemscope itemtype="http://schema.org/SportsTeam" class="pt1"> <span itemprop="name"> <i class="fa fa-users"> </i> Secret Network Forces </span> <div itemprop="member" itemscope itemtype="http://schema.org/OrganizationRole"> <div itemprop="member" itemscope="" itemtype="http://schema.org/Person"> <i class="fa fa-user-circle"> </i> <span itemprop="name">Agus Ma'arif </span> </div> <p class="moderator-desc w3-show-inline-block">Recruited From <span itemprop="startDate">2017 </span> <span itemprop="endDate" class="none">2017 </span> As <span itemprop="roleName">Moderator </span> </p> </div> <p class="right" itemprop="sponsor" itemtype="http://schema.org/Organization"> <small>Powered By <a href="https://web-manajemen.blogspot.com" title="Web Development Indonesia" rel="follow" itemprop="url"> <span itemprop="name">Web Development Indonesia </span> </a> </small> </p> </div> </div>CSS:
/* Author Box CSS Code */ .dimaslanjaka{width:100%} i[class*="fa-google-plus"]{color:#dd4b39} i[class*="fa-facebook"]{color:#3b5998} i[class*="fa-twitter"]{color:#00aced} .about-author p.right{text-align: right; vertical-align:middle} .about-author {width : 100%;overflow : hidden;margin:10px 0px;border:0px;background: #f2f2ef;margin: 0 0 30px 0;padding: 10px;border: 1px solid #EAEDEF;overflow: hidden;color: #333333;font-size: 14px;font-family: Georgia, Tahoma, Verdana;line-height: 24px;} .about-author img {display: block;width: 90px;height: 90px;margin: 0 1.2em 0 0;float: left;background-size: cover;background-repeat: no-repeat;background-position: center center;-webkit-border-radius: 999em;-moz-border-radius: 999em;border-radius: 999em;border: 2px solid #ddd;box-shadow: 0 1px 1px rgba(0,0, 0, 0.3);} .about-author h3{font-family:georgia ;font-size:18px ;margin:9px 0px ;color:#666 ;border-bottom:2px solid #666;border-top:0px ;} .about-author p {margin:0px;text-align:left;color:#666;}.moderator-desc{padding-left:2.5em}.pt1{padding-top:1px}
Edit Sesuka Kalian. Kalo bisa jangan hapus creditnya guysDemikian tutorial Snippet SEO RESPONSIVE AUTHOR BOX untuk blog kali ini.
0 Response to "SEO Responsive Author Box Untuk Blog "
Post a comment
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.