Widget Box Author Transparan

Widget Box Author Transparan Kali ini  mahesa.id akan memberikan Tutorial membuat Box Autor. Menurut saya ini gak terlalu penting sih, tapi kalau temen temen ingin memasangnya ya silahkan. Widget ini juga tidak mengurangi SEO di blog temen temen. Di blog inipun juga dipasang widget ini lho..

Biasanya kotak autor ini di buat berbagai alasan, ingin lebih di kenal, ingin mempromosikan akun media sosialnya dan juga biar pembaca lebih tau siapa penulis di blog tersebut.
Kelebihan Box Author ini adalah


  • Terlihat profesional
  • Tidak mengurangi performa loading blog
  • Responsive
  • Caranya cukup mudah, temen temen tinggal ikuti langkah langkah berikut.
    Cara Membuat Box Author Transparan
    Masuk ke Dasboar Blogger
    Pilih Templat > Edit HTML
    Cari kode </style> dan letakkan CSS di bawah ini di atasnya.

    /* Author Box ala mahesa.id */
    #mahesaAuthor{text-align:center;background-color:#fff;color:#2E2E2E;line-height:20px;padding:15px 10px} #mahesaAuthor svg {width:14px;height:14px;margin-left:-3px;vertical-align:-3px} #mahesaAuthor svg path {fill:#bdc3c7} #mahesaAuthor img{border-radius:100px;max-width:100px;margin-bottom:10px} #sidebar-wrapper #mahesaAuthor h2, #sidebar-wrapper #mahesaAuthor h3{background:transparent;padding:0px} #sidebar-wrapper #ignielAuthor h2{font-size:20px;display:inline-block} #sidebar-wrapper #mahesaAuthor h2:after{border:0px} #sidebar-wrapper #mahesaAuthor h3{font-size:15px;font-weight:normal} #sidebar-wrapper #mahesaAuthor h3:after{display:none} #mahesaAuthor hr{border:none;height:1px;background-color:#2E2E2E;width:70%;margin:10px auto} #mahesaAuthor2{width:100%;margin-bottom:20px} #mahesaAuthor2 svg {width:20px;height:20px;vertical-align:-4px} #mahesaAuthor2 svg path {fill:#fff} #mahesaAuthor2 li{list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block} #mahesaAuthor2 li:hover{background-color:#37b185}#mahesaAuthor2 li:nth-child(2){margin-left:-3.5px;border-left:3px solid #2f303f;float:right} #mahesaAuthor2 li a{color:#fff;padding:10px 30px;line-height:40px} .ignielAuthor{text-align: left;font-size: 12px;display:flex;justify-content:center} .mahesaAuthor .tablekiri {width:50px} .mahesaAuthor .tablekanan{width: 85px;padding-left: 20px}
    #mahesaAuthor .medsos svg {width:20px;height:20px;margin-top:7px} #mahesaAuthor .medsos svg path {fill:#fff} .medsos .facebook{background:#3a579a} .medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius: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}
    #mahesaAuthor .mahesaBounce svg{width:20px;height:20px;vertical-align:-4px;margin-left:10px} #mahesaAuthor .mahesaBounce svg path{fill:#fff;} .mahesaBounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .mahesaBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
    @media screen and (max-width:320px){#mahesaAuthor svg{width:12px; height:12px}}
    @keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
    30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
    40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
    50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
    65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
    75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
    }
    @-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
    30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
    40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
    50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
    65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
    75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
    }
    Simpan Template.

    Kemudian Masuk ke layout
    Pilih Add Gadget > pilih HTML Javasript
    Kosongkan bagian Title dan masukkan kode berikut

    <div id="mahesaAuthor"><img src="https://3.bp.blogspot.com/-In22457Fl4E/WZfSpMRObWI/AAAAAAAAClY/Dl4-gKBpBCMTVMwB47awcVHLt4kCV8dDgCLcBGAs/s1600/Copy%2Bof%2BCopy%2Bof%2BDSC_0262%2B-%2BCopy.jpg" alt="mahesa.id Author" title="mahesa.id Author"/><br/><h2>Mahesa</h2> <h3>Salatiga, Indonesia</h3><i>"Naughty and fond of writing"</i><hr/><b></b><table class="mahesaAuthor"><tr>
     <br/><div class="medsos">
    <a class="facebook" title="Facebook" href="https://www.facebook.com/mahesa016" 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="Twitter" href="https://www.twitter.com/mahesa016" 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="Google+" href="https://plus.google.com/107089679726274963665" 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="Youtube" href="https://www.youtube.com/channel/UCCyFNLa0Y3KddEcv8mQK4Ow" 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="rssfeed" title="RSS Feed" href="https://feeds.feedburner.com/mahesa" 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></tr></table></div>

    Ganti kode warna merah sesuai yang temen temen miliki.
    Kalau sudah di ganti simpan dan lihat hasilnya..

    Sekian Tutorial Cara Membuat Widget Box Author Transparan dari mahesa.id semoga bermanfaat.

    Share this with short URL:

    Artikel Menarik Lainya:

    Use parse tool to easy get the text style on disqus comments:
    Show Parser Hide Parser