Kiếm Tiền Trên Mạng | Thanh Toán Trực Tuyến & Thương Mại Điện Tử

Home » CSS

Tiện ích đăng ký nhận bài viết mới dạng popup tắt mở

22:36 |

CSS Box

nhận bài viết mới kết hợp với hồ sơ tác giả trên các mạng xã hội dạng popup tắt mở ở cuối trang bài viết hết sức tiện dụng cho blog hay website sẻ giúp các bạn có thêm nhiều độc giả thân thiết đến với website của bạn hơn khi bài viết mới được xuất bản.

Để thêm tiện ích bạn chỉ cần vào "Bố Cục" chọn "Thêm Tiện Ích" chọn đến "HTML/Javascript" để thêm đoạn code CSS bên dưới vào.

Thay các đoạn code có màu cho phù hợp với bạn

Cập nhật tất cả thông tin, các thủ thuật mới nhất từ www.thuthuatpro.info ...!!!
ID Facebook: ID Profile Facebook của bạn
ID Feedburner: ID Feedburner mà bạn đã đăng ký
ID Google Plus: ID ProFile Google Plus

Lưu mẫu lại để thưởng thức

Hy vọng đoạn code nhỏ trên sẻ giúp ích cho bạn!

Xem Chi Tiết…

Thêm tiện ích chia sẻ sau bài viết CSS Responsive

22:26 |

Hầu hết bây giờ khi Design Website hay Widget thì Responsive luôn được ưu tiên áp dụng và tiện ích chia sẻ này cũng được sử dụng CSS Responsive không có Javascripts nên tốc độ load cực nhanh và khá mượt mà.

Thêm tiện ích chia sẻ sau bài viết Responsive

1. Vào Blogger> Bảng điều khiển> Template> Nhấp vào chỉnh sửa HTML
2. Tìm kiếm ]]></ b:skin> và dán đoạn mã CSS sau ngay phía trên nó.

/*-- Social Links --*/
.entry-social{
overflow: hidden;
margin-bottom: 20px;
}
.entry-social a{
display: block;
padding-left: 20px;
color: #FFFFFF !important;
font-weight: 300;
font-size:12px;
}
.entry-social div{
float: left;
margin-right: 5px;
width: 95px;
}
.entry-social div a{
background-color: #FF7F1A;
}
.entry-social .delicious{
width: 98px;
margin-right: 0;
}
.entry-social .fb a{
padding: 7px 10px 7px 26px;
background-image: url('http://picoolio.net/images/2013/11/29/fb14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .fb a:hover{
background-color: #324b81;
}
.entry-social .twitter a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/twitter14.png');
background-repeat: no-repeat;
background-position: 8px center;
}
.entry-social .twitter a:hover{
background-color: #01A7dE;
}
.entry-social .gplus a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/gplus14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .gplus a:hover{
background-color: #BA3227;
}
.entry-social .linkedin a{
padding: 7px 10px 7px 35px;
background-image: url('http://picoolio.net/images/2013/11/29/linkedin14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .linkedin a:hover{
background-color: #136F9B;
}
.entry-social .pinterest a{
padding: 7px 10px 7px 30px;
background-image: url('http://picoolio.net/images/2013/11/29/pinterest14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .pinterest a:hover{
background-color: #B01C23;
}
.entry-social .delicious a{
padding: 7px 10px 7px 32px;
background-image: url('http://picoolio.net/images/2013/11/29/delicious14.png');
background-repeat: no-repeat;
background-position: 10px center;
}
.entry-social .delicious a:hover{
background-color: #2963B8;
}

3. Tìm <data:post.body/> và thêm đoạn code bên dưới vào dưới mã vừa tìm được

<div class="entry-social">
<div class="fb">
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'>Facebook</a>
</div>
<div class="twitter">
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
</div>
<div class="gplus">
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank'>Google+</a>
</div>
<div class="linkedin">
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'>Linkedin</a>
</div>
<div class="pinterest">
<a expr:href="http://pinterest.com/pin/create/button/?url=" + data:post.url + "&imageurl="' rel='nofollow' target='_blank'>Pinterest</a>
</div>
<div class="delicious">
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>Delicious</a>
</div>
</div>

4. Lưu mẫu để xem thành quả

Hy vọng tiện ích này sẻ giúp ích cho các bạn!

Xem Chi Tiết…

Code ưu tiên cho CSS hiển thị trên Javascript

00:02 |

Một tình huống đặt ra khi bạn đọc của Thế Giới Blog thắc mắc về vấn đề Website của bạn có Slide Jquery mà 1 Menu CSS, tuy nhiên Menu CSS lại bị chìm ẩn dưới Slide Java đó. Vậy làm thế nào để khắc phục tình trạng này để giúp Menu đè lên Slide JavaScript đó ?

- Bài viết này Thế Giới Blog chia sẻ với các bạn cách giải quyết

Demo: cả menu ngang và Menu Dọc của site: Noi that van phong
Theo đó chúng ta chỉ cần dán 2 thuộc tính dưới đây vào CSS của khu vực muốn hiển thị đè lên Javascript...
Code:


position: absolute;
z-index: 1000000;

Trong đó con số được bôi màu vàng là 1 số tùy ý với điều kiện con số của thuộc tính z-index này phải lớn hơn z-index của Javascript để nó đè lồng lên Javascript.

Xem Chi Tiết…

Sử dụng CSS Keyframes hoán đổi hình ảnh

00:01 |

- Đối với hình ảnh thì có nhiều cách để show. Làm cho hình ảnh thể hiện 1 cách sống động và hợp lý hơn cũng là 1 điều cần thiết để hình ảnh đó được chú ý hơn.

Thủ thuật Blogspot hôm nay đưa ra 1 dạng Code CSS Keyframes để sử dụng hoán đổi hình ảnh khá đẹp mắt.

Các bạn có thể xem Demo: TẠI ĐÂY

Thế Giới Blog chia sẻ code và hướng dẫn cách làm trên Blogspot. Trên những nền Website khác thì các bạn làm tương tự nhé.

CODE:


<style>
.btcontainer {
position: relative;margin: 30px;height: 250px;width: 550px;float: left;}
/*Photo Border*/
.imagebt1, .imagebt2 {
border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
.imagebt1 {
-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.imagebt2 {
left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
/*HOVERS*/
.btcontainer:hover {
cursor: pointer;}
.btcontainer:hover .imagebt1 {
-webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate;
}
.btcontainer:hover .imagebt2 {
-webkit-animation: imagebt2 1.5s 2 alternate;
-moz-animation: imagebt2 1.5s 2 alternate;
-ms-animation: imagebt2 1.5s 2 alternate;
-o-animation: imagebt2 1.5s 2 alternate;
animation: imagebt2 1.5s 2 alternate;}
@keyframes "imagebt1" {
0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}}
@-moz-keyframes imagebt1 {
0% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-moz-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-webkit-keyframes "imagebt1" {
0% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-webkit-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-ms-keyframes "imagebt1" {
0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-o-keyframes "imagebt1" {
0% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-o-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@keyframes "imagebt2" {
0% {
left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-moz-keyframes imagebt2 {
0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-webkit-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-ms-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-o-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg);
}
}
</style>

<div class="btcontainer">
<img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrycjNpA9GDZkqgMl2h2hSpT7q8pRm9-M71Xx2XymSX5rG899vrpfnoYJIHjscec415sdjMvRs1BCh10R9NCJ8AX3qxvE-BnbIwsEnZJW_reNNjSiGUR3FFwuJ819KSs0t6R1Hgyc_2E/s1600/image1bt.jpg" alt="">
<img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-Mo7kdthm8bzAC5mBAdcKdOq2uHCuvwcS5WZOJFCqokwI5_SN5ecJie1uD2qJq45e_WSMN_gCEMB5xHb2P3Za1qjxLIYu7WIzNEKVUSqMH0JIXy-LNbZtfczGm4gFDXAIHnISahB2ro/s1600/image2bt.jpg" alt="">
</div>

CÁCH LÀM TRÊN bLOGSPOT

1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán Code trên vào tiện ích vừa thêm
3. Lưu lại và xem kết quả nhé :)

Xem Chi Tiết…

Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

23:55 |

Một dạng Code sử dụng làm menu cho Blog, Website khá đẹp và sinh động đang được người dùng Blog, Web hướng tới đó là kiểu mẫu hiệu ứng động khi rê chuột vào. Chỉ với việc sử dụng code CSS + HTML nên sẽ không ảnh hưởng tới tốc độ Load của Web, blog của bạn.

Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

DEMO

Để dễ dàng hơn Thế Giới Blog chia sẻ code và hướng dẫn cách làm trên Blogger

1. Code

CSS


/* The CSS Code for the menu starts here bloggertrix.com */
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

HTML


<div id="btrix-nav">
<li>
<a href="http://www.itviet360.com/"><span class="aname">Homes</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5wlSF2HVYpbDWDWeFO9JZoZjwQk24lHWa_p_GvNF0K62-JjdLmf-jkKeaSXF1RA0HL3I5SDISxE48AErx7-4T1K0mDh44egfTmUXd6uXhzjh5VdIAtrXENuQzMA6ZGMiJi8l5w5xTTo/s1600/btrix-home.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/Download">
<span class="aname">Download</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7A47zV-m0K6zjHb9ItjEZDloy79keHXpN5XqlGiYeBTVSGe1yLFEYuGyKIu_JOv5JkgbCVzmHHoaGhRs7EaxUAHMxsu0nA8l6jWaDQDjROqGcB2PzjEKFZZcT8NZZc7P9l2FpXlw2mU/s1600/btrix-download.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html">
<span class="aname"> dvSEO</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdd5CT-5yOQc2iQ8sMZTnw_sKfbNrnnk_sXhKG7kDu-9oqiEOjIhEPKEA-xTIIaGJifBifVee88GfcR68srfy1sU_M95m3tt4bVe_BmVa5L03w0EdHQMyk2GpgO5dpCKQe8qNT7dwC-U/s1600/btrix-mysql.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/html-css">
<span class="aname"> Html</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOOplIsKQaiWDm3Du3gZ8H3IzorS5mNVGUUhC3KYkj9rnBhnE6cx59TGREDDpQpWvSJAFAXxysO1eQ02JNHUtj3AgMnaBFokW_j4Xx92Lw2QzbLbZrSbWti2oDHXMFKUGrST52FmFN2E/s1600/Btrix-html.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/phong-vu-seo.html">
<span class="aname">Contact</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeXyuJ1Gsolby2KiW_lm7dEgSuM_w94lGUOqXTiF6LRl0it7J7OTkSSL1WkxzJRG_B2hlfnp76MexX0PkdQ6jKG1cc7vacc219aWnnMx1aqtmxV5znV-dRJ3z3ruGuSrWJuWArGJYcAc/s1600/btrix-contact.png" />
</a>
</li>
</div>

- Những giá trị mình bôi các bạn thay bằng của riêng mình nhé

2. Hướng dẫn trên Blogspot

- Vào bảng điều khiển blogger -> Mẫu (Template) -> chỉnh sửa HTML (Edit HTML)
- Tìm tới đoạn code ]]></b:skin> và dán Code CSS lên trước nó và lưu mẫu lại
- Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code HTML vào tiện ích vừa thêm và lưu lại

Xem Chi Tiết…

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng

23:49 |

Khi xem 1 số trang Web bạn vẫn thấy những hiệu ứng rê ảnh khá đẹp, nhưng tiện dụng hơn là nó làm cho mình thấy những mô tả kèm theo hình ảnh đó nữa. Với bài viết này, Thế Giới Blog chia sẻ với bạn Code và cách làm thêm chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng trên Blogger. Với Website khác các bạn dán code tương tự

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
DEMO

Code:


<style>

#bt_imageeffect {

margin: 20px auto;

width: 100%;min-height: 300px; padding: 20px 0;

text-align: center;

}

.galleryItem {

display: inline-block;;

position: relative;

width: 250px; height: 250px;

padding: 0;margin: 0 20px;

border: solid 10px #fff;



-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

}

.galleryItem img {

width: 250px;height: 250px;

}

.caption {

position: relative;

display: inline-block;

width: 250px; height: 250px;

z-index: 10;

}

.caption::before {

content: attr(data-title);

position: absolute;top: 0; left: 0;

width: 250px; height: 0;

font-family: 'Croissant One', cursive;

font-size: 1.8em;font-weight: 600;

line-height: 1.4em;color: #086FA1;

background: #fff;

overflow: hidden;

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption::after {

content: attr(data-description);

position: absolute;

bottom: -0;left: 0;

width: 250px;height: 0;

font-family: 'Poiret One', cursive;

font-size: 1.1em;

font-weight: 400;

line-height: 1.4em;color: #fff;

background: #222;

overflow: hidden;



-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption:hover::before {

height: 125px;

}

.caption:hover::after {

bottom: 0;height: 125px;

}

</style>



<br />
<div id="bt_imageeffect">
<br />
<li class="galleryItem">

<a class="caption" data-description="itviet360.com chia sẻ thủ thuật blogspot, Tự học SEO Web, kiến thức mạng máy tính...và những gì về cuộc sống" data-title="Nature Scene" href="http://www.itviet360.com/">

<img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwPypJFy_TpJl0g51WGZ-qlZO6djt2U_sgMPPvk7qqpgfVxlotxnovcmWsh55tJlJFMPKdwSXSZGXjYGUPZu_BKKLne98aFaPZib5zBWjpLLoT1YkxnycKII0HPF9_HTSOT9rbO4IAyw/s1600/Green+Nature+Wallpapers.jpg" />

</a></li>
<li class="galleryItem">

<a class="caption" data-description="Blog hình ảnh đẹp chia sẻ những hình ảnh đẹp và ý nghĩa nhất. Cùng nhau chia sẻ và cảm nhận những hình ảnh đẹp tổng hợp" data-title="SunFlower" href="http://anhdep3.blogspot.com/">

<img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuARgikI3PNFIppc6cgEI5AfEaYda2SpltMLMjneK1W0ayNj6fb2OIcaPbVamMPdipnk_wQZ4FfQTnywSMABUZgg046FDzNNB0s-G6V8-xjlC0eE0zQDpW4rw7LFIdAZZfwKrA_wH-Aw/s1600/nature_3.png" />

</a></li>
</div>

- Trong đó:
Những dòng chữ mô tả bôi đỏ.
- Cách làm thủ thuật trên blogspot
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code trên vào tiện ích vừa thêm :)
3. Lưu lại và xem kết quả.

Xem Chi Tiết…

Code CSS gạch chân 2 đường - hướng dẫn trên Web, Blogger

23:47 |

Một bạn đọc có hỏi Thế Giới Blog về cách làm chi chân link trên Website Thế Giới Blog được có 2 gạch, và bạn muốn biết làm về thủ thuật này.

Chỉ với 1 dòng code CSS bạn sẽ thực hiện được điều này. Trước hết là chia sẻ code và hướng dẫn cách làm trên Blogger...

Code:


u.double { /* -- double underline -- */
border-bottom: 1px solid;
}
.altdouble { /* alternate double */
border-bottom: 3px double;
line-height: 1.7em;
}
u.triple { /* -- triple threat -- */
border-bottom: 3px double;
line-height: 1.9em;
}

- Hướng dẫn trên Blogger.
Tùy vào style cho từng vị trí mà các bạn chỉnh sửa nhé. Ví dụ ở đây mình muốn đặt cho link bào viết là 2 dấu gạch chân với Style 2
Dán đoạn code CSS này trước </b:skin>
và dán:


.post-info a { /* alternate double */
border-bottom: 3px double;
line-height: 1.7em;
}

chúc các bạn vui vẻ !

Xem Chi Tiết…

Giới thiệu về Css ( Phần 1 )

02:27 |

1: SƠ LƯỢC VỀ CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS.

Nếu nói HTML là Ngôn ngữ hiển thị siêu văn bản, thì có thể nói CSS là ngôn ngữ tô điểm cho trang web của bạn ( theo mình nghĩ là vậy ).

Mặc dù HTML cũng hỗ trợ khá là nhiều định dạng nhưng đó không phải là tất cả.

Mỗi một lệnh của CSS sẽ định dạng một phần nào đó nhất định của HTML mà chúng ta sử dụng.

Chẳng hạn như phông chữ đường viền hoặc cẳn lề, màu chữ, hiệu ứng chữ và ảnh...

CSS giúp chúng ta làm đẹp web/blog, nó mang lại rất nhiều lợi ích cũng như sự tiện lợi mà nó mang lại.

Ví dụ đơn giản : website của bạn có hàng trăm trang nhỏ khác nhau, hoặc là chỉ cần vài chục trang thôi. Bạn cứ tưởng tưởng trong hàng trăm trang như thế sẽ có nhiều kiểu định dạng chữ khác nhau, hình ảnh với nhiều hiệu ứng khác nhau hoặc là tiêu đề khác nhau chẳng hạn,.... vậy mỗi lần chỉnh sửa lại 1 trong số những vấn đề đó thì chẳng nhẽ bạn cứ đi sửa từng trang cho tới khi nào xong thì thôi.

Đúng là việc ngồi chỉnh sửa thì vẫn làm được, nhưng có mấy ai đủ kiên nhẫn đi sửa từng tý như vậy và cũng sẽ tốn rất nhiều thời gian cũng như công sức, chưa kể sửa lâu quá ức chế cũng nên.

Vì vậy CSS ra đời là để giúp chúng ta chỉnh sửa một cách tối ưu nhất, tiện lợi, đơn giản, tăng tính tương thích giữa trang web/blog với người xem trang.

CSS với hàng trăm thuộc tính trình bày dành cho hầu hết các đối tượng cộng thêm sự sáng tạo thì sẽ sẽ mang lại hiệu quả tốt.

Ngoài ra theo mình được biết thì CSS đều được hỗ trợ hầu hết trên tất cả các trình duyệt không giống như JavaScript. vì vậy bạn hãy tin rằng web/blog của bạn đang dùng dù ít hay nhiều cũng tạo nên sự khác biệt đặc thù vốn có của CSS.

2 : TỐC ĐỘ LOAD TRANG

CSS giúp bạn đỡ tốn dung lượng khi mỗi lần Load trang vì nó hỗ trợ lưu trữ bên ngoài, chứ không như HTML nếu cứ sử dụng mã định dạng trực tiếp thì việc Load trang sẽ tốn hơn, Và đương nhiên là không ai muốn cứ ngồi đợi dài cổ để đợi web/blog của bạn load đâu, họ sẽ bỏ đi và có thể sẽ không trở lại nữa.

3 : LÀM SAO ĐỂ HỌC ĐƯỢC CSS

Thực ra việc học CSS cũng không khó cho lắm nhưng cũng nên có tính kiên trì vì kiến thức là bao là mà chúng ta thì cực kì nhỏ bé, Code thì được cập nhập liên tục và chúng ta phải chạy đua để học, chứ nói để mà học Pro thì khó đấy.

Việc đầu tiên các bạn học tốt CSS là có một số kiến thức về HTML đó là điều nên phải biết vì HTML thực ra không khó lắm, nếu không phải nói là khá là dễ đối với ai đó thích lập trình web/blog.

Tuy nhiên nếu bạn muốn tự thiết kế 1 trang web nho nhỏ trên máy của mình hoặc dùng nó để up lên mạng chẳng hạn thì các bạn nên trang bị thêm cho mình một số kiến thức như JavaScript, XHTML, PHP, ASP...

Tiếp theo là Download phần mềm viết Notepad++ , trong window cũng chúng ta có sẵn Notepad rồi nhưng không hô trợ tốt như Notepad++ cho nên các bạn nên Download Notepad++ về dùng sẽ tốt hơn.

Việc dùng Notepad++ sẽ giúp bạn nắm chắc code và cú pháp của nó hơn vì các bạn sẽ hoàn toàn tự viết và không được sự hỗ trợ nào khác. Và nếu bạn là một người mới bước chân vào lập trình hoặc đơn giản là chỉ để vọc cho biết thì đừng có nghe ai đó nói là "Dùng DreamWeaver hay FrontPage tốt hơn" Nhưng bạn nên nhớ là các phần mềm đó chỉ dành cho dân Design chuyên nghiệp thôi còn mình đang "tập bò" thì đừng có ham "đi chạy".

Và đương nhiên là khi các bạn làm xong thì không thể không xem kết quả mình làm được nó như thế nào rồi đúng không, và để xem được thì đương nhiên là dùng trình duyệt rồi, hiện giờ có nhiều trình duyệt khác nhau, nhưng hiện mình đang sài Google Chrome mình thấy khá là ưng và tốt rồi, và cũng tuỳ bạn thích trình duyệt này hay trình duyệt kia đó là tuỳ các bạn, nhưng mình vẫn khuyên là nên dùng Google Chrome để duyệt web/blog. Download Google Chrome.

4: LƯU Ý
Các bạn biết đấy từ xưa tới nay dân ta có câu "Học thì đi đôi với hành" vì vậy nếu có đọc tài liệu hoặc ngâm cứ về CSS hoặc bất cứ vấn đề nào khác thì cứ tốt nhất là phải thực hành thật nhiều vào, vì thực hành sẽ giúp bạn hiểu bài tốt hơn và nâng cao khả năng lập trình hơn.

Vậy là phần giới thiệu đã xong lần sau mình sẽ đi xâu hơn vào CSS.

Note : Qua bài viết trên nếu các bạn nào thấy sai xót, thiếu xót, sai lỗi chính tả hoặc sai code ở chỗ nào, hãy comments bên dưới để mình sửa sai. ( Có lẽ trong quá trình viết rối quá nên sai đó mà :D, mong các bạn thông cảm )
Trong bài viết trên nếu bạn nào thắc mắc chỗ nào hãy để lại comments bên dưới mình sẽ giải đáp hoặc là E-mail về ciabmt@yahoo.com.

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

Xem Chi Tiết…

Xem Nhiều Trong Tuần

Bài đăng phổ biến

Người theo dõi

Tiện ích đăng ký nhận bài viết mới dạng popup tắt mở

Thêm tiện ích chia sẻ sau bài viết CSS Responsive

Thêm tiện ích chia sẻ sau bài viết Responsive

Code ưu tiên cho CSS hiển thị trên Javascript

Sử dụng CSS Keyframes hoán đổi hình ảnh

Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng

Code CSS gạch chân 2 đường - hướng dẫn trên Web, Blogger

Giới thiệu về Css ( Phần 1 )

Top Hot

ADS

Thế Giới Blog

Thế Giới Blog

Email: thegioiblogs@gmail.com