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:

• Ditambah Schema Structure Untuk:
1. Persons
2. Organization
3. OrganizationRole
• Responsive:

• Author box ini fleksibel untuk semua macam ukuran device user, mulai dari java, bb, android, iphone, dan desktop sekalipun
  

Cekidot kode nya vroo....

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 guys

Demikian tutorial Snippet SEO RESPONSIVE AUTHOR BOX untuk blog kali ini.

Share this post