Cara Membuat Widget Author Box Keren Di Blog | Tutorial Lengkap

Cara Membuat Widget Author Box Keren Di Blog

Widget author box biasanya terletak di bagian sidebar blog dan juga di bagian bawah postingan blog. Fungsi Widget Author Box sendiri berfungsi sebagai untuk memberitahukan infromasi tentang si penulis ataupun pemilik konten blog tersebut.

Zona Internetku September 19, 2018

Cara Mudah Membuat Widget Author Box Keren Di Blog. Widget Author atau yang biasa diklaim menggunakan nama widget pengarang merupakan sautu widget blog yg berisi tentang bukti diri atau liputan sekilas sekilas tentang penulis konten blog tersebut, tak sporadis pula apabila widget author pula sanggup diberi tombol link media generik author tadi.

Baca juga :2 Cara Membuat Widget Subscribe Box Keren Di Blog

dua Cara Paling Mudah Untuk Menambahkan Widget Author Box Yang Super Kece Di Blog

Untuk membuat widget author box sangat mudah sekali, karena saya sudah menyiapkan kode widget author blog buatan saya sendiri yang saya ambil dari template premium buatan saya. Untuk tampilan widgetnya tidak perlu diragukan lagi karena tampilan sudah responsive dan bisa menyesuaikan di segala perangkat.

1. Menambahkan Author Box Di Bawah Postingan Blog

Menambahkan Author Box Di Bawah Postingan Blog

1. Pastikan kalian sudah masuk di blog kalian

2. Berikutnya pilih menu "Tema" kemudian kalian klik "Edit Tema"

3. Setelah itu kalian cari kode</b:skin> atau</style>

4. Silahkan letakkan kode berikut ini di atas kode yang tadi

			#aboutme-in{background:#b8c7e4;margin:25px auto;display:block;position:relative;padding:30px 10px 20px 10px;overflow:hidden} #aboutme-in:before{content:'';display:block;width:100%;height:70px;background:#0a2f77;position:absolute;top:0;left:0;right:0;z-index:0} .img-about{display:inline-block;float:left;position:relative;z-index:1} .img-in{width:120px;height:120px;border-radius:100%;z-index:1;border:7px solid #f3ebdc} .aboutfull{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 155px)} .aname{color:#b38c45;font-size:20px;font-weight:600!important;padding:0!important;display:block;margin:12px 7px!important;text-transform:uppercase;font-family:informal roman} .aboutme-note{font-size:15px;font-weight:400;line-height:1.6em;color:#714b11} .sosmed-about{display:block} .sosmed-about a{text-align:center;font-size:20px;display:inline-block;padding:0;margin:5px 2px} .sosmed-about a i{line-height:30px} .sosmed-about a i.fa-facebook{color:#fff;background-color:#174298;height:30px;width:35px} .sosmed-about a i.fa-google-plus{color:#fff;background-color:#a70000;height:30px;width:35px} .sosmed-about a i.fa-instagram{color:#fff;background-color:#4a340c;height:30px;width:35px} .sosmed-about a i.fa-twitter{color:#fff;background-color:#7790c1;height:30px;width:35px} @media screen and (max-width:480px){#aboutme-in{text-align:center}.img-about{float:none}.aboutfull{width:100%}.aboutme-note{text-align:left;float:left}}
5. Jika selesai, selanjutnya yaitu kalian cari kode<data:post.body/>

Tips : Setiap template blog memiliki jumlah kode<data:post.body/> yang berbeda beda, jadi jika widget author pada blog kalian tidak muncul maka solusinya kalian harus meletakkan kode widget author blog tadi di atas atau di bawah kode<data:post.body/> yang lainnya

biasanya yang benar adalah kode<data:post.body/> berada di dalam kode<b:includable id='post' var='post'>...</b:includable> 6. Setelah kalian sudah menemukan kode<data:post.body/> maka kalian letkkan kode berikut ini di bawah kode<data:post.body/>

			<div id='aboutme-in' class='aboutme-in'> <span class='img-about'> <a href='#'> <img class='img-in' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipgqlkepNy9ebAmpBhLD4eC6z_YlXWKqlzk-hV5a8z-xHPL_9YhVu0fvFvreN7pETBDlgGum1pLCfwazWECFrBRBtm_m954XpcOLuSDENd5V-xn7XMvIBiRgGgvP0qxNwPUUJ2MLGBHbnc/s1600/noimage-zonainternetku.png"/> </a> </span> <span class='aboutfull'> <span class='aname'>Mch. Hakim </span> <span class='aboutme-note'>Zona Internetku | Seorang blogger Ganteng dan memanfaatkan waktu luangnya untuk belajar blogging, koding, mendesain dan mendalami dunia IT </span> <span class='sosmed-about'> <a href='https://web.facebook.com/zonainternetku/'><i class='fa fa-facebook'></i></a> <a href='https://plus.google.com/u/0/+MchHakim'><i class='fa fa-google-plus'></i></a> <a href='https://www.instagram.com/mch.hakim/'><i class='fa fa-instagram'></i></a> <a href='#'><i class='fa fa-twitter'></i></a> </span> </span> </div>
7. Ok, jika semua dirasa sudah beres, silahkan kalian klik "Simpan Tema" dan lihat hasilnya

Baca juga :

3 Cara Memasang Widget Tombol Media Sosial Pada Blog

6 Cara Memasang Social Media Share Button Pada Blog

Trik Membuat Widget Label Blog Menjadi Keren

2. Menambahkan Author Box Di Bagian Sidebar Blog

Menambahkan Author Box Di Bagian Sidebar Blog

1. Silahkan login dulu di blog kalian

2. Kemudian pilih menu "Tata Letak" dan klik "Tambahkan Gadget"

3. Selanjutnya pilih widget yang bernama "HTML/JavaScript"

4. Setelah itu masukkan kode berikut ini

			<style> #about_me{background:#eeb9b2;margin:25px auto;display:block;position:relative;padding:30px 10px 20px 10px;overflow:hidden;max-width:300px} #about_me:before{content:'';display:block;width:100%;height:100px;background:#ed7d70;position:absolute;top:0;left:0;right:0;z-index:0} /* Widget Author Box By Zona Internetku */ .about_img{display:block;position:relative;text-align:center} .img_in{width:120px;height:120px;border-radius:100%;z-index:1;border:7px solid #f3ebdc} .about_full{position:relative;display:block;width:100%} .a_name{color:#3f2b07;font-size:20px;font-weight:600!important;padding:0!important;display:block;margin:12px 7px!important;text-transform:uppercase;font-family:informal roman;text-align:center} .aboutme_note{font-size:15px;font-weight:400;line-height:1.6em;color:#714b11} .sosmed_about{display:block} .sosmed_about a{text-align:center;font-size:20px;display:inline-block;padding:0;margin:5px 2px} .sosmed_about a i{line-height:30px} .sosmed_about a i.fa-facebook{color:#fff;background-color:#174298;height:30px;width:35px} .sosmed_about a i.fa-google-plus{color:#fff;background-color:#a70000;height:30px;width:35px} .sosmed_about a i.fa-instagram{color:#fff;background-color:#4a340c;height:30px;width:35px} .sosmed_about a i.fa-twitter{color:#fff;background-color:#7790c1;height:30px;width:35px} @media screen and (max-width:768px){#about_me{max-width:100%;text-align:left}.about_img{float:right}.about_full{width:calc(100% - 155px);float:right}.a_name{text-align:left}.aboutme_note{text-align:left;float:left}} @media screen and (max-width:480px){#about_me{text-align:center}.about_img{float:none}.about_full{width:100%}.a_name{text-align:center}.aboutme_note{text-align:left;float:left}} </style> <div id='about_me' class='about_me'> <span class='about_img'> <a href='#'> <img class='img_in' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipgqlkepNy9ebAmpBhLD4eC6z_YlXWKqlzk-hV5a8z-xHPL_9YhVu0fvFvreN7pETBDlgGum1pLCfwazWECFrBRBtm_m954XpcOLuSDENd5V-xn7XMvIBiRgGgvP0qxNwPUUJ2MLGBHbnc/s1600/noimage-zonainternetku.png"/> </a> </span> <span class='about_full'> <span class='a_name'>Mch. Hakim </span> <span class='aboutme_note'>Zona Internetku | Seorang blogger Ganteng dan memanfaatkan waktu luangnya untuk belajar blogging, koding, mendesain dan mendalami dunia IT </span> <span class='sosmed_about'> <a href='https://web.facebook.com/zonainternetku/'><i class='fa fa-facebook'></i></a> <a href='https://plus.google.com/u/0/+MchHakim'><i class='fa fa-google-plus'></i></a> <a href='https://www.instagram.com/mch.hakim/'><i class='fa fa-instagram'></i></a> <a href='#'><i class='fa fa-twitter'></i></a> </span> </span> </div>
5. Jika kode di atas sudah di masukkan ke dalam widget "HTML/JavaScript" silahkan kalian klik "Simpan"

Sekian ulasan singkat mengenai Cara Membuat Widget Author Box Keren Di Blog yang dapat saya posting disini, semoga hal ini bisa membantu.

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya

5 Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis | Tutorial Lengkap

Gambar
Lima Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis. Untuk memulai sebuah bisnis atau berwirausaha yang sukses maka kita memerlukan pengetahuan dan pengalaman yang cukup untuk mengelola usaha tersebut, selain itu juga jika bisnis tersebut sudah berkembang besar maka diperlukan mentor yang profesional sehingga kita akan terbantu saat menangani masalah pada bisnis kita dan juga orang yang dapat dipercaya. Zona Internetku September 02, 2019 Berbicara soal usaha, aku akan membahasnya dari yang mendasar yaitu pengetahuan atau ilmu buat menemukan ide, memulai Untuk mempejalari semua itu kita bisa memperolehnya dengan belajar mengikuti sebuah kursus, pelatihan maupun seminar. Namun kita juga bisa mendapatkan semua ilmu tersebut melalui situs-situs di internet yang telah dibagikan secara gratis, untuk mengetahuinya silahkan simak daftarnya disini. Website Terbaik Untuk Belajar Dalam Memulai Bisnis 1. Trend...
Baca selengkapnya