Giới Thiệu

Form đã được blogger tích hợp sẵn trong blogspot, vì vậy chúng ta cũng có nhu cầu muốn nó đẹp hơn để làm đẹp mắt người nhìn vào. Hôm nay, mình xin chia sẻ các bạn tạo css cho form của blogspot đẹp hơn bao giờ hết.

Tao Form Đang Ki Nhan Thong Bao Bai Viet Qua Mail Cho Blogspot

Các Bước Thực Hiện

Bước 1: Dán đoạn mã bên dưới vào trước </head>

<link href=’https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css’ rel=’stylesheet’/>

Bước 2: Vào bố cục, tạo một tiện ích HTML/CSS và dán đoạn code bên dưới vào là xong

This is box title
<link href=’http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1′ rel=’stylesheet’ type=’text/css’/>

<style>

#twist-blogger-sbox-v2 {

padding: 0;

padding-bottom: 5px;

font-family: “Oswald”,sans-serif;;

display: block;

margin: 0;

width: 100%;

border-radius: 1px;

border: 0;

background: #363636;

}

#twist-blogger-sbox-v2 .main_tagline {

padding: 0px 0px;

line-height: 2.5em;

font-size: 26px;

margin: 0;

height: 95px !important;

overflow: hidden;

font-weight: normal;

color: #FFF;

text-align: center;

border: 0;

background-color: #FF5959;

}

#twist-blogger-sbox-v2 .email_icon {

display: table;

margin: -35px auto 0px;

font-size: 25px;

padding: 12px;

height: 25px;

width: 25px;

background-color: #363636;

color: #FFF;

border-radius: 50px;

border: 10px solid #FFFFFF;

line-height: 0;

}

#twist-blogger-sbox-v2 p {

font-size: 15px;

color: #F9F9F9;

text-shadow: 0px -1px 0px #000;

line-height: 27px;

padding: 5px 10px 5px;

text-align: center;

width: 80%;

margin: 5px auto 20px;

border-bottom: 2px solid #6A6A6A;

border-radius: 20px;

}

#twist-blogger-sbox-v2 .rssform {

padding: 0;

margin: 0 auto;

display: block;

}

#twist-blogger-sbox-v2 .rssform input {

padding: 8px;

margin: 20px auto 15px;

font-size: 13px;

color: #000;

text-align: center;

display: block;

font-family: “Oswald”,sans-serif;;

font-weight: normal;

width: 90%;

height: 38px;

text-transform: uppercase;

outline: none !important;

border: 1px solid #FFFFFF;

border-radius: 1px;

background-color: #FCFCFC;

box-sizing: border-box !important;

}

#twist-blogger-sbox-v2 .rssform .button:hover {

background: #000000;

}

#twist-blogger-sbox-v2 .rssform .button {

background: #FF5959;

color: white!important;

border: 1px solid #FFFFFF;

margin-top: 15px;

outline: none !important;

transition: all .3s ease-in-out;

padding: 5px 2px !important;

float: none;

text-transform: uppercase;

font-size: 18px;

font-weight: normal;

cursor: pointer;

}

#twist-blogger-sbox-v2 .bottom_lock_policy {

background: url(https://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 3% -2px;

color: #959595;

text-align: center;

font-size: 12px;

margin: 0;

padding: 3px;

line-height: 25px;

}

#twist-blogger-sbox-v2 .bottom_lock_policy a {

color: #959595;

text-decoration: none !Important;

}

#twist-blogger-sbox-v2 .social_profiles {

line-height: 1.2em;

display: table;

float: none;

margin: 0px auto;

text-align: center;

min-width: 157px;

padding: 5px 0px;

border: 0;

}

#twist-blogger-sbox-v2 .social_profiles a:hover {

color: #FFF;

background-color: #FF5959;

border-color: #FFF;

}

#twist-blogger-sbox-v2 .social_profiles a {

color: #000000;

margin: 0 5px;

text-align: center;

float: left;

display: table;

padding: 4px 5px;

background-color: #FFFFFF;

border-radius: 50px;

border: 2px solid #2D2D2D;

width: 15px;

height: 15px;

line-height: 0;

font-size: 16px;

transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

}

#twist-blogger-sbox-v2 form {

margin-bottom: 10px !important;

}

</style>

<div id=”twist-blogger-sbox-v2″>

<div class=”main_tagline”>Nhận Bài Viết Qua Email</div><div class=”email_icon”><i class=”fa fa-envelope”></i></div>

<p>Bạn phải đăng nhập email để xác nhận việc đăng ký. Vui lòng kiểm tra mục Spam nếu bạn không tìm thấy email trong mục Inbox!</p>

<div class=”rssform”>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=congdongsvit’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>

<input type=”text” name=”email” placeholder=”ĐỊA CHỈ EMAIL CỦA BẠN…” />

<input type=”hidden” value=”congdongsvit” name=”uri” />

<input type=”hidden” name=”loc” value=”en_US” />

<input value=”ĐĂNG KÝ NGAY” class=”button” type=”submit” />

</form>

</div>

<div class=”bottom_lock_policy”>Bảo mật địa chỉ email tuyệt đối!   </div>

<div class=”social_profiles”>

<a href=”https://www.facebook.com/congdongsvit” target=’_blank’ rel=’nofollow’ title=”Join on Facebook”><i class=”fa fa-facebook”></i></a>

<a href=”#” target=’_blank’ rel=’nofollow’ title=”Follow on Twitter”><i class=”fa fa-twitter”></i></a>

<a href=”#” target=’_blank’ rel=’nofollow’ title=”Follow on Google+”><i class=”fa fa-google-plus”></i></a>

<a href=”#” target=’_blank’ rel=’nofollow’ title=”Follow on Pinterest”><i class=”fa fa-pinterest”></i></a>

</div>

</div>

Bước 3: Lưu lại và kiểm tra.

Lời Kết

Chúc Các Bạn Thành Công

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here