 |
| Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog |
Cara membuat widget profil ala mas cholis di blog. Sore sob. Maaf lama gak posting. Biasa anak kuliah tugasnya numpuk. Hehe. Di postingan artikel kali ini saya akan mencoba membahas bagaimana cara membuat widget profil (Admin blog) ala mas cholis.
Alasan pertama saya menulis artikel cara membuat widget ini adalah karena ada yang bertanya kepada saya lewat emal.
"Bagaimana sih gan cara membuat widget about me (admin blog) seperti di blog agan?"
Nah, alasan yang kedua adalah untuk berbagi. Jadi, bukan hanya saya atau yang bertanya saja yang tahu caranya. Agar semua pengguna internet yang membaca artikel ini bisa tahu bagaimana cara membuat wiget profil tersebut.
Sebelum berlanjut ke cara pembuatannya, saya sedikit mau menjelaskan tentang widget ini sob. Sebenarnya saya membuat profil tersebut secara manual menggunakan corel draw. Jadi, gambar atau foto tersebut murni penggabungannya dari corel draw, lalu kemudian ditempelkan menjadi widget.
Daripada penasaran, langsung saja simak langkah-langkahnya berikut ini sob:
1. Buat foto dan backgroundnya terlebih dahulu
Di langkah pertama ini, silahkan anda pilih foto anda yang paling tampan sob. Biar seluruh jagat internet mengenal ketampanan sobat. hehe.
#1. Contoh foto saya seperti ini sob
Sobat bisa pilih foto sesuka hati yang sekiranya cocok.
#2. Kemudian pilih background yang anda inginkan sob. Untuk pilihan backgroundnya anda bisa download disini.
#3. Kemudian buka corelDRAW dan gabungkan antara foto anda dengan background. Dan hasil penggabungan saya seperti gambar dibawah ini sob.
#4. Setelah selesai digabung, silahkan anda simpan dengan format .jpg ataupun .png terserah sobat.
2. Pasangkan gabungan foto yang telah dibuat di sidebar
Setelah anda menggabungkan antara foto anda dengan background menggunakan corelDRAW. Sekarang saatnya anda memasanya di widget sidebar blog sobat.
#1. Silahkan buka blog anda sob.
#2. Pilih tata letak > tambahkan gadget > HTML/JavaScript.
#3. Kemudian copy pastekan kode dibawah ini kedalam HTML/JavaScript.
<div class='widget-mc' style="border:1px solid #ddd">
<div height="auto" width="165" class='head-bg' style='background-image: url()'>
<div class='my-pic'><img title='mascholis' alt='mascholis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19LD2bcHFM7xMy_aKJ1KxjwxKpKI-TMa0n2kKLscG9irhnsdljJCeGL2pp7kAu-ft4pNJAq7JnDrPfnV0TiQO6SjK_sS7dqglhEQCCn92iB1SaduZjwLJfI3C5fPEv9snmyLw8T5z-yRM/s1600/akupshoppp.png' width='165' data-align='center' height='auto' /></div>
<div class='my-data'>
<span class='my-name' style='font-weight:bold;font-size:15px'>
<a href='https://plus.google.com/u/0/+KholiselHafidz7' itemprop='url' title='+kholiselHafidz7' target='blank'>
<span itemprop='name'>mascholis</span></a>
</span></div></div>
<div class='my-words'>
<div data-margin="5" class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+KholiselHafidz7" data-rel="author"></div>
</div></div>
<div height="auto" width="165" class='head-bg' style='background-image: url()'>
<div class='my-pic'><img title='mascholis' alt='mascholis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19LD2bcHFM7xMy_aKJ1KxjwxKpKI-TMa0n2kKLscG9irhnsdljJCeGL2pp7kAu-ft4pNJAq7JnDrPfnV0TiQO6SjK_sS7dqglhEQCCn92iB1SaduZjwLJfI3C5fPEv9snmyLw8T5z-yRM/s1600/akupshoppp.png' width='165' data-align='center' height='auto' /></div>
<div class='my-data'>
<span class='my-name' style='font-weight:bold;font-size:15px'>
<a href='https://plus.google.com/u/0/+KholiselHafidz7' itemprop='url' title='+kholiselHafidz7' target='blank'>
<span itemprop='name'>mascholis</span></a>
</span></div></div>
<div class='my-words'>
<div data-margin="5" class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+KholiselHafidz7" data-rel="author"></div>
</div></div>
Keterangan:
- Kode yang berwarna BIRU adalah URL gambar. Silahkan ganti dengan URL gambar anda sob.
- Kode yang berwarna Hijau adalah nama yang akan ditampilkan dibawah foto. Silahkan ganti dengan nama anda sob.
- Kode yang berwarna MERAH adalah ID GOOGLE+. Silahkan anda isikan dengan ID Google+ sobat.
- Untuk ukuran maupun posisi bisa anda atur sendiri sesuai keinginan anda sob.
Okee, jadi sob. Bagaimana, mudah kan? Semoga tutorial cara membuat widget profil keren di blog ini bisa bermanfaat. Jika ada yang ingin ditanyakan silahkan tulis di komentar. Terimakasih telah membaca sob. Selamat mencoba.
Anda sedang membaca artikel Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog - TrobosanBlog dan artikel ini url permalinknya adalah https://trobosanblog.blogspot.com/2016/05/cara-membuat-widget-profil-keren-ala.html Semoga artikel ini bisa bermanfaat.
