Code Hình Ảnh Động 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.
                                                                                       


0 nhận xét :

Đăng nhận xét