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

20 nhận xét:

Thương Hoài 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. :-?

Thương Hoài nói...

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

Thương Hoài 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

Thương Hoài 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á! :-#

Thương Hoài nói...

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

Dautocrazy 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!

Dautocrazy 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á!

Dautocrazy 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á! :))

tong phan nói...

rất hay

tong phan nói...

rất hay

inbaobigiay.vn nói...

Giaro nhận đệ tử hum ạ

Hân Ngọc nói...

hay đấy

vuvanthe nói...

Rất cảm ơn về bài viết của bạn, bài viết rất hay và ý nghĩa.
Nếu có các nhu cầu về thiết kế, thi công các sản phẩm nội thất như: bàn ghế sofa, giường tủ, thi công trọn gói có thể liên hệ bên Mozza mình nhé. Click vào đây để xem chi tiết nhé các bạn:
sofa giường đẹp
sofa văn phòng đẹp
sofa giá rẻ đẹp
sofa phòng khách đẹp
sofa phố xinh
hãy liên hệ cho mình nhé. Cảm ơn !
_______________________________________________
SIÊU THỊ GHẾ SOFA MOZZA
Địa chỉ: 66 - Tương Mai - Hai Bà Trưng - Hà Nội
Điện thoại: 093 628 3333 - 04 6674 9999

Sửu Trâu - BRVT 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á

Đăng nhận xét