Hướng Dẫn Tạo Profile Card

 Với một đoạn HTML và CSS này, chúng ta có thể trang trí cho blog của bạn thêm phần bắt mắt hơn.

Hướng Dẫn Tạo Profile Card:

Bước 1: Thêm CSS

Trên bảng điều khiển Blogger , Chọn Chủ đề ➟ Chỉnh sửa HTML. Sau đó dán đoạn CSS bên dưới vào.

.card {

  background-color: #fff;

  max-width: 360px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 2rem;

  box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);

}

.card .banner {

  background-image: url("https://images.unsplash.com/photo-1545703549-7bdb1d01b734?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  height: 11rem;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  box-sizing: border-box;

}

.card .banner svg {

  background-color: #fff;

  width: 8rem;

  height: 8rem;

  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);

  border-radius: 50%;

  transform: translateY(50%);

  transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);

}

.card .banner svg:hover {

  transform: translateY(50%) scale(1.3);

}

.card .menu {

  width: 100%;

  height: 5.5rem;

  padding: 1rem;

  display: flex;

  align-items: flex-start;

  justify-content: flex-end;

  position: relative;

  box-sizing: border-box;

}

.card .menu .opener {

  width: 2.5rem;

  height: 2.5rem;

  position: relative;

  border-radius: 50%;

  transition: background-color 100ms ease-in-out;

}

.card .menu .opener:hover {

  background-color: #f2f2f2;

}

.card .menu .opener span {

  background-color: #404040;

  width: 0.4rem;

  height: 0.4rem;

  position: absolute;

  top: 0;

  left: calc(50% - 0.2rem);

  border-radius: 50%;

}

.card .menu .opener span:nth-child(1) {

  top: 0.45rem;

}

.card .menu .opener span:nth-child(2) {

  top: 1.05rem;

}

.card .menu .opener span:nth-child(3) {

  top: 1.65rem;

}

.card h2.name {

  text-align: center;

  padding: 0 2rem 0.5rem;

  margin: 0;

}

.card .title {

  color: #a0a0a0;

  font-size: 0.85rem;

  text-align: center;

  padding: 0 2rem 1.2rem;

}

.card .actions {

  padding: 0 2rem 1.2rem;

  display: flex;

  flex-direction: column;

  order: 99;

}

.card .actions .follow-info {

  padding: 0 0 1rem;

  display: flex;

}

.card .actions .follow-info h2 {

  text-align: center;

  width: 50%;

  margin: 0;

  box-sizing: border-box;

}

.card .actions .follow-info h2 a {

  text-decoration: none;

  padding: 0.8rem;

  display: flex;

  flex-direction: column;

  border-radius: 0.8rem;

  transition: background-color 100ms ease-in-out;

}

.card .actions .follow-info h2 a span {

  color: #1c9eff;

  font-weight: bold;

  transform-origin: bottom;

  transform: scaleY(1.3);

  transition: color 100ms ease-in-out;

}

.card .actions .follow-info h2 a small {

  color: #afafaf;

  font-size: 0.85rem;

  font-weight: normal;

}

.card .actions .follow-info h2 a:hover {

  background-color: #f2f2f2;

}

.card .actions .follow-info h2 a:hover span {

  color: #007ad6;

}

.card .actions .follow-btn button {

  color: inherit;

  font: inherit;

  font-weight: bold;

  background-color: #ffd01a;

  width: 100%;

  border: none;

  padding: 1rem;

  outline: none;

  box-sizing: border-box;

  border-radius: 1.5rem/50%;

  transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);

}

.card .actions .follow-btn button:hover {

  background-color: #efb10a;

  transform: scale(1.1);

}

.card .actions .follow-btn button:active {

  background-color: #e8a200;

  transform: scale(1);

}

.card .desc {

  text-align: justify;

  padding: 0 2rem 2.5rem;

  order: 100;

}

Bước 2: Thêm HTML

Sau khi thêm xong CSS thì coi như đã xong 50% rồi. Tiếp theo hãy bỏ đoạn HTML vào nơi cần hiển thị nhé. Các bạn có thể vào Blogger , Chọn Bố cục ➟ Thêm tiện ích ➟ HTML/JavaScript. Sau đó dán đoạn HTML bên dưới vào.

<div class="card">

  <div class="banner">

    <svg viewBox="0 0 100 100">

      <path d="m38.977 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>

      <path d="m60.477 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>

      <path d="m48.203 69.309c1.7344 0 3.1484-1.4141 3.1484-3.1484 0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.1836-0.96484 2.1484-2.1484 2.1484s-2.1484-0.96484-2.1484-2.1484c0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.7344 1.4141 3.1484 3.1484 3.1484z"></path>

      <path d="m35.492 24.371c0.42187-0.35156 0.48047-0.98438 0.125-1.4062-0.35156-0.42188-0.98438-0.48438-1.4062-0.125-5.1602 4.3047-16.422 17.078-9.5312 42.562 0.21484 0.79688 0.85547 1.4062 1.6641 1.582 0.15625 0.035156 0.31641 0.050781 0.47266 0.050781 0.62891 0 1.2344-0.27344 1.6445-0.76562 0.82812-0.98828 2.0039-1.5391 2.793-1.8203 0.56641 1.6055 1.4766 3.3594 2.9727 4.9414 2.2852 2.4219 5.4336 3.9453 9.3867 4.5547-3.6055 4.5-3.8047 10.219-3.8086 10.484-0.011719 0.55078 0.42187 1.0078 0.97656 1.0234h0.023438c0.53906 0 0.98437-0.42969 1-0.97266 0-0.054688 0.17187-4.8711 2.9805-8.7773 0.63281 1.2852 1.7266 2.5 3.4141 2.5 1.7109 0 2.7578-1.2695 3.3398-2.6172 2.8867 3.9258 3.0586 8.8359 3.0586 8.8906 0.015625 0.54297 0.46094 0.97266 1 0.97266h0.023438c0.55078-0.015625 0.98828-0.47266 0.97656-1.0234-0.007812-0.26953-0.20703-6.0938-3.9141-10.613 7.0781-1.3086 10.406-5.4219 11.969-8.9766 1.0508 0.98828 2.75 2.1992 4.793 2.1992 0.078126 0 0.15625 0 0.23828-0.003906 0.47266-0.023438 1.5781-0.074219 3.4219-4.4219 1.1172-2.6406 2.1406-6.0117 2.8711-9.4922 4.8281-22.945-4.7852-30.457-9.1445-32.621-12.316-6.1172-22.195-3.6055-28.312-0.42188-0.48828 0.25391-0.67969 0.85938-0.42578 1.3477s0.85938 0.67969 1.3477 0.42578c5.7031-2.9688 14.934-5.3047 26.5 0.4375 7.1875 3.5703 9 11.586 9.2539 17.684 0.49609 11.93-4.2617 23.91-5.7344 25.062h-0.015626c-1.832 0-3.4102-1.5742-4.0352-2.2852 0.28906-0.99609 0.44531-1.8672 0.52734-2.5117 0.62891 0.16797 1.2812 0.27344 1.9727 0.27344 0.55469 0 1-0.44922 1-1 0-0.55078-0.44531-1-1-1-7.3203 0-10.703-13.941-10.734-14.082-0.097656-0.40625-0.4375-0.71094-0.85156-0.76172-0.43359-0.050781-0.82031 0.16406-1.0117 0.53906-1.8984 3.7188-1.4297 6.7539-0.67969 8.668-6.2383-2.2852-8.9766-8.6914-9.0078-8.7617-0.17969-0.43359-0.62891-0.68359-1.1016-0.60156-0.46094 0.082032-0.80469 0.47266-0.82422 0.94141-0.14062 3.3359 0.67188 5.75 1.5 7.3164-8.3125-2.4297-10.105-11.457-10.184-11.875-0.097656-0.51562-0.57422-0.86328-1.0898-0.8125-0.51953 0.054687-0.90625 0.50391-0.89062 1.0234 0.41406 13.465-1.8516 17.766-3.2383 19.133-0.66406 0.65625-1.1992 0.67188-1.2383 0.67188-0.53906-0.050781-1.0156 0.31641-1.0938 0.85156-0.078125 0.54688 0.29688 1.0547 0.84375 1.1328 0.03125 0.003906 0.11328 0.015625 0.23828 0.015625 0.36719 0 1.1016-0.09375 1.9414-0.66406 0.050781 0.38672 0.125 0.81641 0.21875 1.2656-1.0273 0.35156-2.6211 1.0781-3.7812 2.4648-0.015625 0.019532-0.054687 0.066406-0.15625 0.046875-0.039062-0.007812-0.13281-0.039062-0.16406-0.15234-2.1875-8.1094-5.7148-28.309 8.8867-40.496zm12.711 51.828c-1.0039 0-1.5898-1.207-1.8672-2.0117 0.48047 0.023438 0.95703 0.050781 1.4531 0.050781 0.74219 0 1.4453-0.035156 2.1289-0.082031-0.24219 0.83594-0.76172 2.043-1.7148 2.043zm-13.148-30.664c1.9531 3.6211 5.6367 7.9102 12.305 8.6992 0.43359 0.046875 0.83984-0.18359 1.0234-0.57422 0.18359-0.39062 0.089844-0.85938-0.22656-1.1523-0.074219-0.070312-1.2734-1.2227-1.9688-3.6367 2 2.6094 5.3359 5.6836 10.305 6.5664 0.42187 0.070312 0.83594-0.125 1.0469-0.49219 0.21094-0.36719 0.16406-0.82812-0.11719-1.1484-0.023437-0.027344-1.9414-2.2969-1.2891-5.8906 1.2227 3.5508 3.7461 9.2227 7.8945 11.551-0.03125 0.55859-0.14844 1.668-0.55078 3.0156-0.085937 0.13672-0.125 0.28516-0.13672 0.44531-1.3008 3.8906-5.0039 9.3281-15.547 9.3281-5.375 0-9.4414-1.418-12.086-4.2109-3.5664-3.7656-3.332-8.8477-3.332-8.8984v-0.011719c1.5898-2.7227 2.5-7.3203 2.6797-13.59z"></path>

    </svg>

  </div>

  <div class="menu">

    <div class="opener"><span></span><span></span><span></span></div>

  </div>

  <h2 class="name">Nguyễn Lâm Blog</h2>

  <div class="title">Ant Collector</div>

  <div class="actions">

    <div class="follow-info">

      <h2><a href="#"><span>12</span><small>Followers</small></a></h2>

      <h2><a href="#"><span>1000</span><small>Following</small></a></h2>

    </div>

    <div class="follow-btn">

      <button>Follow</button>

    </div>

  </div>

  <div class="desc">Morgan has collected ants since they were six years old and now has many dozen ants but none in their pants.</div>

</div>

Sau khi hoàn tất, bạn hãy chỉnh thành tên, mô tả... theo ý bạn nhé.

JAVASCRIPT CODE HIỆU ỨNG PHÁO HOA CHO BLOGSPOT

 Thật ra là Javascript code hiệu ứng pháo hoa này đã có rất nhiều người share đầy ở nhiều blog rồi, nhưng nay có bản comment hỏi trên blog mình nên mình viết một bài share luôn.

Đây là hiệu ứng nhìn rất thích mắt được rất nhiều các Blogger dùng để trang trí blog nhân dịp tết đến xuân về. Ngay cả mình cũng đang xài nè hihi.

Để thực hiện tạo một hiệu ứng này cho blogspot thì hết sức dễ dàng. Các bạn làm như sau:

Chèn trực tiếp vào vào trên thẻ </head>nhưng phải mã hóa code trước

<script type="text/javascript">

var bits=90;var speed=33;var bangs=7;var colours=new Array("#03f","#f03","#fff","#f7efa1","#0cf","#f93","#f0c","#fff");var bangheight=new Array();var intensity=new Array();var colour=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var swide=800;var shigh=600;var boddie;window.onload=function(){if(document.getElementById){var i;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(i=0;i<bangs;i++){write_fire(i);launch(i);setInterval('stepthrough('+i+')',speed);}}}

function write_fire(N){var i,rlef,rdow;stars[N+'r']=createDiv('|',12);boddie.appendChild(stars[N+'r']);for(i=bits*N;i<bits+bits*N;i++){stars[i]=createDiv('*',13);boddie.appendChild(stars[i]);}}

function createDiv(char,size){var div=document.createElement("div");div.style.font=size+"px monospace";div.style.position="absolute";div.style.backgroundColor="transparent";div.appendChild(document.createTextNode(char));return(div);}

function launch(N){colour[N]=Math.floor(Math.random()*colours.length);Xpos[N+"r"]=swide*0.5;Ypos[N+"r"]=shigh-5;bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];if(dX[N+"r"]>1.25)stars[N+"r"].firstChild.nodeValue="/";else if(dX[N+"r"]<-1.25)stars[N+"r"].firstChild.nodeValue="\\";else stars[N+"r"].firstChild.nodeValue="|";stars[N+"r"].style.color=colours[colour[N]];}

function bang(N){var i,Z,A=0;for(i=bits*N;i<bits+bits*N;i++){Z=stars[i].style;Z.left=Xpos[i]+"px";Z.top=Ypos[i]+"px";if(decay[i])decay[i]--;else A++;if(decay[i]==15)Z.fontSize="10px";else if(decay[i]==7)Z.fontSize="2px";else if(decay[i]==1)Z.visibility="hidden";Xpos[i]+=dX[i];Ypos[i]+=(dY[i]+=1.25/intensity[N]);}

if(A!=bits)setTimeout("bang("+N+")",speed);}

function stepthrough(N){var i,M,Z;var oldx=Xpos[N+"r"];var oldy=Ypos[N+"r"];Xpos[N+"r"]+=dX[N+"r"];Ypos[N+"r"]-=4;if(Ypos[N+"r"]<bangheight[N]){M=Math.floor(Math.random()*3*colours.length);intensity[N]=5+Math.random()*4;for(i=N*bits;i<bits+bits*N;i++){Xpos[i]=Xpos[N+"r"];Ypos[i]=Ypos[N+"r"];dY[i]=(Math.random()-0.5)*intensity[N];dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;decay[i]=25+Math.floor(Math.random()*25);Z=stars[i];if(M<colours.length)Z.style.color=colours[i%2?colour[N]:M];else if(M<2*colours.length)Z.style.color=colours[colour[N]];else Z.style.color=colours[i%colours.length];Z.style.fontSize="20px";Z.style.visibility="visible";}

bang(N);launch(N);}

stars[N+"r"].style.left=oldx+"px";stars[N+"r"].style.top=oldy+"px";}

window.onresize=set_width;function set_width(){var sw_min=999999;var sh_min=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)sw_min=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)sh_min=document.documentElement.clientHeight;}

if(typeof(self.innerWidth)!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<sw_min)sw_min=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<sh_min)sh_min=self.innerHeight;}

if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<sw_min)sw_min=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<sh_min)sh_min=document.body.clientHeight;}

if(sw_min==999999||sh_min==999999){sw_min=800;sh_min=600;}

swide=sw_min;shigh=sh_min;}

</script>

Hoặc có thể tạo một widget Javascript/HTML ở bố cục và chèn nó vào (không cần mã hóa code)

Đó đơn giản thôi, ai cũng làm được. Lưu ý là chèn ít Js hiệu ứng thôi nha, chèn cho lắm vào blog lag ráng chiệu.

Good Luck!

TẠO HIỆU ỨNG HOA MAI VÀNG CHO BLOGSPOT

 Năm mới sắp đến rồi, chắc hẳn những bạn làm blog như mình cũng đang đi kiếm một số background hay những hiệu ứng để trang trí thêm cho Blog. Qua tìm kiếm trên internet thì mình có tìm được hiệu ứng hoa mai rơi để làm tăng không khí tết cho Blog. Sau đây thì mình xin chia sẻ lại cho những bạn cũng đang đi tìm kiếm hiệu ứng này nhé!

Ngoài ra, các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng sao rơi,…Thì cũng từ một đoạn code này mà ra thôi.

TẠO HIỆU ỨNG HOA MAI VÀNG CHO BLOGSPOT

Vào Blog => Chủ đề => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ.

<script type='text/javascript'>

//<![CDATA[

var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU87xtkbKZqB5fMDfmKcFPyT_C2LlptrIl3QCHUQFC2fK9HOa98NGTTLH78XvIwry0YGN4jhTHeg-gn8aqWCYhC0lOq5VnktpJIrrblu1XBKefUtG1chQsVW7uDn0WcLZyddxnbp7XB9E/s1600/hoamai.png"; //the location of the snowflakes

var pictureWidth = 15; //the width of the snowflakes

var pictureHeight = 15; //the height of the snowflakes

var numFlakes = 10; //the number of snowflakes

var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)

var lrFlakes = 10; //the speed that the snowflakes should swing from side to side

if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes

for( var x = 0; x < numFlakes; x++ ) {

if( document.layers ) { //releave NS4 bug

document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');

} else {

document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');

}

}

//calculate initial positions (in portions of browser window size)

var xcoords = new Array(), ycoords = new Array(), snFlkTemp;

for( var x = 0; x < numFlakes; x++ ) {

xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );

do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );

} while( typeof( ycoords[snFlkTemp] ) == 'number' );

ycoords[snFlkTemp] = x / numFlakes;

}

//now animate

function flakeFall() {

if( !getRefToDivNest('snFlkDiv0') ) { return; }

var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;

//find screen settings for all variations. doing this every time allows for resizing and scrolling

if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {

if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {

scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {

if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }

if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {

if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {

if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }

}

//move the snowflakes to their new position

for( var x = 0; x < numFlakes; x++ ) {

if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }

var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }

if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;

divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;

divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;

ycoords[x] += downSpeed;

}

}

//DHTML handlers

function getRefToDivNest(divName) {

if( document.layers ) { return document.layers[divName]; } //NS4

if( document[divName] ) { return document[divName]; } //NS4 also

if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)

if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4

return false;

}

window.setInterval('flakeFall();',100);

//]]>

</script>

Lưu mẫu và xem kết quả.

TÙY CHỈNH

• Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi link hình ảnh này: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU87xtkbKZqB5fMDfmKcFPyT_C2LlptrIl3QCHUQFC2fK9HOa98NGTTLH78XvIwry0YGN4jhTHeg-gn8aqWCYhC0lOq5VnktpJIrrblu1XBKefUtG1chQsVW7uDn0WcLZyddxnbp7XB9E/s1600/hoamai.png thành link ảnh bạn cần.
• 15 Chiều rộng của bông.
• 15 Chiều cao của bông.
• 10 Số bông hoa xuất hiện cùng một lúc.
• 0,01 Tốc độ rơi của các bông hoa.
• 10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.

Khá đơn giản để có 1 hiệu ứng rơi như bạn mong muốn. Chúc các bạn có một năm mới hạnh phúc và tràn đầy niềm vui !!!