Hướng dẫn thêm hộp thông báo chuyên nghiệp cho Blogger

Xin chào các bạn hôm nay Star Nhân IT sẽ chia sẻ cho các bạn một code rất chất và VIP do mình lấy được bên Star Cường IT giờ đem về share cho các bạn. Demo xem trên TOP Star Nhân IT.

Bạn tìm đến dòng <div id='header-top'> và cho toàn bộ đoạn code sau vào bên trên thẻ này :

	<style>
	.icon-box{background-color:rgba(66,133,244,0.8);border-radius:100%;color:rgba(255,255,255,0.5);margin-right:8px}
	.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
	.notify-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;margin-top:10px;cursor:pointer;text-align:left;font-size:15px;letter-spacing:0.3px;font-family:roboto}}
	.notify-info:hover{opacity:0.8;color:#138882}
	.notify-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px;line-height:1.5;}
	#notifybox{background:#fff;color:#333;font-size:13px;top:-1500px;right:150px;padding:20px;position:absolute;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:9998;transition:all .5s}
	.closebox{background:none;border:none;position:absolute;top:0;right:0;cursor:pointer;font-size:18px;font-weight:700;color:#888;padding:4px 6px}
	.minimizebox{background:none;border:none;position:absolute;top:-9px;right:20px;cursor:pointer;font-size:18px;font-weight:700;color:#888!important;padding:4px 6px}
	.minimizebox:hover{color:rgba(254,109,70,0.9)!important}.closebox:hover{color:rgba(254,109,70,0.9)!important}
	#myModal{position:absolute;top:-1550px;z-index:9999;transition:all .4s}
	.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
	.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}
	.modal-content{position:relative;background:#fff;background-clip:padding-box;outline:none;box-shadow:0 2px 5px rgba(0,0,0,.1);right:150px;padding:20px;position:fixed;width:320px;margin-top:-30px;margin-bottom:30px;}
	.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5;color:#138882}
	.modal-header .close{margin-top:-2px}
	button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}
	.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);}
	.modal-title{margin:0;font-size:120%;font-weight:400;text-align:center;letter-spacing: 0.3px;}
	.modal-body{position:relative;padding:0;text-align:left;min-height:150px;}
	.modal-body p{line-height:1.5;letter-spacing: 0.1px;font-family: roboto;}
	.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}
	.btn-primary{background:#138882;color:#fff;border:0;display:table;width:100%;max-width:170px;position:relative;padding:12px 15px;font-size:90%;text-transform:uppercase;margin:auto;letter-spacing:1px;border-radius:5px}
	.btn-primary:hover{background:#fff;color:#138882;box-shadow:0 0 5px rgba(81,203,238,0.7);}
	.circle{padding:2px 6px;background:#138882;border-radius:100%;color:#fff;margin:0 15px 0 0;font-size:14px;font-weight:600;font-family:helvetica}
	#overlay{background:transparent;z-index:9999;position:absolute;top:0;left:0;right:0;bottom:0;display:none}
	.social-sec ul#social a.notify-box:hover{background-color:green}
	li a.notify-box:after{text-align: center;position:absolute;content:'4';right:-5px;top:-5px;background:#f56954;color:#fff;padding:0;width:15px;height:15px;line-height:15px;border:2px solid #fff;border-radius:100%;font-size:80%;transform:scale(1.0);transition:all .3s ease;}
	.social-sec ul li a.notify-box:hover:after{transform:scale(0.9)}
	.social-sec .notify-box:before{content:"\f06b"}
	.ani{animation:mation 2s ease-in infinite}
	@keyframes mation{48%,62%{transform:scale(1.0,1.0)}50%{transform:scale(1.1,0.9)}56%{transform:scale(0.9,1.1) translate(0,-5px)}59%{transform:scale(1.0,1.0) translate(0,-3px)}}
	</style>
	<div id='notifybox' style='position:fixed;right:76px;'>
	<div class='notify-info info' id='notify1' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><i class='fa fa-info icon-box' style='padding: 10px 15px;'></i>Có gì mới trên Star Nhân IT</div>
	<div class='notify-info' id='notify2' onclick='window.open(&#39;/lienket&#39;);'><i class='fa fa-slideshare icon-box' style='padding: 10px;background-color:#ffa812;'></i>Đặt Liên Kết</div>
	<div class='notify-info' id='notify3' onclick='window.open(&#39;https://www.facebook.com/LTAIT.Official&#39;);'><i class='fa fa-key icon-box' style='padding: 10px;background-color:#96d726;'></i>Liên Hệ Quảng Cáo - Báo Lỗi</div>
	<div class='notify-info' id='notify4' onclick='window.open(&#39;https://www.starcuongit.com/2018/01/event-co-thuong-tri-an-nhung-doc-gia-tich-cuc-binh-luan.html&#39;);'><i class='fa fa-gift icon-box' style='padding: 10px;background-color:#fe6d46;'></i>Event Tri Ân Top Bình Luận</div>
	<input class='closebox' onclick='document.getElementById(&#39;notifybox&#39;).style.top=&#39;-381px&#39;;document.getElementById(&#39;notify&#39;).style.display=&#39;none&#39;;' title='Đóng thông báo' type='button' value='×'/>
	<input class='minimizebox' onclick='document.getElementById(&#39;notifybox&#39;).style.top=&#39;-381px&#39;;' title='Thu nhỏ thông báo' type='button' value='_'/>
	</div>
	<div id='overlay'></div>
	<div class='modal-dialog' id='myModal'>
	<div class='modal-content'>
	<div class='modal-header'>
	<h4 class='modal-title' id='myModalLabel1'>
	Cập nhật mới trên Star Nhân IT</h4>
	</div>
	<div class='modal-body'>
	<p><span class='circle'>1</span>Nâng cấp giao diện thân thiện, đẹp mắt.</p>
	<p><span class='circle'>2</span>Thêm Slide Chuyên Mục cho trang chủ.</p>
	<p><span class='circle'>3</span>Nâng cấp giao diện comment đẹp và nhỏ gọn hơn</p>
	<p><span class='circle'>4</span>Tối ưu tốc độ tải trang và sửa một số lỗi nhỏ khác.</p>
	</div>
	<div class='modal-footer'>
	<button class='btn-primary' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;-800px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;notif1&#39;).style.top=&#39;-800px&#39;;' type='button'>Đóng</button>
	</div>
	</div>
	</div>

Sau đó chèn đoạn code sau vào nơi bạn muốn hiển thị hộp :

<li id='notify'><a class='notify-box ani' href='#notify' onclick='document.getElementById(&#39;notifybox&#39;).style.top=&#39;50px&#39;;document.getElementById(&#39;count-box&#39;).style.display=&#39;none&#39;;'><span class='inv'></span></a></li>

Nguồn Code : Star Cường IT