Beberapa hari kemudian aku sudah menulis artikel perihal cara memasang google badge di blog, google badge atau lencana google ini di pasang di blog biar pengunjung lebih gampang mengenal Anda.
Baca juga: Cara Memasang Badge Profil Google Plus di Blogger
Pada kesempatan kali ini aku akan menciptakan widget author box menyerupai mirip google badge yang pernah aku jelaskan sebelumnya.
Author box atau kotak penulis biasanya dipakai untuk memperkenalkan secara singkat mengenai profil penulis artikel tersebut.
Biasanya widget author box ini terletak di bab bawah artikel, namun widget author box yang akan aku buat ini untuk di bab sidebar blog dengan ukuran lebar 300 pixel, jadi kalau blog Anda mempunyai sidebar kurang dari 300px mungkin tampilannya akan sedikit berbeda.
Widget author ini di lengkapi dengan banyak sekali tombol sosial media menyerupai facebook, twitter, instagram, google+, linkedin, dan youtube.
Selain itu dilengkapi juga dengan tombol follow blog dan tombol berlangganan rss feed blog.
Kalian juga masih dapat mengkreasikannya atau mendesain ulang tampilan author box ini sesuai dengan harapan sendiri dan dapat diadaptasi dengan warna blog.
Gambar backgroundnya juga dapat Anda ganti dengan gambar milik sendiri atau yang sudah aku siapkan, ukuran lebarnya 300px dan tingginya 170px.
Berhubungan widget author box ini memakai desain font awesome khususnya dibagian tombol profil sosial media, jadi pastikan template blog Anda sudah terpasang arahan font-awesome jikalau belum akan aku tulis juga cara menambahkan font awesome ke dalam template blog.
Nah, jikalau kalian tertarik menciptakan widget author box ala google+ ini di sidebar blog silahkan ikuti langkah-langkahnya di bawah ini.
1. Pastikan blog Anda sudah terpasang Font Awesome, jikalau belum tambahkan arahan ini sebelum arahan
2. Masuk ke bab Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Judul biarkan kosong dan pada bab konten isi dengan arahan di bawah ini:
4. Lalu klik Simpan
Berikut ini beberapa gambar background yang dapat Anda pilih, atau jikalau ingin membuatnya sendiri gunakan ukuran 300px untuk lebarnya dan 170px untuk tingginya.
Itulah artikel mengenai cara menciptakan widget author box menyerupai google badge, jikalau Anda tertarik silahkan coba pasang pada bab sidebar blog Anda. Semoga bermanfaat. Sumber https://www.caramanual.com/
Baca juga: Cara Memasang Badge Profil Google Plus di Blogger
Pada kesempatan kali ini aku akan menciptakan widget author box menyerupai mirip google badge yang pernah aku jelaskan sebelumnya.
Author box atau kotak penulis biasanya dipakai untuk memperkenalkan secara singkat mengenai profil penulis artikel tersebut.
Biasanya widget author box ini terletak di bab bawah artikel, namun widget author box yang akan aku buat ini untuk di bab sidebar blog dengan ukuran lebar 300 pixel, jadi kalau blog Anda mempunyai sidebar kurang dari 300px mungkin tampilannya akan sedikit berbeda.
Widget author ini di lengkapi dengan banyak sekali tombol sosial media menyerupai facebook, twitter, instagram, google+, linkedin, dan youtube.
Selain itu dilengkapi juga dengan tombol follow blog dan tombol berlangganan rss feed blog.
Kalian juga masih dapat mengkreasikannya atau mendesain ulang tampilan author box ini sesuai dengan harapan sendiri dan dapat diadaptasi dengan warna blog.
Gambar backgroundnya juga dapat Anda ganti dengan gambar milik sendiri atau yang sudah aku siapkan, ukuran lebarnya 300px dan tingginya 170px.
Berhubungan widget author box ini memakai desain font awesome khususnya dibagian tombol profil sosial media, jadi pastikan template blog Anda sudah terpasang arahan font-awesome jikalau belum akan aku tulis juga cara menambahkan font awesome ke dalam template blog.
Nah, jikalau kalian tertarik menciptakan widget author box ala google+ ini di sidebar blog silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Author Box Untuk Sidebar Blog Ala Google+ Badge
1. Pastikan blog Anda sudah terpasang Font Awesome, jikalau belum tambahkan arahan ini sebelum arahan
</body><link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>2. Masuk ke bab Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Judul biarkan kosong dan pada bab konten isi dengan arahan di bawah ini:
<!-- HTML --> <div class="authorbox"> <div class="author-title"> Author </div> <img alt="Beberapa hari kemudian aku sudah menulis artikel perihal cara memasang google badge di blog Cara Membuat Widget Author Box Mirip Google Badge" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://lh3.googleusercontent.com/qOaUXrOEROvJVYw9aR52a8lmvzpcyJ_TmrU4PYMo4DHSMc8vMvhFxHqffd9PSroe0JuUxfT0FBVeHg=s1920-rw-no" width="120" height="120" /> <a class="authorname" href="https://plus.google.com/+FicriPebriyana" rel="author" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge">Ficri Pebriyana</a> <a class="authorname-url" href="https://www.caramanual.com" rel="author" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge">www.caramanual.com</a> <div class="sosmed-author"> <ul> <li><a href="https://www.facebook.com/FicriPebriyana" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://twitter.com/FicriPebriyana" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://www.instagram.com/FicriPebriyana/" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://plus.google.com/+FicriPebriyana" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://www.linkedin.com/in/FicriPebriyana" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li> <li><a href="https://www.youtube.com/c/FicriPebriyana" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li> </ul> <div class="clear"></div> <a class="button-author" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=5162261549313839120" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge"><i aria-hidden="true" class="fa fa-user-circle"></i> Follow This Blog</i></a> <a class="button-author" href="https://feedburner.google.com/fb/a/mailverify?uri=CaraManual" rel="nofollow" target="_blank" title="Cara Membuat Widget Author Box Mirip Google Badge"><i aria-hidden="true" class="fa fa-rss"></i> Subscribe This Blog</a> </div> </div> <!-- CSS --> <style type="text/css"> .sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center} .authorbox{width:300px;background:url(https://lh3.googleusercontent.com/-9XJ2BYeQg1nsfukH-yQ0aknAKH0L_He6OijQ17K-jNAdT8HkqfVPfvIs2ZpEpB5u7nS44Rj6ze-BsLy_pN5uMTg0-lwRoK9MbQSVw) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;} .author-title{font-weight:bold;text-decoration:none;text-align:center;text-transform:uppercase;margin:0 auto 10px;font-size:22px;color:#fff!important} .authorbox img{margin:55px auto 0;border-radius:100%;display:block} a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;} a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;} .sosmed-author li,.sosmed-author ul{list-style:none} .sosmed-author ul{margin:0!important;padding:0!important} .sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede} .sosmed-author li{display:inline-block;margin-right:10px} .sosmed-author li:last-child{margin-right:0} .sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out} .sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important} a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none} a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7} </style> <!-- JAVASCRIPT --> <script type="text/javascript"> //<![CDATA[ var imgDefer = document.getElementsByTagName("img"); for (var i = 0; i < imgDefer.length; i++) { if (imgDefer[i].getAttribute("data-src")) { imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src")); } } //]]> </script>4. Lalu klik Simpan
Catatan:
Bagian HTML
1. Silahkan ganti arahan yang sudah aku tandai dengan abjad tebal atau bold menjadi URL dan nama Anda.
2. Untuk URL foto profil silahkan copy dari foto profil google+ atau dapat memakai foto lain asalkan berbentu persegi biar gambar tidak penyok atau gepeng.
3. Untuk tombol follow blog pada bab arahan ini 5162261549313839120 silahkan ganti dengan ID blog Anda yang dapat di lihat pada bab URL dikala Anda membuka dashboard Blogger.com
Bagian CSS
Disini ada satu arahan yang aku beri tanda bold, itu yaitu link background. Anda dapat mengganti background pada widget author box ini dengan mengganti URL gambar tersebut.
Bagian HTML
1. Silahkan ganti arahan yang sudah aku tandai dengan abjad tebal atau bold menjadi URL dan nama Anda.
2. Untuk URL foto profil silahkan copy dari foto profil google+ atau dapat memakai foto lain asalkan berbentu persegi biar gambar tidak penyok atau gepeng.
3. Untuk tombol follow blog pada bab arahan ini 5162261549313839120 silahkan ganti dengan ID blog Anda yang dapat di lihat pada bab URL dikala Anda membuka dashboard Blogger.com
Bagian CSS
Disini ada satu arahan yang aku beri tanda bold, itu yaitu link background. Anda dapat mengganti background pada widget author box ini dengan mengganti URL gambar tersebut.
Berikut ini beberapa gambar background yang dapat Anda pilih, atau jikalau ingin membuatnya sendiri gunakan ukuran 300px untuk lebarnya dan 170px untuk tingginya.
https://lh3.googleusercontent.com/AJrmo8MJ4HuJXVdYr5-y2LBHr1nY_Ii5W1Ice1Q6f8oonOjpIrFqJhm6e_PBOkQPGfUUKe5wjtURRHgROceAPEZmVin4idiDyFq1xwhttps://lh3.googleusercontent.com/fYXruoxNpHRzZoKA9Gfgvvl67tBe29kQVoYrtnyeHynQsS4bE7yVl0LsdAizHWsSHvvtQahLI-XxdPQ75Pc-YMdyvqe2X4HTzh3NEAhttps://lh3.googleusercontent.com/bDRZB7WwHtqYYI-SCoURK5hE70dv3RYiU1FkXR72toeSBIaKcxob3yY01P6ugtggukOaHtLCixdrys4xuDF-iIGfVoMmOwMfTSKhOghttps://lh3.googleusercontent.com/FFGUx7U7-0TD31AsgpPAvuVudfdm_RkzwNlVQTWCN498ygMr0d4RTmyE-OqXL4lJDy5dF45QtaU6E-oFKS85dGcNs8Dom2MrS-er2Ahttps://lh3.googleusercontent.com/-9XJ2BYeQg1nsfukH-yQ0aknAKH0L_He6OijQ17K-jNAdT8HkqfVPfvIs2ZpEpB5u7nS44Rj6ze-BsLy_pN5uMTg0-lwRoK9MbQSVwhttps://lh3.googleusercontent.com/aCnDXrSEkz0AKic5uzjW1phgp62WOJb2nk2UChuxufIHZKG63DeHOTI179jvfMw-hUaOUJ-jKC6LDVhzkkqL276Xjvkl0BMtHjV0BQItulah artikel mengenai cara menciptakan widget author box menyerupai google badge, jikalau Anda tertarik silahkan coba pasang pada bab sidebar blog Anda. Semoga bermanfaat. Sumber https://www.caramanual.com/