Tổng hợp những code tùy chỉnh cho blogspot sinh động

Khi tạo một trang blog, bạn luôn muốn nó nhìn giống như một trang web chuyên nghiệp. Để làm điều đó bạn phải hiểu biết về các loại mã code.  Còn đối với những người không biết hoặc biết một ít về mã code thì cần phải sử dụng những code có sẵn để trang trí cho blog của mình. Dưới đây một số code được tổng hợp để trang trí cho blog của bạn nhìn đẹp và chuyên nghiệp.

Code hiện hình chân trang: đây là code hiện những hình các ngày lễ lớn, hoặc các sự kiện lớn làm cho trang blog nhìn thật hấp dẫn. Bạn chỉ việc copy đoạn code này dán vào trước </body> trong phần chỉnh sửa HMTL. Bạn nhớ thay dòng chữ màu đó bằng liên kết trang và hình ảnh của bạn.

Code:

<script type='text/javascript'>//<![CDATA[document.write('<div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:220px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2nDEoa36C_sIPTS4ydVLJBm0fDL0xhfIojNtZgdFBfI2kYxKvKPgWTzwaRgtIUZsSmCNZAX1oBEuKQXD6Y9uylI2sZbNFVM54gNYE3jiAIQCtFL9PYgOHdVf_qvKbYBacK304ixOVEdi/w640-h90/trungthu.png) repeat-x bottom left;"></div><a href="https://chiasethongtinso7.blogspot.com/search/label/C%C3%A1ch%20l%C3%A0m%20b%C3%A1nh?&max-results=6" target="_blank"><img style="position:fixed;z-index:9999;bottom:19px;left:280px" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJX58YSBSAYIOp3GXMmwk4VuaPLVJfLGL_VNxZPbHtmpbpT6YHCsrXsXte4yqe5654MybVR5frmw25iE35cTIR_eg-UlYK0DYHHihzOepLmPX7F_zTERYzxWm7N7On54AbDsmTmn1sCVC/w310-h320/trangtron.png"/>');var no=100,hidesnowtime=0,snowdistance="pageheight",ie4up=document.all?1:0,ns6up=document.getElementById&&!document.all?1:0;function iecompattest(){return document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body}var dx,xp,yp,am,stx,sty,i,doc_width=800,doc_height=600;ns6up?(doc_width=self.innerWidth,doc_height=self.innerHeight):ie4up&&(doc_width=iecompattest().clientWidth,doc_height=iecompattest().clientHeight);dx=[];xp=[];yp=[];am=[];stx=[];sty=[];for(i=0;i<no;++i)dx[i]=0,xp[i]=Math.random()*(doc_width-50),yp[i]=Math.random()*doc_height,am[i]=20*Math.random(),stx[i]=0.02+Math.random()/10,sty[i]=0.7+Math.random(),(ie4up||ns6up)&&document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"></div>');//]]> </script>

Code click chuột phải xuất hiện hình trái tim: khi click chuột phải tới đâu bạn sẽ nhận được màn thả tim đầy ấn tượng.

Code:

<script type='text/javascript'>

          //<![CDATA[

                   !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

          /]]>

</script>

Code tạo hình giánh sinh tuyết rơi: mùa noel đã tới, cần tạo khung cảnh tuyết rơi trắng xóa để đón noel.

Code:

<script type="text/javascript" src="https://itexpress.vn/js/noel.js"></script>

<script type="text/javascript" src="https://itexpress.vn/js/noel_black.js"></script>

<script type="text/javascript" src="https://itexpress.vn/js/noel_black.js"></script>                            (Màu đen, dùng cho nền màu trắng hoặc sáng)

<script type="text/javascript" src="https://itexpress.vn/js/noel_red.js"></script>  (Màu đỏ)

<script type="text/javascript" src="https://itexpress.vn/js/noel_yellow.js"></script> (Màu vàng)

Tạo hiệu ứng tuyết rơi và ông già noel ngoài việc tạo hiệu ứng tuyết rơi thì code dưới đây kết hợp thêm ông già noel chạy quanh màn hình trong giai điệu âm nhạc giáng sinh. Bạn có thể chỉnh hình và chọn những bài nhạc mình yêu thích khi thay liên kết ở dòng chữ màu đỏ.

Code:

<script type="text/javascript" src="js/snow.js"></script>

<div id="closeit" style="border: 0 !important;"><script type="text/javascript">

var textSpeed = 2;

var contentWidth;

var contentHeight;

var xMax;

var yMax;

var xPos = 0;

var yPos = 0;

var xDir = 'right';

var yDir = 'down';

function initializeText(){

if (typeof window.innerWidth != 'undefined'){

xMax = window.innerWidth;yMax = window.innerHeight;

}

elseif (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)

{

xMax = document.documentElement.clientWidth;

yMax = document.documentElement.clientHeight;

}

else

{

xMax = document.getElementsByTagName('body')[0].clientWidth;

yMax = document.getElementsByTagName('body')0].clientHeight;

}

var supertext = document.getElementById('supertext');

contentWidth = supertext.offsetWidth;

contentHeight = supertext.offsetHeight;

setTimeout('moveText()', 400);

}

function moveText(){

var supertext = document.getElementById('supertext');

calculatePosition();supertext.style.left = xPos + document.body.scrollLeft + "px";supertext.style.top = yPos + document.body.scrollTop + "px";

animatetext = setTimeout('moveText()', 20);

}

function calculatePosition()

{

if (xDir == "right")

{

if (xPos > (xMax - contentWidth - textSpeed))

{

xDir = "left";

}

}

elseif (xDir == "left")

{

if (xPos < (0 + textSpeed))

{

xDir = "right";

}

}

if (yDir == "down")

{

if (yPos > (yMax - contentHeight - textSpeed))

{

yDir = "up";

}

}

elseif (yDir == "up")

{

if (yPos < (0 + textSpeed))

{

yDir = "down";

}

}

if (xDir == "right")

{

xPos = xPos + textSpeed;

}

elseif (xDir == "left")

{

xPos = xPos - textSpeed;

}

else{xPos = xPos;

}

if (yDir == "down")

{

yPos = yPos + textSpeed;

}

elseif (yDir == "up")

{

yPos = yPos - textSpeed;

}

else{yPos = yPos;

}

}

setTimeout('initializeText()', 700);

function closebandera()

{

div = document.getElementById('closeit');

div.style.display='none';

}

setTimeout(closebandera, 13000);

</script><span id="supertext" style="position:absolute;left:0;top:0;color:#FF0;text-align:center;z-index:9999999999999"><b>MERRY CHRISTMAS!!!</b><br><br><img src="http://hocwebgiare.com/noel/Ong-gia-Noel.gif" alt=""></span>

 </div>

 <object data="http://hocwebgiare.com/noel/Jingle_Bells.mp3" width="0" height="0" __idm_frm__="3008">

  <param name="filename" value="http://hocwebgiare.com/noel/Jingle_Bells.mp3">

  <param name="autostart" value="1">

  <param name="playcount" value="false">

 </object>

Code loại bỏ bài recent post ở trang chủ: loại bỏ những bài viết gần đây để nhìn cho trang blog thật chuyên nghiệp như trang web. Dán đoạn code vào trước </style>  trong phần chỉnh sửa HTML, thế là mọi thứ đã hoàn thành. Chữ màu đỏ là id phần homepage của blog, nếu đúng thì khỏi đổi tên.

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

#Blog1 {

display:none;

visibility:hidden;

}

</b:if>

Code hiệu ứng làm lồng đèn rơi: đón trung thu với những chiếc lồng đèn rơi khi mở trang blog lên nhìn thật thích thú

Code:

<script type='text/javascript'>

//<![CDATA[

var pictureSrc ="https://i.imgur.com/kWuhAtG.png"; //the location of the snowflakes

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

var pictureHeight = 50; //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 = 6; }

//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>     

Code cho thanh cuộn menu cố định: khi kéo xuống xem bài viết thanh menu vẫn được giữ cố định để bạn có thể xem được những mục khác. Bạn dán đoạn code trong bảng này vào trước ]]</b:skin>. Và trong phần HTML, bạn kiếm nơi muốn cố định dán đoạn code này. <div id='navigation'>  nơi  chứa menu </div>

Code:

<script>function handleScroll(){if(window.XMLHttpRequest){var offset=window.pageYOffset?

window.pageYOffset:document.documentElement.scrollTop;document.getElementById(&#39;navigation&#39;).className=(offset&gt;104?

&#39;fixed&#39;:&#39;&#39;)}}if(window.addEventListener)

{window.addEventListener(&#39;scroll&#39;,handleScroll,false)}else{window.attachEvent(&#39;onscroll&#39;,handleScroll)} </script>

#navigation.fixed{position:fixed; top:0px; left:47px; z-index:100} 

Code popup bên trái màn hình: khi bạn cần ai đó biết đến về một sự kiện hay một trang muốn quảng cáo thì đoạn code này sẽ giúp gây sự chú ý bởi ánh mắt của mọi người. Bạn nhớ thay dòng chữ màu đỏ bằng liên kết của bạn

Code:

<script type="text/javascript">

function hide_float_left() {

    var content = document.getElementById('float_content_left');

    var hide = document.getElementById('hide_float_left');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_left{border: 1px solid #01AEF0;}

#hide_float_left {text-align:left; font-size: 11px;}

#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}

</style>

<div class="float-ck" style="left: 0px" >

<div id="hide_float_left">

<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>

<div id="float_content_left">

<!-- Start quang cao-->

  <a href="https://chiasethongtinso7.blogspot.com/2021/09/traisayrim.html" taget="_blank" ><img src="https://i.imgur.com/HTEajvk.png" width="250" height="200" alt="trái say rim" /></a>

<!-- End quang cao -->

</div>

</div>

Code info hay note cho blogger: khi bài viết cần tạo sự chú ý hay tạo điểm nhấn thì nó là một công cụ hữu hiệu. Tìm đến dòng  ]]></b:skin> trong chỉnh sửa HTMLvà thêm đoạn code dưới vào trên thẻ vừa tìm được. Khi soạn thảo bài viết bạn cho đoạn code vào nội dung muốn ghi chú. 

<div class="info">Đoạn văn muốn nổi bật</div>

Code:

.info {

    background: #F8E38D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMIPOiRJT7UA8-wME0fKrLALFN2b36Fhzt6b5MsPb95TXEN8MACrYz-JCuRgFsCTOeMcXkaiALxsDA8ITFWCFsZvoUYswH9sATIVJJC6SbZHNyGIjRXZQqdBoUJIlLBsx7RLI89BmfO8/s1600/info.png) no-repeat 12px 8px;

    color: #222;

    line-height: 22px;

    min-height: 38px;

    padding: 10px 12px 12px 68px;

    margin: 5px 0;

}

Code thêm ruồi bò trên bài viết blogspot: khi chép đoạn code dưới đây vào </body> trong phần chỉnh sửa HTML, khi mở bài viết lên sẽ xuất hiện con rùi bò qua bò lại.

Code:

<!-- Thêm ruồi -->

<script src='https://cdn.staticaly.com/gh/dautoblogger/bootstrap/master/ruoi-bo-blog.js' type='text/javascript'/>

<!-- Hết ruồi -->

Trên đây là một số code tổng hợp được, giúp cho bạn tùy chỉnh giao diện trang blog nhìn cho đẹp, sinh động và chuyên nghiệp.