Blog Nam

Thứ Bảy, 26 tháng 11, 2016

Ứng dụng chát có app điện thoại cho website

https://chatra.io là 1 ứng dụng chát trực tuyến trên website

có khả năng hỗ trợ chát trên điện thoại

khá tiện lợi.

Thứ Năm, 24 tháng 11, 2016

Tạo hiệu ứng rê chuột ra liên kết mạng nhện, chấm, bong bóng...

1 trang web có thể tạo cho bạn những hiệu ứng rất bắt mắt khi bạn rê chuột vào 1 background nào đó
http://vincentgarreau.com/particles.js

Chủ Nhật, 20 tháng 11, 2016

designbold.com trang thiết kế banner PRO

designbold.com

Trước tiên chúng ta cần hiểu DesignBold có một kho dữ liệu gồm rất nhiều vector, stock bản quyền và miễn phí.

Chúng ta có thể sử dụng DesignBold để tạo ra một banner, hình ảnh quảng cáo chỉ trong vài phút với các bước thực hiện rất đơn giản. Dù bạn không phải dân thiết kế cũng có thể tự tạo được sản phẩm cho riêng mình.

Thế nhưng điều quan trọng nhất đối với người thiết kế (designer) mà DesignBold không có được, đó chính là: Sự sáng tạo!

Thứ Bảy, 19 tháng 11, 2016

Query hiển thị bài viết đầu tiên nổi bật hơn các bài viết khác WP

<?php $i=1; query_posts ('showposts=5&cat=2&orderby=DESC'); while(have_posts()) : the_post(); ?>
<?php if($i==1){ ?>
<div class="bai_dau_tien">
<a href="<?php the_permalink() ;?>" class="tieu_de_bai_viet"><?php the_title() ;?></a>
</div>

<?php } ?>

<?php if($i==1){ ?> <div class="bao_ngoai"> <?php }?>

<?php if($i>1 && $i<=5){ ?>

<div class="cac_bai_con_lai"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a> </div>

<?php } ?>

<?php $i++; endwhile ; wp_reset_query() ;?>

</div>

Thứ Năm, 17 tháng 11, 2016

owl carousel Slider làm sider cho website cực kỳ dễ

Đây là một Plugin viết trên thư viện Jquery với nhiều tùy chọn giúp chúng ta có thể lựa chọn phù hợp với nhu cầu một cách dễ dàng. Sau đây chúng ta cùng tham quan Owl Carousel nhé.

Trang chủ: http://owlgraphic.com/owlcarousel

Thứ Năm, 10 tháng 11, 2016

Code menu trượt theo trình duyệt - CSS & JQuery - Cách 2

<div class="wrap" id="wrap">

<header class="top-header">
<span class="menu-icon">☰</span>
</header>

<div class="search">
<input type="search" placeholder="Search or type URL" />
</div>

<div class="top">
<div class="hero"></div>
</div>

<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>

</div>

<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

</style>

<script type="text/javascript">
var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

</script>

Code menu trượt theo trình duyệt - CSS & JQuery

<html>
<head>
<title>
Complete code to create fixed menu on scroll
</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h1 {
background-color: #333;
color: #222;
font: bold 80px "arial";
height: 200px;
padding: 25px;
text-align: center;
text-shadow: 0 1px 1px #4d4d4d;
}
p {
margin-top: 25px;
}
.nav-container {

background-color: #f86d5a;
}
.nav {

height: 46px;
border-bottom: 4px solid #222;
}
.nav ul {

list-style: none;

}
.nav ul li {
float: left;

line-height: 46px;

border-right: 2px solid #f56956;

border-left: 2px solid #f9897a;

}

.nav ul li:first-child {
border-left: none;
}
.nav ul li:last-child {
border-right: none;
}
.nav ul li a {

display: block;
text-decoration: none;
color: #333;
font-size: 1.1em;
padding-left: 20px;
padding-right: 20px;

}
.nav ul li a:hover {

background-color: #222;
color: #f86d5a;

}
.fix-nav {
/* this make our menu fixed top */

z-index: 9999;

position: fixed;

left: 0;

top: 0;

width: 100%;
}

.fix-body {
/* this will adjust body top margin to prevent content jumping when nav gets fix */

margin-top: 50px;
}
.content {
width: 80%;
margin: 25px auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.nav-container');
var pos = nav.offset().top;

$(window).scroll(function () {
var fix = ($(this).scrollTop() > pos) ? true : false;

nav.toggleClass("fix-nav", fix);
$('body').toggleClass("fix-body", fix);

}
);
}
);
</script>
</head>
<body>
<div>
<h1>
Fellow Tuts
</h1>
</div>
<div class="nav-container">
<div class="nav">
<ul>
<li>
<a href="">
Menu I
</a>
</li>
<li>
<a href="">
Menu II
</a>
</li>
<li>
<a href="">
Menu III
</a>
</li>
</ul>

</div>
</div>
<div class="content">
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn't listen. She packed her seven versalia, put her initial into the belt and made herself on the way.
</p>

<p>
put more content...

</p>
</div>
</body>
</html>