Như các bạn đã biết thì Sahifa là một theme cực hot của wordpress, nhưng đáng tiếc là chưa có ai phát triển template này cho blogspot. Vì lý do trên, RinBlog quyết định sẽ phát triển một theme có tính năng và hình thức giống tới 98% so với phiên bản sahifa của bên wordpress.
Template này RinBlog sẽ đặt tên là Sahifa V5.0 cho khác với bản gốc. Template này được RinBlog phát triển từ một template rất hot của Blogspot, đó là Widgetly. Vì đây là bản phát triển thêm nên Sahifa v5.0 vẫn giữ được những ưu điểm tuyệt vời từ template Widgetly
Sahifa 5.0 có gì hot?
- Giao diện responsive thân thiện, code tối ưu, trang load nhanh, hiệu ứng đẹp.
- Giao diện chỉ có 2 cột đẹp, thân thiện hơn, SEO tốt hơn.
- Bố cục được chia theo dạng tin tức, từng block, widget đẹp, rõ ràng.
- Footer tùy chỉnh 3 cột cực đẹp và hợp thời trang.
- Dễ dàng tùy chỉnh màu sắc, font chữ, hình nền...v..v
Để xem cụ thể hơn các bạn xem demo tại đây
Đối với giao diện này, để thêm nội dung cho mỗi widget riêng ở cột bên trái trên trang chủ các bạn chú ý làm như sau:
Không nên xóa những widget có sẵn trong template (cột trái trên trang chủ) mà các bạn
tiến hành thêm hoặc thay đổi nội dung của chúng cho hợp lý bằng cách
nhấp vào chỉnh sửa widget thay nội dung của widget đó bằng một hoặc
nhiều nhãn để hiển thị bài đăng trong nhãn. Làm như sau:
Vào bảng điều khiển blogger >> Bố cục >> Chọn chỉnh sửa 5 tiện ích HTML có sẵn ở cột bên trái.
Clean-5: Là widget hiện hộp bài viết theo dạng trình chiếu, chỉ cần thêm label vào phần nội dung là được.
Các widget bên dưới cũng làm tương tự để hiện thị bài trong 1 nhãn riêng biệt
Còn nếu các bạn muốn hiện bài viết mới nhất thì chỉ việc tạo 1 label là New hoặc Feature rồi thêm label đó vào phần nội dung. Sau đó các bạn viết bài chỉ cần thêm Label New là bài đó sẽ hiện trên widget mà các bạn thêm label trước đó.
Các bạn tải tại đây:
Template này do RinViệt phát triển nên nếu các bạn có thể thì hãy giữ một liên kết nhỏ tới Rinviet.com nha. Cái đó coi như công sức mình ngồi sửa code ý mà. ^^
link down die rồi bạn? share cho mình với, mail mình: nghilucseo01@gmail.com. Thanks! :))
Trả lờiXóaĐã gửi cho bạn qua mail nha :)
Xóatuyệt vời ông mặt trời :((
Trả lờiXóanhưng mà thanh menu hơi to bác ạ,có cách nào chỉnh nhỏ được không
XóaBác tìm trong template đoạn từ:
Xóa#main-nav{background:#2c2c2c......
cho đến
#main-nav ul li.menu-item-home ul li a,#main-nav ul ul li.menu-item-home a,#main-nav ul li.menu-item-home ul li a:hover{background-color:transparent!important;text-indent:0;background-image:none!important;height:auto!important;width:auto}
Bác copy và thay đoạn code trên bằng đoạn code sau:
#main-nav{background:#2c2c2c;margin:0 auto;height:40px;border-bottom:5px solid #1BA1E2;width:100%;max-width:1220px;}
#main-nav ul li{text-transform:uppercase;font-family:Tahoma,arial,Georgia,serif;font-size:16px;position:relative;display:inline-block;float:left;border:1px solid #222;border-width:0 0 0 1px;height:40px}
#main-nav ul li:first-child,#main-nav ul li:first-child a{border:0 none}
#main-nav ul li:last-child a{border-right:0 none}
#main-nav ul li a{display:inline-block;height:40px;line-height:40px;color:#ddd;padding:0 14px;text-shadow:0 1px 1px #000;border-left:1px solid #383838}
#main-nav ul ul{display:none;padding:0;position:absolute;top:40px;width:180px;z-index:99999;float:left;background:#2d2d2d!important;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px}
#main-nav ul ul li,#main-nav ul ul li:first-child{background:none!important;z-index:99999;min-width:180px;border:0 none;border-bottom:1px solid #222;border-top:1px solid #383838;font-size:13px;height:auto;margin:0}
#main-nav ul ul li:first-child,#main-nav ul li.current-menu-item ul li:first-child{border-top:0 none!important}
#main-nav ul ul ul,#main-nav ul li.current-menu-item ul ul,#main-nav ul li.current-menu-parent ul ul,#main-nav ul li.current-page-ancestor ul ul{right:auto;left:100%;top:0!important;z-index:99999}
#main-nav ul.sub-menu a,#main-nav ul ul li.current-menu-item a{border:0 none;background:none!important;height:auto!important;line-height:1em;padding:10px 10px;width:160px;display:block!important;margin-right:0!important;z-index:99999;color:#ccc!important;text-shadow:0 1px 1px #000!important}
#main-nav ul li.current-menu-item ul a{color:#eee!important;text-shadow:0 1px 1px #222!important}
#main-nav ul li:hover>a,#main-nav ul :hover>a{color:#FFF}
#main-nav ul ul li:hover>a,#main-nav ul ul :hover>a{color:#FFF!important;padding-left:15px!important;padding-right:5px!important}
#main-nav ul li:hover>ul{display:block}
#main-nav ul li.current-menu-item{margin-top:0;height:40px;border-left:0 none!important}
#main-nav ul li.current-menu-item ul.sub-menu a{background:none!important}
#main-nav ul li.current-menu-item a,#main-nav ul li.current-menu-item a:hover{background:#cd2122;text-shadow:0 1px 1px #b43300;color:#FFF;height:40px;line-height:50px;border-left:0 none!important}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-page-ancestor a{height:auto!important;line-height:12px}
#main-nav ul li.menu-item-home ul li a,#main-nav ul ul li.menu-item-home a,#main-nav ul li.menu-item-home ul li a:hover{background-color:transparent!important;text-indent:0;background-image:none!important;height:auto!important;width:auto}
Ở đây em đã chỉnh giúp bác chiều rộng của menu từ 50px xuống còn 40px, nếu bác muốn chỉnh nhỏ hơn thì bác tìm trong đoạn code trên tất cả những chỗ có: height:40px và thay giá trị 40 bằng giá trị phù hợp nha.
Nếu cần hỗ trợ thêm thì bác để Email em sẽ hướng dẫn cụ thể hơn. :)
Em đang tính lấy cái menu của Sahifa bên wp luôn, chắc phải hai, ba hôm nữa em mới cho ra bản tiếp theo đc bác ạ. :)
Trả lờiXóa:) Tuyệt vời. cảm ơn Thiếu Gia @^@
Trả lờiXóaAnh ơi anh gửi qua mail Bqtquantrotamhon@gmail.com cho em xin được không ạ! Em cám ơn nhiều :))
Trả lờiXóaBạn cho mình hỏi ngoài trang chủ làm cách nào để có thể tự động show ảnh với những ảnh từ site khác không phải ảnh up trực tiếp lên Blog vậy bác.
Trả lờiXóaĐây là Blog mình đã chỉnh sửa lại đôi chút so với bản load bên site blogspot của bạn.
http://camungsmartphone.blogspot.com/
oi link down ko vo dc!anh gui cho e qua gmail: antrang220292@gmail.com nay dc ko a! em cam on a
Trả lờiXóa