Membuat Widget About Sederhana Di Blog Ala Musafus

Membuat Widget About Sederhana Di Blog Ala Musafus - Untuk menginformasikan atau memperkenalkan diri kita kepengunjung, kita bisa menggunakan Widget About atau Widget Tentang diri kita dan kita pasang di blog.

Kita juga bisa menginformasikan blog kita di widget ini, widget ini saya buat sendiri dengan stylenya sedikit mengikuti desain tampilan blog ini, untuk melihat langsung tampilannya silahkan lihat di bagian homepage blog ini. Berikut cara membuatnya.

Membuat Widget About Di Blog

1. Langsung saja ke menu template editor Blogger > Template > Edit HTML

2. Copy CSS di bawah ini, dan letakkan tepat di atas kode ]]></b:skin> atau </style>

.welcome-musafus{margin: 5px;box-shadow: 0 0 60px #f0f0f0 inset,0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);border: 1px solid #fff;padding: 10px;}
.welcome-musafus-item{padding: 10px;}
.welcome-musafus h3{margin: 0;padding: 0 0 5px;font-size: 21px;}
.welcome-musafus img {width: 110px;height: auto;padding: 5px;border-radius:50%;float: left;margin-right: 10px;}

3. Selanjutnya letakkan kode HTML untuk pemanggilannya, silahkan letakkan dimana yang sobat inginkan, jika ingin seperti di blog ini (diatas postingan artikel) letakkan di atas kode <div id 'main-wrapper'> (ingat semua kode template berbeda-beda)

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='welcome-musafus'>
<a href='http://www.musafus.web.id/p/about.html'>
<img alt='Safryan Noor' class='author_avatar' height='96' src='//lh3.googleusercontent.com/-jao-ErpTrgw/AAAAAAAAAAI/AAAAAAAAAQE/gCk9XmdlSMA/photo.jpg?sz=104' title='Safryan Noor' width='96'/>
</a>
<div class='welcome-musafus-item'>
  <h3>Selamat Datang Di Musafus Blog.</h3>
<p>
Perkenalkan nama saya M. Safryan N.F, saya seorang pelajar di MAN Selat Tengah Kuala Kapuas. Tujuan saya membuat blog ini untuk berbagi seputar tips, tutorial, seputar blogger, pelajaran, dan dunia internet.</p></div>
  </div>
  </b:if>

Silahkan diganti kata-kata dan linknya yang saya beri warna orange.

4. Klik Simpan Template

Sekian artikel mengenai Membuat Widget About Sederhana Di Blog Ala Musafus, semoga bermanfaat.