1. Code Mở link trong tab mới :
<!--Mo link trong tab moi--> <base target='_blank'/> <!--Ket thuc Mo link trong tab moi-->2. Code Sửa lỗi không hiển thị ảnh :
<!-- sua loi khong hien thi anh blogspot -->
<script type='text/javascript'>
//<![CDATA[
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++) {
images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");
}
//]]>
</script>
<!-- ket thuc -->
3. Tạo link Feed (Rss) <h2><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKazrae2cu-2thepPqIuKR_XRtPsL_dz5q4Lt3bdqbRHtpk9yH0RFF0WVN3UGvnmIVf6JdnPwq4ywz9pXUaAK8D4rrMvr_kzpynJoOBUScQshnLZua-9ZrFtssZ6gCQ-zzuJrQd61qwsw/s400/google.png" style="margin:2px 6px 0 0; vertical- align:top;" /><a href="http://news.google.com">Google News</a></h2> <script language="JavaScript" src="http://feeds.feedburner.com/google/pDzn?format=sigpro&nItems=8&for mat=openLinks=new&displayDate=true&displayExcerpts=true&displayTitle= false&excerptLength=50&dateLocation=below" type="text/javascript"></script>4. Sửa lỗi ảnh You tube
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="420" src="http://www.youtube.com/embed/bDqQfBdJpcM" width="550"></iframe>
<img border="0" src="http://i2.ytimg.com/vi/bDqQfBdJpcM/0.jpg" height="0" width="0" /> * Chú ý thay mã nhúng bDqQfBdJpcM bằng mã nhúng của bạn5. Link Rss của Blogger
- Link feed theo nhãn : http://YOURBLOG.blogspot.com/feeds/posts/type/-/Label - Link feed theo toàn bộ blog: http://YOURBLOG.blogspot.com/feeds/posts/default Mẫu theo nhãn : http://www.tips.tinhoc.it/feeds/posts/default/-/Code%20Blogger Mẫu toàn bộ blog :http://www.tips.tinhoc.it/feeds/posts/default6. Tạo Menu phong cách MeTro UI
Chèn code bên dưới vào sau thẻ ]]>< /b:skin >
<!-- tao menu metro ui -->
<style>
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
.MTMetroMenu {
width: 960px;
margin: auto;
}
@media screen and (max-width:960px) {
.MTMetroMenu {
width: 100%;
};
}
/* MTMetroMenu */
.MTMetroMenu {
position: relative;
}
.om-nav {
position: absolute;
width: 100%;
z-index: 999;
display: none;
}
.om-ctrlbar {
width: 100%;
height: 48px;
}
.om-ctrlitems {
margin: auto;
padding: 0px;
height: 48px;
display: inline-block;
text-align: center;
}
.om-ctrlitem {
height: 48px;
width: 48px;
display: none;
cursor: pointer;
float: left;
opacity: 0.5;
-ms-filter: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=50)"
!important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */;
}
.om-ctrlitem:hover {
opacity: 0.8;
-ms-filter: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"
!important;
filter: alpha(opacity=80) !important;
/* For IE8 and earlier */;
}
.om-activectrlitem {
opacity: 1 !important;
-ms-filter: "
progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"
!important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */;
}
.om-controlitems {
width: 960px;
margin: auto;
}
.om-controlitem {
height: 48px;
cursor: pointer;
}
.om-closenav {
float: left;
}
.om-movenext {
float: right;
}
.om-itemholder {
margin: auto;
padding: 20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position: absolute;
z-index: 9999;
left: 0;
top: 0;
}
.om-movenext {
position: absolute;
z-index: 9999;
right: 0;
top: 0;
}
.om-controlitems {
width: 100%;
}
.om-itemholder {
width: 100%;
};
}
.om-centerblock {
display: inline-block;
}
.om-item {
display: none;
}
.om-showitem {
margin: 5px;
float: left;
display: none;
}
/* END MTMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align: center;
cursor: pointer;
width: 90px;
height: 90px;
}
.tile-bt a {
display: block;
padding-top: 12px;
text-decoration: !important;
}
.tile-bt img {
margin: 0 auto 0 auto;
padding-bottom: 5px;
height: 48px;
width: 48px;
position: relative;
display: block;
}
.tile-bt span {
font-size: 12px;
padding-bottom: 10px;
display: block;
}
.tile-bt:active {
opacity: 0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile-bt-large {
width: 190px;
height: 90px;
line-height: 90px;
text-align: center;
cursor: pointer;
}
.tile-bt-large a {
display: block;
text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle;
margin: auto;
padding: 0px;
position: relative;
width: 48px;
height: 48px;
}
.tile-bt-large span {
vertical-align: middle;
display: inline;
}
.tile-bt-large:active {
opacity: 0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align: center;
cursor: pointer;
width: 190px;
height: 190px;
}
.tile-bt-extralarge a {
display: block;
padding-top: 52px;
text-decoration: !important;
}
.tile-bt-extralarge img {
margin: 0 auto 0 auto;
padding-bottom: 22px;
height: 80px;
width: 80px;
position: relative;
display: block;
}
.tile-bt-extralarge span {
font-size: 14px;
padding-bottom: 20px;
display: block;
}
.tile-bt-extralarge:active {
opacity: 0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/;
}
.shadow-white:hover {
box-shadow: 0px 0px 6px 3px #fff;
-webkit-box-shadow: 0px 0px 6px 3px #fff;
-moz-box-shadow: 0px 0px 6px 3px #fff;
-o-box-shadow: 0px 0px 6px 3px #fff;
-ms-box-shadow: 0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow: 0px 0px 6px 3px #38D1F7;
-webkit-box-shadow: 0px 0px 6px 3px #38D1F7;
-moz-box-shadow: 0px 0px 6px 3px #38D1F7;
-o-box-shadow: 0px 0px 6px 3px #38D1F7;
-ms-box-shadow: 0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow: 0px 0px 6px 3px #AACA37;
-webkit-box-shadow: 0px 0px 6px 3px #AACA37;
-moz-box-shadow: 0px 0px 6px 3px #AACA37;
-o-box-shadow: 0px 0px 6px 3px #AACA37;
-ms-box-shadow: 0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow: 0px 0px 6px 3px #E81750;
-webkit-box-shadow: 0px 0px 6px 3px #E81750;
-moz-box-shadow: 0px 0px 6px 3px #E81750;
-o-box-shadow: 0px 0px 6px 3px #E81750;
-ms-box-shadow: 0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow: 0px 0px 6px 3px #444;
-webkit-box-shadow: 0px 0px 6px 3px #444;
-moz-box-shadow: 0px 0px 6px 3px #444;
-o-box-shadow: 0px 0px 6px 3px #444;
-ms-box-shadow: 0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue {
background: #00BBE2;
}
.solid-blue-2 {
background: #2C84EE;
}
.solid-darkblue {
background: #044E94;
}
.solid-violetred {
background: #781766;
}
.solid-red {
background: #E51400;
}
.solid-red-2 {
background: #E81750;
}
.solid-pink {
background: #FF539B;
}
.solid-purple {
background: #D02090;
}
.solid-orange {
background: #FB8F02;
}
.solid-orange-2 {
background: #FF6600;
}
.solid-orange-3 {
background: #DD5F37;
}
.solid-coral {
background: #CD5B45;
}
.solid-green {
background: #67B239;
}
.solid-green-2 {
background: #96BF01;
}
.solid-darkgreen {
background: #016C38;
}
.solid-olive {
background: #999900;
}
.solid-grass {
background: #CDCD00;
}
.solid-darkred {
background: #5F0000;
}
.solid-gold {
background: #FEE9AE;
}
.solid-yellow {
background: #F7D100;
}
.solid-black {
background: #000;
}
.solid-smoke {
background: #F5F5F5;
}
/* End Solid Colors */
/* MISC */
.clearspace {
clear: both;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.none {
display: none !important;
width: 0px !important;
}
.light-text {
color: #fff;
}
.dark-text {
color: #1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
/* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
/* W3C */;
}
.margin-5 {
margin: 5px;
}
</style>
<!-- ket thuc -->
Chèn code sau vào nơi bạn muốn nó hiển thị:
<!-- menu metro ui -->
<div class='MTMetroMenu'>
<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-Ka45aKZTBUI/VQwak2rnnmI/AAAAAAAAA50/mzOvKiiPLHw/s1600/i-home.png'/>
<span class='light-text'>Homepage</span>
</a>
</div>
<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-vxYtWi8a5HU/VQwa1vGsarI/AAAAAAAAA58/Pp223EMQ3SE/s1600/i-messanger.png'/>
<span class='light-text'>About US</span>
</a>
</div>
<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='http://4.bp.blogspot.com/-pzzZwVdf3Fk/VQwbEGOL5eI/AAAAAAAAA6E/oXvZ4CkThYk/s1600/i-rss.png'/>
<span class='light-text'>Rss Feeds</span>
</a>
</div>
<div class='tile-bt-large solid-red shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='http://3.bp.blogspot.com/-ImM68BYpVIc/VQwbQ8vIHhI/AAAAAAAAA6M/mbpnHo5bnQ0/s1600/i-search.png'/>
<span class='light-text'>Search</span>
</a>
</div>
<div class='tile-bt solid-darkred shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eG37K4XC7cKmJu6fVixSqnaZ5RULqaHyKGF6n8DR0yoI851eEg-Mzfcf46WcCRv43hnnE59WvIlaRhzs5SpdRK49ySuEXccOURugU4WucuUdXGWhH2HFs3MvPQKG0QdmimIGtart_J0/s1600/mail.png'/>
<span class='light-text'>Contact US</span>
</a>
</div>
<div class='tile-bt solid-black shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_MRBT32Y_LtAc5inCdozeLxTfKTUvh4Ig3veoVGySGbk3ginaa2wkpFHdKOHx9TR7Aj0HoVV48J5pDdpQQlKhCWOBvqgU2fD0qoxjDC4G2DpbE_nYO6jXYaYlvNRdP2y2NvDNzUhjBo/s1600/help.png'/>
<span class='light-text'>Get HELP</span>
</a>
</div>
<div class='tile-bt solid-orange shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjANXoMY_Sm-awZvWX6tmZmHWB8ZX8pIoeJEcAzRXjpX2COrgrnPA0HbvVKdzJlLeSPf0-EowfNm5w4a4AlH-XE3DB1CuHzlC_nsl2qFakRiC4TmtvUoPuljniNSkaq6pWrWBC8der5g/s1600/youtbe.png'/>
<span class='light-text'>YouTube</span>
</a>
</div>
<div class='tile-bt solid-darkblue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1_D2FIUk_qrbGG7O3f4qmulG-0muhnMdbtrk-6OfMOYqn1X7DwHHBmA91NBLM5PgcEdUtUa6oO9-K6N9snK7GX7bGbbt-2WZmOn6WxudnGZyrzt-n7hI7Q32WIotm5oNLGIRExUG9Y0/s1600/face.png'/>
<span class='light-text'>Facebook</span>
</a>
</div>
<div class='tile-bt-large solid-blue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbneYwc-T8mUIiHz7R1oNjVlcslgW5sFtL_O3N6GePXxJjLShSrL5pi3owcYubpEKiEVCHCizbeCTAFxd2eYcILSXR6AiKMi4Wy9JKzc2bP-bnswqW3ynTfxSYuyr82wbNAxN715eqkBc/s1600/photo.png'/>
<span class='light-text'>Photos</span>
</a>
</div>
<div class='tile-bt solid-olive shadow-green margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNWUuD4wJG9pKFYwGjVVxYQn5Ri2PeXwFOXJJUHVIq-BLqnBKsy6rWBDSF1cY2KyPWqhKroW-Mi3FIzfn9u5EFZBaxHWOG_CQwyXburE1ilIkDx9wBJMjvXWV5ep11Jn1XaQtZ1Ohdtk/s1600/music.png'/>
<span class='light-text'>Music</span>
</a>
</div>
<div class='tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNh3TbedK9wVRuwMTQCwTP1B-H7nmDXxvjn9fVf1j_wOhIbL-sHB7Khyphenhyphena6Resy4-1gNz90PRWrdb62sjGXmP6eVcqgbMrDBvuFHf0YlFnjQXpgCw-RKGEABueyu_jRBtJdJDFS0xFevVs/s1600/HBT.png'/>
<span class='light-text'>MT Blogger</span>
</a>
</div>
</div>
<!-- ket thuc -->
7. Tạo Menu Thả xuống MeTro
<style>
#product_category_left {
float: left;
margin-right: 10px;
width: 79px;
}
#product_category_left ul li {
background-color: #6f6f6f;
display: table-cell;
float: left;
height: auto;
margin-bottom: 2px;
padding: 5px 0;
text-align: center;
transition: all 300ms ease 100ms;
vertical-align: middle;
width: 100%;
}
#product_category_left ul li h2 {
font-size: 12px;
}
.relative {
position: relative;
}
.relative h2{
margin:0px;
padding:0px;
}
.isLeft {
float: left;
}
#product_category_left ul li {
text-align: center;
}
#product_category_left ul li a {
color: #fff;
display: inline-block;
width: 100%;
}
#product_category_left ul li a img {
margin-bottom: 4px;
margin-top: 8px;
max-height: 35px;
}
#product_category_left ul li a {
color: #fff;
display: inline-block;
width: 100%;
}
#product_category_left ul li:hover, #product_category_left ul li.selected {
background-color: #eb1c24;
border-color: #555;
box-shadow: 0 1px 25px rgba(0, 0, 0, 0.4) inset;
}
#product_category_left ul li.bachnx_2:hover, #product_category_left ul li.bachnx_2.selected {
background-color: #ed3f3e;
}
#product_category_left ul li.bachnx_3:hover, #product_category_left ul li.bachnx_3.selected {
background-color: #f38120;
}
#product_category_left ul li.bachnx_4:hover, #product_category_left ul li.bachnx_4.selected {
background-color: #a2248f;
}
#product_category_left ul li.bachnx_5:hover, #product_category_left ul li.bachnx_5.selected {
background-color: #293d94;
}
#product_category_left ul li.bachnx_6:hover, #product_category_left ul li.bachnx_6.selected {
background-color: #0aa2a5;
}
#product_category_left ul li.bachnx_7:hover, #product_category_left ul li.bachnx_7.selected {
background-color: #0a62ac;
}
#product_category_left ul li.bachnx_8:hover, #product_category_left ul li.bachnx_8.selected {
background-color: #78b644;
}
</style>
<div style="padding-top: 0px;" id="product_category_left">
<ul>
<li class="relative bachnx_1">
<h2>
<a href="/"><img alt="Mục 1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 1</a></h2>
</li>
<li class="relative bachnx_2">
<h2><a href="/"><img alt="Mục 2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 2</a></h2>
</li>
<li class="relative bachnx_3">
<h2><a href="/"><img alt="Mục 3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 3</a></h2>
</li>
<li class="relative bachnx_4">
<h2><a href="/"><img alt="Mục 4" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 4</a></h2>
</li>
<li class="relative bachnx_5">
<h2><a href="/"><img alt="Mục 5" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 5</a></h2>
</li>
<li class="relative bachnx_6">
<h2><a href="/"><img alt="Mục 6" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 6</a></h2>
</li>
<li class="relative bachnx_7">
<h2><a href="/"><img alt="Mục 7" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 7</a></h2>
</li>
<li class="relative bachnx_8">
<h2><a href="/"><img alt="Mục 8" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 8</a></h2>
</li>
<li class="relative">
<h2><a href="/"><img alt="Mục 9" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 9</a></h2>
</li>
<li class="relative">
<h2><a href="/"><img alt="Mục 10" src="/skins/oto/images/icons_giaydantuong.png"><br>
Mục 10</a></h2>
</li>
<li class="relative">
<h2><a href="/"><img alt="Mục 11" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 11</a></h2>
</li>
<li class="relative">
<h2><a href="/"><img alt="Mục 12" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNWAdNskHGhTEDSMPPtTHya5JOvTkn80_yoi12uBIlE6HilN6wfw"><br>
Mục 12</a></h2>
</li>
<li><a style="padding: 10px 0;" href="/tin-tuc">Mục 13</a></li>
</ul>
</div>
8. Menu Metro Kiểu 2
<style>
.wraper *{
margin: 0px;
padding: 0px;
font: 12px Arial, Tahoma, sans-serif;
line-height: 18px;
color:#CCCCCC;
}
img {
border: 0
}
ul {
list-style-type: none;
}
a, a:hover, a:visited {
text-decoration: none;
color: #333333;
}
.icons {/* display:inline-block; */
background: url(../images/icons.png) no-repeat;
}
.black {
color: #000 !important;
}
.red {
color: #f00 !important;
}
.pd10{
padding:10px 0px;
}
/*bg_top*/
.bachnx_bg_top{
height:42px;
background: url(../images/bg_top.png) repeat-x;
padding:0px 2px;
}
#wrap_top_left {
float: left;
width: 39%;
height: 42px;
line-height: 42px;
}
.remcua li {
display: inline-block;
padding: 0px 10px;
}
.remcua > li > a {
height: 42px;
line-height: 42px;
padding: 0px 10px;
color: #fff;
float: left;
}
.icons_remcua {
width: 16px;
height: 16px;
float: left;
background-position: 0px 0px;
margin-top: 12px;
}
.icons_news {
width: 19px;
height: 19px;
float: left;
background-position: -20px 0px;
margin-top: 11px;
}
.icons_online {
width: 24px;
height: 24px;
float: left;
background-position: -42px 0px;
margin-top: 6px;
}
.icons_arrow {
width: 8px;
height: 4px;
float: right;
background-position: -294px 0px;
margin-top: 19px;
}
#wrap_top_right {
float: right;
height: 42px;
line-height: 42px;
}
.top_info{
line-height:42px;
}
.top_info li {
display: inline-block;
}
.top_info li a {
padding: 0px 10px;
color: #fff;
line-height: 10px;
float: left;
border-right: 1px solid #fff;
}
.top_info li:last-child a {
border: none;
}
.top_info li a:hover {
text-decoration: underline;
}
.icons_user {
width: 18px;
height: 18px;
float: left;
background-position: -70px 0px;
margin-top: -11px;
position: relative;
top: 5px;
}
/*bg_content_top*/
.bg_content_top {
/* background: url(../images/bg_content_top.png) repeat-x; */
height: auto;
margin-top: 38px;
/* margin-top: 10px; */
background-size: contain;
}
.section {
padding-top: 0px;
}
#section_logo {
height: 125px;
float: left;
}
#section_logo a img {
margin-top: 10px;
}
#section_sale a img {
margin-top: 12px;
}
#section_sale {
width: 450px;
height: 130px;
float: left;
}
#section_right {
width: 410px;
height: 125px;
float: right;
margin-right:30px;
}
.section_color {
height: 210px;
/* margin-top: 8px; */
padding-top: 1px;
/* margin-bottom: 3px; */
clear: left;
}
/**/
.navigation{
width:495px;
float:left;
}
.navigation a{
color:#FFF !important;
}
.navigation ul, .navigation ul li, .navigation ul li > h2 > a {
float: left
}
.navigation ul li > h2 > a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-border-box;
-ms-border-box;
box-sizing: border-box;
background-repeat: no-repeat;
color: #fff;
font-size: 13px;
line-height: 15px;
text-align: center;
text-shadow: 1px 1px rgba(0,0,0,.25);
transition: all 300ms ease 100ms;
-webkit-transition: all 300ms ease 100ms
-moz-transition: all 300ms ease 100ms;
-ms-transition: all 300ms ease 100ms;
-o-transition: all 300ms ease 100ms;
}
.navigation ul li > h2 > a:hover {
border-color: #555;
box-shadow: 0 1px 25px rgba(0,0,0,.4) inset
}
.navigation ul {
margin-right: 2px
}
.navigation ul.last {
margin-right: 0
}
.navigation ul li {
margin-bottom: 2px
;
position: relative;
}
.navigation ul li.last {
margin-bottom: 0
}
.navigation .col1, .navigation .col1 li, .navigation .col1 li > h2 > a {
width: 196px;}
.navigation .col1 li.remvai {
}
.navigation .col1 li.remvai > h2 > a {
background-color: #eb1c24;
background-image:url(../images/icons_remvai.png);
background-position: 28px 26px;
height: 90px;
padding: 45px 0px 0px 120px;
text-align: left;
}
.navigation .col1 li.remvai > h2 > a:hover {
padding: 45px 0px 0px 40px;
background-position: 130px 26px;
}
.navigation .col1 li.remsaogo {
}
.navigation .col1 li.remsaogo a {
background-color: #ed3f3e;
background-image:url(../images/icons_remsaogo.png);
background-position: 111px 9px;
padding: 23px 10px 0 10px;
height:64px;
text-align: left
}
.navigation .col1 li.remsaogo a:hover {
background-position: 20px 9px;
padding: 23px 10px 0 100px;
}
.navigation .col1 li.remromam {
}
.navigation .col1 li.remromam a {
background-color: #f38120;
background-image:url(../images/icons_remromam.png);
background-position: 20px 12px;
height: 52px;
padding: 18px 10px 0 90px;
text-align: left
}
.navigation .col1 li.remromam a:hover {
background-position: 120px 12px;
padding: 18px 10px 0 20px;
}
.navigation .col2, .navigation .col2 li, .navigation .col2 li > h2 > a {
width: 166px;}
.navigation .col2 li > h2 > a {
padding: 0 5px;
color:#FFF;
}
.navigation .col2 li.remsaonhom {
}
.navigation .col2 li.remsaonhom a {
background-color: #a2248f;
background-image:url(../images/icons_remsaonhom.png);
background-position: 20px 15px; padding-left: 70px;
height: 50px;
padding-top: 18px;
text-align: left
}
.navigation .col2 li.remsaonhom a:hover {
background-position: 120px 15px;
padding-left: 15px;}
.navigation .col2 li.giayrantuong {
}
.navigation .col2 li.giayrantuong a {
background-color: #0084cc;
background-image: url(../images/icons/sim-icon.png);
background-position: 11px 19px;
height: 68px;
padding-left: 52px;
padding-top: 10px;
text-align: left
}
.navigation .col2 li.giayrantuong a:hover {
background-position: 99px 19px;
padding-left: 5px;
padding-right: 47px
}
.navigation .col2 li.remcuon {
width: 81px;
margin-right: 2px
}
.navigation .col2 li.remcuon a {
background-color: #293d94;
background-image:url(../images/icons_remcuon.png);
background-position: center 5px;
height: 78px!important;
padding-top: 53px;
width: 81px;}
.navigation .col2 li.remcuon a:hover {
background-position: center 33px;
padding-top: 5px;}
.navigation .col2 li.winlux {
width: 81px;
margin-right: 2px
}
.navigation .col2 li.winlux a {
background-color: #0aa2a5;
background-image:url(../images/icons_winlux.png);
background-position: center 5px;
height: 78px!important;
padding-top: 43px;
width: 81px;}
.navigation .col2 li.winlux a:hover {
background-position: center 38px;
padding-top: 5px
}
.navigation .col2 li.phukienrem {
width: 81px;
margin-right: 2px
}
.navigation .col2 li.phukienrem > h2 > a {
background-color: #78b644;
background-image:url(../images/icons_phukienrem.png);
background-position: center 5px;
height: 78px!important;
padding-top: 43px;
width: 83px;}
.navigation .col2 li.phukienrem > h2 > a:hover {
background-position: center 43px;
padding-top: 5px;
}
.navigation .col3 li.binhphong {
}
.navigation .col3 li.binhphong a {
background-image:url();
background-position: 7px 10px;
text-align: left
}
.navigation ul li h2 a {
font-size: 12px;
}
.navigation .col3 li.binhphong a:hover {
background-position: 98px 10px;
padding: 13px 10px 0 10px;
}
.navigation .col3 li.giayrantuong {
}
.navigation .col3 li.giayrantuong a {
background-image:url();
background-position: 5px 6px;
text-align: left
}.navigation .col3 li.giayrantuong a:hover {
background-position: 100px 6px;
padding: 13px 10px 0 4px;
}
.navigation .col2 li.digital {
width: 68px
}
.navigation .col2 li.digital a {
background-color: #0f63a3;
background-image: url();
background-position: center 10px;
height: 73px;
padding-top: 40px;
width: 68px
}
.navigation .col2 li.ladoc {
width: 81px;
margin-right: 2px
}
.navigation .col2 li.ladoc a {
background-color: #0a62ac;
background-image:url();
background-position: center 5px;
height: 78px;
padding-top: 53px;
width: 83px;}
.navigation .col2 li.ladoc a:hover {
background-position: center 38px;
padding-top: 5px
}
.navigation .col2 li.classified {
width: 68px
}
.navigation .col2 li.classified a {
background-color: #0084cc;
background-image: url();
background-position: center 10px;
height: 73px;
padding-top: 40px;
width: 68px
}
.navigation .col2 li.classified a:hover {
background-position: center 44px;
padding-top: 10px
}
.navigation .col3 li.news a{
background:#6e6566;
padding: 0px;
height: 42px;
line-height: 42px;
text-align: center;
}
.navigation .col2 li.digital a:hover {
background-position: center 44px;
padding-top: 10px
}
.navigation .col3 {
width: 129px;
}
.navigation .col3 li {
width: 129px;
}
.navigation .col3 li > h2 > a {
background-color: #acacac;
height: 40px;
padding-top: 12px;
width: 129px;
color: #fff;
text-align:left;
text-shadow: none;
padding-left: 33px;
}
.navigation .col3 li.thamtraisan {
position: relative
}
.navigation .col3 li.thamtraisan > h2 > a {
background-image:url();
background-position: 5px 6px;
text-align: left
}
.navigation .col3 li.thamtraisan > h2 > a:hover {
background-position: 95px 6px;
padding: 13px 10px 0 4px;
}
.navigation .col3 li.cualuoi a {
background-image:url();
background-position: 5px 6px;
text-align: left
}
.navigation .col3 li.cualuoi a:hover {
background-position: 85px 6px;
padding: 13px 10px 0 8px;
}
.navigation .col3 li.thamtraisan .areacountnew {
width: 10px;
height: 12px;
position: absolute;
right: 0;
line-height: 12px;
background-color: red;
padding: 3px;
font-weight: bold;
font-size: 11px;
color: #fff;
text-align: center
}
/**/
/*nav level2*/
div.nav_level2 {
margin-top: 0px;
width: 228px;
height: auto;
position: absolute;
padding: 10px 10px 15px 10px;
top: 85px;
left: 0px;
z-index: 10;
line-height: 24px;
display: none;
background: #fff;
border: #d7d7d7 solid 1px;
box-shadow: 0 0 3px #ccc;
}
.nav_c4{
top:50px !important;
}
.up-triangle {
width: 0;
position:absolute;
top:-15px;
height: 0;
border-bottom: 20px solid #fff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.nav_level2 p.a_root {
display: block;
line-height: 30px;
height: 30px;
}
.nav_level2 p.a_root a {
display: block;
padding-left: 15px; background: url(../images/arrow_red.png) 0px 50% no-repeat;
border-bottom: 1px dotted #d9d9d9;
}
.nav_level2 p.a_root:last-child a{
border:none
}
.nav_level2 p.a_root a:hover {
color: #f00;
}
.navigation ul li:hover .nav_level2 {
display: block;
}
ul.list_pro_group .nav_level2 {
top: 40px;
}
/**/
.banner {
background-color: #eee;
float: right;
height: 210px;
width: 540px
}
#banner{
width:495px;
float:left;
margin-left:10px;
}.sec_hot {
float: left;
color: #f00;
font-size: 20px;
font-weight: bold;
height: 40px;
line-height: 40px;
}
.sec_cart {
float: right;
font-weight: bold;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.icons_cart {
width: 38px;
height: 29px;
float: left;
background-position: -90px 0px;
margin: 4px 10px 0px 0px;
}
#count_shopping_cart_store {
color: #f00;
}
.section_delivery {
margin: 10px 0px;
}
.icons_giaohang {
width: 21px;
height: 18px;
float: left;
background-position: -130px 0px;
margin: -2px 10px 0px 0px;
}
.icons_help247 {
width: 28px;
height: 16px;
float: left;
background-position: -154px 0px;
margin: -2px 10px 0px 0px;
}
.bg_search {
width: 320px;
height: 30px;
background-position: 0px -31px;
float: left;
}
.section_search {
margin: 5px 0px;
}
.txt_search {
width: 275px;
padding-left: 10px;
height: 25px;
line-height: 25px;
margin-top: 2px;
float: left;
background-color: transparent;
border: 0;
outline: 0;
}
.txt_submit {
width: 31px;
height: 30px;
float: left;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
}
.icons_star {
width: 13px;
height: 13px;
float: left;
background-position: -305px 0px;
margin: 1px 7px 0px 0px;
}
.text_hot {
width: 100%;
float: left;
margin: 5px 0px;
}
/*section_banner*/
.section_banner{
height: 45px;
margin: 15px 0px 10px 0px;
line-height: 45px;
border-bottom:1px solid #ccc;
padding-top: 5px;
}
.section_banner:hover{
background:#ccc;
}
.sec_jcarousel1 {
float: left;
width: 797px;
overflow: hidden;
}
.icons_pro_boom{
width:46px;
height:42px;
float:left;
background-position:0px -65px;
margin-right: 5px;
}.section_pro_group{
height: 45px;
margin: 15px 0px 0px 0px;
line-height: 45px;
/* border-bottom:1px solid #ccc; */
}
.section_pro_group:hover {
background: #e0e0e0;
cursor: pointer;
}
.icons_pro_group{
width: 45px;
height: 38px;
float:left;
/* background-position:-94px -65px; */
margin: 4px 5px 0px 0px;
background: url(../images/icon_grouppd.gif) no-repeat;
}
.sec_pro_hot{
font-size:18px;
float:left;
}
.sec_view_all{
/* float:left; */
/* font-size:16px; */
/* margin-left:15px; */
/* text-decoration: underline; */
/* color: #f00; */
/* font-style: italic; */
/* background:url(../images/arrow_red.png) 0px 50% no-repeat; */
/* padding-left: 10px; */
font-size: 13px;
background-color: #97c93f; padding: 3px 6px; color: #fff; text-decoration: none; margin: 3px 0 0 15px; border-radius: 2px; -moz-border-radius: 2px;
}
/*section_pro_hot*/
.section_pro_hot li{
display:inline;
width: 182px;
height: 285px;
padding: 5px;
float:left;
text-align:center;
border: 1px solid #d6d6d6;
margin-right:7px;
position: relative;
box-shadow: 0 0 1px #ccc;
-webkit-box-shadow: 0 0 1px #ccc;
-moz-box-shadow: 0 0 1px #ccc;
-ms-box-shadow: 0 0 1px #ccc;
-o-box-shadow: 0 0 1px #ccc;
-webkit-transition: box-shadow 1s;
transition: box-shadow 1s;
z-index: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0');
};
}
.img_pro {
width: 182px;
display: table-cell;
height: 220px;
vertical-align: middle;
}
.img_pro img {
_max-width: 182px;
_max-height: 220px;
width: 182px;
height: 220px;
}
.h3_pro_name {
font-size: 12px;
text-align: initial;
margin: 5px 0px;
}
.old_price {
text-decoration: line-through;
height: 16px;
line-height: 16px;
color: #858585;
text-align: initial;
}
.price_pro {
font-size: 14px;
font-weight: bold;
color: #e00;
text-align: initial;
}
.icons_saleoff{
width:40px;
height:40px;
float:right;
position:absolute;
background-position: -50px -65px;
top: 6px;
right: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
}
.icons_saleoff > span {
float: left;
margin: 11px 0px 0px 8px;
}
.section_pro_hot li .bginfo {
display: block;
overflow: hidden;
-ms-opacity: 0;
opacity: 0;
/* background:url(../images/bg_pro_info.png) repeat; */
height: 210px;
width: 89.7%;
padding: 5px;
font-size: 12px;
color: #000;
text-align: left;
line-height: 16px;
position: absolute;
top: 5px;
left: 5px;
z-index: 99;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.section_pro_hot li .bginfo span {
color: #000;
background:url(../images/arrow_pro_info.png) 0px 50% no-repeat;
display: block;
padding: 2px 6px;
padding-left: 10px;
}
.section_pro_hot li:hover .bginfo {
background:url(../images/bg_pro_info.png) repeat;
-ms-opacity: 1;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-khtml-opacity: 1;
top: 5px;
}
.section_pro_hot li:hover{
/* border: solid 2px #ccc!important; */
box-shadow: 0 0 20px #ccc;
}
.sec_list_pro_group li {
height: 270px;
overflow:hidden;
}
.sec_list_pro_group li .bginfo{
overflow:inherit;
top: 230px;
opacity:1;
height: 260px;
overflow: hidden;
}
ul.section_pro_hot.section_service.service_bachnx li:hover {
box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
}
.sec_list_pro_group li .bginfo .price_pro {
margin-bottom: 5px;
}
.promotion{
background:url(../images/bg_info_promo.jpg) repeat-x;
color:#fff;
padding: 5px;
margin-bottom: 10px;
}
.cls {
clear: both;
}
.box_content {
width: 100%;
display: block;
}
.cssText > a {
padding-right: 22px;
border-right: 1px solid #2b58a3;
line-height: 38px;
color: #2b58a3 !important;
font-weight: bold;
}/*news hot*/
.news_hot {
position:absolute;
top:38px;
width:300px;
box-shadow:0 0 5px #888;
z-index:888;
left: 133px;
background-color:#fff
;
display: none;
}
.news_hot li {
float:left;
display:block;
width: 93%;
border-bottom: 1px dotted #ddd;}
.news_hot li a {
width:100%;
height:70px;
display:block
}
.news_hot li a img {
max-width:70px;
max-height:70px;
float:left;
margin-top:8px
;
margin-right: 5px;
}
.news_hot li a .title_art {
display:block;
float:right;
width: 204px;
line-height:18px;
margin-top:5px
;
color: #333;
}
.news_hot li a .title_art:hover {
color:red
}
.news_hot_top:hover .news_hot{
display:block;
}
div.text_hot a {}
/*nivo====================*/
.theme-default #slider {height: 210px!important;overflow: hidden;z-index: 6;}
.theme-default .nivoSlider {position: relative;background: #fff url(../images/nivo_loading.gif) no-repeat 50% 50%;z-index: 2;}
.theme-default .nivoSlider img {position: absolute;top: 0;left: 0;display: none}
.theme-default .nivoSlider a {border: 0;display: block}
.theme-default .nivo-controlNav {position: absolute;right: 10px;bottom: 5px;margin-left: -40px;_display: none;}
.theme-default .nivo-controlNav a {display: block;width: 16px;height: 22px;background: url(../images/nivo_bullets.png) no-repeat;border: 0;margin-right: 3px;float: left;color: black;text-decoration: none;}
.theme-default .nivo-controlNav a.active {background-position: 0 -21px;}
.theme-default .nivo-directionNav a {display: block;width: 30px;height: 32px;background: url(../images/nivo_arrows.png) no-repeat;text-indent: -9999px;border: 0}
.theme-default a.nivo-nextNav {background-position: -30px 0;right: 15px;}
.theme-default a.nivo-prevNav {left: 15px;}
.theme-default .nivo-caption {font-family: Helvetica, Arial, sans-serif}
.theme-default .nivo-caption a {color: #fff;border-bottom: 1px dotted #fff}
.theme-default .nivo-caption a:hover {color: #fff}
.nivoSlider {position: relative}
.nivoSlider img {position: absolute;top: 0;left: 0}
.nivoSlider a.nivo-imageLink {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;z-index: 6;display: none;margin: 0;padding: 0}
.nivo-slice {display: block;position: absolute;z-index: 5;height: 100%}
.nivo-box {display: block;position: absolute;z-index: 5}
.nivo-caption {position: absolute;left: 0;bottom: 0;background: #000;color: #fff;opacity: 0.8;width: 100%;z-index: 8}
.nivo-caption p {margin: 0;padding: 5px}
.nivo-caption a {display: inline!important}
.nivo-html-caption {display: none}
.nivo-directionNav a {position: absolute;top: 45%;z-index: 9;cursor: pointer}
.nivo-prevNav {left: 0}
.nivo-nextNav {right: 0}
.nivo-controlNav a {position: relative;z-index: 9;cursor: pointer}
.nivo-controlNav a.active {font-weight: 700}
.hbanner-live {float: left;width: 495px;}
.nivo-controlNav a {background-image: url("../images/bullets-sprite.png") !important;background-position: 0px 0px !important;color: #FFFFFF;display: block;float: left;font: bold 12px/21px arial;height: 23px;text-align: center;margin: 0 2px;text-decoration: none;width: 22px !important;display: inline-block;*display: inline;cursor: pointer;z-index: 9;position: relative;line-height: 23px;}
.nivo-controlNav a.active {background-position: -31px 0px !important;color: #053865;}
/*------------------------ End nivo ----------------------*/
</style>
<table width="500" border="1">
<tr>
<td align="left" width="50%"><div id="module_75928">
<link href="../skins/oto/css/bachnx_update.css" rel="stylesheet" type="text/css">
<div class="wraper "><div class="section section_color">
<div class="navigation">
<ul class="col3 nolist last">
<li class="binhphong">
<h2><a href="/san-pham/binh-phong.html">Bình phong</a></h2>
</li>
<li class="giayrantuong">
<h2><a href="/san-pham/giay-dan-tuong.html" class="">Giấy dán tường</a></h2>
</li>
<li class="thamtraisan">
<h2><a href="/san-pham/tham-trai-san.html" class="">Thảm trải sàn</a> </h2>
</li>
<li class="cualuoi">
<h2><a href="/san-pham/gian-phoi.html" class="">Giàn phơi</a> </h2>
</li>
<li class="news last">
<h2><a href="/tin-tuc/rem-cua-va-noi-that/">Tin tức nội thất</a></h2>
</li>
</ul>
<ul class="col2 nolist">
<li class="remsaonhom">
<h2><a href="/san-pham/rem-sao-nhom.html">Rèm sáo nhôm</a></h2>
</li>
<li class="remcuon">
<h2><a href="/san-pham/rem-cuon.html">Rèm cuốn</a></h2>
</li>
<li class="ladoc">
<h2><a href="/san-pham/rem-la-doc.html">Lá dọc</a></h2>
</li>
<li class="winlux">
<h2><a href="/san-pham/winlux-han-quoc.html">Winlux hàn quốc</a></h2>
</li>
<li class="phukienrem">
<h2><a href="/san-pham/phu-kien-rem.html">Phụ kiện rèm</a></h2>
<!--div class="nav_level2">
<div class="up-triangle"></div>
<p class="a_root"><a href="/rem-go-basic-25mm" title="Rèm Gỗ Basic 25mm">Rèm Gỗ Basic 25mm</a></p>
<p class="a_root"><a href="/rem-go-35mm" title="Rèm Gỗ 35mm">Rèm Gỗ 35mm</a></p>
<p class="a_root"><a href="/rem-go-basic-50mm" title="Rèm Gỗ Basic 50mm">Rèm Gỗ Basic 50mm</a></p>
<p class="a_root"><a href="/rem-go-co-dien-50mm" title="Rèm Gỗ Cổ Điển 50mm">Rèm Gỗ Cổ Điển 50mm</a></p>
<p class="a_root"><a href="/rem-go-magic-50mm" title="Rèm Gỗ Magic 50mm">Rèm Gỗ Magic 50mm</a></p>
<p class="a_root"><a href="/rem-tre-tu-nhien" title="Rèm Tre Tự Nhiên">Rèm Tre Tự Nhiên</a></p>
</div-->
</li>
</ul>
<ul class="col1 nolist">
<li class="remvai">
<h2><a href="/san-pham/rem-vai.html">Rèm vải</a></h2>
</li>
<li class="remsaogo">
<h2><a href="/san-pham/rem-sao-go.html" class="">Rèm sáo gỗ</a></h2>
</li>
<li class="remromam last">
<h2><a href="/san-pham/rem-roman.html" class="">Rèm roman</a></h2>
</li>
</ul>
</div>
</div>
<!--end section_color-->
</div>
<!--end-->
<div class="clear"></div></div></td> </tr>
</table>
EmoticonEmoticon