Chuyên mục Thu-Thuat tại Khamphablog.com

Thu-Thuat

Showing posts with label Thu-Thuat. Show all posts

Vì sao blogspot không nhận thumbnail khi share link

Ty ren tán chuồn August 01, 2015 1

Ty ren tán chuồn

Cách khắc phục lỗi thumbnail khi chia sẻ link lên facebook

Thumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay một website/blogspot này. Nhưng gần đây mình nhận được nhiều câu hỏi của các bạn rằng "tại sao em share link lên facebook nó lại hiển thị thumbnail khác".

Và đó cũng là thắc mắc của một số bạn khác và đó cũng là động lực để mình viết bài này chia sẻ cho các bạn cách khắc phục lỗi này giúp khi chia sẻ link hiển thị đúng thumbnail của trang chủ hoặc một trang bài viết bất kỳ nào đó.

Cách khắc phục lỗi thumbnail khi chia sẻ link lên facebook

Đầu tiên mình sẽ hướng dẫn các bạn cách tự động lấy thumbnail bài viết làm ảnh đại diện cho link khi chia sẻ, cách này thì khá đơn giản. Các bạn chỉ việc vào template blogspot của mình, thêm đoạn code sau dưới thẻ <head>

<b:if cond='data:blog.postImageUrl != ""'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AXaRxSNtJGsh4r2De69ORYbpvp_Z7x8uozSfSz6Wcsi0Vrn9ObNJtGjYticsr5Az1FrsQ5zzMOkKvgDjpul96e_U4g_L6ISSd8HrSUbLRq-EbWsD6K61PnwPZW5tsYUfJtTJhqNygaQ/s1600/logo.png' property='og:image'/>
</b:if>

Đoạn code này có ý nghĩa gì?

Đoạn code trên nó giúp chúng ta khi đăng bài viết thì nó sẽ tự động lấy thumbnail bài viết làm ảnh đại diện cho link, còn link ảnh bên dưới là tấm ảnh đại diện khi bạn share link trang chủ.

Chuyển hướng link trong blogpsot (Redirect 301)

Đỗ Mạnh Hồng July 03, 2015 0

Đỗ Mạnh Hồng

Chuyển hướng link hay còn gọi là thủ thuật seo Redirect 301. Ứng dụng khi dùng Redirect 301 cho Seoer: Đó là khi muốn chuyển sang tên miền mới mà muốn giữ thứ hạng các từ khóa (Site cũ bị Sandbox hay Penalty ….hoặc hình phạt khác). Hoặc đơn giản chuyển bài viết sang link khác.

ứng dụng Redirect 301 trong blogpsot

Chuyển pdf sang word trực tuyến không bị lỗi font

Đỗ Mạnh Hồng June 30, 2015 0

Đỗ Mạnh Hồng

Bạn đã từng loay hoay cả buổi để tìm cách chuyển đổi một file pdf sang file word để tiện cho công việc của mình nhưng không thành công, sử dụng rất nhiều phần mềm nhưng không làm được, khi được thì lại bị lỗi font. Rất ức chế và khó chịu trong người đúng không nào.

Tôi đã từng như thế, và giờ đây việc đó đã trở nên đơn giản hơn bao giờ hết, giờ đây chúng ta chỉ cần chuyển đổi một file pdf sang word không bị lỗi font chỉ mất vài phút với công cụ chuyển đổi online pdftoword.us .

Hướng dẫn chuyển đổi file pdf sang word trực tuyến không bị lỗi font

Bước 1 : Đăng nhập vào website Pdftoword tại địa chỉ http://pdftoword.us/ tại đây bạn chỉ cần để ý đến ô hình chữ nhật ở bên trái.(hình dưới)

chuyển đổi pdf sang word không bị lỗi font

[Tips] - Thủ thuật khống chế css và js mặc định của blogspot

Đỗ Mạnh Hồng June 27, 2015 2

Đỗ Mạnh Hồng

Css mặc định của blog là những css khi bạn search với PageSpeed Insights thì nó sẽ báo chặn hiển thị trên blog những bạn vào templates tìm mãi là ko thấy những link css này. Ở bài trước mình đã hướng dẫn các bạn cách xóa js mặc định của blogspot, và bài hôm nay mình hướng dẫn thêm cách khống chế css mặc định của blog.

cách khống chế css và js mặc định của blogpsot

Bài này sẽ kèm luôn việc xóa js và css mặc định của blogspot, 2 trong 1 rất tiện lợi cho các bạn.

Làm sao để xóa css và js mặc định của blogspot.

Để xóa những link js và css mặc định này các bạn đăng nhập vào phần admin Blogger > Templates (mẫu) và chỉnh sửa html và tiến hành chỉnh sửa như sau.
Lưu ý : trước khi thực hiện những bước bên dưới nhớ backup lại mẫu đề phòng trường hợp xấu nhất xảy ra nhé
1. Tìm đến thẻ <head> và sửa nó lại thành

<head>

2. Tìm đến thẻ </head> và sửa nó lại thành

</head>

3. Tìm đến thẻ <body> và sửa nó lại thành

<body>

4. Và cuối cùng là chỉnh sửa thẻ </body> thành

</body>

Sau đó tiến hành lưu templates blogspot của bạn lại và kiểm tra thành quả nó sẽ như hình trên.
Những lỗi thường mắc phải khi thực hiện quá trình trên

Đôi khi làm việc này thì blog của bạn admin mất đi quyền quản lý comments có nghĩa là không thể xóa comments hay làm gì được thì các bạn hãy thêm một đoạn css vào templates blogspot của mình.

div.blog-admin, div.pid-xxxxxxxxx { display:block; }
span.blog-admin, span.pid-xxxxxxxxx { display:inline; }

Trong đó :

xxxxx là ID blog của bạn

Thế là xong bay giờ tôi nghĩ bạn check lại với PageSpeed Insights thì khá ổn và blog cũng load nhanh được đôi chút rồi.

[Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5

Đỗ Mạnh Hồng June 24, 2015 0

Đỗ Mạnh Hồng

W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát triển của giao thức và các hướng dẫn mà bảo đảm lâu dài sự tăng trưởng của các trang web.

W3C là một trong số các chuẩn cho thiết kế web hiện nay, nó không phải là chuẩn quyết định mọi việc diễn ra trên môi trường Internet. Nhưng W3C giúp bạn định hướng khi xây dựng website.

[Tips] - Những thủ thuật blogspot cần phải có cho blog

Đỗ Mạnh Hồng June 23, 2015 0

Đỗ Mạnh Hồng

Thủ thuật blogspot là gồm những tiện ích giúp làm đẹp cho blogspot và giúp blog trở nên chuyên nghiệp hơn, nhưng cũng ta cũng không nên quá lạm dụng các thủ thuật blogspot mà nó sẽ không tốt cho seo blogspot của bạn.

Bài viết hôm nay Khám Phá Blog's sẽ chia sẻ cho bạn nên chỉ sài những thủ thuật blogspot nào hạn chế bớt những thủ thuật blogspot không cần thiết cho những bạn làm seo blogspot.

thủ thuật blogspot

[Tips] - Mẫu PopularPosts đẹp mà bạn nên dùng

Đỗ Mạnh Hồng June 20, 2015 1

Đỗ Mạnh Hồng

PopularPosts là bài đăng phổ biến là những bài viết được xem nhiều nhất thường được hiển thị trên sidebar của blogspot, thay vì mặc định của nó không được đẹp thì chúng ta có thể dùng css làm cho nó trở nên đẹp và chuyên nghiệp hơn cho blogspot.

Hôm nay Khám Phá Blog's chia sẽ một mẫu PopularPosts cực đẹp mà tôi nghĩ mà bạn nên dùng, đánh số thứ tự từ 1 đến 10 khá chuyên nghiệp.

[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)

Đỗ Mạnh Hồng June 19, 2015 4

Đỗ Mạnh Hồng

Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thường hay tích hợp. Là tiện ích chia widget trên blog của bạn ra thành 3 hay 4 tab rất chuyên nghiệp.

[Tips] - Menu chuyên mục Css full Responsive cho Blogspot

Đỗ Mạnh Hồng June 19, 2015 0

Đỗ Mạnh Hồng

Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu này là tích hợp Responsive co giản theo các loại màn hình.

[Tips] - Share templates blogspot đầy đủ thành phần

Đỗ Mạnh Hồng June 19, 2015 0

Đỗ Mạnh Hồng

Mấy ngày hôm nay có nhiều bạn là newbi muốn tập rip blogspot nên xin mình mẫu templates blogspot trắng đầy đủ thành phần mà mình chưa kịp send, nên hôm nay tiện đây mình xin chia sẻ cho các bạn templates blogspot trắng tinh đầy đủ các thành phần cho các bạn rip blogspot.

[Tips] - Lấy data và cách phòng tránh bị ăn cắp data blogspot

Đỗ Mạnh Hồng June 15, 2015 2

Đỗ Mạnh Hồng

Chào các bạn, việc ăn cắp data blogspot hiện nay là vấn đề đâu đầu cho các blogger hiện nay, vì toàn bộ bài viết trên blog của họ là tài sản và tâm huyết của họ mà không dưng bị một người khác lấy toàn bộ bài viết làm của riêng thì là điều thật khó sử và tức tối chỉ biết kêu ông trời.

Hôm nay Khám Phá Blog's sẽ hướng dẫn các bạn thủ thuật blogspot đơn giản để lấy data dữ liệu blogspot người khác và cách phòng tránh người ta lấy dữ liệu blogspot.

Làm sao để lấy được dữ liệu blogspot người khác

Việc này thường khá đơn giản chỉ mất vài phút, lúc trước mình thường tìm trên google và có nhiều cách nhưng cách nhanh nhất yêu cầu cần phải có phần mềm IDM, nhưng hiện nay mình đã phát hiện ra một cách nhanh hơn là không cần dùng đến IDM chỉ cần thao tác trên trình duyệt chorme là đc rồi.
Khi thao tác ăn cắp data dữ liệu blogspot người khác bạn sử dụng đoạn code

http://diachi.blogspot.com/atom.xml?redirect=false&start-index=50&max-results=100

Giải thích đoạn code trên

diachi.blogspot.com : là địa chỉ blogspot mà bạn cần lấy dữ nếu blog đã gắn doman thì bạn thay vào doman.com ...
Con số 50 và 100 là con số bắt đầu và kết thúc, có nghĩa là như đoạn code trên là mình muốn lấy dữ liệu trên blog đó từ bài viết số 50 đến bài viết thứ 100, nếu bạn muốn lấy từ bài viết đầu tiên thì sửa số 50 thành số 1.

Sau khi đã sửa code hoàn chỉnh thì dán nó vào url trình duyệt.và kết quả nhận được sẽ như hình bên dưới

rip data blogspot

[Tips] - Bài viết liên quan đơn giản cho blogspot

Đỗ Mạnh Hồng June 13, 2015 0

Đỗ Mạnh Hồng

Bài viết liên quan hay nó còn được các blogger gọi nó là Related Posts, đây là một tiện ích khá cần thiết cho bất kỳ một blog nào và về lĩnh vực gì đi nữa thì cũng cần tới nó. Có nhiều blogger phải bỏ nó để seo blogspot, vì tiện ích này bắc buộc phải sài js mà hạn chế js là tiêu chí của các seoer trong seo blogspot.

Vì thế cho nên hôm nay Khám Phá Blog's chia sẻ cho các bạn tiện ích bài viết liên quan cực kỳ đơn giản và nhẹ thích hợp cho các seoer thêm vào blog của mình mà không làm chậm đáng kể tốc độ của blog.

Thêm bài viết liên quan cho blogspot

[Tips] - Menu Responsive Blogspot

Đỗ Mạnh Hồng June 13, 2015 0

Đỗ Mạnh Hồng

Như những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Responsive cho blogspot. Hôm nay mình cũng nói sơ qua Responsive là giao diện mobile cho blogspot khi xem ở những loại màn hình khác nhau nó sẽ co giản hợp lý khá chuyên nghiệp.

Menu Responsive cũng tương tự như thế khi bạn tích hợp menu Responsive này thì khi xem trên desktop nó sẽ giản ra và khi xem mobi nó sẽ co lại trông rất chuyên nghiệp
Demo desktop

Demo mobile

[Tips] - Câu hỏi tại sao của newbi về seo blogspot

Đỗ Mạnh Hồng June 11, 2015 2

Đỗ Mạnh Hồng

Có nhiều bạn hỏi mình tại sao ?

Sao em làm seo blogspot theo cách của anh mà 1 tuần, 2 tuần rồi mà không thấy lên top google. Mình chả biết nói gì mà cười thôi.

seo blogspot như thế nào

[Tips] Làm sao để thêm bài viết liên quan cho blogspot

Đỗ Mạnh Hồng June 10, 2015 0

Đỗ Mạnh Hồng

Bài viết liên quan là gì?

Bài viết liên quan hay còn gọi là Related Posts là những bài viết cùng chủ đề (cùng label) nằm dưới bài viết chi tiết nhằm giúp người đọc đỡ tốn công tìm kiếm những bài viết mà họ quan tâm trên blogspot.

Bài viết liên quan để làm gì?

Nếu trước đây khi một ai đó vào blog của bạn đọc 1 bài rồi out thì này họ sẽ tìm thấy những bài viết liên quan mà họ quan tâm, họ sẽ ở lại blog của bạn lâu hơn và giúp blogspot của bạn có sức thu hút hơn.

tiện ích bài viết liên quan cho blogspot

[Tips] - Menu responsive cho blogspot

Đỗ Mạnh Hồng June 10, 2015 0

Đỗ Mạnh Hồng

Responsive là điều chỉnh blogspot phù hợp khi xem trên thiết bị di động. Menu responsive có nghĩa là menu khi xem blogspot trêm mobi được thu gọn trông rất đẹp.

Thêm menu responsive cho blogspot

1. Đăng nhập vào blogspot

Vào phần quản trị Blogger > Templates (mẫu) > Chỉnh sửa HTML

2. Chỉnh sửa mẫu

Bước 1 : Tìm đến thẻ <head> và thêm đoạn code sau dưới nó. Nếu có rồi thì bỏ qua bước này

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Bước 2. Tìm đến thẻ </head> và thêm đoạn css sau trên nó

<style type='text/css'>
/* MENU TREN MOBILE */
a.nav {
display: block;
margin-bottom: 20px;
padding: 20px;
background-color: #dce6f0;
color: #646464;
text-align: center;
}
a.nav:hover {
background-color: #c8d2dc;
}
/* the breakpoint same as above */
@media all and (min-width: 480px) {
a.nav-toggle {
display: none;
}
}
.nav {
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}
@media screen and (max-width: 800px) {
.nav {
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nUeXHAf_iReOhOh15wRPuffGzVh5EWTo0N7hGH2Ca-HlLwSvC516eZMiwcOTWcumDOKM-DixDtfIO_51ii6w8-spsxU8bOfsgkKLfbfjk4iqJwNrPIF-JKkZrhL30VBRZX_Nnmum9V_z/s1600/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all li items */
margin: 0;
}
.nav .current {
display: block; /* show only current li item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQYpFXyt7MXThqWnqQm_zssPDl8qY9Uh8Bpzyjw_tHu21hFDWSXx3HvOYf9v9TOQyicUIZbC8S2trSnHikS35GH8JM1oCXM7zOlJuUSyve1YjZvmMoRuBXE1UlnIa4ZyOwAA20B0L6fiM/s1600/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
right: 1%;
top: 1%;
left: auto;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
@media all and (min-width: 801px) {
.nav {
display: none;
}
}
@media all and (max-width: 800px) {
#outer-wrapper {
width: 98%;
margin: 0 1%;
}
#main-wrapper,#header-wrapper {
width: 100%;
min-height: 50px;
}
#header-wrapper {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqC57o5MH4e03FDGYTtB13Cy31g0GEChOa76oi63CLo_7gPi4nLXzBZhek31iaGIbMKdgAwT850iCgf8AT0q-SzKvpT_6MWLJjKrgCEcuNfoj002nNSGbrmNzfQSnpNSFB6VHslUrgi5r/s1600/logo-gamuda-gardens2.png);
background-repeat: no-repeat;
}
#footer,#rsidebar-wrapper {
width: 100%;height: auto;
float: none;
margin: 0;
padding: 0px;
}
div#Header1,#lsidebar-wrapper,div#HTML92,.span-24, div.span-24 {
display: none;
}
}
</style>

Bước 3. Tùy chỉnh xem menu trên di động

@media all and (min-width: 801px) {
#menu-computer {display:none;}
}

Giải thích đoạn code trên : đoạn code này có nghĩa là khi xem blog ở màn hình có kích thước là 801px thì menu trên desktop sẽ ẩn đi và hiện menu ở di động. Nếu bạn thích thêm các bạn màn hình khác thì tự thêm nhé, mình chỉ làm ví dụ.
Bước 4 : Chèn đoạn code sau ở nơi cần hiển thị menu

<nav class='nav right'>
<ul>
<li class='current'><a href='#'>MENU</a></li>
<li><a expr:href='data:blog.homepageUrl'>Trang chủ</a></li>
<li><a href='link bai viet 1'>Menu 1</a></li>
<li><a href='link bai viet 2'>Menu 2</a></li>
<li><a href='link bai viet 3'>Menu 3</a></li>
<li><a href='link bai viet 4'>Menu 4</a></li>
</ul>
</nav>

Lưu mẫu lại và lôi điện thoại ra test ngay và luôn nào. Chúc các bạn thành công.

[Tips] - Vô hiệu hóa JS mặc định giúp blogspot load nhanh

Đỗ Mạnh Hồng June 10, 2015 5

Đỗ Mạnh Hồng

Chào các bạn đôi khi các bạn kiểm tra tốc độ load của blogspot mình với PageSpeed Insights thì thường thấy những js (javascript) mặc định làm chậm đi đáng kể cho blogspot của mình, mà tìm mãi trong templates blogspot mà không có và không biết làm cách nào. Những js này có dạng như bên dưới.

Tăng tốc blogspot bằng cách vô hiệu hóa js mặc định

Để làm được điều này thì khá đơn giản trong blogspot và rất hữu ích trong seo blogspot

Đăng nhập vào Mẫu(templates) > Chỉnh sửa HTML, tìm đến thẻ </body> và thay thế nó bằng

</body>

[Tips] - Làm sao để title, description, keywords cho mỗi trang khác nhau

Đỗ Mạnh Hồng June 09, 2015 0

Đỗ Mạnh Hồng

Chào các bạn nói đến title, description, keywords thì chắc ai cũng biết nếu làm blog, đối với seo thì chúng ta có rất nhiều kiểu seo blogspot, ở những bài trước mình cũng đã hướng dẫn cách cài đặt title, description, keywords cho templates ở bài Cách cài đặt blogspot dành cho newbi.

Bài viết đó cũng giống như rất nhiều bài viết seo blogspot mà bạn tìm được ở trên mạng. Là title, description, keywords cài đặt mặc định cho tất cả bài viết hoặc label chỉ săn kẻ title bài viết hoặc label để làm khác biệt cho title, description, keywords mà thôi.

Hôm nay mình sẽ hướng dẫn cách cài đặt title, description, keywords hoàn toàn khác biệt cho những trang quan trọng trên blogspot của bạn.

seo title, description, keywords

[Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot

Đỗ Mạnh Hồng June 03, 2015 1

Đỗ Mạnh Hồng

Chào các bạn nói đến cách tích hợp Responsive vào blogspot thì khi bạn search google tìm được rất nhiều kết quả, nhưng những bài viết đó đều chung chung, khi các bạn là newbi thì không thể nào thêm nó vào blogspot của mình được. Hôm nay Khám Phá Blog's sẽ hướng dẫn chi tiết cách tích hợp giao diện mobi cho blogpsot.

Xêm Thêm : Responsive là gì?

Cách thêm Responsive vào blogspot.

Ở đây mình sẽ ví dụ cho các bạn một blog có 1 sidebar-wrapper và một main-wrapper cho các bạn dể hiểu hơn.

1. Tìm hiểu bố cục

Như vậy thì bố cục blog của chúng ta sẽ có Header (tiêu đề or banner blog), main-wrapper (phần nội dung blog), sidebar-wraper (tiện ích, bố cục blog), footer (chân trang blog)

làm seo để thêm Responsive vào blogspot

2. Xây dựng bố cục

Bạn phải tự xây dựng bố cục trong đầu của mình, là muốn ẩn cái gì và hiện cái gì khi xem trên giao diện mobi cho từng loại màn hình. dưới đây là tất cả những loại màn hình phổ thông nhất dùng để tích hợp Responsive.

Đầu tiên chèn đoạn code này dưới thẻ <head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Đoạn code trên giúp nhận dạng từng loại màn hình để hiện thị, và đoạn code bên dưới sẽ giúp hiển thị ở những loại màn hình

@media screen and (max-width : 1280px) {
/* ------------ CSS tùy chỉnh cho PC ------------*/
}
@media screen and (max-width : 1024px) {
/* ------------ CSS tùy chỉnh cho iPad ------------*/
}
@media screen and (max-width : 768px) {
/* ------------ CSS tùy chỉnh cho iPad nhỏ ------------*/
}
@media screen and (max-width : 640px) {
/* ------------ CSS tuỳ chỉnh cho iPhone ------------*/
}
@media screen and (max-width : 480px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động đời cao ------------*/
}
@media screen and (max-width : 320px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}

Và dưới đây là cách chèn css cho từng loại màn hình, ở đây mình ví dụ cho các bạn xem nhé
Đối với PC thì chúng ta cho hiển thị đầy đủ bố cục

@media screen and (max-width : 1280px) {
#header-wrapper {
width: 1024px;
margin: 0 auto;
}
#sidebar-wrapper {
float: left;
width: 300px;
margin-top: 20px;
}
#main-wrapper {
float: right;
width: 700px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 1024px;
overflow: hidden;
}
}

Đối với những loại màn hình nhỏ hơn chúng ta có thể ẩn sidebar đi chẳng hạng

@media screen and (max-width : 640px) {
#header-wrapper {
width: 600px;
margin: 0 auto;
}
#sidebar-wrapper {display:none;}
#main-wrapper {
float: right;
width: 600px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 600px;
overflow: hidden;
}
}

Cứ như vậy các bạn muốn hiển thị phần nào độ rộng của nó bao nhiu thì các bạn chỉ cần thêm ID của nó vào và thêm kích thước vào và xem thử, nếu chưa cảm thấy ok thì sửa.

Trong quá trình thực hiện các bạn có thể check thử với công cụ kiểm tra Responsive TẠI ĐÂY

Khám Phá Blog's chúc các bạn thành công, mọi thắc mắc có thể comments bên dưới để được giải đáp.

[Tips] - Popup like box với chỉ dẫn đẹp cho blogspot

Đỗ Mạnh Hồng June 01, 2015 3

Đỗ Mạnh Hồng

Like box là tiện ích thiết yếu cho một blogspot nhằm quảng bá thương hiệu cho fanpage cũng như danh tiếng của mình, để bố trí ở đâu cho hợp lý khiến nhiều blogger phải suy nghĩ. Nay Khám Phá Blog's chia sẻ cho các bạn một kiểu like box dạng popup với chỉ dẫn động siêu đẹp.

popup like box

Subscribe to: Posts (Atom)