-->

Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspot

Mấy hôm nay rảnh nên ra bài nhiều cho mọi người đều là mình sưu tầm trên google về chỉnh sửa lại và chia sẽ cho mọi người cùng sữ dụng !!!

CÁCH SỬ DỤNG:

Bước 1: Các bạn dán toàn bộ code bên dưới vào ]]></b:skin>
svg { display: block; font: 100px 'Roboto condensed'; width: auto; max-width:600PX; height: auto; margin: 0 auto; }
.text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; }
.text-copy:nth-child(1) { stroke: #6699FF; animation-delay: -1; }
.text-copy:nth-child(2) { stroke: #6699FF; animation-delay: -2s; }
.text-copy:nth-child(3) { stroke: #0099FF; animation-delay: -3s; }
.text-copy:nth-child(4) { stroke: #0099FF; animation-delay: -4s;}
.text-copy:nth-child(5) { stroke: #FF99FF; animation-delay: -5s; }
@keyframes stroke-offset { 100% {stroke-dashoffset: -35%;} }
.cloud { padding:0; }
.cloud li {
    list-style: none;
    display: inline;
}
.cloud li>a { color :gray; }
.cloud li>a:hover { color : white; }
.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}
Bước 2. Chèn toàn bộ HTML sau vào nới bạn muốn:
<svg viewbox="0 0 960 180">
<symbol id="s-text"><text text-anchor="middle" x="50%" y="80%">LÊ BÁ LONG IT</text></symbol>
<g class="g-ants">
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</g>
</svg>

LỜI KẾT

Nếu có thắc mắc hoặc góp ý cmt ngay bên dưới nhé !!! Cảm ơn đã đọc <3

Viết bình luận (29)
Xếp theo

  1. Tôi là một nhân viên tư nhân cũng như một blogger
    Nam said : Hahah !!! =)

    Trả lờiXóa
  2. đổi temp đi , Thèn Đức share tùm lum nát bét r , admin Quang Thìn phải sài theme chất chứ :)

    Trả lờiXóa
  3. sáng má cho năm ngàn chiều má cho năm ngàn nữa là mười ngàn

    Trả lờiXóa
  4. nay anh long vào temp ò ó o r :V cơ mà cho em css phần popular post với

    Trả lờiXóa
    Trả lời
    1. /* Popular Posts */
      .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
      margin:0 0;
      padding:0 0;
      list-style:none;
      border:none;
      outline:none;
      }
      .PopularPosts .widget-content ul {
      margin: 0;
      list-style:none;
      counter-reset:num;
      border-left:1px solid #efefef;
      border-right:1px solid #efefef;
      }
      .PopularPosts .widget-content ul li img {
      display: block;
      width: 70px;
      height: 70px;
      float: left;
      }
      .PopularPosts .widget-content ul li {
      margin: 0 0 0 0 !important;
      counter-increment: num;
      position: relative;
      border-top:1px solid #efefef;
      padding: 8px 10px;
      }
      .PopularPosts ul li:last-child {
      border-bottom:1px solid #efefef;
      }
      .PopularPosts li:nth-child(odd) {
      background: #efefef;
      }
      .PopularPosts li:nth-child(even) {
      background: #f8f8f8;
      }
      .PopularPosts ul li .item-title a, .PopularPosts ul li a {
      font-weight: 500;
      text-decoration: none;
      color: $(link.hover.color);
      }
      .PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
      color: $(link.color);
      }
      .PopularPosts .item-title {
      line-height: 1.6;
      }
      .PopularPosts .item-thumbnail {
      float: left;
      margin: 3px 8px 0 0;
      }
      .PopularPosts .item-snippet {
      line-height: 1.7em;
      color: #888;
      font-size: 14px;
      }

      Xóa
  5. :v anh thay domain cài domain cũ là chuyển hướng cho dễ tìm
    em đã sửa lại liên kết nhá

    Trả lờiXóa