Tiện ích thường dùng cho blogger-blogspot

Mẫu sử dụng margin và padding trong CSS

<div style="border: 2px solid #ccc; height: 156px; padding: 7px;"><img style="float: left; margin-right: 10px;" src="http://ntwood.vn/img/img/Lo%20Go%201.jpg">Nội dung bài viết mẫu sử dụng margin và padding trong CSS
</div>

Code Popup giữa màn hình 

<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent {
position: fixed;
top: 0;
background: #fd4747;
background: -moz-radial-gradient(center, ellipse cover, #fd4747 0%, #cb1515 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fd4747), color-stop(100%,#cb1515));
background: -webkit-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: -o-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: -ms-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: radial-gradient(ellipse at center, #fd4747 0%,#cb1515 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd4747', endColorstr='#eaeaea',GradientType=1 );
max-width: 700px;
width: 100%;
left: 0;
right: 0;
margin: auto;
max-height: 230px;
overflow: hidden;
padding-bottom: 30px;
bottom: 0;
}
#popup-giua-man-hinh label#label_3, #popup-giua-man-hinh label#label_6, #popup-giua-man-hinh .form-label.form-label-auto {
display: none !important;
}
.supernova .form-all, .form-all {
background-color: transparent !important;
border: 1px solid transparent;
}
.formFooter, .formFooter-heightMask {
display: none !important;
}
.web5c-tt {
text-align: center;
color: #fff;
padding: 25px;
}
.web5c-tt span {
font: bold 20px arial;
margin: 0 0 20px 0;
float: left;
width: 100%;
}
.web5c-tt p {
font: 16px arial;
}
#popup-giua-man-hinh .closeButton {
color: #333;
text-decoration: none;
font-size: 18px;
background: #fff;
border-radius: 50px;
padding: 5px 10px;
text-align: center;
}
.popUpBannerContent p {
margin: 0;
padding: 0;
}
#popup-giua-man-hinh a.closeButton{float:right}
.web5c-form {
margin: 0 0 0 30px;
}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton">x</a></p>

<div class='web5c-tt'>
CHÈN THÔNG BÁO VÀO KHU VƯC NÀY
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị

$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>

Code hiển thị Nội dung Text giữa thẻ Div theo chiều dọc 

<style>
.canhgiua {
padding: 20px;
border: 1px solid red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="canhgiua">
Nội dung Text hiển thị giữa thẻ Div theo chiều dọc
</div>

Tạo tin hot "breaking news" cho blogspot :

Dán đoạn code sau </b:skin> :

<style>
#cybup-breakingnews-widget {
margin: 15px;
height: 38px;
line-height: 26px;
overflow: hidden;
background: #fff;
border: 1px solid #34CFFD;
border-radius:50px;
}
#cybup-breakingnews-widget .breakhead {
border: 1px solid #34CFFD;
border-radius:50px;
position: absolute;
background: none repeat scroll 0 0 #34CFFD;
color: #fff;
display: block;
float: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
padding: 6px 12px;
}
#adcybup-breakingnews-widget li a {
font-family: inherit;
font-weight: 400;
color: #34CFFD;
margin-top: 10px;
transition: all 0.5s ease-in-out;
}
#adcybup-breakingnews-widget li a:hover {
color: #34CFFD;
}
#adcybup-breakingnews-widget {
float: left;
margin-left: 50px;
margin-top: 6px;
}
#adcybup-breakingnews-widget ul,#adcybup-breakingnews-widget li {
list-style: none;
margin: 0;
padding: 0;
}
</style>

Dán đoạn code sau trước thẻ đóng </body> :

<script type='text/javascript'>
//<![CDATA[
// Cybup Breaking News Widget
$(document).ready(function(){var e="http://namtrungjsc.vn",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adcybup-breakingnews-widget li:first").slideUp(function(){$(this).appendTo($("#adcybup-breakingnews-widget ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adcybup-breakingnews-widget").html(s),setInterval(function(){t()},5e3)}else $("#adcybup-breakingnews-widget").html("<span>No result!</span>")},error:function(){$("#adcybup-breakingnews-widget").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Dán đoạn code sau vào tiện ích html : 

<div id='cybup-breakingnews-widget'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adcybup-breakingnews-widget'>Loading...</div></div>

-----x---