0
Home  ›  Tutorial  ›  Widget

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

Bagaimana? jika sudah selesai dan berhasil selamat. jika masih belum. atau kamu belum mendapatkan kode bskin tersebut coba carilah menggunakan tombol "Find" didalam kolom. dengan cara click sembarang terlebih dahulu didalam kolom kodenya. setelah itu pencet "CTRL + F" maka akan terbuka textbox find di pojok kiri diatas kolom. Ganti tulisan berwarna merah dengan url photo profile kamu. ganti tulisan bewarna biru dengan url akun paypal.me kamu. (kamu harus membuat halaman paypal.me terlebih dahulu). dan ganti tulisan berwarna kuning untuk url channel youtube kamu, ganti tulisan bewarna hijau dengan url profil blog milikmu dan ganti juga tulisan berwarna ungu dengan url gambar cover yang telah kamu siapkan.
Posting Komentar
Search
Menu
Theme
Share
Additional JS