Selasa, 12 September 2017

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.

Artikel Terkait