Menu

Home Sites YTube Loker

Senin, 23 November 2015

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.

Nah..!! barangkali Anda sudah bosan dengan tampilan widget autor box saat ini, ingin membuat tampilan widget yang baru, Berikut contohnya :


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


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

Tidak ada komentar:

Posting Komentar