12H you will stay in my heart !!!...

Happy New Year 2010!!!!!!!!!!!!!


    Code Trang Trí Tổng Hợp 2

    Share

    Admin
    Admin
    Admin

    Nữ
    Tổng số bài gửi : 399
    Age : 26
    Đến từ : Your Dream ...
    Registration date : 13/04/2008

    Code Trang Trí Tổng Hợp 2

    Bài gửi by Admin on 11/1/2010, 1:21 am


    Thay Nút "Thêm Bạn", "Blog ưa thích"







    DIV.addfrdbtn A.addtofriends{background:url(Link ảnh ADD BLOG - Thêm bạn) no-repeat center;height:22px;}



    DIV.subscribebtn A.add_subscription{background:url(Link ảnh Blog ưu thích) no-repeat center;height:22px;}



    Height là chiều dài, chiều cao của ảnh. Sau khi đăng suất khỏi blog, các bạn vào lại blog sẽ thấy nút của "Thêm bạn" và "Blog ưu thích" đã được thay.



    Tạo nút Home









    div.backhomtbtn a.backtomyblog {background:url(http://i280.photobucket.com/albums/kk193/datablog/210738home_icon_-1.png) no-repeat center;height:48px;}


     


    Thay height là chiều cao của ảnh


    Thay đổi icon Bình luận riêng









     .mod-list-titlebar .lock {background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/05/27/11/47581243440976.png) no-repeat left bottom;}




    dùng được Ảnh có kích cỡ ko vượt quá 14x14




    Thay đổi icon Tổng cộng lời bình








    .cmt-mod-alist .extend-hd A {background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/05/16/06/84531242474255.png) no-repeat;}



     











    Ảnh nền tổng số trang, cuối modun bài viết









    .mod-comment-new .pagination, .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent url(Link ảnh);}



    Ngăn dòng bài viết


    Xoá đường ngăn dòng








    .mod-alist-summary .main-bd li{border-top:none}



    Thay đường ngăn dòng bằng Hình Ảnh


    .mod-alist-summary .main-bd li{border-top:none;background:url(Link Ảnh) no-repeat bottom;}


    Code tạo ngăn dòng cho trả lời commnet








    .mod-alist-full .alist-comment .responding {border-top-style:none;background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/05/16/04/64831242466500.png) no-repeat right top;}



     









    Xóa đường viền các modun trong blog








    #friend-list .rc div, #friendlist_module .rc div, .rc div,.col-150 .rc div {background:transparent;}
    #friend-list .rc, #friendlist_module .rc, .rc,.col-150 .rc {background:transparent;}
    #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc,.col-150 .rc_bd {background:transparent;}
    #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd,.col-150 .rc_bd div.rc_bc {background:transparent;}
    #friend-list .rc_ft div, #friendlist_module .rc_ft div,  .rc_ft div, .col-150 .rc_ft div {background:transparent;}
    #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, .col-150 .rc_ft {background:transparent;}





    Tạo đường viên trong suốt








     

    #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_ne-2.png) no-repeat right bottom;}


    #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_nw.png) no-repeat left bottom;}


    #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_e.png) repeat-y right top;}



    #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_w.png) repeat-y;}


    #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_se-2.png) no-repeat right top;}


    #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_sw.png) no-repeat left top;}


    #blast .rc_ft {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-sw.png) no-repeat left bottom;}


    #blast .rc_ft div {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-se.png) no-repeat right bottom;}#blast .rc_bc .bd{background-color:transparent;background-image:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/042112transparent_bg.png);}


    #blast .rc_bc .bd {font-style:italic;color:#000000;}




    Tạo lời nhắc nhở, không post nhạc auto, không post chữ và ảnh quá lớn








    .rte_src_editor {BACKGROUND: url(link ảnh nhắc nhở) no-repeat top left;}


    Khi click vào ô HTML, lập tức suốt hiện một lời thông báo rằng: ko nên post nhạc auto, ko nên post chữ, ảnh quá lớn, code css chỉ đơn giản là:


     


    Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo khi để chuột vào



    Code này sẽ giúp bạn thu ngắn modun tự tạo chỉ để nó hiện ra 1 chiều dài nhất định, khi di chuột vào modun đó, nó sẽ tự động kéo dài modun đó ra. Chúng ta có thể thấy ngay một ứng dụng rất hay, đó là tạo 1 list nhạc rất dài ở modun tự tạo, nhưng chúng ta chỉ để nó hiện ra 1 chiều dài nhất định, khi người nghe để chuột vào modun đó, nó sẽ tự động kép dài và hiện thị đầy đủ nội modun đó.


    Code css:








    #user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder
    {height:200px;}



    #user_mod_1000X .rc_bd .rc_bc .bd .user-mod-holder:hover
    {height:auto;}



    X là giá trị của modun tự tạo từ 1 đến 10.


    200px là giá trị bạn muốn nó hiện thị, chúng ta có thể tùy ý thay đổi.



    Hiệu ứng thu nhỏ chữ và tự động phóng to ảnh khi để chuột vào



    Code giúp thu nhỏ chữ và ảnh. Khi di chuột đến, chữ và ảnh sẽ tự động chở về đúng kích cỡ.


    Để làm được như vậy, bước đầu tiên, ta copy code này, dán vào css



    Code này dán vào css để sử dụng được hiệu ứng phóng to ảnh, thu nhỏ chữ:








    #blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#blog_quote:hover {font-size:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent;}#blog_img img {height:100px;}#blog_img img:hover {height:100%;}



    Tạo hiệu ứng nút bấm Lưu & Hủy commnet








    Code css:








    .cmt-mod-alist .add-comment em.buttons input {text-align:center;background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/04/30/03/50521241078926.png) no-repeat;}


     




    Làm trái tim, mưa, tuyết rơi, bướm bay... khi di chuột vào các link trong blog










    a:hover {text-decoration:none;color:#EE4949;text-decoration:none;background-image:url(link ảnh);}


     





    Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt.









    mod-alist-full .pagination{background:transparent;   



     


    anh em chú ý nè vanhoai nói trước nhé cái code này chỉ sửa lỗi cho blog của bạn nào khi làm trong suốt rùi nhưng mà cái mudule bài viết vẫn chưa trong suốt hoàn toàn tức là nó bị đen nhìn mờ mờ ý mà và code này phát huy tác dụng tốt nhất khi bạn phải bỏ ở cuối phần CSS của mình đó nha!!!









    Tạo hiệu ứng truyết rơi (tràn khắp blog)








    HTML {background:url(Link Ảnh Nền Toàn Bộ Blog) center fixed;}


    #vitality_updates, body.vitality_updates, body.profile_view, body.blog_my body.guestbook, body.comment_list, body.comment_list, body.blog_my_index, body.slideshow, body.blog_archives_folder, body.comment_listing, body.trackback_listing, body.post_doodle, body.guestbook, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.subscribe_list, body.post_gb, body.gallery, body.photo_big, body.photo_upload_pc, body.photo_upload_gallery, body.blog_my {background:url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2008/12/15/08/73861229306026.gif);}




    Đổi màu chữ cái đầu dòng








    h2:first-letter {color:#FFFFFF;font-size:large;}

     









    Tạo theme 2 mảnh Top - Bottom cho modun bài viết








    .mod-alist-full .main-hd{background:url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/01/08/01/63041231353592.png) no-repeat;}


    .mod-alist-full .main-bd{background:#FFFFFF url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/01/08/12/10871231347975.png) repeat-x bottom fixed;}


     



    hoặc:








     #article_list_module .main-hd{background:url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/01/08/01/63041231353592.png) no-repeat;}

    #article_list_module .main-bd{background:#FFFFFF url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/01/08/12/10871231347975.png) repeat-x bottom fixed;}




    Lưu ý fixed trong code trên có tác dụng làm đứng ảnh (ảnh ko chuyển động trong bài viết) khi ta cuộn trang web. Các bạn có thể dùng hoặc ko dùng fixed






    6. Làm sao thay theme và cho theme đứng yên khi kéo chuột ?

    Dùng đoạn code CSS sau








    body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery{background:#FFFFFF url(http://wallcoo.net/cartoon/Digital_Spring_Art_1920x1200/wallpapers/1280x800/Digital_composite_spring_2013.jpg) repeat fixed;}




    Hoặc đoạn code này:








    *hinh toan blog*


    BODY.blog_my {background:url(http://sg.yimg.com/i/vn/blog/i/blog/cat4_5.gif) #000000 fixed;}


    BODY.blog_my {BACKGROUND:url(http://sg.yimg.com/i/vn/blog/i/blog/cat4_5.gif) #000000 fixed;}


     










    Thay
    - http://wallcoo.net/cartoon/Digital_Spring_Art_1920x1200/wallpapers/1280x800/Digital_composite_spring_2013.jpg bằng link hình nền của bạn nhé.

    -http://sg.yimg.com/i/vn/blog/i/blog/cat4_5.gif  bằng link hình nền của bạn





     


    Nguồn code : vanhoai.tk



    _________________


      Hôm nay: 11/12/2016, 7:15 am