Author box đẹp cho blogger chèn thêm các link mạng xã hội

By Unknown

Chủ Nhật, 3 tháng 8, 2014

Author box đẹp cho blogger kèm theo chức năng nhận bài qua mail và các icon link mạng xã hội với style CSS đẹp mắt cho blogger .
Hiện nay chủ đề author box được các blogger viết rất nhiều nhưng mỗi người điều có cách viết khác nhau như chèn author box  thủ công và tự động.

DEMO

Hôm nay mình hướng dẫn cho các bạn cách chèn author box thủ công, cách này chỉ dành cho blog chỉ có một tác giả ngoài author box ra còn có thêm các tiện ích nhận bài qua mail và các icon link mạng xã hội rất bắt mắt.

Author box đẹp cho blogger chèn thêm các link mạng xã hội

Củng như thường lệ đầu tiên các bạn đăng nhập vào tài khoản blogger của mình sau đó chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> chèn đoạn style CSS vào trước thẻ</head>
Style CSS đẹp

<style>
.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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9yarPAdlpVQSDYwAnmou1Jy_xQRzErGBugBfP1jEntv2d2Q7EP7QEA7OwjaDEOUWlSaytBjlL0husUpErCS0lXa73iuz4Eq2MOVcGB6Mt7nPq6a2R7Lx66Aui45ji_npKaus3zuj1stxH/s1600/social.png&quot;) 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=&#39;#f7f8f9&#39;, endColorstr=&#39;#e9e9e9&#39;,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=&#39;#f1f1f1&#39;, endColorstr=&#39;#e0e0e0&#39;,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;
}
</style>

Bước tiếp theo các bạn nhấn Ctrl+F <div class='post-footer-line post-footer-line-1'> thứ 2 nó nằm trong thẻ này <b:includable id='post' var='post'>...</b:includable> tùy theo mỗi template

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='mdauthor_info'><div class='mdauthor_photo'><img alt='author' height='150' src='https://lh6.googleusercontent.com/-rQG_WSpnAeQ/AAAAAAAAAAI/AAAAAAAAABo/KvlsqBVQTn0/s120-c/photo.jpg' width='150'/></div><h2>Đôi nét về tác giả:</h2><p>Tuan Phan Blog là website chia sẻ tin tức giải trí, mẹo vặt cuộc sống và những kiến thức có ích trong thế giới NET</p><div class='mdlinediv'/><div class='mdemail'><small style='text-align:center;'>Nhận bài miễn phí qua Email !</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=tuanphanblog, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='tuanphanblog'/> <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/tuanphanblog'>Rss</a></li><li class='twicon'><a href='http://twitter.com/tuanphanblog'>Twitter</a></li><li class='fbicon'><a href='http://facebook.com/tuanphanblog'>FaceBook</a></li><li class='gicon'><a href='https://plus.google.com/112764217088305999933'>Google +</a></li></ul></div></b:if>

Nếu các bạn template của bạn có thẻ <div class='post-footer-line post-footer-line-1'> thì chèn đoạn code dưới nó nếu không có thì các bạn tìm đến đoạn <b:includable id='post' var='post'>...</b:includable> và các bạn chèn code trước thẻ đóng </b:includable> sau đó lưu lại và xem kết quả

Lưu ý:

• Các bạn nên tải template của bạn về để tránh rủi ro
• Thay các chủ màu đỏ thành tên của bạn
• Thay ID màu xanh thành ID google plus của bạn
• Thay avata màu hồng thành link ảnh của bạn nuốn hiển thị
• Tùy kích chiều rộng màu xanh ở CSS tùy theo site của mình

Tag : Chia sẻ, CSS