Hôm nay rảnh rỗi nên mình lấy cái templates cực chuẩn này của Uong Jowo chia sẻ miễn phí cho các bạn. Điều kiện duy nhất là vui lòng giữ nguyên link của Uong Jowo dưới footer để tôn trọng công sức sáng tạo của anh ấy.
Rinblog cũng đã từng sử dụng qua template này rồi, kết quả cực kỳ vừa ý. Nhưng tiếc là Rinblog không phải trang tin tức nên template này không hợp cho lắm, nhưng nếu site của bạn là site tin tức thì template này là quá chuẩn luôn rồi.
DEMO
DOWNLOAD BẢN NGUYÊN THỦY CỦA UONG JOWO
DOWNLOAD BẢN CHỉNH SỬA CỦA RINBLOG
HƯỚNG DẪN SỬ DỤNG:
Để sử dụng template này các bạn lưu ý điều sau:
- Không nên xóa những widget có sẵn trong template (cột giữa) 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ư hình sau:
Để hiển thị toàn bộ widget đẹp và chuẩn các bạn copy đoạn code sau rồi thêm vào trong templates của bạn.
.pix_uj li .uj_thumb{width:70px;height:70px;overflow:hidden;} @media only screen and (max-width:1219px){ #wrapper{width:986px;} .container,#footer-widget-area{width:944px;} .header-content{margin:0;padding:25px 21px} #sidebar-narrow,#top{display:none} #sidebar{float:right;width:300px;} #logo{float:left;width:270px;} } @media only screen and (max-width:985px) and (min-width: 768px) { #wrapper{width:750px;}#logo,#logo img{float:left;width:200px;} .container,#footer-widget-area,#main-content{width:730px;} #content,#uj-slider,.flexslider,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{width:410px;float:left;} .scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:410px;height:160px} #content .post-body img{max-width:360px;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:200px;margin-right:0} .uj-box.cols-2 li:first-child .overlay{width:200px;height:160px} .uj-box.cols-2 .uj_thumb .overlay:hover a.zoom{left:15%} .uj-box.cols-2 li:first-child .uj_thumb .overlay:hover a.post-link{right:15%} .cols-2.last-column{float:right;} .header-content{margin:0;padding:25px 15px} .header-content{background:transparent} .top-nav .container{position:relative} #sidebar{padding:0 0 0 4px;float:right;width:300px;} } /* Phone : 480px */ @media only screen and (max-width: 767px) and (min-width: 480px){ #wrapper{max-width:430px;width:100%!important} #topcontrol , .ads-top,#main-nav, .ads-bottom,.home-ads, .ads-post, .today-date, .slider-caption p{display:none !important;} header {width:420px !important;} #mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;} #navi.suball {background:#333;} .container,#main-content , .content , #content{width:420px !important; } .flexslider , .flexslider .slides > li ,.flexslider .slides img{height:250px !important;} .slider-caption h2 a, .slider-caption h2{ font-size:22px;} .single-post-thumb img { max-height:210px; } .slider-caption{width:auto;} .logo{float:none;text-align:center;} #uj-slider,.uj-box,#footer-widget-area,.flexslider,.uj_slider_item{float:none;width:400px;} #uj-slider{margin:0 auto 20px auto}.uj-box,.uj-box.cols-2,.pix_uj{margin-left:10px;} #top{display:none} .uj-box.cols-2,.uj-box.cols-2 .widget-content,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb,#tabbed-widget{float:none;width:400px;} .uj-box.cols-2 .widget>h2{width:400px;} .pix_uj .box-content ul li:first-child{width:400px;float:none;} .pix_uj .box-content ul li:first-child .uj_thumb,.pix_uj .box-content ul li .uj_thumb{width:100%;float:left;} .pix_uj .box-content ul li{width:31%;float:left;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:400px;margin-right:0} .scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:400px;height:160px} #sidebar {width:400px;float:left;} #PopularPosts2 ul{width:380px;float:left;} #adsentop,#righttop{display:none !important;} } /* Phone : 320px */ @media only screen and (max-width:479px){ #topcontrol,.today-date,#main-nav,.slider-caption p,#cats-tabs-box,a.random-article{display:none;} #wrapper{max-width:297px;width:100%!important} .social-networks{display:none;} #mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;} #navi.suball {background:#333;} .container,#main-content,#content, #uj-slider,.uj-box,.flexslider{margin:0 auto 20px auto;width:277px;} #footer-widget-area{margin:0 auto;width:277px;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{float:left;width:277px;} .pix_uj .box-content ul li:first-child{width:277px;float:left;} footer{padding:20px 0} #sidebar{padding:0 0 0 0;float:left;width:277px;border-left:0;} .fb-like-box{float:left;} #tabbed-widget,#sidebar .widget{float:left;width:277px;} #tabbed-widget .tabs-wrap li{width:90%;float:left;} #PopularPosts2 ul{width:250px;float:left;} #content .post-body img{max-width:250px;} #logo{max-width:150px;float:left;clear:both;} #logo img{width:150px;} #adsentop,#righttop{display:none !important;} #sidebar-top1 img{max-width:270px;} } @media only screen and (max-width:319px) { #wrapper{width:220px;} .head_brnews .breaking-news{display:none} #content {float:left;width:220px;} #sidebar{padding:0 0 0 0;float:left;width:220px;} }
Trong template các bạn tìm đoạn: <div id='sidebar' style='width:100%;max-width:300px;float:right;'> Và thay bằng đoạn: <div id='sidebar'>
Tìm tới trước đoạn <footer thêm đoạn code sau vào: <div class='clear'/>. Ví dụ:
<div class='clear'/>
<footer itemscope='' itemtype='http://schema.org/WPFooter'>
Nếu nút tiến và lùi ở phần hộp bài viết Slider không hoạt động ở trình duyệt Chrome thì các bạn làm như sau:
Trong template các bạn tìm tới đoạn code:
Các bạn thay bằng đoạn code sau:
#uj-slider{.........
.. cho tới...
.uj_slider .flex-direction-nav .flex-prev{margin-right:41px}
#uj-slider{position:relative;max-width:620px;width:100%} #uj-slider .widget h2,.tabs-wrap .widget h2{display:none} .uj_slider{margin-bottom:2px;position:relative;margin-bottom:30px;overflow:hidden;background-color:#fff} .uj_slider_wrap{position:relative;height:350px;overflow:hidden;margin-bottom:3px;padding:0} .uj_slider_item{max-width:620px;height:340px;overflow:hidden;width:100%} .uj_slider .slides img{width:100%;height:auto;} .uj_slider .slider_caption{position:absolute;padding:10px 15px;background:#cd2122;background:rgba(205,33,34,0.8);left:0;bottom:100px;color:#f5f5f5;margin-bottom:12px;z-index:99} .uj_slider .slider_caption:after{content:"";height:3px;width:100%;background:#cd2122;background:rgba(205,33,34,0.8);overflow:hidden;display:block;left:0;position:absolute;bottom:-4px} .uj_slider_wrap .uj_slider_item{display:none;position:relative} .flex-direction-nav {*height: 0;} .flex-direction-nav {margin: 0; padding: 0; list-style: none;} .uj_slider .slider_caption h3{margin-bottom:0;font-size:20px} .uj_slider .slider_caption h3 a{font-family:'Oswald',serif;color:#fff} .uj_slider .slider_caption h3 a:hover{color:#000} .uj_slider p.caption{position:absolute;background:#000;background:rgba(0,0,0,0.7);padding:7px 14px;bottom:39px;width:385px;color:#fff;font-family:tahoma;font-size:13px;line-height:17px;z-index:99} .uj_slider p.caption .post-meta{display:none} .uj_slider .flex-direction-nav a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNdATv0azbLbcdxDPnC19VyXyAcLNMXSUCE_xbBN4wBEt6atMJdXOl7IOdtPwckc0AAF-9hepyDAzZA5NoqcjuIAn3SH7mDX2NaesoYYM75B2XroiaeU3dAoWgsAIg4fK84tZ6Xmxdsgg/s1600/bg_direction_navs.png) no-repeat;font-size:0;width:40px;height:40px;display:block; position:absolute;bottom:5px;cursor: pointer;right:5px;z-index:99} .uj_slider .flex-direction-nav .flex-next {background-position:100% 0;z-index:99} .uj_slider .flex-direction-nav .flex-prev {margin-right:41px;z-index:99}
Hiện mình có 2 bản, 1 bản là nguyên thủy của Uong Jowo còn một bản mình đã chỉnh sửa thêm thắt rồi nên nếu các bạn ngại sửa thì có thể dùng bản của mình. Bản của mình thì chỉ thêm đoạn code thay màu cho link thôi. Nếu các bạn không thích có thể xóa nó đi. Trong file templates của Rinblog là rin.txt tìm đoạn:
Chỉnh sửa hay xóa đều được.
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:hover {color:#000000;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
Chúc các bạn thành công.
![[Templates] Codify Blogger Template - Giao diện Codify cho blogspot cực đẹp, bản chuẩn.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpscEP3h0RkLi5p10ycUPlywPoOM0mStWQqbohgsniCfvp7-Cxw1hf4BrzYc07IovHePfqTyO06Kas7g_ERChiDUaJGyQSZv1Da2gBeq7z2KB-4rR5qJBo8MDKwljzrNG237R5eQ0tyz_P/s72-c/Codify.png)
![[Blogger Tips] Phân tích ưu, nhược điểm của tên miền tiếng việt và tính khả dụng khi áp dụng cho blog của bạn.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8aiA5HiSch3lvAtc-7RS7GU-uUa8RR_7gLRLeYnY5QFc14om0F6KoxRL9N83JDhQma120AQBkCTIFktluDUjiO4P_ZSZj3IQIY6hpO9c9X60UxV7fBsRnPINibTpgjUadCxs2W4O9HDF/s72-c/ten-mien-tieng-viet.png)
![[Chia sẻ] Tổng hợp acc VIP Megashare, Fshare, 4Share Còn hoạt động (tháng 11 năm 2013)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs09lTjFeGotRpEJ7RHugjCVkzFQ8sRTkXeU3etf_ZZQ0_5p8VCqG-iN9clTK5ENoBbUr5jCqzucW9maDmslFW2x1nAob3xjnvseLkvwh1dQPOJ_hLTD688pOqFHe_5xCVf9ha_tw6p0LU/s72-c/share+acc+vip+fshare+megashare+4share.png)
![[Templates] Purez Responsive Magazine Blogger Template Premium Free - Chia sẻ Template Purez bản premium](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWb7r0d1Rp9GS6mXLE1Z89Kbx2uHhnOYGSA4y5iR7Q3OfQUDcDWCfuudUFRvbnKPQUJe7IWcEFtlRA0C1Sgt974anIkgJW_0urw0ZL5OmH66wSE7e8FA46OR1tnVzIkjbKf6Sr1cBG2FCQ/s72-c/Purez+blogger+template.png)
![[Blogger Tips] Hướng dẫn thêm chức năng Floating Social chia sẻ vào Blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5FsSyFUSQh0boRHP6q7_NTbqtt3OpjyqlnMUyRkilndcEyHHTQDNph316-_OZsR0RZecS5jH3quekcTT3oijSaYooY2F0DP3lT3Hx8baB-mo8LdkMSXLsdD7F1MwMu-A7TSSWPfU4QeI/s72-c/floatingsocial.PNG)
fghfgh
Trả lờiXóa