Advertisement here

Membuat Profil Author Berisi Tombol Donasi Pada Sidebar Blog



Mungkin ada beberapa dari kamu semua yang mempunyai sebuah blog/website. nah kali ini dea 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.


Step By Step :

  • 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/AVvXsEhnHs4VgGAupyWgIABtm278eXiUf5P_6NEjhrPwszyWIdD284fH3sfylzCTq82RthY4PwkeCBtDc1AImBtM8hIa_HjJZozGNHXO1Wl003ADQE2THdTZNMZy6iX_JqCc0iE68X6i568bR5k/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/PutuOka" 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 titik 3 kebawah vertikal itu tepat disamping tulisan "Tema Saya/My Theme".
  • Maka akan muncul beberapa pilihan. disana pilih "Edit HTML"
    maka cari code yang satu ini terlebih dahulu "]]></b:skin>" tanpa tanda petik
  • Jika sudah ketemu. maka copy dan pastekan kode dibawah ini. tepat diatas kode tersebut

/* Authorbox */
    #HTML1 h2.title{display:none}
      #HTML1{width:100%;max-width:300px;z-index:10;-webkit-transform:translateZ(0);transform:translateZ(0)}
        a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
          .authorbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMDxMEUmuE3U_2ZEGg-bFw2aq9-cxts2rsEtM3fdRPsyFuDEkN2KH_AJNmsm7F-2XYfwc75TVRuif5kOxlXt2nhAQiGPC7_idjS6PKCkWpFkpTQk4zYFsA6x_Z23EaeKUyO16mDvICLk/s290/45545.png) 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}
                      .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 juga tulisan bewarna hijau dengan url bacground kamu.

                                 
                                Next Post Previous Post
                                Advertisement here
                                Advertisement here
                                Advertisement here
                                Advertisement here