Cara Menciptakan Widget Author Box Keren Di Sidebar Yang Responsive Dan Simple

Author Box Responsive dan Simple

Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple Hai teman , kali ini akan Memberikan Tips & Trik Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple untuk para teman yang memang membutuhkan atau menginginkan tampilan Blog atau Websitenya tampil ciamik, atau dengan kata lain menginginkan Blog atau Websitenya berpenampilan yang mantraab.

Oia sobat, sebelumnya ataeh akan sampaikan pada sobat, bahwa untuk kali ini Author box yang akan ataeh uraikan kali ini adalah Author Box yang dipakai untuk Template Non AMP.

Makara bagi sobatsobat yang memang mempunyai Template atau memakai Template Valid AMP, teman tinggal baca ini "Cara Membuat Widget Author Box Keren Di Sidebar Blogger Valid AMP"

Lalu ibarat apa tampilan otot yang untuk non amp kali ini?

Untuk tampilan Author Box kali ini teman dapat lihat gambar dibawah ini

Bagaimana ciamik bukan Author Boxnya?

Nah untuk cara pemasangan widget Author Box seperti gambar diatas caranya sangat praktis atau gampang

Meskipun gampang, bukan berarti itu senilai gampangan sob. eh malah kayak slogan “murah tapi bukan murahan aja” hehehe

Untuk widget Author Box kali ini sudah komplit sob, artinya sudah dilengkapi oleh foto profil google plus, deskripsi singkat dan juga dilengkapi dengan icon sosial media ibarat google plus, facebook, twitter, youtube dan lain sebagainya, dan juga tak kalah menariknya ada rating bintangnya sob.

Ok sob kita eksklusif saja ke inti masalahnya yaitu Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple

Pertama, Silahkan teman masuk pada blog teman dan pada Dashboard sobat klik Tema dan pilih Edit HTML

Kedua, Silahkan teman cari instruksi <b:skin> kemudian Letakkan instruksi CSS di bawah ini sempurna di bawah <b:skin> atau letakkan di atas instruksi ></b:skin> Setelah di letakkan instruksi CSSnya, Lalu save.
Supaya lebih cepat mememukannya, dapat memakai cara Ctrl + F

#Author{textalign:center;backgroundcolor:#f8f8f8;color:#bdc3c7;lineheight:20px;padding:15px 10px} #Author svg {width:14px;height:14px;marginleft:3px;verticalalign:3px} #Author svg path {fill:#bdc3c7} #Author img{borderradius:100px;maxwidth:100px;marginbottom:10px} #sidebarwrapper #Author h2, #sidebarwrapper #Author h3{background:transparent;padding:0px} #sidebarwrapper #Author h2{fontsize:20px;display:inlineblock} #sidebarwrapper #Author h2:after{border:0px} #sidebarwrapper #Author h3{fontsize:15px;fontweight:normal} #sidebarwrapper #Author h3:after{display:none} #Author hr{border:none;height:1px;backgroundcolor:#bdc3c7;width:70%;margin:10px auto} #Author2{width:100%;marginbottom:20px} #Author2 svg {width:20px;height:20px;verticalalign:4px} #Author2 svg path {fill:#fff} #Author2 li{liststyle:none;backgroundcolor:#008c5f;color:#fff;width:50%;display:inlineblock} #Author li:hover{backgroundcolor:#37b185}#Author2 li:nthchild(2){marginleft:3.5px;borderleft:3px solid #f8f8f8;float:right} #Author2 li a{color:#fff;padding:10px 30px;lineheight:40px} .Author{textalign: left;fontsize: 12px;display:flex;justifycontent:center} .Author .tablekiri {width:50px} .Author .tablekanan{width: 85px;paddingleft: 20px} #Author .medsos svg {width:20px;height:20px;margintop:7px} #Author .medsos svg path {fill:#fff} .medsos .facebook{background:#3a579a} .medsos a{display:inlineblock;textalign:center;marginright:3px;color:#fff;borderradius:100%;width:35px;height:35px} .medsos a:hover{transform:rotate(360deg)} .medsos .twitter{background:#00abf0} .medsos .googleplus{background:#df4a32} .medsos .youtube{background:#cc181e} .medsos .instagram{background:#992ebc} .medsos .pinterest{background:#cd1c1f} .medsos .linkedin{background:#2554BF} .medsos .tumblr{background:#314358} .medsos .rssfeed{background:#ee802f} #Author .Bounce svg{width:20px;height:20px;verticalalign:4px;marginleft:10px} #Author .Bouncesvg path{fill:#fff;} .Bounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;fontweight:900;fontsize:16px!important;margin:0;padding:5px;textalign:center;borderradius:3px;margin:0;padding:5px;mozboxsizing:borderbox;webkitboxsizing:borderbox;boxsizing:borderbox} .Bounce {webkitanimation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal} @media screen and (maxwidth:320px){#Author svg{width:12px; height:12px}} @keyframes rubberBand{0%,100%{webkittransform:scale3d(1,1,1);transform:scale3d(1,1,1)} 30%{webkittransform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)} 40%{webkittransform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)} 50%{webkittransform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)} 65%{webkittransform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 75%{webkittransform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} } @webkitkeyframes rubberBand{0%,100%{webkittransform:scale3d(1,1,1);transform:scale3d(1,1,1)} 30%{webkittransform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)} 40%{webkittransform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)} 50%{webkittransform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)} 65%{webkittransform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 75%{webkittransform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} }

Ketiga, pasang Kode script berikut pada HTML/JavaScript, Yaitu Menuju ke Tata Letak, kemudian Tambah Gadget, kemudian cari HTML/Javascript
Tata Letak > Tambah Gadget > HTML/Javascript Taruh Kode Di Bawah Ini Lalu Simpan

<div id="Author"><img src="#" alt="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple"/><br/><h2></h2> <h3></h3><i>"Berbagi Tutorial Template Dan Tips/Trick!"</i><hr/><table class="Author"><tr><td class="tablekiri">CSS3</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td><td class="tablekanan">Javascript</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td></tr><tr><td>HTML5</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td><td style="paddingleft:20px">Photoshop</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td></tr><tr><td>PHP</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td><td style="paddingleft:20px">CorelDraw</td><td> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></path></svg> </td></tr></table><a class="Bounce" href="https://www.ataeh.blogspot.com/p/contact.html" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple">HUBUNGI SAYA <svg viewbox="0 0 24 24"><path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" /></path></svg> </a><br/><div class="medsos"> <a class="facebook" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="#" rel="nofollow" target="_blank"> <svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></path></svg> </a> <a class="twitter" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="#" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /> </path></svg></a> <a class="googleplus" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="#" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" /> </path></svg> </a> <a class="youtube" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="#" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /> </path></svg></a> <a class="instagram" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="https://www.instagram.com/" rel="nofollow" target="_blank"><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 17,12A5,5 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" /></path></svg> </a> <a class="rssfeed" title="Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple" href="#" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z" /> </path></svg></a> </div> </div>

Silahkan teman ganti dengan Milik teman goresan pena yang berwarna itu.

Dan kini silakan teman lihat hasi,l keren bukan?

Untuk keterangan sosial media, baik Facebook, google plus, twitter dan lainlain, teman dapat merubah Url yang ada dalam sosial media tersebut dengan Url sosial media umum milik sobat, atau jika memang teman bingung, teman dapat menjiplak sepeti langkahlangkah merubah Url Sosial media yang ada di sini. semuanya hampir sama.

Ok sobat, mungkin cukup hingga di sini dulu keterangan dari ataeh ihwal Cara Membuat Widget Author Box Keren Di Sidebar yang Responsive dan Simple, jika memang ada yang perlu dipertanyakan atau di diskusikan atau kurang faham, silahkan teman lampirkan melalui kolom komentar di bawah