Share code CSS | Theme/Skin Sổ nhật ký/Diary Notebook cho Yahoo! Blog


Theme này được thiết kế bởi TNT cho nền tảng blogspot. Chiều rảnh rảnh mình chỉnh sửa lại và code CSS cho tương thích với cách bố cục của Yahoo! Blog. Các bạn có thể xem demo gốc trên Bloggspot tại địa chỉ sau: http://diary-notebook-template.blogspot.com

Share code CSS theme/skin Blogger Viet cho Yahoo! Blog :

1. Demo theme/skin sổ nhật ký/Diary Notebook for Yahoo! Blog :


Demo theme/skin Nhật kí/Diary (Notebook) for Yahoo! Blog

2. Thông tin về theme/skin Sổ nhật ký/Diary Notebook cho Yahoo! Blog 

Theme by: ArianeN_
Editer & Coder: Bi béo ( Cậu ấm thơ ngây )
Định dạng dàn trang/bố cụ: 2 cột (Hẹp – rộng) – Các bạn có thể lựa chọn bất kì 2 nền trái tùy thích.
(Khuyến nghị sử dụng nền mặc hai cột – trái)

Theme này, không hỗ trợ chỉnh sửa giao diện TRANG BÌA, vậy nên nếu bạn muốn gỡ bỏ/remove trang bìa thì tham khảo bài viết:

>>> [ Yahoo! Blog ] Hướng dẫn/cách gỡ bỏ/xóa TRANG BÌA/COVER PAGE

Nếu như bạn chưa biết cách nhúng mã CSS vào trong các phần mở rộng bên ngoài (tiện ích widget) để tác động đến giao diện của Yahoo! Blog. Thì tham khảo hướng dẫn ở bài viết:

>>> [ Yahoo! Blog ] Hướng dẫn thiết kế/customise giao diện/skin/theme (P1)

© Cậu ấm thơ ngây

3. Mã/code
CSS
theme/skin Blogger Viet cho Yahoo! Blog:

<style type="text/css">
<!–

*Reseached and Developed by Bi Béo – Cậu ấm thơ ngây – www.yeuxa.com – www.zizoo.vn*{}

/* —————— CSS Document ———————–*/

body {
background:url(https://lh4.googleusercontent.com/-MfXU6iAoVbw/T5e-SjQaMHI/AAAAAAAAAo0/79kM5clvTlg/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_body.png);
font-family:"Times New Roman", Times, serif;
line-height:16px;
color:#333;}
p {padding: 0 0 1.3em;}
h1, h2 , h3, h4, h5, h6 {
display:block;
color:#13382A;
line-height:100%;
text-shadow:1px 1px #fff;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;}
h1 {letter-spacing:-2px;}
h2 {
font-size:14px;
margin:10px 0 15px;
font-weight:bold;
}
a {
color:#000;
border-bottom: 1px dotted #bbb;
text-decoration:none;
}
a:hover {
color:#A3A30E;
border-bottom: 1px dotted #A3A30E;

.yui-b {width:250px !important; padding-right:35px;}
#yui-main .yui-b {width:560px !important; padding-left:30px;} 
#widget-calendar .hd, 
#widget-recentVisitor .hd, 
#widget-statistic .hd, 
#widget-tag .hd, 
#widget-category .hd, 
#widget-recentComment .hd, 
#widget-recentPost .hd, 
.widget .hd {
background:transparent;padding-top:5px;}

#asb-header #asb-header-ctn img, 
#emotion-carousel{ display:none;}
*Reseached and Developed by Bi Béo – Cậu ấm thơ ngây – www.yeuxa.com – www.zizoo.vn*{}
#widget-category .bd ul li.clrfix a .ico {
background:transparent url(https://lh4.googleusercontent.com/-k4sszO0-Zck/T5e-VkSug3I/AAAAAAAAApc/wzoJ0oKtdu4/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bullet_star_pink.png) no-repeat; margin-left:0px; list-style:none; }
#widget-recentPost .bd ul li, 
#widget-recentComment .bd ul.force-wrap li{
background:transparent url(https://lh4.googleusercontent.com/-k4sszO0-Zck/T5e-VkSug3I/AAAAAAAAApc/wzoJ0oKtdu4/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bullet_star_pink.png) 0 9px no-repeat; padding-left:20px; list-style:none; }

#asb-menu li.first, #asb-menu li, #asb-menu li.current, #article-navigation, #article-single, #article-list, .widget, .yui-t6 .yui-b, #emotion-carousel, #article-listing,
#article-single .bd, #article-supplement.new-style-supplement,#article-single .actions,#asb-menu,#pagination-bottom, .sidebar,#article-carousel, .article-nav {background:transparent; border:none;}
#asb-header h1 { margin: 60px 0 0 70px; color:#000;}
#asb-header h2 {margin-left: 70px; color:#000000; width: 835px; }
#asb-menu {display:none;}
#asb-header h1 a, #asb-menu li a {color:#000000;}
#asb-menu li{padding: 30px 0 0 70px; color:#000000;}
#w-profile-name {text-align:center; text-transform:uppercase;}
#search-result-info, #article-listing-toggle { display:none;}
#asb-menu li.first, 
#asb-menu li, 
#asb-menu li.current, 
#asb-menu li.current a, 
#asb-menu li a {background:transparent url(https://lh5.googleusercontent.com/-85bJfKN8PYk/T3kyMgBlJXI/AAAAAAAAAJ0/aTq9AMb2JZ0/s2/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-trong-suot.png);border:none;}
.yut-pg-container .pg-current-page {background-color:#0d1f18;border:#7a0001;}
#article-listing .img-wrap img {max-width:75%;float:left;padding:24px 0 0 26px;height:101px;width:118px;}
#article-listing .img-wrap {float:left;width:170px;background:transparent url(https://lh3.googleusercontent.com/-Hn77bNiOa38/T5e-ZXd6JLI/AAAAAAAAAqU/2FiPG6OCqOI/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-nen-anh.png) no-repeat center!important;height:150px;}
#article-listing .article .summary {text-align:justify; padding-top:15px;}
.article .tag {
margin-top: 25px;
}

#hd{
background:transparent url(https://lh5.googleusercontent.com/-MvD0g8eIbnY/T5e-XTUsikI/AAAAAAAAAp4/_0LM41q4Nyk/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_header.png) no-repeat center;
height:189px;
margin:0;
position:relative;
border:none;}
#bd{
margin: 0 auto;
width:922px;
background:transparent url(https://lh4.googleusercontent.com/-2nivEsBUfkM/T5e-Sp2mGQI/AAAAAAAAAo4/sJIg2kBByW4/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_content_wrap.png) 0 8px repeat-y;
overflow:hidden;}

#ft p { margin:0;}
#socialIcons{
height: 70px;
margin-bottom: 40px;
margin-top: -10px;
text-align: center;
}
#socialIcons ul{
padding: 0px 0px 0px 6px;
margin-bottom:8px;
overflow:hidden;
text-align:center;
}
#socialIcons li {display:inline;}
#socialIcons li a{
display:block;
width:67px;
height:46px;
text-indent:-9999px;
border:none;
float:left;
}

</style>
<div id="socialIcons">
<ul>
<li><a href="http://www.bloglovin.com/blog/3663674/following-cau-am-tho-ngay?claim=enp33fk7598&quot; title="Follow me with Bloglovin!" target="_blank" class="twitter tip">Follow Us on Twitter!</a></li>
<li><a href="http://www.facebook.com/yeuxa&quot; title="Join Us on Facebook!" target="_blank" class="facebook">"Join Us on Facebook!</a></li>
<li><a href="http://feeds.feedburner.com/%7Er/cauamthongay/%7E6/1&quot; title="RSS" target="_blank" class="rss">RSS</a></li>
</ul>
<a href="http://blog.yahoo.com/cauamthongay/articles/page/1&quot; target="_blank" id="butContact" style="display: block; background-position: 50% 0px;">Contact</a>
</div>
<style type="t
ext/css">
<!–
#socialIcons li a.twitter{
background:url(https://lh6.googleusercontent.com/-U5SUL-0sw80/T5e-YQWtvyI/AAAAAAAAAqI/v5kStMTSFJ8/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-ico_social_twitter.png) 0 0 no-repeat;}
#socialIcons li a.facebook{
background:url(https://lh3.googleusercontent.com/–FFTxPfjMFc/T5e-XI9ztKI/AAAAAAAAApo/mqEYeErlkV4/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-ico_social_facebook.png) 0 0 no-repeat;}
#socialIcons li a.rss {
background:url(https://lh4.googleusercontent.com/-m5OSk_mHaBc/T5e-YBsIQ8I/AAAAAAAAAqA/GfikjEkGGyY/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-ico_social_rss.png) 0 0 no-repeat;}
#socialIcons li a:hover {background-position:0 -46px;}
#socialIcons #butContact {
display:block;
background:url(https://lh5.googleusercontent.com/-u2kL6P8Sp7g/T5e-WteLZII/AAAAAAAAApk/mEF7o6rh0f4/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-ico_contact.png) 50% 0 no-repeat;
text-indent:-9999px;
border:none;
height:29px;
}
#article-listing .article{border-top:hidden;background:url("https://lh3.googleusercontent.com/-zn-LlrkXngw/T5e-UukhRdI/AAAAAAAAApQ/x7mg-OQ82-A/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_header_separator.png&quot;) 50% 100% no-repeat;}
#article-listing .emotion {display:none;}
#article-listing .article .hd { background:url("https://lh4.googleusercontent.com/-a3bx55h04hQ/T5e-VX0DJRI/AAAAAAAAApg/_lkAVviesUQ/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_post_header.png&quot;) no-repeat scroll 78px 0 transparent;}
#yui-main {
background:transparent url(https://lh4.googleusercontent.com/-fZaJKkbmLsM/T5e-TJYcqUI/AAAAAAAAAo8/TKOe7mzZe5o/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_content.png) no-repeat;
min-height:220px;
overflow:hidden;}
#widget-externalSource .hd {display:none;}
#ft {
background:transparent url(https://lh5.googleusercontent.com/-QKITAKds0b4/T5e-T-jWY2I/AAAAAAAAApM/-wrkjFxwLWM/s1600/%5B-www.zizoo.vn-%5D-theme-diary-notebook-nhat-ky-bk_footer.png) no-repeat center top;
min-height:140px;
border:none;
overflow:hidden;
margin-top:0px;
padding-top:140px;
font-size:75%;
}

#ygubcmt textarea { width: 400px; }
#comment-list .reply-container textarea { width: 325px; }
#article-carousel, .article-nav { width: 485px; }
–>
</style>

3. Một số lưu ý khi sử dụng theme/skin:

a. Cài đặt bố cục tiện ích widget:

Bởi vì chúng ta có thêm một phần mở rộng chia sẻ trang Twitter, Facebook, RSS và Contact phía trên – bên phải. Nên các bạn đặt widget nhúng CSS theme lên trên đầu danh sách tiện ích widget. (Như hình min họa phía dưới)


Cài đặt bố cục cho theme trong phần quản lý widget

b. Chỉnh sửa social icons: Twitter, Facebook, RSS và Contact

Các bạn tìm đoạn mã sau:

<div id="socialIcons">
<ul>
<li><a href="http://www.bloglovin.com/blog/3663674/following-cau-am-tho-ngay?claim=enp33fk7598" title="Follow me with Bloglovin!" target="_blank" class="twitter tip">Follow Us on Twitter!</a></li>
<li><a href="http://www.facebook.com/yeuxa" title="Join Us on Facebook!" target="_blank" class="facebook">"Join Us on Facebook!</a></li>
<li><a href="http://feeds.feedburner.com/%7Er/cauamthongay/%7E6/1" title="RSS" target="_blank" class="rss">RSS</a></li>
</ul>
<a href="http://blog.yahoo.com/cauamthongay/articles/page/1&quot; target="_blank" id="butContact" style="display: block; background-position: 50% 0px;">Contact</a>
</div>

Các bạn chỉnh sửa lại với link dẫn thích hợp nha./

4.  Chúc các bạn thành công 

Đừng quên ghé thăm blog Béo mỗi ngày để cập nhập thêm các thông tin và các bài hướng dẫn/chia sẻ mẹo nhỏ/ thủ thuật để chỉnh sửa/ tùy biến Yahoo! Asia Blog nhé. 

Nếu thấy đồng cảm hoặc thích các nội dung trong blog Béo thì hãy click thêm bạn ngay với Béo và để lại cmt cho Béo để béo thêm bạn lại nha. Thêm bạn, thêm vui mà phải không nào?

Mọi ý kiến đóng góp hoặc thắc mắc, các bạn có thể gửi về địa chỉ e-mail: info@yeuxa.com hoặc gửi vào phần bình luận ở cuối bài viết. Béo sẽ trả lời lại các bạn ngay khi có thể. 

Cậu ấm thơ ngây blog

This entry was posted on 04.05.2012, in Khác. Bookmark the permalink.