Blogger cho phép sử dụng lưu trữ theo ngày - tháng - năm. Tiện ích này mặc định của nó khá đơn giản và chỉ cần vào thêm 1 tiện ích. Tuy nhiên làm thế nào để trang trí tiện ích này 1 cách đẹp và gọn nhất thì ở đây mình có sưu tầm và làm 1 thủ thuật. Sau khi làm xong thù thuật này thì lưu trữ blog có giao diện là theo lịch và khá đẹp mắt với nhiều mẫu khác nhau.
DEMO xem tại trang
Ảnh bìa FB- Hướng dẫn làm thủ thuật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> Lưu trữ blog (Blog archive)
- Các bạn bỏ dấu check ở
Hiển thị bài đăng cũ nhất trước đi nhé.
2. Vào mẫu (template) -> Chỉnh sửa HTML (Edit HTML) tìm tới đoạn code sau:
-
BlogArchive1 có thể là
BlogArchive2 hoặc
BlogArchive3 nhé. Tùy theo số lượng tiện ích lưu trữ blog bạn đã thêm.
3. Thay thế Code trên (bước 2) bằng code dưới đây.
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
4. Tìm đến
và dán code dưới đây ngay trên nó
5. Lưu mẫu lại.
6. Nếu muốn những Style khác nhau thì các bạn lựa chọn 1 trong những mẫu sau và dán Code của nó trước thẻ
]]> nhé.
- Mẫu 1: Style phong cách sáng.
Code:
/* Huong dan thu thuat itviet360.com ------ */
#calendarDisplay {display:none;} /* div that holds calendar */ #blogger_calendar { margin:0px auto 0px 0px;width:100%;} /* Table Caption - Holds the Archive Select Menu */ #bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif} /* The Archive Select Menu */ #bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;} /* The Heading Section */ table#bcalendar thead {} /* Head Entries */ table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;} /* The calendar Table */ table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff} /* The Cells in the Calendar */ table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;} /* Links in Calendar */ table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;} table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} /* First Row Empty Cells */ td.firstCell {visibility:visible;} /* Cells that have a day in them */ td.filledCell { background:#fff;} td.filledCell:hover { background:#dddddd;} /* Cells that are empty, after the first row */ td.emptyCell {visibility:hidden;} /* Cells with a Link Entry in them */ td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7} td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7} /* Table Footer Navigation */ table#bcNavigation {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;} table#bcNavigation a:link {text-decoration:none;color:#0080ff} table#bcNavigation a:hover{text-decoration:underline;} td#bcFootPrev {width:10px;} td#bcFootAll{text-align:center;} td#bcFootNext {width:10px;} ul#calendarUl {margin:5px auto 0!important;} ul#calendarUl li a:link {}
/* Ket thuc mau 1 ------ */
- Mẫu 2: Style dạng lịch màu nền tối
Code:
/* Luu tru theo dang lich cho blogspot itviet360.com ------ */
#calendarDisplay {display:none;} /* div that holds calendar */
#blogger_calendar { margin:5px 0 5px 10px;width:98%;} /* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif} /* The Archive Select Menu */
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;} /* The Heading Section */ table#bcalendar thead {} /* Head Entries */ table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd} /* The calendar Table */ table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333} /* The Cells in the Calendar */ table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;} /* Links in Calendar */ table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:underline;} table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} /* First Row Empty Cells */ td.firstCell {visibility:visible;} /* Cells that have a day in them */ td.filledCell {} /* Cells that are empty, after the first row */ td.emptyCell {visibility:hidden;} /* Cells with a Link Entry in them */ td.highlightCell {background:#000000;border:1px solid #666666} /* Table Footer Navigation */ table#bcNavigation {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;} table#bcNavigation a:link {text-decoration:none;color:#F5F202} table#bcNavigation a:hover{text-decoration:underline;} td#bcFootPrev {width:10px;} td#bcFootAll{text-align:center;} td#bcFootNext {width:10px;} ul#calendarUl {margin:5px auto 0!important;} ul#calendarUl li a:link {}
/* Ket thuc ------ */
- Mẫu 3: Hot girl kute 1 - Nhìn em có xinh không các bác.
Code:
#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:150px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi066yVvkegtM6NvjvbTYg9EmvCptpT-5RdxTQ5G_zhUq_boJjH2i08DvtUvjpcDa9Cm17KABqyTogz3_HCYs8cDygv3OtTUS9Soy5Md9Ys_v6T9kfaZwcx2YWKPw4F6D_zJSvOXO6YzMc/w250/YUIb.png) no-repeat 100% 0} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #1A1A1A;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border-radius:3px;color:#DFDFDF} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #D6D6D6;color:#0D2B47;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#232F3F;border:1px solid #2B2B2B} table#bcalendar tbody tr td.highlightCell:hover{background:#1B4174;border:1px solid #2B2B2B} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:#DADADA;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DADADA} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus img{display:block;width:80px;margin:10px auto}
- Mẫu 4: Hot girl kute 2 - Em ngây thơ trong sáng nhé :)
Code:
#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDN3LiHhOFJPpeKzufv4Do-MbNea1ZcJXka4LyM7sHHFPC60H2b_PEAVqPZTqeQJdXkuT8t34AlU1AQ3KgJPl4TepBLIjeGj0fHrsZt_796lOplAt_tKF4wvKxuaB13F1bQBAZEJTzgOQ/w250/AtsukoMaeda.png) no-repeat 50% -3px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#01A5CE;border:1px solid #DCEFF5;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)} /* Cells that have a day in them */ td.filledCell{background:white} td.filledCell:hover{background:#D8F4FF} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#1BA3CE} table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DBF5FF} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}
- Mẫu 5: Girl xinh đáng yêu dễ thương - Có ai yêu em không :))))))
Code:
#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNTYXEMWm8iNdXEveMZwxsjra-MN-cluq9jhmwEHO1-Z9mruSvUA3H6zp80cRuRnvaDYXIhL1glr8270OXgtzR36Rcr7p1ob5WZeI_FYaYXHzr9hooO_WCfOaaRf75yLJbq-wNeqBU1mU/w250/2011215_ohshimayuko.png) no-repeat 50% -10px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #400;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #CCC;color:#500;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ td.firstCell{visibility:visible} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.54)} td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#790000;border:1px solid #9E0000} table#bcalendar tbody tr td.highlightCell:hover{background:#B60000;border:1px solid #9E0000} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:#F1F1F1;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#DADADA} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus img{display:block;width:80px;margin:10px auto}
-
Mẫu 6: Girl xinh - nền mày hồng trẻ trung
Code:
#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJLAm6sfBgzzyUpR3iZgw6LFHp1jB1M1rE-qFabargXwBFHr6YlKRni5_4ZOfhta1ccdRFCVMIWoXIpQq5phGIuR3wwbD2SzroBJLqSytC1NgbsGAZqgu5l05r0jCmbu2Nm1UjUUszIg/w320/Minami.png) no-repeat 50% 0} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #FFC2AE;color:#CE3A01;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#BE3206;background:rgba(190,50,6,0.8);border:1px solid #BE3E00} table#bcalendar tbody tr td.highlightCell:hover{background:#D63300;background:rgba(240,57,0,0.8)} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#FFE4DB} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}
-
Mẫu 7: Girl cười tươi.
Code:
#calendarDisplay{display:none} /* div that holds calendar */ #blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #blogger_calendar{margin:0 auto;width:100%;padding:170px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsuSPSo6Qrj4-lDSsbVs9NISG9S9rlK3whZjezBa6bBL1TkTgAZNZHkLjNksJBTTCsyW0nzntoFMw-iuFbw0qLGrIYhcAizbJjrntJhhHbpsNH8iW5SI5SofNayjauyJ4yOjZZ24Lu0U/w250/Melody.png) no-repeat 50% -3px} /* Table Caption - Holds the Archive Select Menu */ #bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px} /* The Archive Select Menu */ #bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold} /* The Heading Section */ table#bcalendar thead{} /* Head Entries */ table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:3px;color:white} /* The calendar Table */ table#bcalendar{margin:0 0;width:100%} /* The Cells in the Calendar */ table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;font:bold 100% Tahoma,Arial,Sans-serif} /* Links in Calendar */ table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none} table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none} /* First Row Empty Cells */ table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)} /* Cells that have a day in them */ td.filledCell{background:white;background:rgba(255,255,255,0.53)} td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)} /* Cells that are empty,after the first row */ td.emptyCell{visibility:hidden} /* Cells with a Link Entry in them */ table#bcalendar tbody tr td.highlightCell{background:#CC0039;background:rgba(204,0,57,0.59)} table#bcalendar tbody tr td.highlightCell:hover{background:#EB0042;background:rgba(243,0,49,0.59)} /* Table Footer Navigation */ table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px} table#bcNavigation a:link{text-decoration:none;color:#FFDBE5} table#bcNavigation a:hover{color:white} td#bcFootPrev{width:10px} td#bcFootAll{text-align:center} td#bcFootNext{width:10px} ul#calendarUl{margin:5px auto 0!important} ul#calendarUl li a:link{} #calLoadingStatus{background:white;padding:10px 0} #calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}
Comments[ 0 ]
Post a Comment