Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

LongAnIT 12/29/2018 09:59:00 SA Bình luận
Đây là hiệu ứng tạo chữ chạy trên thanh tiêu đề cho Blog của trang chạy qua lại trông rất bắt mắt, với đoạn code tôi chia sẻ bên dưới sẽ giúp cho các bạn thực hiện được hiệu ứng ấy một cách dễ dàng trên Blogger.
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

Thật ra thì code kiểu này có từ rất lâu rồi, nhiều bạn chuyên về thiết kế Web hoặc Blog thì nó quá đơn giản rồi đúng không nào. Tuy nhiên đối với những bạn mới bước vào nghề thì hơi bị khó đấy. Qua đây  mình cũng xin giới thiệu lại cho một số bạn mới đến với Blogger cũng như những bạn mới học thiết kế Web như mình đoạn coe này trên nền tản CSS và HTML. Các bạn thực hiện theo các bước sau nhé.


  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Tìm đến thẻ </head> và thêm đoạn code  bên dưới vào ngay bên trên nó


<script type="text/javascript">
var txt="Chào mừng bạn đến với Longanit.com. Chúc các bạn có những giây phút vui vẻ";
var espera=150;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

3. Bạn thay thế dòng text: Chào mừng bạn đến với longanit.com thành nội dung mà bạn muốn hiển thị trên thanh chạy.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn thủ thuật tạo chữ chạy trên thanh tiêu đề cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ giúp làm đẹp thêm cho 'ngôi nhà' của bạn.

Code tạo nút Demo, Download, Xem mẫu, Tải về, Mua ngay đẹp cho Blogger

LongAnIT 11/15/2018 08:53:00 SA Bình luận
Với các blogger lĩnh vực về  game, phần mềm, chia sẻ tài liệu... thì thường chia sẻ những đường link để người dùng download hay xem demo.

Việc làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và làm đẹp blog của bạn. Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt.
Button Demo, Download, Xem mẫu, Tải về, Mua ngay
Button Demo, Download, Xem mẫu, Tải về, Mua ngay

Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với thư viện Bootstrap, Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích. Trong bài này tôi sẽ hướng dẫn cho các bạn cách tạo bộ icon này với các bước thực hiện như bên dưới.

Bước 1: Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Nếu blog của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên

Bước 3: Thêm đoạn CSS này trước thẻ đóng ]]></b:skin> hoặc </style> trong Template của bạn

a:active{position:relative;top:1px;left:1px}
#longanit-button{text-align:center}
#longanit-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -4px rgba(0,0,0,0.15);box-shadow:inset 0 -4px rgba(0,0,0,0.15);color:#fff;max-width:220px;line-height:30px;font-size:16px;text-transform: uppercase;margin:10px}
#longanit-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.demo-button:before{content:'\f1d9';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.download-button:before{content:'\f019';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.buy-button:before{content:'\f07a';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.blue{background:#3498db;}
.green{background:#2ecc71}
.red{background:#e74c3c}
.orange{background:#e8930c}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}

Chú ý:  Bạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome:

http://fontawesome.io/icons/
- Tôi đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
- Và thay thế tên demo-button, download-button,buy-button bằng tên mà bạn thích khi bạn thêm icon vào.

Bước 4: Save Template (Lưu mẫu).

Bước 5: Khi viết bài viết, để chèn nút Demo, Download, Xem mẫu, Tải về, Mua ngay thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng.
<div id="longanit-button">
<a href="https://www.longanit.com/" class="green demo-button" target="_blank" rel="nofollow">Xem mẫu</a><a href="https://www.longanit.com/" class="orange download-button" target="_blank" rel="nofollow">Tải về</a><a href="https://www.longanit.com/" class="blue buy-button" target="_blank" rel="nofollow">Mua ngay</a></div>

Thay đường link https://www.longanit.com/ thành đường link Download của bạn.