Tutorial Cara Membuat Profil Authorbox Atau Widget About Me Pada Sidebar Blog
Mungkin ada beberapa dari kamu semua yang mempunyai sebuah blog/website. nah kali ini aku akan memberikan sebuah widget. widget yang satu ini sangat bagus bagi kamu yang ingin memberikan sebuah profil dirimu pada blog. dan juga berisi tombol donasi. sangat bagus sekali jika kamu ingin menggalang sebuah dana pada blog yang kamu kelola saat ini. jika penasaran. ikutilah langkah-langkah dibawah ini.
Tutorial :
- Pertama-tama yang paling terpenting ialah. pergi dulu ke blog kamu. jika belum login. maka login disini
- jika sudah maka pergi ke menu "Tata Letak"
- Setelah itu click tulisan "Add Widget/Tambahkan Gadget" pada sidebar blog (sidebar itu bagian samping kanan atau kiri pada blog kamu. jika tidak ada bagian kiri maka bagian kanan. biasanya kebanyakan template ada pada bagian kanan.
- Jika sudah maka akan terbuka sebuah tabel. disana pilih "HTML/Javascript"
- Setelah itu. Copy dan pastekan code dibawah ini tepat pada kotak kolom textbox besar tersebut :
<div class="authorbox">
<img alt="author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij9DrmVuCZ34PE7fP3YjxgfeS95cTTksnGj-47FIcAjtpTOHPAPxEGZj0nXBkyyn0B8dUzD_bSGR1q6dVEg4rWkGQ00VYOM7JNJ88rMlXHzqpWC2sLGHFbvf_kv89G5dEySLTUryb9ahc/s120/2323.png" width="120" height="120" />
<a class="authorname" href="https://plus.google.com/+ReskyFresanddy" rel="author" target="_blank" title="Get in touch">Author</a>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.youtube.com/channel/UCFPW3_nmoicgKsYDNMjp6Xw" target="_blank" title="Free Intro/Outro Music Free Copyright"><i aria-hidden="true" class="fa fa-youtube-play"></i>Youtube</a>
<a class="butt-contact" href="https://paypal.me/Okagilmer" rel="nofollow" target="_blank" title="Donasi Disini"><i aria-hidden="true" class="fa fa-paypal"></i>Donasi</a>
</div>
</div>- Kosongkan saja kotak textbox kecil tersebut. dan lalu click tombol "Apply" lalu click tombol "Ok" Jangan beranjak pergi dulu dari tempat itu. click logo disket yang berada pada pojok kanan bawah tersebut. logo disket itu merupakan logo "Save". save kembali agar perubahan tidak menghlang tentunya.
- Disini Jika sudah. maka selanjutnya pergi ke menu "Theme/Tema". jika sudah berada pada menu "Theme/Tema" click lambang segitiga menghadap kebawah tersebut disamping tulisan "SESUAIKAN" tersebut.
- Maka akan muncul beberapa pilihan. disana pilih "Edit HTML", disini carilah code "]]></b:skin>"
- Jika sudah ketemu. maka copy dan pastekan kode dibawah ini. tepat diatas kode tersebut
- Oh iya, jika kamu menggunakan template dari mas sugeng atau mba igniel entah itu viomagz/linkmagz dan lainnya atau ingiplex, tempatkan code dibawah ini tepat diatas code <head>, pastikan juga kamu memberikan tag pembuka <style> diawal code dan tag penutup </style> diakhir code dibawah ini :
/* Sosial Media */
#HTML93 h2.title{display:none}
#HTML93{width:100%;max-width:300px;z-index:10;-webkit-transform:translateZ(0);transform:translateZ(0)}
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuY3xc2Z2naWpvJDOiMg9uTDVKdiVf73DZc9I6nCaValMDsi9nhxJTwoBxtgivMiJnclcFic6T15Hsqh-r4BWoaoSyDrBoABN-wDHDe4wkpQgTQ3ZUgSgT3lo5xSzTRS7sLOAMqKzryP4/s1600/poison2.jpg) top center no-repeat #fff;padding:22px 0 0;margin:0 auto}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:75px auto 0;border-radius:100%;display:block;box-shadow:0 5px 5px rgba(0,0,0,0.1);border:5px solid #fff;transition:all .6s}
.authorbox img:hover{border-radius:10%;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.authorbox a.authorname{display:table;margin:20px auto;padding:6px 10px;line-height:normal;border:1px solid rgba(0,0,0,0.08);color:#9598a0;font-weight:400;font-size:14px;border-radius:3px;letter-spacing:1px}
.authorbox a.authorname:hover{background:#3498db;color:#fff}
.sosmed-author{margin:auto;padding:15px;background:#eef3f6;border-radius:4px;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0;padding:0 0 10px 0;width:100%;}
.sosmed-author li{display:inline-block;width:24%}
.sosmed-author li a{color:#bdc3c7!important;transition:all .4s ease-out}
.sosmed-author li a:hover{color:#7f8c8d!important}
.bawahsos{width:100%;display:block}
.bawahsos a.butt-author,.bawahsos a.butt-contact{background:#f39c12;color:#fff;display:inline-block;width:47.2%;padding:10px;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.bawahsos a.butt-contact{background:#3498db;color:#fff;margin:0 0 0 8px}
.bawahsos a.butt-author:hover{background:#fbb341;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-contact:hover{background:#5cb0e8;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-author i,.bawahsos a.butt-contact i{margin:0 5px 0 0}- Jika sudah maka click logo disket tersebut tepat pada pojok kanan. disamping symbol Undo/Back Tersebut
- Save terlebih dahulu
