Web

cấu tạo các id thẻ div trong wordpress

Posted on 23/10/2014 Updated on 21/05/2015

<body>
<div id=”page-wrap”>
<div id=”header”>
</div><!–and header–>
<div id=”top-bar”>
<ul id=”menu-page-menu”>
</ul><!–and menu-page-menu–>
</div><!–and top-bar–>
<div id=”searchBox”>
</div><!–and searchBox–>
<div id=”page-info”>
<div id=”featured”>
</div><!—and featured—>
</div><!—and page-info—>
<div id=”content-wrap”>
<div id=”first-sidebar”>
</div><!–and first-sidebar–>
<div id=”main-content”>
</div><!–and main-content–>
<div id=”second-sidebar”>
</div><!–and second-sidebar–>
</div><!—and content-wrap—>
<div id=”footer”>
</div><!–footer–>
</div><!–and page-wrap–>
</body>

This entry was posted in THỦ THUẬT, Web.

Trọn Bộ 39 DVD WordPress, HTML5, CSS3, jQuery, Javascript

Posted on 23/10/2014

20.DreamWeaver And WordPress – Building Websites

21.WordPress 3 – Develop a Secure Site: http://www.fshare.vn/folder/TT5WMHPV1T/

22.Maintainable CSS With Sass and Compass:http://www.fshare.vn/folder/T05R89602T/

23.Mastering Corporate Design: http://www.fshare.vn/folder/THSAM33J1T/

24.Parallax Scrolling for Web Design: http://www.fshare.vn/folder/TJG8X56MVT/

25.Perfect Netbean Workflow: http://www.fshare.vn/folder/T3B7R11SBT/

26.Perfect Workflow with Sublime Text 2: http://www.fshare.vn/folder/THS930GSPT/

27.PSD to HTML5: http://www.fshare.vn/folder/TG6WSA4BGT/

28.PSD2Wordpress – Minimal Theme: http://www.fshare.vn/folder/T3D3MSZY3T/

29.Responsive Web Design for Beginners: http://www.fshare.vn/folder/T7X8HSZ9DT/

30.Responsive Web Design with Foundation: http://www.fshare.vn/folder/T55K6XJ42T/

31.The Magic of Custom Post Type WordPress:http://www.fshare.vn/folder/TH6YMXGHKT/

32.Using Grids in Web Design: http://www.fshare.vn/folder/THQF7W619T/

33.Using WordPress Setting API: http://www.fshare.vn/folder/TH21ZW2N3T/

34.Web Application Design: http://www.fshare.vn/folder/T41VSWXDVT/

35.Hướng dẫn Woocommerce tại Lynda: http://www.fshare.vn/folder/T7JMCJPB6T/

36.WordPress 3.2 Theme Design Beginner’s Guide:http://www.fshare.vn/folder/TTSB071V9T/

37.WordPress Widget – Front to Back: http://www.fshare.vn/folder/TYPN7C1W3T/

38.WordPress Plugin Development Essentials:http://www.fshare.vn/folder/TRGKDTKDFT/

39.WP Plugin Development Full: http://www.fshare.vn/folder/TKSX7HDRQT/

This entry was posted in Phần mềm, Tài nguyên học, Web.

Các lệnh thường gặp trong css

Posted on 23/10/2014

Đối với một Web Designer không biết về CSS thì quả thực sẽ là một thiệt thòi rất lớn, nếu không muốn nói là kém. Vậy bài viết này sẽ trang bị cho các bạn những kiến thức cơ bản cần và đủ là thiết kế một temp cho website hoàn chỉnh.- Việc đầu tiên các bạn cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Trên thế giới hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ được tin dùng nhất chính là Mozila Firefox và Internet Explorer (trình duyệt của window). Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó như các bạn tưởng tượng.

Đọc tiếp »

This entry was posted in Web.

Phân biệt ID và Class trong CSS

Posted on 23/10/2014

1. Id

Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id

1.1 Id là gì?

id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML.

1.2 Id dùng khi nào?

Do mỗi trang HTML mỗi đối tượng chỉ có thể có duy nhất một id chính vì vậy id được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ: khung viền (wrapper), menu chính (main menu),…).

css trong thiết kế web

1.3. Cách dùng id

Nội dung thông tin…

Trong file CSS chúng ta sẽ dùng dấu “#” trước tên đối tượng mà chúng ta đặt là id

2. Class

Bây giờ chúng ta tiếp tục đi tìm hiểu về thuật ngữ class và cách sử dụng chúng trong quá trình viết mã HTML.

2.1 Class là gì?

class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế và việc định nghĩa nhiều đối tượng cùng thuộc một class nào đó.

Giả sử rằng chúng ta có một trang HTML như sau:

Nội dung thông tin…

Nội dung thông tin 2…

Giả sử rằng chúng ta định nghĩa các thuộc tính của class=”info” như sau:

.info {
margin: 5px 10px;
padding: 10px;
border: 1px solid #F0F0F0;
}

Bây giờ bạn muốn định nghĩa cho thẻ div nằm trong phần author có màu nền là màu đen và chữ là màu trắng thì ta chỉ cần định nghĩa thêm hai thuộc tính này còn thẻ
đã thừa kế các thuộc tính margin, padding, border của class ở trên. Phần định nghĩa thêm như sau:

div.author .info {
background-color: #000000;
color: #FFFFFF;
}

Khi đó đối tượng
trong phần author sẽ bao gồm các thuộc tính sau.

div.author .info {
margin: 5px 10px;
padding: 10px;
border: 1px solid #F0F0F0;
background-color: #000000;
color: #FFFFFF;
}

Qua ví dụ trên chúng ta cũng thấy được việc sử dụng nhiều đối tượng thuộc cùng một class trong cùng một trang như thế nào.

2.2 Dùng class khi nào?

Do tính chất của class đã trình bày ở trên có thể suy ra rằng nếu khi nào chúng ta muốn nhiều đối tượng dùng chung một số thuộc tính nào đó (vd: color, background, border,…) thì chúng ta nên gộp chúng vào chung một class.

2.3 Cách dùng class

Trong HTML chúng ta dùng như sau:

Nội dung thông tin…

Dòng nổi bật

Trong file CSS chúng ta đặt dấu “.” trước tên của đối tượng mà chúng ta đặt là class.

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

This entry was posted in Web.

Hướng dẫn bo góc và đổ bóng cho đối tượng bằng css

Posted on 23/10/2014

Hướng dẫn bo góc và đổ bóng cho thẻ DIV mà không dùng hình ảnh

Để hỗ trợ cho trình bày trên các trang web, thông thường chúng ta thấy có 2 phương pháp chính hay được sử dụng

+ Sử dụng thuần css.

+ Sử dụng CSS hỗ trợ với hình ảnh.

Tuy nhiên, mỗi phương pháp có ưu và nhược điểm khác nhau. Nếu sử dụng thuần css thì đôi khi trang web của bạn hiển thị tốt trên trình duyệt này nhưng lại gặp không ít khó khăn khi người dùng sử dụng trình duyệt khác (IE là 1 minh chứng trong các phiên bản IE.6 IE.7). Trong khi đó viêc sử dụng hình ảnh để hỗ trợ dựa trên nguyên tắc ghép nhiều mảnh hình ảnh vào để tạo ra hiệu ứng trình bày tại 4 góc thường mất thời gian, tốc độ nạp trang chậm (so với phương pháp thuần css) .

Với kinh nghiệm và vốn hiểu biết của mình, trong bài viết này tôi xin giới thiệu với bạn cách bo góc và đổ bóng cho khung dựa vào thẻ DIV bằng cách sử dụng các thuộc tính border-radius và box-shadow của CSS3.

Các hiệu ứng bo góc và đổ bóng mờ của CSS3 chỉ áp dụng cho trình duyệt web có hỗ trợ CSS3 như Chrome, Firefox , Safari, Opera , IE 9.

Đọc tiếp »

This entry was posted in THỦ THUẬT, Web.

Làm sao bỏ đường gạch chân của liên kết

Posted on 23/10/2014

Mặc định, các liên kết luôn có đường gạch chân, nhưng với CSS chúng ta có thể loại bỏ một cách dễ dàng với thuộc tính text-decoration.

1
a {text-decoration:  none}

This entry was posted in THỦ THUẬT, Web.

Thêm Bài viết liên Quan và các tin khác

Posted on 23/10/2014

Thủ thuật này sẽ xuất hiện 2 phần 1 là danh sách bài liên quan có hình ảnh và một đoạn trích và 1 phần nữa là danh sách bài đăng ở dưới. ngoài ra hiện ngày tháng đăng bài khi chỉ chuột vào bài đăng.

Cách thực hiện như sau:

Bước 1: Các bạn vào Thiết Kế => Chỉnh sửa HTML sau đó dán đoạn Code bên dưới lên trên thẻ </head>

<!– Start Related posts by xuytthideptrai.blogspot.com –>

<b:if cond=’data:blog.pageType == "item"’>

#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:5px 0 0 5px;margin:0;}

#related-posts h2{margin:0 0 5px 0;background: url(http://4.bp.blogspot.com/-eoLTJ81_Sc4/TzOQguoia5I/AAAAAAAAAqw/4lYel3K3PFI/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}

#related-posts a{color:black;}

#related-posts a:hover{color:black;}

#related-posts a:hover {background-color:#d4eaf2;}

.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 145px;margin:1px;overflow:hidden;line-height:1.3em}

.related-posts {margin: 0;padding: 0}

.related-posts ul {margin: 0;padding: 0}

.related-posts ul li {background: url(http://2.bp.blogspot.com/-xqifPunAyFI/TaJlWbZEcGI/AAAAAAAABZ0/AWsX5sEj8Co/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}

</style>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

var thumburl = new Array();

function related_results_labels_thumbs(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

try

{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){

s=entry.content.$t;a=s.indexOf(“<img”);b=s.indexOf(“src=””,a);c=s.indexOf(“””,b+5);d=s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=””))

{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== ‘undefined’) thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;}

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+”…”;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == ‘alternate’) {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

}

function removeRelatedDuplicates_thumbs() {

var tmp = new Array(0);

var tmp2 = new Array(0);

var tmp3 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains_thumbs(tmp, relatedUrls[i]))

{

tmp.length += 1;

tmp[tmp.length – 1] = relatedUrls[i];

tmp2.length += 1;

tmp3.length += 1;

tmp2[tmp2.length – 1] = relatedTitles[i];

tmp3[tmp3.length – 1] = thumburl[i];

}

relatedTitles = tmp2;

relatedUrls = tmp;

thumburl=tmp3;

}

function contains_thumbs(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels_thumbs(current) {

var splitbarcolor;

if(typeof(splittercolor) !== ‘undefined’) splitbarcolor=splittercolor; else splitbarcolor=”#d4eaf2″;

for(var i = 0; i < relatedUrls.length; i++)

{

if((relatedUrls[i]==current)||(!relatedTitles[i]))

{

relatedUrls.splice(i,1);

relatedTitles.splice(i,1);

thumburl.splice(i,1);

i–;

}

var r = Math.floor((relatedTitles.length – 1) * Math.random());

var i = 0;

if(relatedTitles.length>0) document.write(‘<h2>’+relatedpoststitle+'</h2>’);

document.write(‘<div style=”clear: both;”/>’);

while (i < relatedTitles.length && i < 20 && i<maxresults) {

document.write(‘<div class=”lienquan”><a style=”text-decoration:none;padding:3px;float:left;”‘);

document.write(‘ href=”‘ + relatedUrls[r] + ‘”><img style=”width:60px;height:40px;border:1px solid #A8A8A8;padding:4px;background:#fff;margin-right:4px; float: left;” src=”‘+thumburl[r]+'” /><span style=”color: #006633;font-family: Arial;font-size: 12px;font-weight: normal;text-align: justify”>’+relatedTitles[r]+'</span></a></div>’);

i++;

if (r < relatedTitles.length – 1) {

r++;

} else {

r = 0;

}

document.write(‘</div>’);

relatedUrls.splice(0,relatedUrls.length);

thumburl.splice(0,thumburl.length);

relatedTitles.splice(0,relatedTitles.length);

}

//]]>

</script>

//<![CDATA[

//]]>

</script>

</b:if>

<!– End Related posts by xuytthideptrai.blogspot.com –>

– Điều trỉnh height và width mình tô màu đỏ ở trên cho phù hợp với Blog của bạn nha:D

Lưu Template lại.

Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

hoặc

Code:

<!– Related posts by xuytthideptrai.blogspot.com –>

<b:if cond=’data:blog.pageType == "item"’>

<b:loop values=’data:post.labels’ var=’label’>

</b:loop>

var currentposturl="<data:post.url/>";

var maxresults=9;

var relatedpoststitle="";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div>

<b:loop values=’data:post.labels’ var=’label’>

</b:loop>

</div>

</b:if>

<!– Related posts by xuytthideptrai.blogspot.com –>

Trong đó các bạn chú ý:

– max-results=9&quot là số bài ở dạng thumbnail

– var maxresults=12 là số bài ở dạng list.

This entry was posted in THỦ THUẬT, Web.

Thêm bộ nút Like của Facebook – Google Plus – Tweet vào blogspot

Posted on 23/10/2014 Updated on 21/05/2015

Trong các bài viết gần đây, thấy có khá nhiều bạn hỏi làm thế nào để thêm bộ nút chia sẻ mạng xã hội dạng nằm ngang bao gồm: Facebook, Google +, Tweet giống trong template tin tức Congly, nên hôm nay mình sẽ hướng dẫn các bạn cách add nó vào blogspot 🙂

Cách Thêm Nút Chia Sẻ Mạng Xã Hội

Bước 1: Đăng nhập vào trang quản trị blog

– Vào “Mẫu” -> “Chỉnh sửa HTML“.

– Thêm đoạn đoạn scripts sau vào trước thẻ </head>.

Bước 2: Tích hợp bộ nút chia sẻ vào Widget

– Vào “Bố cục” -> “Thêm tiện ích mới” tại vị trí bạn mong muốn.

– Chọn tiện ích HTML/JAVASCRIPTS.

– Thêm đoạn code sau vào nội dung của tiện ích:

</div>

Bước 3: Lưu lại và xem kết quả 🙂

This entry was posted in THỦ THUẬT, Web.

Cách thêm khung bình luận của Facebook vào blogger/blogspot

Posted on 23/10/2014 Updated on 21/05/2015

Khung chat của Facebook cho blogspot

Bước 1: Đăng nhập vào trang quản trị blog.

Vào “Mẫu” chọn “Chỉnh sửa HTML“

Bước 2: Ấn tổ hợp phím Ctrl F, tìm </head>

Có thể bạn nên xem: Thêm comment app facebook cho blogspot

Chèn đoạn code dưới đây vào trước thẻ “</head>“.

//<![CDATA[

var purl= location.href;

var fb_href = purl.substring(0,purl.indexOf(“.html”)+5);

var fbcm ='<div class=”fb-comments” data-href=”‘+fb_href+'” data-num-posts=”8″ data-width=”766″></div>’;

//]]>

</script>

Lưu ý: Các bạn có thể thay tùy ý các thông số dưới đây

data-num-posts=”8″: Số bình luận được phép hiển thị, nếu nhiều hơn thì tự động gộp lại.
data-width=”766px”: Chiều rộng của khung bình luận Facebook.

Bước 3: Ấn tổ hợp phím Ctrl F, tìm </body>

Chèn đoạn code bên dưới và trước thẻ “</body>”.

<div id=’fb-root’/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/vi_VN/all.js#xfbml=1”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script>

Chèn khung comment facebook vào nơi bạn muốn hiển thị trong blog

Bước 4: Copy đoạn code bên dưới

<b:if cond=’data:blog.pageType == “item”‘> <script type=’text/javascript’> document.write(fbcm); </script> </b:if>

Thông thường ta sẽ chèn nó vào cuối bài viết. Các bạn Ctrl F, tìm dòng <b:include data=’post’ name=’post’/>

Copy và dán đoạn code bên trên vào phía dưới dòng vừa tìm được.

Lưu ý: Một số mẫu template (giao diện) có nhiều hơn một dòng <b:include data=’post’ name=’post’/>, các bạn chọn dòng đầu tiên tìm được nha, sau đó lưu lại, nếu thấy không được thì ta chọn dòng khác 😀

Bước 5: Save và xem thành quả

This entry was posted in THỦ THUẬT, Web.

Blog IT Xuan Viet

Tim Toi – Tich Luy – Thanh Cong

Web

cấu tạo các id thẻ div trong wordpress

Trọn Bộ 39 DVD WordPress, HTML5, CSS3, jQuery, Javascript

Các lệnh thường gặp trong css

Phân biệt ID và Class trong CSS

1. Id

1.1 Id là gì?

1.2 Id dùng khi nào?

1.3. Cách dùng id

2. Class

2.1 Class là gì?

2.2 Dùng class khi nào?

2.3 Cách dùng class

Hướng dẫn bo góc và đổ bóng cho đối tượng bằng css

Làm sao bỏ đường gạch chân của liên kết

Thêm Bài viết liên Quan và các tin khác

Thêm bộ nút Like của Facebook – Google Plus – Tweet vào blogspot

Cách Thêm Nút Chia Sẻ Mạng Xã Hội

Cách thêm khung bình luận của Facebook vào blogger/blogspot

Chèn khung comment facebook vào nơi bạn muốn hiển thị trong blog