Free Theme Blogspot Profile VeoSpot IT, Đơn Giản, Đẹp Dành Cho Blogger

Chào bạn! hôm nay mình chia sẻ miễn phí template blogspot Profile VeoSpot IT, mẫu thiết kế khá đơn giản, tải trang cục nhanh, phù hợp cho các bạn blogger làm trang profile dịch vụ tư vấn...
Demo Download
Tính năng của giao diện

Tính năng	Test
Layout	Version 3
Widget	Version 2
Reponsive	Check
Mobile Friendly	Check
BreadcrumbList	Check
Contact Page	Check
404 Page	Check
Related Random Posts	True
Popular Posts Widget	True
Sitemap Page	True
CSS Style 2	True
CSS Style 3	True
- Bạn có thể download về và sử dụng, hoặc bạn copy trực tiếp từ code ở bên dưới
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:templateUrl='indie.xml' b:templateVersion='1.3.0' class='v2' expr:dir='data:blog.languageDirection' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
	&lt;head&gt;
		<script crossorigin='anonymous' src='https://kit.fontawesome.com/e081c0a6dd.js'/>
        <title><data:view.title.escaped/></title>
		<meta content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' name='viewport'/>
		<link href='https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png' rel='shortcut icon' type='image/x-icon'/>
		<meta content='https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png' property='og:image'/>
		<meta content='https://veoit.blogspot.com/' property='og:url'/>
		<meta content='website' property='og:type'/>
		<meta content='Vèo Blogger' property='og:title'/>
		<meta content='Xây dựng và phát triển bởi VeoSpot.Com !' property='og:description'/>
		<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
		<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
		<link href='https://cdn.jsdelivr.net/gh/leanhducprovn/cdn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet'/>
		<!-- Bắt đầu css-->
		<b:skin><![CDATA[
		/* Chèn CSS vào đây */
		/*------------------------------------------------*/
		/* Name: Template giới thiệu bản thân version 1.0 */
		/* Admin: A Vèo                       */
		/* Zalo: 036 211 3321                            */
		/* Gmail: veoprotv@gmail.com           */
		/* Website: veospot.com                  */
		/*------------------------------------------------*/
		html,body{
            cursor:url("https://i.imgur.com/5v5M8gh.png"),auto;
        }
        a:hover{
            cursor:url("https://i.imgur.com/IXULuQ1.png"),auto;
        }
		html, body{
            overflow-x: hidden;
            background-image: url('https://i.ibb.co/8c10Dsq/image.png');          
            background-repeat: no-repeat;
            background-size:cover;
            font-family:inter,sans-serif;
            margin:0;
            padding:0;
        }
        body{
            margin:0;
            padding:0;
            position:relative;
            top:0;
            left:0;
            width:100vw;
        }
        .center{
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .light-orange{
            color:#ef9d64;
        }
        .light-blue{
            color:#6a8de4;
        }
        #root{
            display:flex
            ;align-items:center;
            justify-content:center;
            height:auto;
            min-height:100vh;
        }
        #main{
            display:block;
            position:relative;
            margin-top:30px;
            margin-bottom:30px;
            width:411px;
            max-width:411px;
            min-height:82px;
            background-color:#fff;
            border-radius:30px;
            box-shadow:7px 7px 20px -5px rgba(0,0,0,.1);
        }
        .container{
            padding:0 15px;
        }
        #cover-image{
            background-position:center;
            background-size:cover;
            border-top-left-radius:30px;
            border-top-right-radius:30px;
            width:411px;
            height:165px;
            position:relative;
            left:-15px;
        }
        #profile-header{
            position:relative;            
            display:grid;
            grid-template-columns:120px auto;
            column-gap:15px;
            margin-bottom:-10px;
        }
        #avatar-image{
            position:relative;
            background-position:center;
            background-size:cover;
            border-radius:30px;
            width:120px;
            height:120px;
            top:-25px;
        }
        #name{
            position:relative;
            padding-top:5px;
        }
        .names{
            font-weight:600;
            font-size:24px;
            margin:0;
        }
        .nicknames{
            font-weight:500;
            font-size:20px;
            margin:0;
        }
        #skills{
            padding-top:5px;
            margin-left:5px;
        }
        .skill-item{
            display:inline-flex;
            justify-content:center;
            align-content:center;
            position:relative;
            font-size:14px;
            font-weight:400;
            height:20px;
            margin-right:10px;
            width:auto;
        }
        .skill-item::before{
            position:absolute;
            content:"";
            padding-left:5px;
            padding-right:5px;
            width:100%;
            height:18px;
            background-color:currentColor;
            opacity:.2;
            border-radius:5px;
        }
        .bio-story{
            position:relative;
            display:grid;
            grid-template-columns:70px auto;
            height:70px;
            width:100%;
            background-color:#fafafa;
            border-radius:20px;
            -webkit-box-shadow:7px 7px 20px -5px rgba(0,0,0,.4);
            box-shadow:7px 7px 20px -5px rgba(0,0,0,.1);
            margin-bottom:15px;
        }
        .bio-story-thumb{
            width:50px;
            height:50px;
            background-position:center;
            background-size:cover;
            border-radius:15px;
            margin:10px;
        }
        .bio-story-content p{
            position:relative;
            font-size:15px;
            margin-top:10px;
            font-weight:600;
            margin-bottom:10px;
        }
        .bio-story-content span{
            position:relative;
            font-size:12px;
            bottom:15px;
            color:#587fe1;
            font-weight:500;
        }
        #content-body{
            position:relative;
            margin-top:20px;
            max-width:100%;
        }
        .drop-title{
            font-weight:600;
            font-size:18px;
            margin-left:10px;
        }
        #link-box{
            position:relative;
            width:100%;
        }
        .link-item{
            position:relative;
            display:grid;
            grid-template-columns:70px auto 65px;
            height:70px;
            width:100%;
            background-color:#fafafa;
            border-radius:20px;
            margin-bottom:15px;
            -webkit-box-shadow:7px 7px 20px -5px rgba(0,0,0,.4);
            box-shadow:7px 7px 20px -5px rgba(0,0,0,.1);
            transition:all 250ms ease-in-out;
        }
        .link-item:hover{
            background-color:#dff9fb;
        }
        .link-content{
            padding-top:15px;
        }
        .link-content p{
            margin:0;
            font-weight:600;
        }
        .link-content span{
            position:absolute;
            font-weight:400;
            font-size:14px;
            bottom:15px;
            color:#a6a9b1;
            max-width:50%;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;-webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            transition:all 250ms;
            cursor:pointer;
        }
        .link-content span:hover{
            color:#7c7e83;
        }
        .link-btn-chill{
            display:inline-flex;
            justify-content:center;
            align-content:center;
            position:relative;
            margin-top:15px;
            font-size:14px;
            width:auto;
            font-weight:600;
        }
        .link-btn-chill::before{
            position:absolute;
            content:"";
            padding-left:7px;
            padding-right:7px;
            width:40px;
            height:18px;
            background-color:currentColor;
            opacity:.2;border-radius:5px;
            top:-1px;
            transition:all 250ms;
        }
        .link-btn-chill{
            transition:all 250ms ease-in-out;
        }
        .link-btn-chill:hover::before{
            opacity:.5;
        }
		@media only screen and (max-width:425px){
            #root{display:block;
        }
        #main{
            top:0;
            left:0;
            border-radius:0;
            width:100%;
            margin:0;
            margin-right:0;
        }
        #cover-image{
            border-top-left-radius:0;
            border-top-right-radius:0;
            max-width:100vw;
        }
        .container{
            width:90%;
        }}
        @media only screen and (max-width:350px) and (min-width:150px){
            #name,#first-name{font-size:22px}#nickname{font-size:16px}.skill-item{font-size:12px}
        }
		#snowflakeContainer{position:absolute;left:0px;top:0px;}
	.snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
	.snowflake:hover {cursor:default}
.codepro-tet-left{position:fixed;top:0;left:0;z-index:9999}
.codepro-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:1024px){.codepro-tet-left,.codepro-tet-right{display:none!important}}
  ]]></b:skin>
	&lt;/head&gt;
	<!-- Bắt đầu phần hiển thị -->
	&lt;body&gt;
		<div id='root'>
			<div id='main'>
				<div class='container'>
					<header>
						<div id='cover-image' style='background-image: url(&apos;https://meta.vn/Data/image/2021/09/30/background-la-gi-anh-background-dep-3.jpg&apos;);'/>
						<div id='profile-header'>
							<div id='avatar-image' style='background-image: url(&apos;https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png&apos;);'/>
							<div id='name'>
								<p class='names' id='first-name'>A VÈO <i class='fas fa-check-circle' style='color:#2d88ff' title='Đã xác minh'/></p>
								<div id='skills'>
									<div class='skill-item' style='color:#740A4E;'>Tricker</div>
                                    <div class='skill-item' style='color:#ff758f;'>Developer</div>
									<div class='skill-item' style='color:#85D18A;'>Designer</div>
                                    <div class='skill-item' style='color:#F27935;'>9x</div>
                               </div>
							</div>
						</div>
					</header>
                    <p class='drop-title'><b>Website</b></p>    
                  <div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png&apos;);'/>
								<div class='link-content'>
									<p>VeoSpot Web Design</p>
									<span onclick='window.open(&apos;https://www.veospot.com/&apos;, &apos;_blank&apos;)'>www.VeoSpot.Com</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://www.veospot.com/&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>
                  <div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png&apos;);'/>
								<div class='link-content'>
									<p>VeoCart Online Store</p>
									<span onclick='window.open(&apos;https://veocart.blogspot.com/&apos;, &apos;_blank&apos;)'>VeoCart.Blogspot.Com</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://www.veospot.com/&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>
                  <div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png&apos;);'/>
								<div class='link-content'>
									<p>VeoRadio Blog Tâm Sự</p>
									<span onclick='window.open(&apos;https://veoradio.blogspot.com/&apos;, &apos;_blank&apos;)'>VeoRadio.Blogspot.Com</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://veoradio.blogspot.com/&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>
					<div id='content-body'>
                      <p class='drop-title'><b>Thông Tin Liên Hệ</b></p>
						<div id='link-box'>

							<div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png&apos;);'/>
								<div class='link-content'>
									<p>Facebook</p>
									<span onclick='window.open(&apos;https://www.facebook.com/veo94/&apos;, &apos;_blank&apos;)'>@veo94</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://www.facebook.com/veo94/&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>

							<div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://st.quantrimang.com/photos/image/2017/06/06/instagram-bookmark-200.jpg&apos;);'/>
								<div class='link-content'>
									<p>Instagram</p>
									<span onclick='window.open(&apos;https://www.instagram.com/#/&apos;, &apos;_blank&apos;)'>@veospot</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://www.instagram.com/#/&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>

							<div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://i.imgur.com/8eN7qqF.jpg&apos;);'/>
								<div class='link-content'>
									<p>Zalo</p>
									<span onclick='window.open(&apos;https://zalo.me/0362113321&apos;, &apos;_blank&apos;)'>036.211.3321</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://zalo.me/0362113321&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>
							
                           <div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://banner2.cleanpng.com/20181108/jgk/kisspng-youtube-portable-network-graphics-logo-computer-ic-5be4e411e4cbf3.6764629315417272499372.jpg&apos;);'/>
								<div class='link-content'>
									<p>Youtube</p>
									<span onclick='window.open(&apos;https://www.youtube.com/c/veostudio94&apos;, &apos;_blank&apos;)'>Veostudio</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-orange' onclick='window.open(&apos;https://www.youtube.com/c/veostudio94&apos;, &apos;_blank&apos;)'>OPEN</div>
								</div>
							</div>
                          
							<div class='link-item'>
								<div class='bio-story-thumb' style='background-image: url(&apos;https://3.bp.blogspot.com/-xU0YFaMQ3kY/YFyY6WorvkI/AAAAAAAALFo/_g1qOA33DsIxMX5266fm4WgjgVXWNxcWACK4BGAYYCw/s1600/LOGO-VEOSPOT.png&apos;);'/>
								<div class='link-content'>
									<p>Gmail</p>
									<span onclick='geturl(&apos;veoprotv@gmail.com&apos;)'>veoprotv@gmail.com</span>
								</div>
								<div class='link-btn'>
									<div class='link-btn-chill light-blue' onclick='geturl(&apos;veoprotv@gmail.com&apos;)'>COPY</div>
                              </div>
                          </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function geturl(giatri) {
				var $temp = $(&quot;&lt;input&gt;&quot;);
				$(&quot;body&quot;).append($temp);
				$temp.val(giatri).select();
				document.execCommand(&quot;copy&quot;);
				$temp.remove();
				alert(&quot;Copy thành công!&quot;);
			}
		</script>
		<script crossorigin='anonymous' src='https://code.jquery.com/jquery-3.6.0.slim.min.js'/>
		<b:section id='nhd-8827.blogspot.com'/>
	&lt;!--<head/>--&gt;
<audio src='https://dat887.000webhostapp.com/wp-content/uploads/2021/12/crazy_frog_we_wish_you_a_merry_christmas_mv_-7653592806440656651-1.mp3'/>  
  <style>
	body{display:block;-khtml-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;unselectable:on;}
</style>    
   <style>
	#snowflakeContainer{position:absolute;left:0px;top:0px;}
	.snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
	.snowflake:hover {cursor:default}
</style>
<script type='text/javascript'>
    //<![CDATA[
	var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];var transformProperty=getSupportedPropertyName(transforms);var snowflakes=[];var browserWidth;var browserHeight;var numberOfSnowflakes=39;var resetPosition=false;function setup(){window.addEventListener("DOMContentLoaded",generateSnowflakes,false);window.addEventListener("resize",setResetFlag,false)}setup();function getSupportedPropertyName(b){for(var a=0;a<b.length;a++){if(typeof document.body.style[b[a]]!="undefined"){return b[a]}}return null}function Snowflake(b,a,d,e,c){this.element=b;this.radius=a;this.speed=d;this.xPos=e;this.yPos=c;this.counter=0;this.sign=Math.random()<0.5?1:-1;this.element.style.opacity=0.5+Math.random();this.element.style.fontSize=4+Math.random()*30+"px"}Snowflake.prototype.update=function(){this.counter+=this.speed/5000;this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d}function generateSnowflakes(){var b=document.querySelector(".snowflake");var h=b.parentNode;browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOfSnowflakes;d++){var j=b.cloneNode(true);h.appendChild(j);var e=getPosition(50,browserWidth);var a=getPosition(50,browserHeight);var c=5+Math.random()*40;var g=4+Math.random()*10;var f=new Snowflake(j,g,c,e,a);snowflakes.push(f)}h.removeChild(b);moveSnowflakes()}function moveSnowflakes(){for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.update()}if(resetPosition){browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.xPos=getPosition(50,browserWidth);a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(moveSnowflakes)}function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}function setResetFlag(a){resetPosition=true};
	//]]>
</script>
  <div id='snowflakeContainer'>
<p class='snowflake'><img src='https://blogger.googleusercontent.com/img/a/AVvXsEiGwiKY4UEVHwcigi0lLQ6z43PYHoscMVaIsV2umnXlIP3UFgD_zsvkAZ5xY5BihQzm8mWSlB1oWkPFetYgv0Hs7MPwLTduLS2afd_NQyxja4Bjp8XMP7lPR4fDgZ38asrlHRwtywb3nW5RlSECQpi7DnpkrrqH0WrUB_hHRYMbinqR9p2qpgbBusqZxA=s320' style='width:35px'/></p>
</div>
  &lt;!--<body/>--&gt;
<audio autoplay='audio'>
  <source src='https://dat887.000webhostapp.com/wp-content/uploads/2021/12/nhac-giang-sinh.mp3'/>
  </audio>
  <a class='codepro-tet-left'><img alt='Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai' src='https://1.bp.blogspot.com/-msDQfPmyQqE/YTrLmHh0Y2I/AAAAAAAAHrA/ijwZz_b7aDoCUyTAgKrAlkNBFak1kj4cwCLcBGAsYHQ/s0/nam-moi-hanh-phuc-binh-an-den.png' style='width:230px;'/></a>
<a class='codepro-tet-right'><img alt='Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai' src='https://1.bp.blogspot.com/-13biMHNwv2o/YTrLmUUNBoI/AAAAAAAAHrE/S309Bfaa3VY-84kd_6DB2P7_BcxJ6hgTwCLcBGAsYHQ/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png' style='width:230px;'/></a>
<!--Thông báo-->
  <body onload='thongbaopopup()'/>
<style>
    .tbpopup .tboverlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
        display: none;
    }
    
    .tbpopup .tbcontent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: #fff;
        max-width: 600px;
        z-index: 2;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 20px;
        display: block;
        position: fixed;
        box-shadow: 0px 0px 10px #111;
    }
    
    @media (max-width: 700px) {
        .tbpopup .tbcontent {
            width: 90%;
        }
    }
    
    .tbpopup .tbclose-btn {
        cursor: pointer;
        position: absolute;
        right: 2px;
        top: 2px;
        width: 35px;
        height: 35px;
        color: #ff4444;
        font-size: 30px;
        font-weight: 300;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
    }
    
    .tbpopup.active .tboverlay {
        display: block;
    }
    
    .tbpopup.active .tbcontent {
        transition: all 300ms ease-in-out;
        transform: translate(-50%, -50%) scale(1);
    }
    
    .tbbuttom {
        background: #00cc00;
        color: #fff
    }
</style>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=vietnamese' rel='stylesheet'/>
<!--Thông báo-->
  <body onload='thongbaopopup()'/>
<style>
    .tbpopup .tboverlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
        display: none;
    }
    
    .tbpopup .tbcontent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: #fff;
        max-width: 600px;
        z-index: 2;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 20px;
        display: block;
        position: fixed;
        box-shadow: 0px 0px 10px #111;
    }
    
    @media (max-width: 700px) {
        .tbpopup .tbcontent {
            width: 90%;
        }
    }
    
    .tbpopup .tbclose-btn {
        cursor: pointer;
        position: absolute;
        right: 2px;
        top: 2px;
        width: 35px;
        height: 35px;
        color: #ff4444;
        font-size: 30px;
        font-weight: 300;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
    }
    
    .tbpopup.active .tboverlay {
        display: block;
    }
    
    .tbpopup.active .tbcontent {
        transition: all 300ms ease-in-out;
        transform: translate(-50%, -50%) scale(1);
    }
    
    .tbbuttom {
        background: #00cc00;
        color: #fff
    }
</style>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=vietnamese' rel='stylesheet'/>
<!-- Thong bao pupup -->
<div class='tbpopup' id='tbpopup-1'>
    <div class='tboverlay'/>
    <div class='tbcontent'>
        <div class='tbclose-btn' onclick='thongbaopopup()'/>
        <div class='tbclose-btn' onclick='thongbaopopup()'>&amp;times</div>
        <div style='font-size:33px;font-weight:bolder; font-family: &apos;Dancing Script&apos;, cursive;'>Chúc Mừng Năm Mới</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Xuân Về Rực Rỡ Nắng Chan Hòa</div>   
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Rộn Rã Mừng Vui Tiếng Xuân Ca</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Lời Chúc Đầu Năm Trân Trọng Nhất</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Gửi Đến Bạn Bè Khắp Gần Xa</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Chúc Mừng Năm Mới Tốt Nhiều Điều</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Gia Đình Hạnh Phúc Trọn Niềm Yêu</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>An Khang Thịnh Vượng Xuân Như Ý</div>
        <div style='color:#eb2f06;font-size:21px;font-family: &apos;Dancing Script&apos;, cursive;'>Vạn Sự Thành Công Toại Nguyện Nhiều</div>
    </div>
</div>

<!-- js thong bao popup -->
<script>
    function thongbaopopup() {
        document.getElementById(&quot;tbpopup-1&quot;).classList.toggle(&quot;active&quot;);
    }
</script>
 <!--Kết thúc thông báo-->
  &lt;/body&gt;
	<!-- Kết thúc phần hiển thị -->
</html>dsfkds
,/pre>
- Đọc thê: Code Sitemap Blogger (Blogspot) Đẹp Giống Bài Đăng mới (Recent post)
Tính năng của giao diện

Bài cùng chuyên mục

Bài cùng tác giả
