Terkadang kalau anda ingin dikenal banyak para pengunjung blog anda, sebaiknya memasang Author dibawah postingan. Tujuan dari pemasangan Author dibawah postingan ialah biar pengujung lebih mengenal anda, dan mengetahui nama anda, Tentang anda, dll. Author Box ini biasanya dipakai para Blogger pada halaman postingan dan menampilkan sedikit ringkasan atau klarifikasi perihal penulis artikel tersebut.
Mengapa Harus Memasang Author Box?
Terkadang, pembaca atau pengunjung ingin tahu siapa dibalik yang menulis artikel atau konten-konten yang berkualitas yang sedang mereka baca itu. Kemungkinan mereka mengetahui lebih lanjut perihal diri anda. Author box banyak dipakai pada website yang mempunyai banyak penulis. Hal ini sangat diharapkan alasannya sangat membantu pembaca untuk mengetahui siapa penulis yang sedang mereka baca. Pada kesempatan kali ini, aku akan membagikan Author box Plus Subscribe Newsletter dibawah postingan.
Screenshoot :
Mengapa Harus Memasang Author Box?
Terkadang, pembaca atau pengunjung ingin tahu siapa dibalik yang menulis artikel atau konten-konten yang berkualitas yang sedang mereka baca itu. Kemungkinan mereka mengetahui lebih lanjut perihal diri anda. Author box banyak dipakai pada website yang mempunyai banyak penulis. Hal ini sangat diharapkan alasannya sangat membantu pembaca untuk mengetahui siapa penulis yang sedang mereka baca. Pada kesempatan kali ini, aku akan membagikan Author box Plus Subscribe Newsletter dibawah postingan.
Screenshoot :
Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter
2. Dashboard - Kemudian Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan isyarat </syle> atau ]]></b:skin>
1. Temukan isyarat </syle> atau ]]></b:skin>
2. Copy&paste isyarat berikut ini, dan letakkan diatas kode </syle> atau ]]></b:skin>
.author-maycyberdownload{ float:left; width:96%; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:#eee; color:#000; } .author-maycyberdownload:hover{ background:#eee; border:1px solid #ccc; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .author-maycyberdownload h3{ color:#000; margin-bottom:10px; } .author-maycyberdownload h3:hover{ border : 1px solid #EEEEEE; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .author-photo{ float:right; margin:0 0 0 10px; } .author-photo img{ border:1px solid #666; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear;transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg); -moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg); -o-transform:rotate(+2deg);transform:rotate(+2deg);float:left; } .author-photo img:hover{ background:#FFFFFF; border : 1px solid #EEEEEE; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } ul.mdsocial{ list-style:none; margin:10px; overflow:hidden; } .mdsocial li{ float:right; background:none !important; padding:0 !important; margin:0 8px; } .mdsocial li a{ display:block; width:40px; height:40px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXHfuRrrNzgMvzoyHFHAArXzg1RhD_JQLkLEQp976dF8XUGDLz7rflMjb07cFxkGneTT99CiGtq_aEUkcPLx1qbpEKxGwhe9zdkSfza-j0Dd_KKxD7nm4q5zEithGdPB0hYWWN309zXYG/s1600/social.png") no-repeat transparent; text-indent:-99999em !important; } .mdsocial li a:hover{ padding:0 !important; } .mdsocial li.rssicon a{ background-position:0 0; } .mdsocial li.twicon a{ background-position:-50px 0; } .mdsocial li.fbicon a{ background-position:-100px 0; } .mdsocial li.gicon a{ background-position:-150px 0; } .mdsocial li.rssicon a:hover{ background-position:0 -50px; } .mdsocial li.twicon a:hover{ background-position:-50px -50px; } .mdsocial li.fbicon a:hover{ background-position:-100px -50px; } .mdsocial li.gicon a:hover{ background-position:-150px -50px; } .mdlinediv{ margin-top:25px; height:0px; clear:both; display:block; border-top:1px solid #fefefe; border-bottom:1px solid #CCCCCC; } .mdemailbutton{ background:#f7f8f9; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1)); background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ); border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:6px 12px; margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4); color:#888; text-shadow:0 1px 0 #fff; line-height:1.2; cursor:pointer; font-size:13px; } .mdemailbutton:hover{ background:#f1f1f1; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1)); background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important; } .mdemail{ clear:both; width:250px; margin:10px 0; float:left; } .mdemailform{ position:relative; width:250px; margin:0 auto; } .mdemailinput{ width:200px; height:18px; margin:0 auto; padding:8px 40px 8px 10px;border:1px solid #ddd; -webkit-border-radius:4px;-moz-border-radius:4px; border-radius:4px;font-family:georgia; font-style:italic; -webkit-box-shadow:1px 1px 2px #dfdfdf; -moz-box-shadow:1px 1px 2px #dfdfdf; box-shadow:1px 1px 2px #dfdfdf; font-size:14px;color:#666; } .mdemailbutton{ -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomright:4px; border-top-right-radius:4px; border-bottom-right-radius:4px; -webkit-border-top-left-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -moz-border-radius-bottomleft:0px; border-top-left-radius:0px;border-bottom-left-radius:0px; padding:9px; position:absolute; right:-2px; top:0; display:block; line-height:16px; } .mdemailbutton{ padding:8px !important; } .mdemailform, .mdemailinput{ width:98% !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:auto; }4. Copy&paste isyarat berikut ini, dan letakkan dibawah kode <data:post.body/>
Wajib Baca :
Anda dapat menaruh isyarat berikut ini, dibawah
<div class='author-maycyberdownload'> <div class='author_photo'> <!-- Author BIO Section --> <img alt='author' height='150' src='http://seconddance.ca/wp-content/plugins/penci-portfolio//images/no-thumbnail.jpg' width='150'/> </div><!-- Change Author Info --> <h2>Nama Anda?</h2><!--EDIT THIS--> <p>Silakan isikan Ringkasan Tentang Diri Anda</p><!--EDIT THIS--> <div class='mdlinediv'/> <div class='mdemail'> <small style='text-align:center;'>Get Free Email Updates to your Inbox!</small> <form action='http://feedburner.google.com/fb/a/mailverify' class='mdemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=your_name, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='awesomev3'/> <input name='loc' type='hidden' value='en_US'/> <input class='mdemailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/> <input class='mdemailbutton' title='' type='submit' value='SignUp'/> </form> </div> <ul class='mdsocial'> <li class='rssicon'> <a href='http://feeds.feedburner.com/mailverify?uri=your_name'>Rss</a> </li><li class='twicon'> <a href='http://twitter.com/your_name>Twitter</a> </li><li class='fbicon'> <a href='https://www.facebook.com/your_name'>FaceBook</a> </li><li class='gicon'> <a href='https://plus.google.com/your_name'>Google +</a> </li> </ul> </div> <div style='clear: both;'/> <!-- clear for photos floats -->5. Terakhir, Simpan Template.
Demikian Tutorial Blogger kali ini, Jangan lupa berlangganan Artikel Via Email blog ini yah. Silakan anda lihat postingan anda, lihat bab bawah maka muncul Author Box tersebut. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Search and Visited : Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter
