» » Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter

Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter

0 Viewers
Terkadang jika anda ingin dikenal banyak para pengunjung blog anda, sebaiknya memasang Author dibawah postingan. Tujuan dari pemasangan Author dibawah postingan adalah agar pengujung lebih mengenal anda, dan mengetahui nama anda, Tentang anda, dll. Author Box ini biasanya digunakan para Blogger pada halaman postingan dan menampilkan sedikit ringkasan atau penjelasan tentang 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 tentang diri anda. Author box banyak digunakan pada website yang memiliki banyak penulis. Hal ini sangat dibutuhkan karena sangat membantu pembaca untuk mengetahui siapa penulis yang sedang mereka baca. Pada kesempatan kali ini, saya akan membagikan Author box Plus Subscribe Newsletter dibawah postingan.

Screenshoot :


Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter

Cara Pertama : 

1. Buka Blogger - Kemudian login.
2. Dashboard - Kemudian Template.
3. Edit HTML.

Proses Pembuatan : 

1. Temukan kode </syle> atau ]]></b:skin>
2. Copy&paste kode 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/AVvXsEhjAbg1qiDNU9yZs9xqTM1xBRLoH1CX0Se-1OMygHhackk0fmN6Hcw123HDL9NosslJloDJpIdKIUWhrnPPodHopD8yWjAnvoQnGJ6tifaCdry878LmKkf7Q-YJoqZYtRCw4rtwGrk-nmxy/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;
}
3. Jika sudah? Temukan kode <data:post.body/>
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Wajib Baca :

Anda bisa menaruh kode berikut ini, dibawah
Tombol Share Buttons (Jika sudah dipasang), dan juga Anda bisa meletakan kode berikut ini diatas Related Post (Jika anda memasangnya)
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=your_name, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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 -->
Note : Silakan isi semua tulisan yang berwarna merah sesuai kepunyaan anda.

5. Terakhir, Simpan Template.

Demikian Tutorial Blogger kali ini, Jangan lupa berlangganan Artikel Via Email blog ini yah. Silakan anda lihat postingan anda, lihat bagian 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

Related Post

1 Response to "Cara Membuat Author Box dibawah Postingan Plus Subscribe Newsletter"

  1. mohit18 June 2021 at 17:28

    You have people like me who appreciate your post. Definitely a great post I would like to read this.

    ReplyDelete

Subscribe to: Post Comments (Atom)