Nguồn chuyện hài nước ngoài
Categories:
chuyen-hai-nuoc-ngoai
chia sẻ kinh nghiệm việc bảo vệ
.post img {
max-width:500px;
min-width:200px;
padding : 10px;
clear: both;
}
- Điều chỉnh lại max-with và min-with cho phù hợp với phần bài đăng của bạn nha. .post img {
width:500px;
height:400px;
padding:10px;
}
- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML (Edit/Html) và chỉnh sửa chúng.
<style>Nhấn vào Lưu rồi ra ngoài web xem Menu nó sẽ như này đây:
.topnav {
overflow: hidden;
background-color: red;
margin-left:7%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: black;
color: white;
}
.topnav .icon {
display: none;
}
@media only screen and (max-width: 500px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav {
margin-left:10px;
}
.topnav a.icon {
float: right;
display: block;
margin-right: 20px;
}
}
@media screen and (max-width: 500px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<div class="topnav" id="myTopnav">
<a href="/">Home</a>
<a href="/search/label/Blogspot">Blogspot</a>
<a href="/search/label/SEO">SEO</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="/">Home</a>Phần chữ màu đen (Home, Blogspot, SEO) các bạn có thể sửa thành tên chuyên mục (label) hoặc text bất kỳ mà bạn thích.
<a href="/search/label/Blogspot">Blogspot</a>
<a href="/search/label/SEO">SEO</a>
<a href="#">Tin tức</a>Sửa # thành link các bạn muốn Tin tức link tới nhé.
https://www.w3schools.com/howto/howto_js_topnav_responsive.aspChúc các bạn thành công , nếu có thắc mắc gì thì để lại comment nhé!
<style>
/*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
#mbt-menu, { margin: 0; padding: 0; list-style: none; } #mbt-menu { width: 500px; margin: 10px auto; border: 0px solid #222; background-color: #888; background-image: -moz-linear-gradient(#666, #FAF); background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#FAF)); background-image: -webkit-linear-gradient(#666, #FAF); background-image: -o-linear-gradient(#666, #FAF); background-image: -ms-linear-gradient(#666, #FAF); background-image: linear-gradient(#666, #FAF); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #mbt-menu { zoom:1; } #mbt-menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mbt-menu a { float: left; padding: 12px 30px; color: #FFF; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #222; } #mbt-menu li:hover > a { color: #FC803D; } *html #mbt-menu li a:hover { /* IE6 only */ color: #FC803D; } #mbt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mbt-menu ul a:hover { background-color: #FC803D; background-image: -moz-linear-gradient(#07CDEF, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#07CDEF), to(#0295DG)); background-image: -webkit-linear-gradient(#07CDEF, #0295DG); background-image: -o-linear-gradient(#07CDEF, #0295DG); background-image: -ms-linear-gradient(#07CDEF, #0295DG); background-image: linear-gradient(#07CDEF, #0295DG); } </style> <ul id="mbt-menu"> <li><a href="LINK BLOG">TRANG CHỦ</a></li> <li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li> <li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li> <li><a href="LINK NHÃN 3">TÊN NHÃN 3</a></li> <li><a href="LINK NHÃN 4">TÊN NHÃN 4</a></li> <li><a href="LINK NHÃN 5">TÊN NHÃN 5</a></li> </ul>
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href=' link trang chủ'>TRANG CHỦ</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN </a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'> TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
</li>
</ul>
</div>
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href=' link trang chủ'>TRANG CHỦ</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a></li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN </a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
<a href='link chuyên mục'>TÊN MỤC</a>
<ul>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
<li><a href='link nhãn'> TÊN NHÃN</a></li>
<li><a href='link nhãn'>TÊN NHÃN</a></li>
</ul>
</li>
<li>
</li>
</ul>
</div>