Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Sunday, December 23, 2012

Skin màu den cho tiện ích Linkwithin

LinkWithin là một plugin tuyệt vời có thể được tích hợp trong cả Wordpress và Blogger để hiển thị những bài viết liên quan bằng cách lấy các bài viết thuộc về cùng thể loại/nhãn hoặc thẻ. Nó nhanh cvà giúp đỡ trong việc gia tăng sự tham gia của người đọc đọc nhiều hơn. Trước đây, chúng tôi giới thiệu một cách mà bạn có thể tùy chỉnh giao diện của plugin này bằng cách ghi đè kiểu mặc định của nó. Bạn chắc chắn có thể ghi đè lên bất kỳ lớp hoặc ID bằng cách đơn giản bằng cách sử dụng CSS.

Chia sẻ:
Skin màu den cho tiện ích Linkwithin - Fancy Black Skin For LinkWithin Gadget
LinkWithin là một plugin tuyệt vời có thể được tích hợp trong cả Wordpress và Blogger để hiển thị những bài viết liên quan bằng cách lấy các bài viết thuộc về cùng thể loại/nhãn hoặc thẻ. Nó nhanh cvà giúp đỡ trong việc gia tăng sự tham gia của người đọc đọc nhiều hơn. Trước đây, chúng tôi giới thiệu một cách mà bạn có thể tùy chỉnh giao diện của plugin này bằng cách ghi đè kiểu mặc định của nó. Bạn chắc chắn có thể ghi đè lên bất kỳ lớp hoặc ID bằng cách đơn giản bằng cách sử dụng CSS.
Xem minh họa: VIew Demo
CSS tùy chỉnh mà namkna cung cấp cho người dùng để thay đổi màu sắc font chữ của tiêu đề văn bản, chỉnh sửa kích thước hình ảnh thu nhỏ, đường viền và nền. Hôm namkna chia sẻ stylesheet cho skin màu đen của widget linkWithin (bài liên quan) được sử dụng trên blogger. VỚi đoạn CSS đơn giản và hiệu quả. Nó thu hút nhiều khách truy cập và cung cấp một số gợi ý gọn gàng và sạch sẽ. Các bước thực hiện rất dễ dàng!

Bước 1: Cài đặt LinkWithin cho blogger

Nếu bạn chưa cài đặt tiện ích bài viết liên quan linkwithin trên blog của bạn thì bước đầu tiên là cài đặt nó:

Bước 2: Tùy chỉnh LinkWithin

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed)
4- Thêm đoạn code bên dưới vào trước thẻ  ]]></b:skin>
/*---Related Posts linkwithin---*/
#linkwithin_logolink_0 {
display:none!important;
}
#lws_0 {
clear: both!important;       
margin: 0 0 20px 0!important;    
}
.linkwithin_outer {
    margin: 1px 0px !important;
   background:url("http://4.bp.blogspot.com/-0fx0qDSHIhg/UNcAIVQb1bI/AAAAAAAAEug/Ndo91A-xUjc/s1600/related-posts-namkna.gif") repeat scroll rgb(42, 42, 42);
    height: 260px;
      width:590px!important;

    padding: 0px !important;
    box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
    border-radius: 5px 5px 5px 5px;
    }
.linkwithin_inner {
width:590px!important;
}
.linkwithin_text {
margin: 0px !important;
    padding: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif;
    font-size: 1.35em;
    color: rgb(255, 255, 255);
    font-weight: 700;
    line-height: 1.35em;
    text-transform: capitalize;
    background-color: rgb(18, 18, 18);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
}
.linkwithin_posts a {
   border-right:0px!important;
    margin: 10px 0px 10px 20px !important;
}
.linkwithin_posts a:hover {
   border-right:0px!important;
    margin: 10px 0px 10px 20px !important; background:none!important;
}
#linkwithin_logo_0 {display:none;}
.linkwithin_img_0 {
    border: 1px solid #666 !important;
    padding: 1px !important;
    width: 100px !important;
    height: 70px !important;
    margin-right: 20px !important;
    overflow: hidden;
   background:#666!important;
}
.linkwithin_img_0:hover {
  border: 1px solid #666!important;
opacity:0.8;
}
.linkwithin_img_0 div {
    width: 100px !important;
    height: 70px !important;
}
.linkwithin_title {
    color: rgb(255, 255, 255) !important;
    font-size: 1.1em !important;
    display: block;
    padding: 0px 10px 0px 0px !important;
    font-weight: 700 !important;
    line-height: 1.45em !important;
    margin-top: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
   text-decoration:none!important;
  width:120px!important;
}
.linkwithin_title:hover {
text-decoration:underline!important;
}

Khuyến nghị các bạn nên dọc thêm!

Bạn cũng có thể muốn kiểm tra Skin đầu tiên Tuỳ chỉnh namkna giới thiệu trước đây.

Câu hỏi của bạn.

Widget sẽ hiển thị lên đến 4 hình thu nhỏ. Nếu bạn muốn hiển thị hình thu nhỏ lớn hơn bạn chỉ cần tăng kích thước chiều rộng (width:590px) đánh dấu màu xanh

Mặc dù thiết lập hiển thị 4 hình thu nhỏ. Các widget sẽ hiển thị 3 hình thu nhỏ tốt hơn bởi vì các lỗi như vậy hiếm khi xảy ra với một số website/ID và yêu cầu sửa chữa hướng dẫn sử dụng từ nhóm linkwithin.
Tham khảo: mybloggertricks

19 nhận xét:

  1. Bạn thân mến. Trong lúc lang thang internet tìm kiếm tài liệu mã hóa suorce mình tình cờ phát hiện trang này [http://namkna.blogspot.com/p/ma-hoa-va-giai-ma-code-web.html] của bạn. Đó đúng là điều mình đang rất cần, mình muốn nhờ bạn làm 1 bài hướng dẫn chi tiết để tạo 1 trang cho blog của mình [để xài riêng mà]. Thanks bạn trước nha!mong bạn hồi âm sớm giúp mình!

    ReplyDelete
    Replies
    1. Bạn chỉ cần dán đoạn code cần mã hóa hặc giải mã vào đó và bấm nút mã hòa hoặc giải mà và dán vào bài viết hoặc widget là được,

      Delete
  2. Blog của mình cũng đã có bài viết liên quan, nhưng mình không biết xóa nó thể nào? vậy h mình phải làm sao để thay thế bằng cái này?

    ReplyDelete
    Replies
    1. Phần đó nó nằm trong phần mỏ rộng tiện cíh do vậy mình không wiew source trên trình duyêt. bạn hãy gửi tempate vào mail tavannam01@gmail.com mình bỏ hộ cho.

      Delete
  3. thủ thuật này cũng có thể áp dụng cho file word hoặc excel ... đấy. Có lẽ NGỌC ANH đang rất cần. Mình tiếc là ko rành về mấy vụ này, chứ nếu biết mình đã giúp NGỌC ANH lâu rồi.

    ReplyDelete
  4. Có lẽ NGỌC ANH sợ một ngày "mưa dầm" hay "nắng xanh xao" mà NAM "nhẹ nhàng" cho trang blog đó "nghỉ hưu" thì coi như là chấm hết. Lấy gì để cô ấy giải mã cái đống code loằng ngoằng lỡ mã hóa rồi kia chứ bạn cũng hiểu như vậy mà đúng ko Nam [mà công việc thì ko đơn giản đâu bạn aạa]

    ReplyDelete
    Replies
    1. Thực r với dạng mã hóa này không phụ thuộc vào mình nó khác với mã hóa dạng bacode hoặc eval

      Delete
  5. Trang mày load nhanh VL thế. Chú share quyền quản trị blog lớp lại cho gmail lớp a với. DM blog lớp mà mỗi mày với cái hjến quản tri là thế đéo nào hả. Sợ tụi tao ngich hỏng ak.

    ReplyDelete
  6. Bạn ơi sao mình làm như hướng dẫn . Nhưng khi mình làm xong thì nó chỉ hiện 1 khung như hình demo nhưng không có hình bài viết của mình. Mong bạn giúp đở

    ReplyDelete
    Replies
    1. Đây chỉ là mã CSS để hiển thị bài trong đó bạn xem bài này nha: http://namkna.blogspot.com/2011/05/tao-muc-cac-bai-cung-chu-e-cho-blogger.html

      Delete
  7. Mình cũng đã làm đúng như bài này http://namkna.blogspot.com/2011/05/tao-muc-cac-bai-cung-chu-e-cho-blogger.html . Nhưng không được nó chỉ hiện một khoảng màu trắng chứ không hiện bài viết hix

    ReplyDelete
    Replies
    1. Sau khi làm theo bài đó thì bạn chèn đoạn code bài này vào. Nhãn chứa bài viết đó phải có bài khác nữa nha.

      Delete
  8. Mấy anh cho mình hỏi. lúc đầu blog em có 5 bài viết LinkWithin hiện đầy đủ 5 bài viết, ngày hôm sao em tăng số bài viết lên thành 8 bài nhưng LinkWithin vẫn chỉ hiện có 5 bài là sao vậy. Hình như là nó không tự cập nhật vậy có cách nào để sửa không. Thanks mấy anh trước.

    ReplyDelete
    Replies
    1. Em lưu ý là nó chỉ hiển đủ chiều ngang thôi em. Chiều ngang blog em không đủ.

      Delete
  9. bạn ơi cho mình hỏi chút nhé sao của mình cái LinkWithin nó ko có hình nhỉ , mình làm như trên mà vẫn ko có , thank bạn nhé , trang mình đây http://vuikhoe.dacbietthuvi.org

    ReplyDelete
    Replies
    1. Bạn hãy Upload hình đó lên thẳng blog và đặt trươc dấu ngắt nha.
      - Những hình ảnh từ web khac sẽ không hiển thị :)

      Delete