Thêm author box vào trang Blog

Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ ]]></b:skin>

3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(' http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png' ); color:#444444; }
.wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; }
.wc-aboutpic { float:right; margin:0 0 0 10px; }
.wc-aboutpic img { border:1px solid #999999; -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(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; }
.wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px  rgba(0,0,0,.3); -moz-box-shadow:0 0 10px  rgba(0,0,0,.3); box-shadow:0 0 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); }
.wc-aboutsoc img { height:35px; margin-bottom:-13px; }
.wc-aboutsoc  p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

4- Nhấn Ctrl+F tìm thẻ <data:post.body/>

5- Chép Source Code dưới đây dán vào dưới mã Code tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-goO7oYjg_D8BWkx8764x5pgfFAZs_Nb-OKDgFKk0K0dzTNA0OUGRU_q8vKfS5yQp3J-hBqAjvPlR2DDiG_e7v7FCaTRS90eG97oltjQyVZ-0LqvQD9Mgb-52YrwTQFi_10HjkoN1ys/s1600/Co-Author.jpg' width='100'/>
 </div>
 <h5>About Me :</h5>
 <div style='text-align: justify;'>
 <b>YOUR BIO HERE</b></div>
 <div class='wc-aboutsoc'>
 <p> Find us on Socail Media
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLhbEGqHhMtnNAEhrplIAiK-SvP3uiFQY0KnQ2ALv6Q0p9y_CF2-1OPM5xZD_8tdiN9MEIq-_WfvSiLK4uT4jEi7ap88GiE4NXNblhF3OAVWG590Dtf8M5-r2GUWjUsCGmzLUU9AoJ3Jr/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghguD8EyafQB2zsBsM8J25UB1-TWH1wRcdl-EsAb9aAmt5k2BxAMftBz_UAC9PMhBQBFCxk5rXqfoGvd84UpFHEn5cNqKwCneu0OcK16g1qzgVgqZqSMjifI7LMOHdMF9_ZYxowTH1hZGR/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsGlN2x1S_tvCSquNUApdrTUSbZOD6on71PIDYFNUmVKTjwJX1By-274i3Mlyi0InxAaAzozM2hpESu0a5ZhAy7l4ml9S3tKkam-hwdGqNmTYPSLQ4yK5FbSDSQFLCbBfbxVKoO3gOwYi/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk1yL8aBqg7xosjNZBwOecpOX_4Kt6htvDosC0uf2jFjUn_XLbf_K5UCbQqXPguhJS-gFEp95GWSfBxiYxcvj8fdnouvHuxjkDCG6xLVL6ErFatgAzy9FGn0UXAIrgiQGCc9Jhf-4yE8i/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>

6- Save lại Templatebạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:

http://ngdkhanh12.blogspot.com/2014/05/meo-cua-nguoi-ai-cap-co-ai-xay-kim-tu.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé.. 

Từ khóa : no keyword