Author Box dan Sosial Media Blog

Cara Membuat Author Box dan Sosial Media Blogger, Sosmed, Author Box dan Sosial Media Blogger, Author Box with icon Social Media Blogger, Author Box dan Sosial Media (Icon SVG) Blog Valid AMP - Membuat Author box merupakan salah satu fitur yang bertugas untuk mempercantik tampilan, khususnya website yang diinginkan tersebut. Dengan adanya widget author box ini akan mempermudah para pengunjung untuk mengetahui lebih lanjut latar belakang nya sebuah author/admin dalam sebuah website tersebut.

Seperti layak pada umumnya author box widget biasa nya di dalam widget tersebut tersirat isi isi mengenai kepribadian para user author dalam sebuah website bagaimana tercipta nya sebuah website tersebut atau kata kata yang ingin di ungkapkan dalam jenis author yang didinginkan tersebut.

Namun di kali ini, sesuai judul alhamdulillah AA Sciences akan memberikan sebuah widget author box nya dengan salah satu fitur tambahan yaitu dengan adanya ikon akun sosial media tertentu yang bertujuan hal ini jika dipasang pasti akan menambah keakraban mengenai kepribadian para user/auhor/admin suatu website tersebut, yakni dengan hanya ikuti pada icon sosial media yang terdapat akun untuk website tertentu, terutama untuk para Admin nya (hehe).

Widget Author box pun sering kita jumpai pada letak letak Sebuah website tertentu, baik itu pada bagian tata letak atau juga pada mode Template yang biasa nya jika diterapkan pada tata letak ini author biasa pada bagian sidebar dan footer saja, melainkan jika pada mode Template widget author box ini sering sekali kita tampak melihat nya pada bagian mode tepat sesudah sebuah artikel tertentu (bawah kolom postingan).

Kelebihan Terpasang nya Author box + Sosial Media pada Website/Blogger

Antusias penglihatan pengunjung bertambah terutama pengunjung yang menyukai widget widget

Mempercantik Tampilan Website Dengan adanya Author box + Sosial Media

Mempermudah Pengunjung Mengetahui Informasi detail mengenai Website, terutama Untuk Author

Valid Struktur HTML Website AMP

Tertuju pada URL Author tertentu (Facebook, Twiter, Gmail, Youtube, Instagram, Linkedin, Dll)

Namun, setiap kelebihan pasti nya terdapat kekurangan walaupun sedikit, terutama dalam pemasangan widget author box + sosial media ini. berikut kekurangan nya.

Kekurangan Terpasang nya Author Box + Sosial Media

Website/Blogger tertentu dalam kecepatan Loading sedikit akan berpengaruh akan terhambat dengan adanya bantuan CSS + HTML nya

Meribet kan pengunjung terutama pengunjung tersebut yang suka dengan tampilan simpel (sederhana)

Bagaimana kalian sudah tertarik bukan mengenai pembuatan nya, dengan sudah mengetahui kelebihan serta kekurangan jika terpasang nya widget author box + sosial media nya.

Jika sudah, maka langsung saja menuju metode pembuatan dari Cara Membuat Author Box + Sosial Media Valid AMP nya, berikut tutor nya :

Cara Membuat Author Box dan Sosial Media Blogger Valid AMP

Pembuatan CSS nya terlebih dahulu :

Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style> atau tag tertentu yang ingin kalian terapkan.

Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Author Box + Sosial Media Valid AMP nya di bawah ini tepat sebelum tag ]]></b:skin> atau </style> atau tag AMP tertentu , berikut CSS nya :

/* Info Author */
.about-author{margin-bottom:10px;height:110px}.about-author p{margin:0 0 2px}.about-author amp-img{float:left;border-radius:2px}.about-description{padding-right:10px;margin:10px 0 0 140px}.about-description h5{margin-bottom:3px;color:#767676;text-transform:capitalize}.author-profile{background:#FFF6BF;margin:10px 0;overflow:hidden;color:#888}
p.soc-icon {height:25px;padding:6px 0 0 0}
.soc-icon svg{width:25px; height:25px;}
.soc-icon span svg:hover path{fill:#37474F}
.soc-icon span svg path{fill:#767676;transition: all .5s ease-in-out;}

Kalian dapat menyesuaikan kan warna yang kalian inginkan dengan kode warna HTML tertentu kalian.

Selanjutnya, Pembuatan HTML nya agar author box + sosial media nya tampil.

Masih dalam mode Template - > CTRL+F lalu cari tag <data:post.body> - > salin langsung saja script HTML pemanggil nya di bawah ini tepat sesudah tag <data:post.body> (bagian sesudah posting), berikut Script nya :

<section class='about-author'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<amp-img alt='author photo' height='120' layout='fixed' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD-sM_oN3h9grm8fSbK_OwTtq7ioVZRlSrSGs96ofb7aRbge5pDbRFAsTfi7sDL-3xPKAMFRC4JCcgeC4yHVpbkUms0shJrD_-izIN8UYulZxiAODxw4zXW2ORRfBNm94G2zvHQ3lE0VR/s1600/AA+Sciences+Logo+Favicon.png ' title='Author Photo' width='120'/>
<div class='about-description'>
<a class='g-profile' href=' https://plus.google.com/105049049334876067289 ' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>
<h5>
AA Sciences - Sharing Sciences Experience
</h5>
</span>
</a>
<span itemprop='description'>
  <b> Tempatnya Berbagi Ilmu Pengalaman Seputar :</b> Adsense, Blogger, SEO,  News, Pelajar, Aplikasi, Sosial Media, Android, Sholawat, Download, Tips, Trending, Politik, Kesehatan, Objek Wisata dan Lainnya
</span>
<p class='soc-icon'>
<span>
<a href=' https://www.facebook.com/aldiandreansyahfanspageofficial ' itemprop='sameAs' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'>
<path d='M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
</a>
</span>
<span>
<a href=' https://twitter.com/aldiandreansyh ' itemprop='sameAs' target='_blank' title='Twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
</a>
</span>
<span>
<a href=' https://plus.google.com/+aldiandreansyah ' itemprop='sameAs' target='_blank' title='Google Plus'>
<svg viewBox='0 0 24 24'>
<path d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'/>
</svg>
</a>
</span>
<span>
<a href=' https://www.youtube.com/aldiandreansyah ' itemprop='sameAs' rel='nofollow' target='_blank' title='Youtube'>
<svg viewBox='0 0 24 24'>
<path d='m3.375 1.6406c-1.1046 0-2 0.8955-2 2v16c0 1.104 0.8954 2 2 2h16c1.105 0 2-0.896 2-2v-16c0-1.1104-0.9-2.0004-2-2.0004h-16zm3.6191 4.2774l4.7519 2.8125 4.752 2.8125-4.766 2.941-4.7632 2.94 0.0117-5.754 0.0136-5.752z' fill='#000000'/>
</svg>
</a>
</span>
<span>
<a href=' https://www.instagram.com/aldiandreansyah_official' rel='nofollow' target='_blank' title='Instagram'>
<svg viewbox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 175 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='#000000'/>
</svg>
</a>
</span>
<span>
<a href=' mailto:@aldiandreansyah8@gmail.com ' rel='nofollow' target='_blank' title='Contact'>
<svg viewBox='0 0 24 24'>
<path d='M20,18H18V9.25L12,13L6,9.25V18H4V6H5.2L12,10.25L18.8,6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='#000000'/>
</svg>
</a>
</span>
</p>
</div>
</div>
</section>

Ubah URL akun sosial media tertentu seperti Facebook, Google+, Twitter, Instagram, Youtube, Gmail, Linkedin dan lainnya dengan alamat URL kalian, ubah Image, Title, Deskripsi sesuai tampilan website kalian.

Langkah terakhir, langsung saja kalian simpan Template dan lihat hasilnya.

Share this post