Viết Pr Thương hiệu, Quảng Cáo Sản Phẩm top 10 Google

logo
Review

Code html, css thường dùng làm đẹp nội dung online

(Ivietpr) - Chia sẻ những đoạn code đơn giản thường dùng chủ yếu trang trí làm đẹp bài viết.   Thẻ P :  <p style="background-color:red;p....

Seo-content - Hợp tác làm marketing online bằng cách ứng dụng kỹ thuật : Seo nội dung , google ads, hỗ trợ viết Pr thương hiệu, quảng cáo sản phẩm đưa từ khóa lên top 10 google...

Chia sẻ những đoạn code đơn giản thường dùng chủ yếu trang trí làm đẹp bài viết.  

Thẻ P : 

<p style="background-color:red;padding:10px;text-align:center;font-family:Arial;font-size:15px;border-radius:25px;overflow:hidden;"><span style="color:#ffffff;"><strong>
</strong></span></p>


Thẻ div :

Khung viền - thẻ div :

<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;"> </div>
<p style="border-style: dotted;"></p>
<p style="border: 2px solid red;border-radius: 12px;padding:2px;"></p>
<div style="border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;">top padding có giá trị 50px, right padding có giá trị 30px, bottom padding có giá trị 50px,và left padding có giá trị 80px.</div>

Thẻ Div chứa text :

<div style="text-align:center;">Nội_dung canh giữa</div>
<div style="text-align: justify;padding:10px"> Nội dung dàn đều chữ </div>

Chèn Icon :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

Chèn blockquote :

<style>
blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}
</style>
<center>
<blockquote>
<p> nội dung <br />
blockquote</p>
</blockquote>
</center>
Code Font chữ :

<font size="2" color="red">Đây là chữ có kích thước= 2, màu đỏ.</font> Đây là chữ có kích thước= 2, màu đỏ.
In đậm = In đậm - code - <b>In đậm</b>
Nghiêng = Nghiêng - code - <i>Nghiêng</i>
Gạch dưới = Gạch dưới - code - <u>Gạch dưới</u>
Gạch ngang chữ = Gạch ngang chữ - code - <s>Gạch ngang chữ</s>
Chữ Sub Script = Chữ Sub Script - code - <sub>Sub Script</sub>
Chữ Super Script = Chữ Sub Script - code - <sup>Sub Script</sup>
Background cho chữ : code  <font style="background-color: #c4c4c4; display:block">Text</font>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Thụt đầu dòng Nội_dung</span>
<font color='red' size='6' style='line-height: 1.1;'>thuộc tính line-height giúp dãn dòng text</font>

Code chèn hình ảnh :

<img src="đường dẫn đến tập tin hình ảnh" width="chiều rộng" height="chiều cao" alt="mô tả"/>
<img src="Link Hình" alt="Viết mô tả cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" />

Chèn hình tự co dãn : 

<img alt="gỗ ghép" src="https://lh4.googleusercontent.com/-vUd7R4IMWZk/Wk2Rv1iMWnI/AAAAAAAAABU/7rROFhQ8jVYik9sws4SQzbCjO6NQDMuNACLcBGAs/s1200/goghep.jpg" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/>
Link liên kết : 

<a name="ten">Chapter 4</a>
<a href="#ten">liên kết đi đến vị trí có name = tên </a>

<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>

Html link liên kết (đổi màu link)
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

<a href="https://www.ivietpr.com" target="_blank">Visit web viết bài PR - quảng cáo online !</a>
Visit web viết bài PR - quảng cáo online !

Hiệu ứng text :

1. Hiệu ứng Drop cap :
<style>
.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
</style>
<p>
<span class="firstcharacter">D</span> rop cap chữ cái đầu tiên trong bài viết
</p>

2. Hiệu ứng :


Code Tổng hợp :
Canh hình giữa chữ theo chiều dọc :
<style>
.textimage1 {
border: none; /* Remove borders */
color: white; /* Add a text color */
padding: 1px 5px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
vertical-align: middle;
}
</style>
<a href="http://www.ivietpr.com/2017/09/code-html-css-thuong-dung-lam-dep-noi-dung-online.html"> <img alt="Code html, css thường dùng làm đẹp nội dung online" border="0" class="textimage1" height="30" src="http://4pvn.com.vn/img/Type/394.png" tilte="Viết nội dung online" width="60" / /></a>, Chuyên viết nội dung quảng cáo sản phẩm...

Gắn link CSS :
<link rel="stylesheet" type="text/css" href="link css">

Gắn Link JavaScript :
<script language="JavaScript" src="link jav script">

Link tham khảo :
https://bloggersorigin.com/blockquote-styles-customize-blockquote-blogger/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://webcoban.vn
http://www.kienmkt.info/2016/08/chen-anh-vao-blogspot.html
http://hocwebchuan.com/reference/

Xem thêm>>

Xem thêm>>

Đóng liên hệ [x]
hotlineSeo nội dung - google ads