Tạo Intro Giống Trang Cá Nhân Facebook 99% Chuẩn Responsive Cho Blogspot

Tạo intro giống trang cá nhân facebook . Nhìn cũng khá đẹp và Responsive chuẩn lên mình view-source và chia sẻ . hãy thường xuyên truy cập vào blog để được chia sẻ nhiều hơn nhé .

Bước 1 : Truy cập Chủ Đề -> Chỉnh sửa HTML

Bước 2 : Chèn CSS này trước ]]></b:skin>

#cover_bg{width:100%;position:relative;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none} .cover-bg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx4vSfxENcChAqktbMlpr9ux4QHAdXJX-mRQ1S-81UEGmg0LTtS_aFIVQdejxI0KmafzujMXy-PKg6lp3klWtUva-6q99DIITqbbG1qKqHh-BYtKUNp_JfZpGag87r58EZq5evcXhIhBb/w1000-h500/2.jpg) no-repeat center;background-size:cover;height:350px;width:1080px;margin:0 auto;position:relative;transition:1s ease-in-out;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out} .cover-bg p{color:#fff;position:absolute;bottom:0;font:500 24px Roboto,sans-serif;left:220px;margin:15px} .cover-bg p span{display:block;font-size:15px;font-weight:400;margin:5px 0 0 0} .profile_img img{transition:.3s;width:170px;height:170px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;bottom:-40px;left:30px;z-index:1} .profile_img img:hover{border-radius:0;background:white} .cover-bg h2{margin:0 0 10px 0;padding:0;font-size:22px;font-weight:500} #menu1{background:white;bottom:-50px;width:100%;position:absolute} .menu-fb li{list-style:none;display:inline;position:relative;left:230px} .menu-fb li a{text-decoration:none;color:#666;padding:0 10px;line-height:50px!important;display:inline-block;text-transform:uppercase;font:500 14px Roboto;border-right:1px solid #eee} .menu-fb li a:hover,.menu-fb li a:focus{color:#6bad9d} .btn1_cover{font:500 12px Roboto;letter-spacing:0;padding:4px 10px;display:inline-block;background:white;margin:0 0 0 10px;border-radius:4px;opacity:.7;text-transform:uppercase} .btn1_cover:hover,.btn1_cover:focus{background:#fff;opacity:1} .btn_cover{position:absolute;right:0;bottom:0;padding:15px} #btop-btn a.change{opacity:1;visibility:visible;right:13px} #btop-btn a{position:fixed;bottom:13px;right:-50px;z-index:999;background:white;padding:5px 15px;font-size:30px;opacity:0;visibility:hidden;transition:.5s} @media screen and (max-width: 980px) { #menu1{display:none!important} @media screen and (max-width:768px){.cover-bg p{left:50%;transform:translate(-50%,-50%);text-align:center;box-sizing:border-box;width:100%;top:50%}.profile_img img{transform:translatex(-50%);left:50%}.cover-bg{width:100%}.cover-bg p,#menu,.btn_cover{display:none}

Bước 3 : Chèn HTML vào nơi muốn hiển thị.

<div id='cover_bg'><div class='cover-bg'> <p>Nhật ký<span></span></p><div class='profile_img'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIZJT36qpBoQH9_1W-7_uD-cnSuyz2aCEGMRUnsCUI2wNu1sHpdySjhnLejyvEssDVwnxv18ruojfm9QYrSMk2k8ARCXqt6oqGhCZvYrgr1rlgynHDg23-Fr12huX-LL_WZCtAujw10g/s1600/nghia-rong-blog-AVT.jpg'/><div id='menu1'><div class='menu-fb'> <li><a href='/'>Trang chủ</a></li><li><a href='//www.facebook.com/Admin.NghiaPlay' target='blank'>Giới thiệu</a></li><li><a href='/search/label/Thủ Thuật Facebook' target='blank'>Facebook</a></li><li><a href='//www.facebook.com/Admin.NghiaPlayt' target='blank'>Liên hệ</a></li><li><a href='//nghiarong.blogspot.com/p/lienket.html' target='blank'>Liên kết</a></li><li><a href='/search/label/Thủ Thuật Blogspot' target='blank'>Blogger</a></li><li><a href='/search/label/Template Blogspot' target='blank'>Template</a></li><li><a href='/search/label/PSD'>PSD Ảnh Bìa</a></li></div></div></div><div class='btn_cover'><a class='btn1_cover' href='//www.facebook.com/fcblogradio'>Cập nhật thông tin</a><a class='btn1_cover' href='//www.facebook.com/fcblogradio'>Xem nhật kí hoạt động</a></div></div></div>

Bước 4. Lưu mẫu và tận hưởng thành quả.

Bài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
Tạo Intro Giống Trang Cá Nhân Facebook 99% Chuẩn Responsive Cho Blogspot<br />
<div>
<br />
Tạo intro giống trang cá nhân facebook . Nhìn cũng khá đẹp và Responsive chuẩn lên mình view-source và chia sẻ . hãy thường xuyên truy cập vào blog để được chia sẻ nhiều hơn nhé .<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="203" data-original-width="640" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w4SJ1ZJyexsphy_x56r8VyqH3mV8W4EkhNnpxGg_4ykFekjUwQIPINNnfVmwaXM9zDtcfjvXHeWI28zdh9Pr0hnIvyh-GM0UnRzGiG_cJ6y48SAlk4FGqlmvBwOYYsKLTn1PDMLsp7Cw/s640/intro.GIF" width="640" /></div>
<br />
<br />
Bước 1 : Truy cập Chủ Đề -> Chỉnh sửa HTML<br />
<br />
Bước 2 : Chèn CSS này trước ]]></b:skin><br />
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
#cover_bg{width:100%;position:relative;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none} .cover-bg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx4vSfxENcChAqktbMlpr9ux4QHAdXJX-mRQ1S-81UEGmg0LTtS_aFIVQdejxI0KmafzujMXy-PKg6lp3klWtUva-6q99DIITqbbG1qKqHh-BYtKUNp_JfZpGag87r58EZq5evcXhIhBb/w1000-h500/2.jpg) no-repeat center;background-size:cover;height:350px;width:1080px;margin:0 auto;position:relative;transition:1s ease-in-out;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out} .cover-bg p{color:#fff;position:absolute;bottom:0;font:500 24px Roboto,sans-serif;left:220px;margin:15px} .cover-bg p span{display:block;font-size:15px;font-weight:400;margin:5px 0 0 0} .profile_img img{transition:.3s;width:170px;height:170px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;bottom:-40px;left:30px;z-index:1} .profile_img img:hover{border-radius:0;background:white} .cover-bg h2{margin:0 0 10px 0;padding:0;font-size:22px;font-weight:500} #menu1{background:white;bottom:-50px;width:100%;position:absolute} .menu-fb li{list-style:none;display:inline;position:relative;left:230px} .menu-fb li a{text-decoration:none;color:#666;padding:0 10px;line-height:50px!important;display:inline-block;text-transform:uppercase;font:500 14px Roboto;border-right:1px solid #eee} .menu-fb li a:hover,.menu-fb li a:focus{color:#6bad9d} .btn1_cover{font:500 12px Roboto;letter-spacing:0;padding:4px 10px;display:inline-block;background:white;margin:0 0 0 10px;border-radius:4px;opacity:.7;text-transform:uppercase} .btn1_cover:hover,.btn1_cover:focus{background:#fff;opacity:1} .btn_cover{position:absolute;right:0;bottom:0;padding:15px} #btop-btn a.change{opacity:1;visibility:visible;right:13px} #btop-btn a{position:fixed;bottom:13px;right:-50px;z-index:999;background:white;padding:5px 15px;font-size:30px;opacity:0;visibility:hidden;transition:.5s} @media screen and (max-width: 980px) { #menu1{display:none!important} @media screen and (max-width:768px){.cover-bg p{left:50%;transform:translate(-50%,-50%);text-align:center;box-sizing:border-box;width:100%;top:50%}.profile_img img{transform:translatex(-50%);left:50%}.cover-bg{width:100%}.cover-bg p,#menu,.btn_cover{display:none}</blockquote>
</blockquote>
<br />
Bước 3 : Chèn HTML vào nơi muốn hiển thị.<br />
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<div id='cover_bg'><div class='cover-bg'> <p>Nhật ký<span></span></p><div class='profile_img'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIZJT36qpBoQH9_1W-7_uD-cnSuyz2aCEGMRUnsCUI2wNu1sHpdySjhnLejyvEssDVwnxv18ruojfm9QYrSMk2k8ARCXqt6oqGhCZvYrgr1rlgynHDg23-Fr12huX-LL_WZCtAujw10g/s1600/nghia-rong-blog-AVT.jpg'/><div id='menu1'><div class='menu-fb'> <li><a href='/'>Trang chủ</a></li><li><a href='//www.facebook.com/Admin.NghiaPlay' target='blank'>Giới thiệu</a></li><li><a href='/search/label/Thủ Thuật Facebook' target='blank'>Facebook</a></li><li><a href='//www.facebook.com/Admin.NghiaPlayt' target='blank'>Liên hệ</a></li><li><a href='//nghiarong.blogspot.com/p/lienket.html' target='blank'>Liên kết</a></li><li><a href='/search/label/Thủ Thuật Blogspot' target='blank'>Blogger</a></li><li><a href='/search/label/Template Blogspot' target='blank'>Template</a></li><li><a href='/search/label/PSD'>PSD Ảnh Bìa</a></li></div></div></div><div class='btn_cover'><a class='btn1_cover' href='//www.facebook.com/fcblogradio'>Cập nhật thông tin</a><a class='btn1_cover' href='//www.facebook.com/fcblogradio'>Xem nhật kí hoạt động</a></div></div></div></blockquote>
</blockquote>
<br />
Bước 4. Lưu mẫu và tận hưởng thành quả.</div>