Một Vài Đoạn Code Dán Hình Ảnh Động Vào Blog Phần 2

Thật lâu rồi Giaro không có gì để "trình diễn" trên blog quèn của mình , chỉ làm cái việc đọc báo và xem thời sự linh tinh ! hôm nay mùng 6 tết con rắn! vừa mới chèn vài chai bia vào cái bụng và một dĩa mồi khá chất lượng , do bà xã của Giaro đảm nhận vai Tỳ nữ (Bà xã của Giaro rất xuất sắc trong vai trò nầy - thật là cảm ơn ông Trời!). Một buổi chiều say, tự nhiên nổi hứng ngang hong muốn viết một cái gì đó..., mà viết gì bây giờ?! - thôi thì phóng đại vài dòng thủ thuật hình ảnh lặt vặt cho vui, biết đâu được, vài...chục năm sau nhờ cái sự cống hiến vớ vẫn nầy mà Giaro được phong danh hiệu ' Lão hiệp sĩ CNTT' thì sao!? mới nghĩ tới đây thôi mà đả cảm thấy ê răng rồi - không biết có bạn nào dũng cảm Vote cho Giaro một phiếu không nhỉ!? lan man tự sướng nảy giờ mà quên mất vào chủ đề chính. Về các đoạn code mà Giaro giới thiệu thì có cái 'chính chủ' có cái không! một vài đoạn code trong số nầy cũng thuộc dạng tào lao thiên địa xem như sự 'sáng tạo' dỡ hơi! nếu có lở xem thì mong các Bạn thông cảm cho cái sự hết "xí quách" nầy của Giaro!...

 
* FAVICON  ĐỘNG CHO THANH TIÊU ĐỀ BLOG

   Vụ nầy xem ra nó xưa như trái đất! tuy vậy thế nào cũng có bạn chưa biết. Vậy thì xem để thực hiện nhá.
  


Lưu ý:  Trước khi làm bất cứ thủ thuật nào nhằm để thay đổi Template mặc định của blog, bạn nên thực hiện sao lưu mẫu template của bạn- để có thể dể dàng phục hồi khi gặp sự cố bị lổi hoặc có sai xót khi thực hiện.

Hình trên là cái Favicon nằm trong thanh tiêu đề của blog Giaro. Nếu bạn muốn thực hiện thì vào TRANG WEBSITE NẦY để lựa chọn cho mình icon mà bạn thấy thích - rồi tải lưu về máy tính. Sau đó có thể chèn trực tiếp hình icon nầy vào blog, trong khung 'Favicon' nằm trong phần 'Bố cục'.
Hoặc có thể chèn vào Tempelate ( sau khi bạn đã upload icon lên một host free nào đó để lấy được link trực tiếp ).
Sau khi đả có link, bạn vào Mẩu > Chỉnh sửa HTML >  Nhấn cặp phím: Ctrl+F  để mở ra thanh tìm kiếm của trình duyệt. Tìm đoạn code như bên dưới:



                        <title><data:blog.pageTitle/></title>


Chèn thêm vào bên dưới đoạn code đả tìm bằng đoạn code:

<link href='Link Favicon của bạn' rel='shortcut icon' type='image/gif'/>

Và nhấn Lưu Mẫu, thế là xong!

Thêm một mẩu Favicon Khác cũng khá thú vị :



Có thể thấy Favicon nầy có chử chạy và cả hình ảnh nằm trong đó.

Bạn truy cập vào  TRANG NẦY để tạo cho mình một cái icon "2 trong 1" nhá.


* CHÈN BỘ HÌNH MẶT CƯỜI VÀO KHUNG COMMENTS.


Phải nói rằng thủ thuật nầy khá là rắc rối, nhất là đối với ông lão 'tay không bắt giặc' như Giaro tui. Thôi thì tinh giản bớt cho nó lành (nói theo kiểu các bạn trẻ), Yes I can - Chúng ta có thể làm nhửng gì mình thấy thích miễn là không phạm luật là tốt rồi phải không các bạn?



Vì code nầy khá dài nên phải thực hiện một cách cẩn trọng và chính xác

Bạn vào Mẩu > Chỉnh sửa HTML > nhấn vào ô Mở rộng Mẩu tiện ích.  Nhấn cặp phím: Ctrl+F  để mở ra thanh tìm kiếm của trình duyệt. Tìm đoạn thẻ Đóng: </body> trong Template . Chép đoạn code bên dưới rồi chèn vào trên thẻ đóng nầy:





Và bấm Lưu mẩu, vậy là xong!

CẬP NHẬT:

Nếu bạn chưa thấy mặt cười xuất hiện, có thể mẩu template của bạn chưa có jQuery. Vậy hảy chèn thêm đoạn code bên dưới vào trên thẻ đóng   </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

                                 Và bấm Lưu mẩu.



* TĂNG ĐỘ RỘNG KHUNG COMMENTS - CHÈN HÌNH ẢNH  VÀO PHÍA TRÊN BỘ MẶT CƯỜI.


Đoạn code nầy nhằm mục đích tăng độ rộng của khung comment, làm giảm bớt độ 'dầy' của cái đám mặt cười ngự trị trên khung nhận xét, cùng lúc có thể chèn một ảnh có thể mang ý nghĩa: minh họa, giải thích, hướng dẩn, kêu gọi...Hay gì gì đó tùy theo sự sáng tạo của bạn trên bộ mặt cười. (trường hợp của Giaro là dòng chử 'CLICK ON EMOTIONS!').

Bạn tìm thẻ   ]]></b:skin>  trong template và chèn vào trên nó đoạn code sau:

.comment-form{
min-width: 100% !important;background: url(Link ảnh của bạn-chiều cao của ảnh không nên quá 50px)no-repeat right top;}

Chỉnh sửa độ rộng 100% của khung comment theo hướng tăng hay giảm theo ý của bạn. (Giá trị 100% là khung comment có độ rộng bằng với khung bài viết).

Nếu không cần chèn thêm ảnh, thì cắt bỏ đoạn màu xanh lam là được.

Và bấm Lưu mẩu, thế là xong!



* DÁN CHỬ KÝ BẰNG HÌNH ẢNH VÀO CUỐI MỖI BÀI VIẾT.



Thông thường khi muốn chèn hay dán chử ký, dấu hiệu, biểu tượng riêng bằng hình ảnh vào cuối mỗi bài viết, thì ta hay dùng mã HTML hay dùng nút chèn hình ảnh để thêm chử ký vào cuối mỗi bài viết của mình. Làm vậy khá là bất tiện, vì khi đổi ý muốn thay thế chử ký hay gì gì khác cho phù hợp hơn - thì phải quay lại từng bài viết trước để thay code hay chử ký mới.

Sao không chèn một lần cho tất cả! để khi bạn đăng bài và bấm nút xuất bản thì tự động chử ký đó sẻ được dán vào cuối ở mổi bài - kể cả các bài viết củ của bạn, và thật là dễ dàng thay đổi khi cần!

Nếu bạn muốn làm thủ thuật nầy thì hãy thực hiện như sau:


1. Trước tiên bạn phải có ảnh của chử ký đó (up lên host để lấy link trực tiếp nhá)
2. Nếu chưa có thì bạn có thể click Vào Đây để nhờ anh bạn Hoàng Dũng chủ blog dunghennessy giúp tạo giùm chử ký cho bạn.
3. Còn muốn tự mình thực hiện thì nhấn vào Tại Đây rồi tự làm cho mình một cái. (nên dùng hình của mình up lên để có thể chỉnh hình ngay với với chử chạy). Xong tải về up lấy link .

4. Kế tiếp truy nhập Mẫu > Chỉnh sửa HTML> đánh dấu chọn  Mở rộng mẫu tiện ích. Tìm đoạn code:


                                    <div class='post-footer'>


5. Chèn đoạn code dưới đây vào trên đoạn code vừa tìm được( nếu bài viết của bạn KHÔNG sử dụng phần ngắt nhảy [đọc thêm] ):


<div class='signature'><img alt='' class='signature' src='Link hình của bạn'/></div>

    
6. Chèn đoạn code dưới đây vào trên đoạn code vừa tìm được( nếu các bài viết của bạn sử dụng phần ngắt nhảy [đọc thêm] ):

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='signature'><img alt='' class='signature' src='Link hình của bạn'/></div>

</b:if>        



7. Và bấm Lưu mẫu. Thế là xong!


NẾU trong blog của bạn có sử dụng tiện ích Linkwithin (bài viết liên quan), thì bạn làm như sau:

Truy nhập Mẫu > Chỉnh sửa HTML> đánh dấu chọn  Mở rộng mẫu tiện ích. Tìm đoạn code:

                  <data:post.body/>

Chèn đoạn đoạn code dưới đây vào phía dưới đoạn code đã tìm:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='signature'><img alt='' class='signature' src='
Link hình của bạn'/></div>
</b:if>


Và nhấn lưu mẫu.




                                   Chúc các bạn thành công.
                                                                                       



Add a comment

21 nhận xét:

hoài thương nói...

HT xin chào Gario. Ghé nhà G Hoài Thương có học cách đưa mặt cười vào ô commet như G có hướng dẫn ở trên, nhưng mà HT không thấy gì hiện gì hết thì phải làm sao nữa đây ạ? G chỉ cho HT với ạ.

GiaRo nói...

Bạn TH hảy vào xem lại bài viết, có cập nhật dành cho bạn vào cuối bài. :-?

hoài thương nói...

Dạ, Hoài Thương làm được rồi ạ. Cảm ơn GiaRo đã giúp đỡ x-)

hoài thương nói...

HoaiThuong làm được chữ ký rồi, cảm ơn bài viết của Giaro nhiều. Chúc Giaro một ngày vui!

GiaRo nói...

Chúc mừng Hoài thương, Vui vẽ nhá! :-s

hoài thương nói...

Ghé thăm nhà GiaRo chúc bạn ngày đầu tuần thuận lợi, an nhiên :-s

GiaRo nói...

Cảm ơn Thương Hoài ghé thăm GiaRo, chúc bạn thật vui nhá! :-#

hoài thương nói...

HT ghé thăm GiaRo, chúc GiaRo buổi trưa mát đây ạ :-d

Hdnz nói...

Làm hộ chữ ký cũng là một động tác kéo khách vô blog cũng như có quà cáp nhân ngày lễ tết.Cái trang Gif-mania.net thì xưa như trái đất =p~

GiaRo nói...

Cám ơn bạn Dautocrazy ghé thăm blog, Giaro cũng đả có tuổi rồi. Vì vậy có lẽ chỉ thích hợp với dạng "đồ cổ" thôi bạn ạh!

Hdnz nói...

Bác Giaro ơi bác hiểu sai ý em rùi,em có bảo bác đâu.Nhân tiện cũng xin lỗi bác vì ko ghi nguồn bài của bác(em cứ hay cẩu thả vậy) ngại quá $-)

GiaRo nói...

À cũng không có gì đâu, Giaro rất vui vì bạn đả có ý như vậy! Nhân tiện nhắc bạn về việc Giaro thấy bạn đả lấy nhiều ảnh bên Achro-ảnh động(cũng của giaro) về để đăng lại trên blog của mình - việc làm nầy là điều bình thường(giaro củng làm vậy)điều đáng nói ở đây là bạn không tải ảnh mà lại chép link của ảnh(photobutket-imgur) về đăng lại trên blog của mình làm cho cái băng thông của Giaro xì hết hơi giờ chỉ còn số âm! Vì vậy bạn nhanh chóng túm số ảnh động đó lại, úp lên host bạn tự tạo để mà sử dụng. Nếu bạn làm điều nầy thì Giaro xin cảm ơn bạn nhá!

Hdnz nói...

Ảnh của bác thuộc link photobucket và imgur em xóa hết bài rùi nhé chỉ giữ lại link blog vì nó ko giới hạn băng thông
Em xin lại bác sau

GiaRo nói...

Bạn hảy cảm thông cho Giaro vì cái sự bất đắt dĩ ngoài ý muốn nầy( thật ra bạn để link như thế cũng tốt cho giaro, nhưng vì cái băng thông free nó chịu không thấu!...)- Giaro xin ghi nhận thiện chí của bạn,và cố gắng tốn công chút xíu bạn nhá, còn về hình ảnh của blog thì bạn cứ vô tư thoải mái đi nhá! :))

Phan Văn Tống nói...

rất hay

Phan Văn Tống nói...

rất hay

inbaobigiay.vn nói...

Giaro nhận đệ tử hum ạ

Unknown nói...

hay đấy

Thanh nói...

Chú làm Blog hay quá chú ơi..Con mới bắt đầu làm mà nhìn blog của chú con mê quá

Công ty dịch thuật nói...

Nội dung bài viết thật tuyệt vời. Mình cũng muốn giới thiệu về một Công ty dịch thuật uy tín - Công ty dịch thuật miền trung - MIDtrans trụ sở chính chính tại địa chỉ 02 Hoàng Diệu, TP Đồng Hới, tỉnh Quảng Bình có Giấy phép kinh doanh số 3101023866 cấp ngày 9/12/2016 là đơn vị chuyên cung cấp dịch vụ dịch thuật, phiên dịch dành các cá nhân. Hệ thống thương hiệu và các Công ty dịch thuật con trực thuộc: dịch thuật đà nẵng - dịch thuật miền trung tại địa 54/27 Đinh Tiên Hoàng, Quận Hải Châu, TP Đà Nẵng là địa chỉ chuyên cung cấp dịch vụ dịch thuật chuyên nghiệp tại Đà Nẵng và các khu vực lân cận ; dịch thuật tiếng đức tại sài gòn địa chỉ 47 Điện Biên Phủ, Phường Đakao, Quận 1 TP HCM, dịch thuật hưng yên : địa 101 Trần Hưng Đạo, TP Hưng Yên là nhà cung ứng dịch vụ dịch thuật uy tín hàng đầu tại Hưng Yên; Công ty dịch thuật Viettrans và dịc vụ bac ninh translation: dịch vụ dịch thuật tại Bắc Ninh cho người nước ngoài có nhu cầu, giao diện tiếng Anh dễ sử dụng; dịch thuật tiếng nga tại sài gòn: nhà cung ứng dịch vụ dịch vụ dịch thuật phiên dịch hàng đầu tại TP Hồ Chí Minh; công ty dịch thuật đà nẵng midtrans : Địa chỉ 54 Đinh Tiên Hoàng, Quận Hải Châu, TP Đà Nẵng chuyên cung cấp dịch vụ dịch thuật công chứng, dịch thuật đa ngôn ngữ, đa chuyên ngành tại Đà Nẵng; Viettrans 43 Điện Biên Phủ, Quận 1 Sài Gòn: chuyên cung cấp dịch vụ dịch thuật đa chuyên ngành toàn quốc; Công ty dịch thuật Hà Nội MIDtrans chuyên cung cấp dịch vụ Viettravel - vietnamese tourist information and travel tips tại 46 Trần Cao Vân, TP Huế chuyên trang về thông tin du lịch và các tour đặc sắc tại Việt Nam, y dược (bao gồm bệnh lý), xây dựng (kiến trúc), hóa chất, thủy nhiệt điện, ngân hàng, tài chính, kế toán. Các dự án đã triển khai của Công ty dịch thuật chuyên nghiệp MIDtrans đều được Khách hàng đánh giá cao và đạt được sự tín nhiệm về chất lượng biên phiên dịch. Đó là kết quả của một hệ thống quản lý chất lượng dịch thuật chuyên nghiệp, những tâm huyết và kinh nghiệm biên phiên dịch nhiều năm của đội ngũ dịch giả của chúng tôi. Hotline: 0947688883. email: info@dichthuatmientrung.com.vn . Các bạn ghé thăm site ủng hộ nhé.

NamNam nói...

Chú up tài liệu để tự học về CNTT đi chú....cháu muốn học quá mà đi học ở trường thì ko có đk, mail của cháu là Hovanthinh.tvn@gmail.com. Cháu cảm ơn chú!

Đăng nhận xét