TẠO CSS HIỂN THỊ CHO TRANG TĨNH TUYỆT ĐẸP (THỦ THUẬT BLOGSPOT)

Hello!!!Chào mừng các bạn đã đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn bạn TẠO CSS HIỂN THỊ CHO TRANG TĨNH TUYỆT ĐẸP CHO BLOGSPOT . OK

Hình minh họa

Các bước thực hiện

B1: Vào blogger.com > Chủ Đề
B2: Dán Code dưới đây vào phía dưới phần <body>

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.theme-info {padding: 0!important; margin:0!important}
.theme-info .theme-info-content .left{font-weight: 400; width: 30%; background: #00796b; color: #fff; padding: 5px 15px; box-sizing: border-box}
.theme-info .theme-info-content .right {width: 70%; background: #eee; padding: 5px 15px; box-sizing: border-box; margin:0!important}
.theme-info .theme-info-content .right a{font-weight:400 !important}
.theme-info-content {border-bottom:2px solid white; padding: 0; margin: 0}
.post-body h2 {clear:both; font: 400 20px Roboto,sans-serif; text-align: left; color: #00796b; margin: 15px 0; letter-spacing: 1px; text-transform: uppercase; display: table; padding: 8px 0;border-bottom: double}
._bg-pt2{background:transparent!important}
body{background:white}
.post-title-style2 span,._pt{font: 300 36px Roboto!important; letter-spacing: .5px!important; text-transform: uppercase!important; color: rgba(255,255,255,.75); width: 1000px; line-height: 1.5;max-width:100%;box-sizing:border-box}
._post-title-style2,._post-title-style2 h5 span{position:inherit;border-bottom:0!important}
#sidebar-wrapper,.comment_emo_list,.theme-info:before,#ztb-btt-widget-3cf087cd,#ztb-sb-a16b715b-widget,#entry-header,#lower,#subscribe-form-stardungblog,#top-menu-stardungblog,#top-wrap-menu,.post-title-style2 p,.free-ads,.bot-ads,#related-posts,.breadcrumbs,#sidebar-wrapper{display:none!important}
#content-wrapper{width:100%}
.wrapper{width:1000px;max-width:100%}
#post-title-style2{width:100%;margin:0 auto!important;padding:100px 0!important;background:linear-gradient(120deg,#00796b,#6d9698)!important}
.comments h4 {background: #f2f2f2; padding: 10px 20px!important; margin: 0 0 20px!important; font: 300 20px Roboto!important; display: table; width: auto!important}
@media screen and (max-width:1005px){.theme-info .theme-info-content .right, .theme-info .theme-info-content .left {text-align: center; width: 100%!important; clear: both; display: block}
</style>
</b:if>

Code

B3: Lưu lại

=)) Thưởng thức thành quả thôi@@

TỔNG KẾT

Chỉ với vài bước thôi mà chúng ta đã có CSS hiển thị trong trang tĩnh tuyệt đẹp cho blogger của chúng ta rồi đấy^^

Chúc các bạn thành công!!!

Cảm ơn các bạn đã xem$$$

Code by: bacsiwindows.com

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
----------------------------------------
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" data-ad-client="ca-pub-1638718759430999" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="7561885392" style="display: block; text-align: center;"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({}); </script>Hello!!!Chào mừng các bạn đã đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn bạn <a href="http://www.stardungblog.xyz/2017/11/tao-css-hien-thi-cho-trang-tinh.html" target="_blank">TẠO CSS HIỂN THỊ CHO TRANG TĨNH TUYỆT ĐẸP CHO BLOGSPOT </a> . OK<br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5m9Mr0pmRpgmLK-dZsA7Bm7NnfQ7hVuty5AokTW_2gvXzAbeGsfRDZQeDbx7UqDENj_0BOC1nwSh5BxzFGdlIW_IZvmsZLxUMOO9LTaykmVuNVV6aszOcuAaFLIhCSUPyl1OP_hTuU0g/s1600/Untitle-3.jpg" imageanchor="1"><img alt="" border="0" data-original-height="500" data-original-width="1000" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5m9Mr0pmRpgmLK-dZsA7Bm7NnfQ7hVuty5AokTW_2gvXzAbeGsfRDZQeDbx7UqDENj_0BOC1nwSh5BxzFGdlIW_IZvmsZLxUMOO9LTaykmVuNVV6aszOcuAaFLIhCSUPyl1OP_hTuU0g/s640/Untitle-3.jpg" title="" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><br />Hình minh họa</div><div style="text-align: left;"><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">Các bước thực hiện</h2><div><span style="background-color: white; color: #555555; font-family: "roboto" , sans-serif; font-size: 18px; letter-spacing: -0.35px;">B1: Vào </span><a href="http://blogger.com/" style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.35px; outline: none; text-decoration-line: none; transition: 0.3s;" target="_blank"><b><span style="color: black;">blogger.com</span></b></a><span style="background-color: white; color: #555555; font-family: "roboto" , sans-serif; font-size: 18px; letter-spacing: -0.35px;"> > </span><b style="background-color: white; font-family: Roboto, sans-serif; font-size: 18px; letter-spacing: -0.35px;">Chủ Đề</b><span style="background-color: white; font-family: "roboto" , sans-serif; font-size: 18px; letter-spacing: -0.35px;"><span style="color: #555555;"> </span></span><br /><span style="background-color: white; font-family: "roboto" , sans-serif; font-size: 18px; letter-spacing: -0.35px;"><span style="color: #555555;">B2: </span><span style="color: #666666;">Dán Code dưới đây vào phía dưới phần</span><b> <body></b></span><br /><span style="background-color: white; color: #555555; font-family: "roboto" , sans-serif; font-size: 18px; letter-spacing: -0.35px;"><b><br /></b></span></div></div><blockquote class="tr_bq" style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s;"><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><b:if cond='data:blog.pageType == &quot;static_page&quot;'></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><style></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.theme-info {padding: 0!important; margin:0!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.theme-info .theme-info-content .left{font-weight: 400; width: 30%; background: #00796b; color: #fff; padding: 5px 15px; box-sizing: border-box}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.theme-info .theme-info-content .right {width: 70%; background: #eee; padding: 5px 15px; box-sizing: border-box; margin:0!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.theme-info .theme-info-content .right a{font-weight:400 !important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.theme-info-content {border-bottom:2px solid white; padding: 0; margin: 0}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.post-body h2 {clear:both; font: 400 20px Roboto,sans-serif; text-align: left; color: #00796b; margin: 15px 0; letter-spacing: 1px; text-transform: uppercase; display: table; padding: 8px 0;border-bottom: double}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>._bg-pt2{background:transparent!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>body{background:white}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.post-title-style2 span,._pt{font: 300 36px Roboto!important; letter-spacing: .5px!important; text-transform: uppercase!important; color: rgba(255,255,255,.75); width: 1000px; line-height: 1.5;max-width:100%;box-sizing:border-box}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>._post-title-style2,._post-title-style2 h5 span{position:inherit;border-bottom:0!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>#sidebar-wrapper,.comment_emo_list,.theme-info:before,#ztb-btt-widget-3cf087cd,#ztb-sb-a16b715b-widget,#entry-header,#lower,#subscribe-form-stardungblog,#top-menu-stardungblog,#top-wrap-menu,.post-title-style2 p,.free-ads,.bot-ads,#related-posts,.breadcrumbs,#sidebar-wrapper{display:none!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>#content-wrapper{width:100%}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.wrapper{width:1000px;max-width:100%}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>#post-title-style2{width:100%;margin:0 auto!important;padding:100px 0!important;background:linear-gradient(120deg,#00796b,#6d9698)!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>.comments h4 {background: #f2f2f2; padding: 10px 20px!important; margin: 0 0 20px!important; font: 300 20px Roboto!important; display: table; width: auto!important}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>@media screen and (max-width:1005px){.theme-info .theme-info-content .right, .theme-info .theme-info-content .left {text-align: center; width: 100%!important; clear: both; display: block}</b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b></style></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b></b:if></b></span></span></blockquote><div style="text-align: center;">Code</div><div style="text-align: left;">B3: Lưu lại</div><div style="text-align: left;">=)) Thưởng thức thành quả thôi@@</div><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">TỔNG KẾT</h2><div>Chỉ với vài bước thôi mà chúng ta đã có CSS hiển thị trong trang tĩnh tuyệt đẹp cho blogger của chúng ta rồi đấy^^</div><div>Chúc các bạn thành công!!!</div><div>Cảm ơn các bạn đã xem$$$</div><div><div style="text-align: right;"><span style="background-color: whitesmoke; font-family: Roboto; font-size: 17px; letter-spacing: -0.3px;">Code by: bacsiwindows.com</span></div></div>