Membuat Widget Author Box Dengan Blockquote

Berikut ini akan diuraikan langkah-langkah cara membuat ( Widget Author Box Dengan Blockquote ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Widget Author Box Dengan Blockquote ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

.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;}

HTML Kode

<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://sbtm77.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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Widget Author Box Dengan Blockquote ) semoga bermanfaat terima kasih.

CONTOHNYA

//link desain blockquote by
//don't editting in area please...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul=

Ditulis oleh=

Rating Blog 5 dari 5

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 >>

= TERIMA KASIH =

SBTM77

Title Blog