Hộp theo dõi bài viết mới có lá cờ đẹp cho blogspot/blogger | Hoang Huu Blog Hoang Huu Blog: Hộp theo dõi bài viết mới có lá cờ đẹp cho blogspot/blogger
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Chủ Nhật, 1 tháng 12, 2013

Hộp theo dõi bài viết mới có lá cờ đẹp cho blogspot/blogger

Các bạn có thể thêm hộp theo dõi cực style với hình lá cờ khá bắt mắt mà bạn có thể thấy như hình bên dưới.
Để thêm tiện ích rất đơn giản , các bạn hãy vào "Bố Cục" --> "Thêm Tiện Ích" và chọn đến "HTML/Javascript" sau đó thêm đoạn code bên dưới vào khung "HTML/Javascript" sau đó lưu lại.

<style>
#bt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}
#bt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#bt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#bt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}
#bt-subs-box img{
display:inline-block;
border:none;
}
#bt-subs-box .email {
clear:none;
}
.email {
clear: both;
width: 100%;
margin: 10px 0;
}
.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}
.emailinput {
height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}
.emailinput {
padding-right: 30px !important;
width: 260px !important;
}
.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}
.emailbutton {
padding: 14px !important;
}
.emailbutton, .formbutton {
background: #f7f8f9;
background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9", 
endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1", 
endColorstr="#e0e0e0",GradientType=0 );
text-decoration:none !important;
}
</style>
<div id='bt-subs-box'>
<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='http://www.facebook.com/hoangnhuhuu' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feeds.feedburner.com/hoangnhuhuu" title="Suscribe to RSS feed"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFI1JgDT_KhCH_Uygtz3uQt5P8XVS6VbcXBM4MrOSsETuTOjueMlTcpWp7FljTmRO8nwlaUycgCulCW_V4vn05REcHSAovbcoOgGhc9oQPE9nj_PIO8m_cNLBEkgPcj4eiNBJLHdBihAgy/s40/w2bRSS+.png" alt='rss'/></a>
<a href="http://twitter.com/hoangnhuhuu" title="Follow me on Twitter"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71EZuBLmwxEDyPO_MbH2Uu7WIkpwzGBZMUZMWl4pa-wTSY_pFvzTnS8LQIw6OMZLYTJ2DG6I501ZjRwPOUq87clhCrXft1SpoebGliyGGiwbLiQwH7DaYQpCz51rGLmlBszw6M_cOhwS7/s40/w2bTwitter.png" alt='twitter'/></a>
<a href="http://www.facebook.com/hoangnhuhuu" title="Became Fan on Facebook"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasD4exASIVx6qLHVjuaoJUlqr7xoGdYBb0RyxvJTaJc-1g8LHoIqhpoTqY0K4BizOV4d6fAtKUHj_4zm8fQJQ5Li3kc6Y-Spl2DALDOovJfbF2tNz5pe0uPQ4ITsF1ENmi4kbntW44mKL/s40/w2bFaceBook.png" alt='facebook'/></a>
<a href="http://www.stumbleupon.com/stumbler/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Qu7W0PrwNju9uSbsZh4hdC8LQ1Xb2P0Adjju10yF_Pc054huTfyCHeiSlQBA613v5xMspynii34qdCzKMOVgTIWEXrbKuD1y1bMzc8tFh_5wsQ0OkUjCRFihT-NG6fdl6f0nl8xhqAR7/s40/w2bStumbled.png"alt='stumbleupon'/></a>
</div>
<div class='row'>
<h3>Get Subscribe to Free Email Updates!!!!</h3>
</div>
<div class='row'>
<div class='email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=HoangHuuBlog", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>
<input type='hidden' value='HoangHuuBlog' name='uri' />
<input type='hidden' name='loc' value='en_US' />
<input type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' value='Enter your email...' name='email' class='emailinput' />
<input type='submit' class='emailbutton' value='SignUp' title=""/>
</form>
</div>
</div>
</div>
Các bạn hãy thay đổi những chữ màu đỏ cho phù hợp với mình.
Chúc các bạn thành công.

Chia sẻ bài viết đến bạn bè

Team SB
Posted By: Hoang Nhu Huu

0 nhận xét:

POST A COMMENT

Contact Us

Tên

Email *

Thông báo *