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

Box author image


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 Indriyani
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 >>
= TERIMA KASIH =

36 komentar

  1. selamat sore mbak devy,,_
    saya langsung izin ke TKP mbak,,_
    semoga saja bisa diterapin langsung diblog saya :d

    BalasHapus
    Balasan
    1. sore juga..semoga berhasil ya mas dalam penerapannya..

      Hapus
  2. Keren :D kunjung Balik kak

    BalasHapus
  3. wahhh , , , mbak indri pas di author box kliatan gimana gitu , , hehehe

    jadi pengen pakek ini mbak , ,
    thanks sharingnya mbak ,

    BalasHapus
  4. wahhh keren juga tutornya :D

    BalasHapus
    Balasan
    1. bukan hanya tutor saya doank kok mas yang keren, semua tutor sahabat lain juga gak kalah keren dari ini kok..hehe
      BTW,,terimaksih sudah berkunjung

      Hapus
  5. wah.. sepertinya oke nih, ijin kopi kodenya dulu yia bos, hehehe...

    BalasHapus
    Balasan
    1. hanya melakukan perubahan sedikit bos, ehh..ternyata keren juga,,hehe..

      Hapus
    2. mungkin saya salah tempat bertanya di kolom komentar ini, jd sebelumnya saya minta maaf.
      saya mau tanya soal komentar si bos di blog saya, sibos kan bilang gini pindahkan title judul ke HTML dalam bentuk kode, itu maksudnya gimana yia bos?

      Hapus
    3. bot google tidak mengindeks teks artikel pada postingan bos, robot google melakukan indeks pada kode HTML, karena kata kunci sangat berpengaruh kualitasnya pada title, jadi pakai meta untuk menentukan keyword tentang title, dan tentang kode untuk HTML semua teks dalam artikel akan berbentuk kode dalam HTML yang pengaturannya ada pada blog 1 jika pada template

      Hapus
    4. cara pengaturannya gimana bos? saya cukup bingung dengan kode html bos...

      Hapus
    5. meta pengaturan keyword dalam tag head, cantumkan minimal 5-7 kata kunci yang mengarah pada nice blog anda, karena akan lebih membantu jika blog tersebut memilki blog dengan nice yang beragam

      dan dalam penulisan kata kunci pada judul jangan menggunakan kata cara membuat. cukup membuat saja,karena kata tersebut akan banyak sekali persaingannya dalan search google, jika diperlukan gunakan tanda baca pada judul

      Hapus
    6. terimakasih banyak bos, sangat membantu sekali...

      Hapus
  6. Wah auotr boxnya keren ya mbak, jadi kepengen coba praktekin nie...
    Makasi ya udah berbagi ilmunya :)

    BalasHapus
    Balasan
    1. sama-sama mas, kan berbagi itu ibadah, hehehe

      Hapus
  7. Caranya cukup menarik juga yaa :D
    ijin coba ah..

    BalasHapus
  8. salam kunjung balas...perkongsian yg bagus ni tq...

    BalasHapus
  9. tadi sudah saya pratekin tapi kogk ga total ya hasilnya :
    kata yang dibawah ini kaga timbul.

    Judul=Membuat Widget Author Box Dengan Blockquote
    Ditulis oleh=Devy Indriyani
    Rating Blog5dari 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 >>

    BalasHapus
    Balasan
    1. sebelum ini sempurna untuk saya publikasikan, terlebih dahulu widget ini sudah saya test ke 3 versi template, dan hasilnya sama seperti pada tombol demo show,tetapi kenapa pada template mas kagak muncul ya, sebentar mas,saya lihat dulu blognya mas

      Hapus
    2. hmmm..masalahnya pada tag penutup mas, coba hapus tag penutup </p> pada teks terimakasih, lalu pindahkan tag tersebut diatas </blockquote> jika teks content belum sempurna edit pada kode <div>

      Hapus
  10. Tampilannya belum 3D ya mbak, tetapi saya benar-benar salut dengan mbak devi, pintar banget. Terima kasih atas ilmunya ya

    BalasHapus
    Balasan
    1. saya hanya mendesain dengan CSS transform mas, jika ingin tampilannya 3D silahkan diedit sendiri dengan CSS animasi misalnya

      Hapus
  11. bagus kali tampilannya, sepertinya harus dicoba :)

    BalasHapus
  12. klw kita mau ambil gambar admnya di demoshownya bagaimana mba, eit maap salah, maksudnya.. kode border bingkainya yang melengkung kurva, bagaimana, mksi..

    BalasHapus
    Balasan
    1. .border:before, border: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;//* sesuaikan dengan lebar obyek
      max-width: 300px;
      width: 50%;}

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

      Hapus
    2. div style='background-color: #F5F5F5; padding: 14px;-moz-box-shadow: 0 0 5px 5px #C0C0C0; -webkit-box-shadow: 2px 2px 5px black; box-shadow:2px 2px 5px black;'>,

      kode template ane bgini.Mba Dev disainnya.. kode yg mba tuliskan di ats tdk mempan, kira2 pengganti kode seperti ini ato tambahan kodenya apa mba, tp maunya nanti hasilnya seperti contoh kurva begitu mba Dev..mohon pencerahannya, maklum sj mba gak trlalu paham pengkodean.

      Hapus
    3. hapus kode warna heksa pada box-shadow,lalu gantikan dengan kode RGBA agar berbayang blur

      pada pembangun CSS-nya silahkan tambahkan kode seperti diatas diwilayah stylenya bukan pada HTML pemanggil-nya

      Hapus
    4. ;(( kode heksa? RGBA? ;(( kode yg harus ditambahkan yg mana,, yg di isi postingan ato yg di balasan komentr ;(( , coba diliat di blog ane mba sy, pendapatnya bagaimana. ;(( (k) (k)

      Hapus
  13. Mbak FB nya apa mbak

    Klo mau ambil demo Show nya gmna yaa :D Mohon pencerahan nya
    pliss :))

    Ini blog saya aja masih newbie bnget http://bugis-31.blogspot.com/ :3 ;-(

    BalasHapus
  14. maksudnya mau ambil demo show gimana ya,

    demo show diatas hanya sebagai hasil tampilan, jadi jika ingin membuat seperti yang terdapat pada tampilan demo show, cukup menerapkan kode-kode pada tutorial ini mas, gitu maksudnya

    BalasHapus
  15. Aduhhh 'Mba.. Maaf ngerepotin...
    ini dah saya terapin cuman bordenya ga kliatan mba

    bingung juga nih saya
    maaf ya 'mba

    BalasHapus
    Balasan
    1. seharusnya Anda tanyakan hal ini di sini:

      >> Cara Mengganti Judul Artikel Dengan Permanen Link

      Karena Anda menggunakan widget yang tutorialnya dibahas disana, tetapi tidak kenapa,kebetulan masih dalam widget yang sama dan saya sudah memeriksa semua kode ini, tidak ada masalah dalam penggunaan, hanya saja Anda menyisipkan kode error yang semestinya tidak berada disana.

      diakhir kode CSS widget yang anda letakkan, saya menemukan kode tag penutup </style> yang membuat kode itu tidak memiliki tag pasangan pembuka, jika elemen CSS diletakkan dalam area ]]></b:skin> maka atribut style tidak perlu disertakan.

      temukan kode ini dalam Template Anda
      <style type='text/css'>
      #main-wrapper{width:630px; padding-right:0px}

      ....
      lihat diatas kode itu ada kode penutup </style> yang tidak memiliki pasangan pembukanya.

      Hapus
  16. ini nih yang mau saya pasang , akhirnya nemu juga , izin berkreasi dulu ya mbak :D

    BalasHapus
  17. Wouw Nice Bingitz,,,ajarin dunk'z mbak

    (from : New Bie)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK