Hướng dẫn làm block nukeviet trang trí Giáng Sinh cho website của bạn như tạo tuyết rơi, khung cảnh chuông giáng sinh, cây thông….

Hòa cùng với không khí Giáng Sinh từ các con đường, cửa hàng, nhà hàng, trung tâm thương mại, văn hóa… cho tới trong các nhà thờ chúng ta cũng nên chuẩn bị cho website của mình một khung cảnh để cùng khách hàng đón Giáng Sinh online. VNCODE đã tạo ra một mẫu khung cảnh như sau, bạn có thể sử dụng nó để chèn vào website.
Chúng ta tạo 3 file block theo chuẩn nukviet 
global.tuyet_roi.ini

<?xml version="1.0" encoding="utf-8"?>
<block>
    <info>
        <name>Config TUYẾT RƠI</name>
        <author>.,Jsc</author>
        <website></website>
        <description></description>
    </info>
    <config>
        <company_name>Công ty cổ phần phát triển nguồn mở Việt Nam</company_name>
    </config>
	<datafunction>nv_tuyet_roi_config</datafunction>
    <submitfunction>nv_tuyet_roi_submit</submitfunction>
</block>

Xem Thêm : Hướng dẫn viết block vẽ bản đồ thống kê dịch bệnh covid tại Việt Nam

global.tuyet_roi.php

<?php

/**
 * @Project NUKEVIET 4.x
 * @Author VINADES.,JSC (contact@vinades.vn)
 * @Copyright (C) 2014 VINADES ., JSC. All rights reserved
 * @License GNU/GPL version 2 or any later version
 * @Createdate Jan 17, 2011 11:34:27 AM
 */

if (! defined('NV_MAINFILE')) {
    die('Stop!!!');
}

if (! nv_function_exists('nv_tuyet_roi')) {

    /**
     * nv_menu_theme_default_footer()
     *
     * @param mixed $block_config
     * @return
     */
    function nv_tuyet_roi($block_config)
    {
        global $global_config, $lang_global;

        if (file_exists(NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/blocks/global.tuyet_roi.tpl')) {
            $block_theme = $global_config['module_theme'];
        } elseif (file_exists(NV_ROOTDIR . '/themes/' . $global_config['site_theme'] . '/blocks/global.tuyet_roi.tpl')) {
            $block_theme = $global_config['site_theme'];
        } else {
            $block_theme = 'default';
        }

        $xtpl = new XTemplate('global.tuyet_roi.tpl', NV_ROOTDIR . '/themes/' . $block_theme . '/blocks');
        $xtpl->assign('LANG', $lang_global);
        $xtpl->assign('NV_BASE_SITEURL', NV_BASE_SITEURL);
        $xtpl->parse('main');
        return $xtpl->text('main');
    }
}

if (defined('NV_SYSTEM')) {
    $content = nv_tuyet_roi($block_config);
}

global.tuyet_roi.tpl

<!-- BEGIN: main -->
<style>
	/* customizable snowflake styling */
	.snowflake {
	  color: #fff;
	  font-size: 1em;
	  font-family: Arial;
	  text-shadow: 0 0 1px #000;
	}

	@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
	/* Demo Purpose Only*/
	.demo {
	  font-family: 'Raleway', sans-serif;
		color:#fff;
		display: block;
		margin: 0 auto;
		padding: 15px 0;
		text-align: center;
	}
	.demo a{
	  font-family: 'Raleway', sans-serif;
	color: #000;		
	}
	.position-absolute{
    position: fixed;
    bottom: 5px;
    left: 0;
    z-index: 9999999;
}
</style>

<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❄
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❄
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❄
  </div>
</div>
<div class="position-absolute">
<img src="https://www.asuzac-acm.com.vn/uploads/ong-gia-noel.gif" >
</div>
<!-- END: main -->

Sau khi tạo xong các file, tiến hành upload lên block của giao diện /themes/tên thư mục theme đang sử dụng/blocks  . Bắt đầu trải nghiệm hiệu ứng thôi nào
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút  để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.