Thêm thông tin tác giả dưới bài viết blogspot - thủ thuật [part 3]

Đây là Version 3 về khung Author mà Lãng Tử Studio giới thiệu tới bạn đọc. Với V3 này có khá nhiều ưu điểm riêng về thiết kế và những thêm những chi tiết về mạng xã hội + tích hợp sẵn hộp khung đăng ký nhận bài viết mới của Blog qua
Email...Rất thích hợp cho Blog cá nhân của bạn.
Bài viết liên quan:

• Thêm thông tin tác giả dưới bài viết Blogspot [V1]
• Tạo và tùy biến khung Author dưới bài viết [V2]

DEMO TẠI ĐÂY

Hướng dẫn thủ thuật thêm author Bio Box Widget cho Blogspot - Khung tác giả [V3]

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm tới ]]></b:skin> và dán code CSS dưới đây ngay trên nó
.mdauthor_info{
float:left;
width:550px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;
color:#000;
}
.mdauthor_info: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);
}
.mdauthor_info h3{
color:#000;
margin-bottom:10px;
}
.mdauthor_info 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);
}
.mdauthor_photo{
float:right;
margin:0 0 0 10px;
}
.mdauthor_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;
}
.mdauthor_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(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
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/AVvXsEin4VS3AnwxTHHEOhBwItSibPnnVOpy6uNl5_8NhU1dC1GI9591CwFBz00hNDCz7k5SxYd29f2YfJl5JYL5pr7Sqircv3mNSxfL8TK17yRt6zYXXK-KbGRc9tJRg2pn2Eil-rngp5gRtKtM/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;
}
Bước 3: Tìm tới <data:post.body/> và dán code dưới đây ngay sau nó (Bạn sẽ tìm được khoảng 2 - 3 <data:post.body/> nên bạn chọn phần <data:post.body/> chỗ POST.)
<div class="mdauthor_info">
<div class="mdauthor_photo">
<img alt="author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnBd8NPscS1x9BfT7C3RHH8buIMRKNGt4b69Rv-d6rWsGhcl4Fvi8N3ZDKOYjB6Sqt8yC03U1aZt3o2-Xh2Xu1L7PoXvLXZr1oKp2Bsu0PRBvI3K1vnDlwEI0dX9z_jDvBTPE_tnz3mB5/s1600/vu-van-phong.jpg" height="150" width="150" />
</div>
<h2>
Được viết bởi <a href="http://www.itviet360.com/" target="_blank">ITViet360</a></h2>
Chào các bạn, mình là Phong đến từ Nam Định. Mình khá thích viết Blog chia sẻ và hy vọng trong Blog này bạn sẽ tìm được nội dung hữu ích. Hãy ghé đọc Blog mình thường xuyên nhé!<br />
<div class="mdlinediv">
</div>
<div class="mdemail">
<small style="text-align: center;">Đăng ký nhận bài viết mới qua Email</small>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" class="mdemailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=itviet360, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="itviet360" />
<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/itviet360">Rss</a>
</li>
<li class="twicon">
<a href="http://twitter.com/phongvu18nd">Twitter</a>
</li>
<li class="fbicon">
<a href="http://facebook.com/pit62">FaceBook</a>
</li>
<li class="gicon">
<a href="https://plus.google.com/+PhongVũSEO">Google +</a>
</li>
</ul>
</div>
Trong đó những tùy chỉnh nội dung màu xanh được chỉnh sửa theo ý bạn
- itviet360 được thay thế bằng FeedBunner ID Blog của bạn.
- Những ID màu xanh nhẹ được thay thế bằng ID các mạng xã hội tương ứng của bạn.
Bước 4: Lưu mẫu lại và xem kết quả.
Chúc các bạn vui vẻ !

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360