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.

Subscribe to receive free email updates:

0 Response to "SEO Responsive Author Box Untuk Blog "

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
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.