Membuat Profil Google Plus Di Sidebar Blog - Widget profil google plus pada blog defaultnya akan deberi judul "about me" yang biasanya diberi link dengan teks "lihat profil lengkapku" atau "mengenai saya" pada tampilan yang kurang menarik seperti itu, kali ini SAHABAT BLOGGER 77 akan merubah tampilannya dengan membuat profil google plus terbaru dan pastinya akan mempercantik tampilan sidebar blog Anda.

Tampilan yang sama pernah saya desain saat membuat profil author box dengan model blockquote pada artikel sebelumnya, yang detailnya bisa Anda baca - Membuat Widget Author Box Dengan Blockquote sedangkan untuk tampilan profil google plus di sidebar blog kali ini saya menempatkan foto profil diatas teks descripsi seperti tampilan gambar berikut ini

image googleplus profile


Artikel Terbaru - Desain Tampilan Daftar Isi Model Tab


.mb-googleplus{
   background: #363738 url(http://URL-Gambar Anda.jpg) repeat top left;
   margin-top: 100px;
   padding-top: 100px;
   width: 400px;color: #fff;
   border-top: 10px solid #080;}

.mb-googleplus .mb-thumb {
   display: block;
   width: 180px;height: 180px;
   border: 10px solid rgba(255,255,255,0.5);
   border-radius: 50%;
   background: url(http://URL-Gambar Anda.jpg) no-repeat center center;
   position: absolute;
   left: 50%;top: -90px;
   margin: 0 0 0 -90px;
   box-shadow: inset
   1px 1px 4px rgba(45,5,123,0.5),
   0 2px 3px rgba(24,15,172,0.6);}

.mb-googleplus sahabatblogger77 p {
   font-family: Cambria, Georgia, serif;
   font-style: italic;
   font-size: 16px;
   border-bottom: 3px double rgba(0,0,0,0.5);
   box-shadow: 0 1px 0 rgba(255,255,255,0.1);
   padding: 5px;text-align: center;
   margin: 85px 0 20px 0;}

.mb-googleplus .mb-attribution {text-align: right;}
.mb-googleplus .mb-author{
   text-transform: uppercase;
   font-size: 20px;font-weight: bold;
   color: pink;
   text-shadow: 0 1px 1px rgba(255,255,255,0.1);}

.mb-googleplus cite a{
   color: #f0f0f0;font-style: italic;
   font-family: Cambria, Georgia, serif;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.7)}

.mb-googleplus cite a:hover{
   background: #080;padding:4px;
   border-radius: 20px;
   -webkit-border-radius: 20px;}


Bentuk CSS diatas sifatnya acak, singkatnya tampilan widget profil google plus belum sempurna pada tata letak lay-out, agar tampilannya terlihat rapi tambahkan format CSS berikut untuk mengatur posisi widget

CSS Widget Lay-out Responsive Input
@widget-style {
   css-design: 'format-css3';
   widget-show: 'profil-show,googleplus';
   design: 'by. devy indriyani';
   url-file: 'http://sahabatblogger77.blogspot.com';
   ex-date: 'may 11, 2014';}
.mb-wrap {
   width: 300px;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;}




DEMO SHOW



Setelah semuanya sudah benar, saatnya penerapan widget profil google plus ke sidebar blog dengan kode pemanggil HTML berikut

<div class="mb-wrap mb-googleplus">
<div class="mb-thumb">
</div>
<sahabatblogger77 cite="http://sahabatblogger77.blogspot.com">
<p>Your Teks In Here...</p>
</sahabatblogger77>
<div class="mb-attribution">
<p class="mb-author">
Your Name</p>
<cite><a href="/">Lihat Profil Lengkapku</a></cite>
</div>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Profil Google Plus Di Sidebar Blog
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 =

12 komentar

  1. thank's mba sudah mau berbagi :D
    ambil pertamanxx dulu

    BalasHapus
    Balasan
    1. emang pertamax dulu itu kayak apa sih..? hehe..
      kalau yang sekarang kan berwarna biru gitu

      Hapus
  2. keren banget bos, apalagi yang jadi demonya, hehehe...

    BalasHapus
  3. dengan menambahkan profile google+ di sidebar tentunya kan membuat blog kita semakin cantik...
    terima kasih tutorialnya ijin bookmarks suatu saat akan sangat berguna buat saya pribadi...... :)

    BalasHapus
  4. izin mempraktekkan ya mbak devy,thx tutorialnya

    BalasHapus
  5. penting banget nih supaya pembaca bisa lebih kenal ama author blognya

    BalasHapus
  6. knapa di template ane tdk ada efek kurvanya, apa ada tambahan kode khusus biyar efeknya muncul ya Mba,.., dan penyesuaian posisi otomatis pada sidebar, sdh dirubah lebarnya tp tdk kurus jg, ;((

    BalasHapus
  7. Profile G+ memang sangat diperlukan untuk memperluas jaringan / pertemanan...

    BalasHapus
  8. ini tuh disimpen dimana css sama html nya ? kurang rinci ah [-(

    BalasHapus
    Balasan
    1. [pre]<style type="text/css">
      ...
      Letakkan kode CSS disini
      ...
      </style>

      <div class="mb-wrap mb-googleplus">
      <div class="mb-thumb">
      </div>
      <sahabatblogger77 cite="http://sahabatblogger77.blogspot.com">
      <p>Your Teks In Here...</p>
      </sahabatblogger77>
      <div class="mb-attribution">
      <p class="mb-author">
      Your Name</p>
      <cite><a href="/">Lihat Profil Lengkapku</a></cite>
      </div>
      </div>[/pre]

      Lalu letakkan pada halaman sidebar pada kolom widget kosong pada elelemen formulir HTML/javascript.

      Hapus
  9. Manteep sob artikelnya sangat membantu
    http://pengobatanalamimustajab.com/cara-alami-mendapatkan-tubuh-langsing-dan-ideal/

    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