Tạo hiệu ứng chữ đánh máy tuyệt đẹp cho blogspot

Chắc hẳn mọi người ở đây ai cũng sẽ yêu cái đẹp đúng không? Và mình cũng không phải ngoại lệ đâu. Chính vì thế mà khi nào thấy có một hiệu ứng đẹp, cách bố trí widget hay thậm chí chỉ là cách chọn font chữ, màu sắc sao cho đẹp, hài hòa thì cũng phải đi tham khảo blog/web này nọ chứ chẳng đùa. Mới đêm qua mình ghé thăm blog anh Nguyễn Anh Duy thì thấy cái header phần intro có hiệu ứng chữ đánh máy đẹp quá nên cũng đú đởn làm bên blog mình. Sáng nay ngủ dậy sẽ viết bài share cho các bạn đây. Live demo thì ngay trên phần intro blog mình nhé.

Tạo hiệu ứng chữ đánh máy tuyệt đẹp cho blogspot

Tạo hiệu ứng chữ đánh máy tuyệt đẹp

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn 2 đoạn Javascript sau trước
</body>
<script id='typist' language='javascript' type='text/javascript'>//<![CDATA[ // Generated by CoffeeScript 1.8.0 (function(){var c,b=function(e,f){return function(){return e.apply(f,arguments)}},a={}.hasOwnProperty,d=function(h,f){for(var e in f){if(a.call(f,e)){h[e]=f[e]}}function g(){this.constructor=h}g.prototype=f.prototype;h.prototype=new g();h.__super__=f.prototype;return h};c=(function(){function e(){this._fireEvent=b(this._fireEvent,this);this._empty=b(this._empty,this);this._each=b(this._each,this)}e.prototype._addEvent=function(g,i,h,f){if(f==null){f=false}return g.addEventListener(i,h,f)};e.prototype._forEach=function(m,j,k){var h,g,f;h=0;g=m.length;f=[];while(h<g){if(h in m){j.call(k,m[h],h,m)}f.push(h++)}return f};e.prototype._each=function(h,f,g){if(h){this._forEach(h,f,g);return h}};e.prototype._pass=function(g,f,h){if(f==null){f=[]}return function(){return g.apply(h,f)}};e.prototype._delay=function(h,g,i,f){if(f==null){f=[]}return setTimeout(this._pass(h,f,i),g)};e.prototype._periodical=function(g,i,h,f){if(f==null){f=[]}return setInterval(this._pass(g,f,h),i)};e.prototype._setHtml=function(g,f){return g.innerHTML=f};e.prototype._getHtml=function(f){return f.innerHTML};e.prototype._empty=function(f){return this._setHtml(f,"")};e.prototype._fireEvent=function(f,g){if(this.options[f]){return this.options[f].call(this,g,this.options)}};e.prototype._extend=function(f,h){var g,i;for(g in h){i=h[g];f[g]=i}return f};return e})();this.Typist=(function(f){d(e,f);function e(h,g){if(g==null){g={}}this.typeLetter=b(this.typeLetter,this);this.typeLetters=b(this.typeLetters,this);this.typeText=b(this.typeText,this);this.selectOffset=b(this.selectOffset,this);this.selectText=b(this.selectText,this);this.fetchVariations=b(this.fetchVariations,this);this.next=b(this.next,this);this.slide=b(this.slide,this);this.setupDefaults=b(this.setupDefaults,this);this.options={typist:h,letterSelectInterval:60,interval:3000,selectClassName:"selectedText"};this.options=this._extend(this.options,g);this.elements={typist:this.options.typist};this.offsets={current:{index:0,text:""}};if(this.elements.typist){this.setupDefaults()}}e.prototype.setupDefaults=function(){this.variations=this.fetchVariations(this.elements.typist);this.newText=[];return this.timer=this._periodical(this.slide,this.options.interval)};e.prototype.slide=function(g){this.offsets.current.text=this.variations[this.offsets.current.index];this.offsets.current.text=this.offsets.current.text.split("");this._each(this.offsets.current.text,this.selectText);this.offsets.current.index=this.next(this.offsets.current.index);this._delay((function(h){return function(){h.options.currentSlideIndex=h.offsets.current.index;return h.typeText(h.variations[h.offsets.current.index])}})(this),this.options.letterSelectInterval*this.offsets.current.text.length);if(this.variations.length<=this.offsets.current.index){this.offsets.current.index=0}else{if(this.offsets.current.index===0){this.offsets.current.index=this.variations.length}else{this.offsets.current.index=this.offsets.current.index}}return this.newText.length=0};e.prototype.next=function(g){return g=g+1};e.prototype.fetchVariations=function(g){var j,h,i;j=g.getAttribute("data-typist");h=this._getHtml(g);i=j.split(",");i.splice(0,0,h);return i};e.prototype.selectText=function(h,g){return this._delay((function(i){return function(){return i.selectOffset((i.offsets.current.text.length-g)-1)}})(this),g*this.options.letterSelectInterval)};e.prototype.selectOffset=function(j){var h,i,g;i=this.offsets.current.text;h=i.slice(j,i.length);h=h.join("");g=i.slice(0,j);g=g.join("");return this._setHtml(this.elements.typist,""+g+'<em class="'+this.options.selectClassName+'">'+h+"</em>")};e.prototype.typeText=function(g){this.typeTextSplit=g.split("");this._each(this.typeTextSplit,this.typeLetters);return this._fireEvent("onSlide",g)};e.prototype.typeLetters=function(h,g){clearInterval(this.timer);return this._delay((function(i){return function(){return i.typeLetter(h,g)}})(this),g*this.options.letterSelectInterval)};e.prototype.typeLetter=function(h,g){this._empty(this.elements.typist);this.newText.push(h);this._setHtml(this.elements.typist,this.newText.join(""));if(this.typeTextSplit.length===g+1){return this.timer=this._periodical(this.slide,this.options.interval)}};return e})(c)}).call(this); //]]></script> <script language='javascript' type='text/javascript'>(function () { var typist; typist = document.querySelector(&#39;#typist-element&#39;); new Typist(typist, { letterInterval: 60, textInterval: 3000 }); }.call(this)); </script>
Bước 3: Chèn đoạn code hiển thị chữ đánh máy vào nơi bạn muốn (cái này tùy mỗi bạn sẽ có những cách đặt để trang trí khác nhau nha nên mình không hướng dẫn chi tiết phải đặt ở đâu cho mỗi template đâu)
Đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp <span class='typist-text typist-blink' data-typist='và tương lai nhé...' id='typist-element'>vì hiện tại...</span>
Trong đó:
  • vì hiện tại...: chữ xuất hiện ngay lúc đầu
  • và tương lai nhé trong data-typist: chữ đánh máy khi vì hiện tại... mất đi
Bạn hãy tùy chỉnh theo ý thích của mình nhé.
Bước 4: Lưu template lại

Kết luận

Vậy là mình vừa hướng dẫn xong cho các bạn cách tạo hiệu ứng chữ đánh máy tuyệt đẹp cho blogspot rồi đó. Tuy là có dùng Javascript dài nhưng khi check speed thì nó chỉ trừ 1 điểm thôi nên không lo ngại lắm đâu. Ngoài blog tâm sự mình thì các bạn có thể ghé qua blog NAD để đọc những bài viết chất hơn nhé :)

26 nhận xét

  1. sao nó đánh có mấy chữ ở cuối vậy?

    Trả lờiXóa
    Trả lời
    1. Ông nhìn code bước 3 t chỉ để nó đánh mấy chữ cuối thôi mà. Ai muốn nó đánh cả đoạn thì chỉnh theo ý là đc mà.

      Xóa
    2. đúng là chỉ coi demo không nhìn code :v

      Xóa
    3. Tại cái này đánh vài chữ sẽ đẹp hơn đánh cả đoạn ấy mà :D

      Xóa
  2. All template áp dụng được chứ ông

    Trả lờiXóa
    Trả lời
    1. Đúng rồi, nó là hiệu ứng trang trí blog thôi mà nên mọi template áp dụng đc. Chỉ xem cách mọi người định đặt nó ở đâu cho đẹp thôi.

      Xóa
  3. Cái này trc em có thấy ở mấy cái temp nc ngoài, thấy đẹp mà ko cả buồn rip về luôn :v

    Trả lờiXóa
  4. Hay đó bác <3 lúc sáng thấy deep deep giờ lại có bài HD ^^

    Trả lờiXóa
    Trả lời
    1. E làm từ đêm qua rồi nhưng xong đi ngủ nên sáng mới post bài :D

      Xóa
  5. Sao vào trang bài viết lại không hiện nhỉ?

    Trả lờiXóa
    Trả lời
    1. Ừ đúng r. T để ở trang chủ thôi. Giới hạn js cả css ở các trang còn lại ấy mà.

      Xóa
    2. Sao bên bacsiwindows.com lâu lâu nó lại bị giật như giật kinh phong ấy nhở!?

      Xóa
    3. Cái gì mà giật giật hả ông?

      Xóa
  6. Quê anh ở Hà Nội đấy hả anh, vô bờ lốc thấy ảnh Hồ Gươm :O

    Trả lờiXóa
    Trả lời
    1. Ừ @@ a làm blog hầu như lần nào a cũng đề cập mà. Mà fb a cũng ghi a ở đâu mà :v

      Xóa
  7. Chú ko để hiện trên mobile nhỉ

    Trả lờiXóa
    Trả lời
    1. Vâng ạ, trên mobile e hạn chế hiệu ứng lắm để đỡ lag cả tốn 3G bạn đọc :D

      Xóa
  8. a Cường lm bài viết hướng dẫn tạo widget bài viết theo nhãn như của anh ik, như ngoài trang chủ blog này đó

    Trả lờiXóa
    Trả lời
    1. Okay e. Nếu hôm nay rảnh rảnh thì a viết bài cho nha.

      Xóa
  9. tem giống fb muốn chèn vô bìa được k anh

    Trả lờiXóa
    Trả lời
    1. Chèn vào đâu cũng đc e ạ miễn là mình biết cách chèn vì nó là text có hiệu ứng nên chèn vô đâu cũng đc.

      Xóa