Membuat Author Post Simple & Keren di Blogger

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Author Post Simple & Keren di Blogger, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, HTML, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Author post biasanya di gunakan untuk menampilkan deskripsi ataupun biodata tentang si pembuat atau admin blog tersebut. Dengan menambahkan widget author ini visitor atau pengunjung dapat mengetahui dan lebih mengenal dari admin blog.

Cara Membuat Author Post Simple & Keren

Widget author post yang saya bagikan kali ini simple dan keren, maka dari itu Anda harus mencoba widget author post ini ke blog Anda. Widget ini juga di lengkapi dengan kolom biodata, jadi jika Anda ingin menyampaikan pesan atau curhat sekalipun terserah Anda.

Dan tidak ketinggalan pula icon sosial media yang di sediakan pada widget ini, dan akan memudahkan pengunjung mengetahui sosial dari Anda, jadi silakan disimak tutorial dibawah ini dengan benar agar dapat bekerja dengan baik.

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy dan Paste kode CSS dibawah ini di atas kode ]]></b:skin> atau </style>.

/* Post author info */

.post_info{background:#ece3d2;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}

.post_info:before{content:'';display:block;width:100%;height:88px;background:#5fa281;position:absolute;top:0;left:0;right:0;z-index:0}

.author-photo{display:inline-block;float:left;position:relative;z-index:1}

.about-author{z-index:1;position:relative;display:inline-block;float:right;width: calc(100% - 125px);}

.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #f3ebdc}

.author{font-size:20px;font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}

.author a,.author a:hover{color:#fff}

.author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777;}

ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0}

ul.sosmed-saya li{display:inline-block}

ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#545454;text-align:center;border-radius:2px}

ul.sosmed-saya li a:hover{opacity:1}

ul.sosmed-saya li a.efbi{background-color:#4a7fbb}

ul.sosmed-saya li a.tewe{background-color:#00aced}

ul.sosmed-saya li a.iige{background-color:#c4906e}

ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #dbd2c0;padding:0 15px;font-style:italic;font-size:14px;color:#999}

Langkah kedua :

Silakan Anda taruh kode HTML dibawah ini di atas kode </article> atau kode HTML share button Anda. Contoh penerapan punya saya adalah tepat dibawah kode share button.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

<span class='author-photo'>

<img alt='Mister Design' src='https://lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg' title='Mister Design'/>

</span>

<span class='about-author vcard'>

<span class='author'>

<span class='fn'><a class='g-profile' href='https://plus.google.com/105611265751427996934' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Mister Design</span></a></span>

</span>

<span class='author-desc'>

Hanya bermodalkan Notepad, Paint, dan alat - alat bawaan windows ku mulai membuat postingan satu - persatu.

</span>

<ul class='sosmed-saya'>

<li><a class='fb' href='https://www.facebook.com/mrsdzgn/' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>

<li><a class='tw' href='https://www.twitter.com/afriza_mohammad' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>

<li><a class='ig' href='#' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>

<li class='site'>http://mrdzgn.blogspot.com</li>

</ul>

</span>

</span>

  </b:if>

Silakan ganti tulisan merah dengan url sosial media dan gambar Anda.

Tambahan

Jika ingin lebih responsive tampilannya, silakan terapkan tutorial di bawah ini untuk merapihkan tampilan..

Silakan Anda cari @media screen and (max-width:480px){, lalu Anda Copy dan Paster kode dibawah ini kedalam kode tersebut

.author-photo{display:block;float:none}.about-author{display:block;float:none;width:100%;text-align:center}.author{text-align:center;display:block;margin:15px 0 25px!important}.author-desc{text-align:center}ul.sosmed-saya{display:block;text-align:center}ul.sosmed-saya li{display:inline-block;text-align:center}.author a,.author a:hover{color:#888}

Versi Yang di pakai blog ini

.post-drop{background:#fff;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden;border-bottom:2px solid #F4A85C}.post-drop::before{content:'';display:block;width:100%;height:88px;background:#F4A85C;position:absolute;top:0;left:0;right:0;z-index:0}.author{font-size:20px;font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}.author-photo{display:inline-block;float:left;position:relative;z-index:1}.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #F4A85C}.about-author{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 125px)}.author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777}ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0}ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#fff;text-align:center;border-radius:2px}ul.sosmed-saya li{display:inline-block}.author a,.author a:hover{color:#fff}ul.sosmed-saya li a.fb{background-color:#4a7fbb}ul.sosmed-saya li a.tw{background-color:#00aced}ul.sosmed-saya li a.ig{background-color:#c4906e}ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #bdc3c7;padding:0 15px;font-style:italic;font-size:14px;color:#999}

<div class='post-drop'>

<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

<span class='author-photo'>

<img alt='Mister Design' src='//lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg' title='Mister Design'/>

</span>

<span class='about-author vcard'>

<span class='author'>

<span class='fn'><a class='g-profile' href='https://plus.google.com/105611265751427996934' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Mister Design</span></a></span>

</span>

<span class='author-desc'>

Hanya bermodalkan Notepad, Paint, dan alat - alat bawaan windows ku mulai membuat postingan satu - persatu.

</span>

<ul class='sosmed-saya'>

<li><a class='fb' href='https://www.facebook.com/Mister-Design-710624465787019/' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>

<li><a class='tw' href='https://www.twitter.com/afriza_mohammad' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>

<li><a class='ig' href='#' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>

<li class='site'>http://mrdzgn.blogspot.com</li>

</ul>

</span>

  </span></div>