Author Box đẹp với Social Bookmark

Posted by on
Nếu bạn muốn giới thiệu đôi chút về bản thân thì chắc chắn khung tác giả (Author Box) là phần không thể thiếu. Hôm nay mình xin giới thiệu với các bạn mẫu khung tác giả mới với social bookmark, khung này chỉ sử dụng CSS nên rất gọn nhẹ.

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm được
.clear {
clear:both;
}

#author-box {
margin:10px 0;
}

#author-box a:hover {
background:none!important;
}

#author-box .row-1 {
background:#333;
padding:20px;
}

#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}

#author-box .row-1 .info {
margin:0 0 0 110px;
}

#author-box .row-1 .info h6 {
color:#FFF;
font-size:20px;
margin:-4px 0 0;
}

#author-box .row-1 .info h6 span {
font-size:11px;
font-weight:400;
background:#1BA1E2;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}

#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}

#author-box .row-2 {
background:#666;
}

#author-box .row-2 a.social-item {
display:block;
float:left;
color:#FFF;
text-align:center;
padding:15px;
}

#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}

#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}

#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
}

#author-box .row-2 .social-item .click {
font-size:11px;
color:#EAEAEA;
line-height:1;
}

#author-box .row-2 a.social-item:hover {
background:#1BA1E2!important;
}

#author-box .row-3 {
background:#1BA1E2;
}

#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}

#author-box .row-3 .donation-button {
background:#1BA1E2;
border:none;
font-family:Impact;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .donation-button:hover {
background:#000;
cursor:pointer;
}

#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:Impact;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}

#author-box .row-3 .register-button:hover {
color:#000;
cursor:pointer;
}

#author-box .row-2 .social-item.twitter .icon {
background-position:0 -32px;
}

#author-box .row-2 .social-item.facebook .icon {
background-position:0 -64px;
}

#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}

#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}

#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}

#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}

#author-box .social-item .icon {
background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
background-repeat:no-repeat;
}

#Thêm HTML

1. > Tìm thẻ <div class='post-footer'> , các bạn thường tìm được hai đoạn và chúng ta cần đoạn thứ 2.
2. > Dán code ở dưới vào dưới thẻ vừa tìm được 
<div class='post-header'>
<div id='author-box'>
            <div class='row row-1'>
                <div class='avatar'>
                    <a href='http://www.khanh98.blogspot.com/'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MwB2d8icXzTOjZEqUxYmbOhxhfnUXjoQPVWuM_rkcocyyrhSrMTpu7Tnvicz_12xPX1tzAMan34MMjPUlNwTFOLSRVU2FtMmd2HiOYaE4h4nm8o4ZxWYjP0zwfPcZ_xi4v8PNLzFDcA/s207-p-no/' width='90'/></a>
                </div>
                <div class='info'>
  <h6>Posted By: Quốc Khánh Bùi <span>Admin and Author</span></h6>
                  <p><strong><a href='http://khanh98.blogspot.com'>Quốc Khánh Bùi</a> Là một Blogger nghiệp dư</strong> <strong>Chia sẻ thủ thuật.</strong></p>
                </div>
                <div class='clear'/>
            </div>
            <div class='row row-2'>
                <a class='social-item website' href='http://www.khanh98.blogspot.com' meta='website' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Website</span>
                  <span class='click'><span class='val'>113576 Visitors</span> </span>
                </a>
           
                <a class='social-item twitter' href='https://twitter.com/chelskivn29' meta='twitter' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Twitter</span>
                    <span class='click'><span class='val'>200 Followers</span></span>
                </a>
           
                <a class='social-item facebook' href='http://www.facebook.com/khanh98blogspotcom' meta='face' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Facebook</span>
                    <span class='click'><span class='val'>500 Likes</span></span>
                </a>
           
                <a class='social-item gplus' href='https://plus.google.com/+QuốcKhánhBùi2641998' meta='gplus' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Google+</span>
                    <span class='click'><span class='val'>70 Joined</span></span>
                </a>
           
                <a class='social-item linkedin' href='http://ph.linkedin.com/' meta='linkedin' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>LinkedIn</span>
                    <span class='click'><span class='val'>40 Links</span></span>
                </a>
           
                <a class='social-item youtube' href='https://www.youtube.com/channel/UCwd5ceYlCmuBh7O4WvLe_yA' meta='youtube' target='_blank'>
                    <span class='icon'/>
                    <span class='label'>Youtube</span>
                    <span class='click'><span class='val'>30 Followers</span></span>
                </a>
           
               
            <div class='clear'/></div>
            <div class='row row-3'>
            <form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
                <input name='cmd' type='hidden' value='_donations'/>
                <input name='business' type='hidden' value='quockhanh.abc@gmail.com'/>
                <input name='lc' type='hidden' value='US'/>
                <input name='item_name' type='hidden' value='Donate Blogger'/>
                <input name='no_note' type='hidden' value='0'/>
                <input name='currency_code' type='hidden' value='USD'/>
                <input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
            </form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>
    </div>
3. > Thay thế
- Đoạn màu đỏ thành link avatar của bạn
- Đoạn màu cam thành các liên kết cho phù hợp với bạn
- Đoạn màu xanh dương là những gì hiện ra màn hình, hãy thay cho phù hợp.
- Đoạn màu tím thành ID gmail trên Paypal
4. > Save.
Nguồn Widgen
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.