FORMART THEME CAOLAC BLOG

MỘT SỐ THIẾT LẬP RIÊNG CHO TRANG CAOLACVC BLOGSPOT

Blogspot này được Caolac viết theo cảm xúc cá nhân, do đó việc chỉnh sửa lung tung, hôm này vui vẻ thích themes này, hôm sau cảm xúc khác lại thích themes khác, quá trình thay đổi themes qua lại gặp một số vấn đề này sinh, do đó Caolac tự đặt ra những quy tắc chuẩn hoá cho riêng mình

Những việc làm này mất thời gian và có thể đôi khi là không cần thiết, tuy nhiên thuộc về sở thích và cảm xúc thì chịu, ta thích thế nào ta làm thế ấy thôi, đó là cái hay của sự độc lập

---

1. Cài đặt MathJax cho blogspot

Một blog về toán thì không thể thiếu công thức toán. Tuy nhiên chuyển themes qua lại sẽ mất đi đoạn code liên quan đến công thức toán, nên sau mỗi lần chuyển themes, chỉ cần copy đoạn script MathJax sau vào là xong

<!-- MathJax -->
    <script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
    MathJax.Hub.Config({
        extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        },
        "HTML-CSS": { availableFonts: ["TeX"] }
    });
    </script>

Copy vào đâu á? Đọc kỹ hơn ở bài viết dưới

CÔNG THỨC TOÁN CHO BLOGSPOT

---

2. Cài đặt W3.CSS

Để có được những màu sắc rực rõ cho trang blog thì ta nên xài một thư viện CSS có sẵn, sẽ dễ dàng và đẹp hơn, tự viết CSS cũng ok đấy, nhưng kiểu không chuyên như Caolac, hơi chua

Thư việc CSS của W3 đối với Caolac là quá đẹp, đa số trên chính trang này là CSS của thằng W3 này

Thêm code sau vào sau thẻ head

<link href='https://www.w3schools.com/w3css/4/w3.css' rel='stylesheet'/>

---

3. Cài dặt Bootstrap

Này cũng là một thư viện CSS, do có nhiều cái trên W3 không thích, thích cái khác nên lại thêm cái thằng này vào

Mà hình như cài nhiều CSS quá thì load trang web sẽ hơi chậm, kệ nhỉ, bản thân thấy thú vị là được

Thêm code sau vào sau thẻ head

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>

---

4. CAOLAC CSS

Đây là phần CSS riêng của bản thân

/* ĐỊNH DẠNG LẠI CÁC THẺ CƠ BẢN */  
h1, h2, h3, h4, h5, h6{
    /* color: green!important; */  
    /* text-shadow: 2px 2px 5px gray; */
    padding: 10px 0px 10px 0px;
} 

p{
  text-align: justify;
  color: black;
}

code{
font-family:Consolas,"courier new";
font-size:16px;
color:crimson;
background-color:#f1f1f1;
padding-left:4px;
padding-right:4px;
font-size:100%
}

pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 15px;
    margin: 20px 0;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre;
    tab-size: 4;
}
pre::-webkit-scrollbar {
    height: 8px;
}
pre::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

button{
  background-color: green;/* #58257b */
  border: none;
  color: white;
  padding: 15px 32px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  opacity: 0.8;
}

button:hover{
    opacity: 1.0;
}

table{
    width: 100%;
    border: 1px solid green;
    border-collapse: collapse;
}
th,td{
   border: 1px solid green;
   padding: 5px 10px;
}
th{
    color: green;
    background: LightGray;
}
/* MỘT SỐ CLASS RIÊNG */
.dn{
  background-color: #e6f7ff; /* Màu xanh nhạt */
  border: 1px solid #91d5ff; /* Viền xanh đậm hơn một chút */
  border-radius: 10px; /* Bo tròn góc */
  padding: 20px; /* Khoảng cách bên trong */
  margin: 20px auto; /* Canh giữa với khoảng cách bên ngoài */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Hiệu ứng đổ bóng */
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333; /* Màu chữ đậm vừa phải */
  line-height: 1.6; /* Khoảng cách dòng */
  max-width: 700px; /* Chiều rộng tối đa */
  transition: transform 0.3s, box-shadow 0.3s; /* Hiệu ứng hover mượt mà */
}

.dn-title {
    font-weight: bold;
    color: #4CAF50; /* Màu tiêu đề */
    margin-bottom: 5px;
}

.bt{
  padding:10px;
  margin-top:16px;
  margin-bottom:16px;
  color:#000!important;
  background-color:#f1f1f1!important;
  border:1px solid #ccc!important
}
.dl{
  background-color: #FFEBEE; /* Màu đỏ nhạt */
  border: 1px solid #F44336; /* Viền đỏ đậm hơn một chút */
  border-radius: 10px; /* Bo tròn góc */
  padding: 20px; /* Khoảng cách bên trong */
  margin: 20px auto; /* Canh giữa với khoảng cách bên ngoài */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Hiệu ứng đổ bóng */
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333; /* Màu chữ đậm vừa phải */
  line-height: 1.6; /* Khoảng cách dòng */
  max-width: 700px; /* Chiều rộng tối đa */
  transition: transform 0.3s, box-shadow 0.3s; /* Hiệu ứng hover mượt mà */
}

.dl-title {
    font-weight: bold;
    color: #D32F2F; /* Màu tiêu đề */
    margin-bottom: 5px;
}

.cao-link{
    background: #88B04B;
    margin: 5px;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
    color: black!important;
}
.cao-link:hover{
    background: #34568B;
    color: white!important;
}

.problem-box {
    background-color: #e6f7ff; /* Màu xanh nhạt */
    border: 1px solid #91d5ff; /* Viền xanh đậm hơn một chút */
    border-radius: 10px; /* Bo tròn góc */
    padding: 20px; /* Khoảng cách bên trong */
    margin: 20px auto; /* Canh giữa với khoảng cách bên ngoài */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Hiệu ứng đổ bóng */
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333; /* Màu chữ đậm vừa phải */
    line-height: 1.6; /* Khoảng cách dòng */
    max-width: 700px; /* Chiều rộng tối đa */
    transition: transform 0.3s, box-shadow 0.3s; /* Hiệu ứng hover mượt mà */
}

.problem-title {
    font-weight: bold;
    color: #4CAF50; /* Màu tiêu đề */
    margin-bottom: 5px;
}

.problem-box p {
    margin: 0;
}

.problem-box:hover {
    transform: translateY(-5px); /* Hiệu ứng nhấc khung khi hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Đổ bóng lớn hơn khi hover */
}

---

Keyword: my style, mystyle