Membuat Widget Author Box Dengan Blockquote

Membuat Widget Author Box Dengan Blockquote - Bentuk dan variasi widget author box sangat banyak dan mudah untuk kita terapkan sebagai profil admin yang menampilkan permanen link untuk title blog. Dan beberapa widget seperti ini sudah pernah saya desain dengan membuat foto profil admin, dan menggabungkan tombol widget share dalam satu wilayah border box yang sama seperti -
Baca tentang - Membuat Profil Author Box Dengan CSS Kode


Desain style hampir sama, namun pada widget author box kali ini, saya membuat blokquote karakter sebagai penghias bingkai box, dan posisi foto saya letakkan dibawah conten teks sebelah kanan seperti pada gambar dibawah ini

Nah..!! barangkali Anda sudah bosan dengan tampilan widget autor box saat ini, ingin membuat tampilan widget yang baru, Berikut sudah saya siapkan kode pembangun CSS elemen class khusus buat semua sahabat pecinta SAHABAT BLOGGER 77

.mb-style {
  width: auto;
  background: #080;
  border-radius: 6px;}

.mb-style:before, .mb-style:after {
  content: "";
  position: absolute;
  z-index: -2;
  transform: rotate(-3deg);
  bottom: 10px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  height: 20%;
  left: 10px;
  max-height: 100px;
  max-width: 300px;
  width: 50%;}

.mb-style:after {
  transform: rotate(3deg);
  left: auto;right: 10px;}

.mb-style blockquote{
  background: #333;
  height: 75%;
  padding: 30px;
  text-align: left;}

.mb-style blockquote:before{
  color: rgba(255,255,255,0.2);
  position: absolute;
  content: '\201C';
  font-size: 150px;
  line-height: 130px;
  font-style: italic;
  top: 0px;
  right: 20px;
  font-family: Cambria, Georgia, serif;}

.mb-style blockquote p {
  color: #fff;
  font-family: 'Abril Fatface', sans-serif;
  font-size: 14px;
  text-shadow: 1px 1px 1px #000;
  padding: 10px 12px;}

.mb-style .mb-attribution {padding: 20px;}
.mb-style .mb-author {
  font-size: 24px;
  font-family: 'Dr Sugiyama', cursive;
  -moz-transform: rotate(-4deg);
  color: #070d5f;}

.mb-style cite a{
  color: #999;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;}

.mb-style cite a:hover{color: #000;}
.mb-style .mb-thumb {
  display: block;
  width: 95px;height: 95px;
  border: 5px solid #2fe45D;
  border-radius: 50%;
  background: url(..URL-Gambar Anda.jpg) no-repeat center center;
  position: absolute;
  right: 10px;bottom: 5px;
  box-shadow:inset 1px 1px 4px rgba(0,0,0,0.5),
                   0 2px 3px rgba(0,0,0,0.6);}

@font-face {
  font-weight: normal;font-style: normal;
  font-family: 'icons';
  src: url("font/icons.eot");
  src: url("font/icons.eot?#iefix") format('embedded-opentype'),
       url("font/icons.woff") format('woff'),
       url("font/icons.ttf") format('truetype'),
       url("font/icons.svg#icons") format('svg');}

.mb-wrap {
  width: auto;
  margin: 20px auto;
  padding: 20px;
  position: relative; }

.mb-wrap p{margin: 0;padding: 0;}
.mb-wrap blockquote {margin: 0;padding: 0;position: relative;}
.mb-wrap cite {font-style: normal;}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="mb-wrap mb-style">
<div class="mb-thumb"></div>
//link desain blockquote by
//don't editting in area please...
<blockquote cite="http://sahabatblogger77.blogspot.com">
<p>TERIMA KASIH ATAS KUNJUNGAN SAUDARA</p><div style='padding:12px 5px;'>
Judul= <b><span itemprop='itemreviewed'><data:post.title/></span></b><br/>
Ditulis oleh= <b><span itemprop='reviewer'><data:post.author/></span></b><br/>
Rating Blog <span itemprop='rating'>5</span> dari 5<br/>
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke &gt;&gt; <div style='font-family: Arial;font-size: 13px;font-weight:400;'><a expr:href='data:post.url' expr:title='data:post.title' target='_blank'><data:post.url/></a></div><div style='text-align: center;color: red;font-size: 17px;'><b>= TERIMA KASIH =</b></div></div>
</blockquote>
<div class="mb-attribution">
<div class="mb-author">
Your Name</div>
<cite><a href="URL-Anda.blogspot.com/">Title Blog</a></cite></div>
</div>
</b:if>

DEMO SHOW


Bagaimana.? keren gak tampilan widget autor box dengan perpaduan blockquote kali ini, jika Anda tertarik ingin membuat widget ini, kita lanjut ketahap selanjutnya, yaitu

TAHAP AKHIR PENERAPAN WIDGET KE BLOG

1. Copy lalu Paste CSS diatas sebelum kode ]]></b:skin>
2. Untuk HTML letakkan dibawah kode <data:post.body/> terakhir
3. Simpan Template

Terimakasih and enjoy..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Widget Author Box Dengan Blockquote
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/04/membuat-widget-author-box-dengan-blockquote.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77