Thêm hiệu ứng cho nhãn trên blogger

Thông thường thì việc thiết kế nhãn mà sơ xài, không trang điễm cho Blogger blogspot của mình thêm phần bắt mắt, sẽ khó coi và không thu hút được độc giả vào ra với bài đăng của mình. Khanhnguyen' s blog cũng có một phong cách của Khanhnguyen' sblog, chắc hẳn bạn bè của Khanhnguyen 's blog cũng có một sự lực chọn cho chính mình.

Trong Source Code Css dưới đây, sẽ giúp các bạn phần nào về phong cách thể hiện đó đối với hiệu ứng dành cho nhãn (label) trên Blogger Blogspot.

Chuyện thiết kế theo mẫu chuẩn trên Blogger, rất đơn giản, chỉ thức hiện các bước sau:

Vào blogger>Layout>Add Widget

Đơn giản chỉ vậy, nhưng kết quả chỉ như hình trên:

Không đẹp phải không các bạn. Thế thì sao có được như hình dưới đây? Có thể bạn muốn có một màu sắc khác, chuyện đó cũng dễ dàng thôi.

1. Đăng nhập vào Blogger Bảng điều khiển sau đó đi đến Layout & nhấp vào Thêm một tiện ích (Widget)  tùy chọn và chọn Label.

2. Bạn phải Chọn tùy chọn đám mây (Cloud) từ trong Widget Label được chọn.

3. Bây giờ bấm Save & nút đi cho CSS .
4. Bây giờ hãy nhấp Template tùy chọn và sau đó nhấp vào Edit HTML nút.
5. Bây giờ bấm Ctrl + F nút trên bàn phím của bạn và tìm ]]></b:skin> tag.
6. Bây giờ Sao chép mã dưới đây và dán nó ở trên ]]></b:skin> tag.

.label-size{ padding: 3px; text-transform: uppercase; margin:0 2px 6px 0; border: solid 2px #061ED5; border-radius: 3px; float:left; text-decoration:none; font-size:14px; color:#000000; background: #000000 ; } .label-size:hover {background: #0faefd ; border:5px solid #000000; text-decoration: none; -o-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -o-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; color:#0FAEFD; } .label-size a:hover { text-decoration: none; color:#000000;} 

Bạn có thể tùy chỉnh:
font-size:14px: Kích cở chữ
color:#000000: Màu chữ
background: #000000 : Màu nền
Bạn có thể Click chuột vào đây để xem vào bản Demo của Khanhnguyen' s blog

http://bit.ly/2s7YKBl

Chúc các bạn thành công.
Khanhnguyen' s Blog

Read More

Màu trong CSS | Color trong CSS

CSS sử dụng các giá trị màu để xác định màu sắc hiển thị. Bạn có thể thiết lập màu nền (background) hoặc màu cận cảnh (foreground) của một phần tử, hoặc màu của đường viền hay đường bao của một khung hoặc một bảng. Màu được hiển thị bởi kết hợp ba màu là RED, GREEN, và BLUE.

Để xác định màu trong CSS, bạn có thể sử dụng một trong các cách sau:

Định dạng	Cú pháp	Ví dụ
Hex Code	#RRGGBB	p{color:#FF0000;}
Short Hex Code	#RGB	p{color:#6A7;}
RGB(dạng %)	rgb(rrr%,ggg%,bbb%)	p{color:rgb(50%,50%,50%);}
RGB (tuyệt đối)	rgb(rrr,ggg,bbb)	p{color:rgb(0,0,255);}
Tên màu	aqua, black, etc.	p{color:teal;}

Sử dụng Hex Code để xác định màu trong CSS

Mỗi giá trị màu có thể được xác định bởi một giá trị Hex Code gồm 6 ký số. Hai ký số đầu tiên biểu diễn một giá trị RED, hai ký số tiếp theo biểu diễn một giá trị GREEN và hai ký số cuối cùng biểu diễn giá trị BLUE.

Mỗi giá trị Hex Code này được đặt trước bởi một ký hiệu #.

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Sử dụng Short Hex Code để xác định màu trong CSS

Đây là dạng rút gọn của Hex Code. Bạn nhìn lại phần cú pháp bên trên, và đọc lại phần Hex Code, bạn sẽ thấy rằng cứ mỗi cặp hai ký số (cặp RR, cặp GG, cặp BB) trong Hex Code được rút gọn thành một ký số tương ứng trong Short Hex Code. Ví dụ: nếu trong Hex Code bạn xác định giá trị màu là #66AA77 thì trong Short Hex Code giá trị sẽ là #6A7. Hai giá trị là tương đương.

Color	Color HEX
	#000
	#F00
	#0F0
	#0FF
	#FF0
	#0FF
	#F0F
	#FFF

Sử dụng RGB để xác định màu trong CSS

Giá trị màu có thể được xác định bởi sử dụng thuộc tính rgb(). Property này nhận ba giá trị, mỗi giá trị tương ứng cho RED, GREEN và BLUE. Giá trị có thể là số nguyên hoặc dạng phần trăm (%).

Ghi chú : Tất cả trình duyệt không hỗ trợ thuộc tính rgb(). Vì thế tốt nhất là bạn không nên sử dụng chúng.

Color	Color RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

Sử dụng tên màu để xác định màu trong CSS

Bạn có thể sử dụng tên màu (bằng tiếng Anh) để xác định giá trị màu trong CSS. Tên màu trong CSS là không phân biệt kiểu chữ, do đó Red là tương đương với red và RED.

Safe Color cho trình duyệt

Bảng dưới liệt kê 216 màu được coi như là Safe Color cho các trình duyệt. Các màu này bảo đảm rằng tất cả các mày tính sẽ hiển thị màu một cách chính xác khi gặp bất kỳ màu nào trong 216 trong bảng dưới đây:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Read More

Code tạo hiệu ứng Peel đẹp mắt cho hình ảnh

Xin cáo lỗi cùng các bạn, Admin đang trong quá trình tu chỉnh bài viết

Sorry,You are trying to reach an invalid page...!

Click here to go to Homepage 

Have a nice Day...

Read More

Cách xóa bỏ hoàn toàn CSS mặc định trên Blogger

Cách xóa bỏ CSS mặc định trong Blogspot - Mặc định khi sử dụng Blogger, ngoài việc sử dụng CSS tùy chỉnh do bạn đặt, blog còn sử dụng CSS mặc định của Blogger mà bạn không hề hay biết nếu bạn không để ý. Tuy nhiên, CSS mặc định của Blogger khiến blog của bạn gặp một số lỗi như W3C,...Vậy nên mình sẽ hướng dẫn các bạn xóa bỏ hoàn toàn CSS mặc định của Blogger.

Cách xóa bỏ hoàn toàn CSS mặc định trên Blogger

Các bước thực hiện

Mặc định Blogger trang bị cho blog của bạn hai File CSS sau:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4245775164278706291&zx=7177e59e-74fa-412c-9fa2-d5b82e0ee894' />

Với việc sử dụng CSS như vậy sẽ gây một số lỗi W3C và lỗi khi check Google Speed Test. Đó là lỗi các bạn gặp phải khi chưa tối ưu cho Blogspot của mình.
Các bước thực hiện đơn giản sau đây sẽ giúp bạn khắc phục điều này.
Bước 1: Tìm thẻ <b:skin><![CDATA[ Thay thế nó thành:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[

Bước 2: Tìm thẻ </body> và sửa thành

&lt;!--</body>--&gt;&lt;/body&gt;

Câu hỏi các bạn đặt ra là gì?

Một câu hỏi của rất nhiều bạn: "Tại sao sau khi xóa bỏ CSS mặc định thì một số tiện ích trên Blogger không chạy?" Hi thì mình chỉ trả lời đơn giản là bạn đã xóa bỏ CSS của chúng, việc hiển thị sẽ không còn diễn ra như bình thường nữa.

Để khắc phục điều này, bạn cần thêm "khéo léo" CSS mặc định của Blogger trở lại.

Bước 1: Vào https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css và copy toàn bộ code.

Bước 2: Đặt vào giữa đoạn code mà Bước 1 ở trên bạn đã làm, cụ thể:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[ Đặt bên dưới thẻ này nhé! 

Sau khi Lưu mẫu, các bạn thử kiểm tra tốc độ load tại đây nhé!

https://developers.google.com/speed/pagespeed/insights/ 

Cách thiết lập lại hoàn toàn CSS

Nếu bạn làm các bước như ở trên thì chưa thể thiết lập mọi giá trị CSS trên Blogger về 0, các sau đây sẽ giúp bạn làm được điều đó. Thêm đoạn CSS sau vào blog của bạn:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}  

Lưu lại và chỉnh sửa blog cho phù hợp. 

Nguồn VietMMO

Read More

[Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger

Hôm nay Terocket sẽ tiếp tục hướng dẫn các bạn các thủ thuật blog liên quan đến nút Buttons, và lần này thủ thuật sẽ nói về nút Download có tên là Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger. Ở thủ thuật này, nút download hay demo đều có thể áp dụng vào, phù hợp dành cho các trang download tài liệu hay demo nội dung.

Read More

[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger

Hôm nay Terocket sẽ hướng dẫn cả nhà thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger rất đẹp và ấn tượng. Thủ thuật này vô cùng đơn giản, nhưng lại tạo cảm giác thú vị, nhiều màu sắc, sống động cho người dùng, điểm ấn tượng của thủ thuật này đó là khi chúng ta rê chuột vào, ngoài các hình ảnh ấn tượng và nút button bắt mắt, thì nó sẽ tự động xoay 360 độ. Tạo sự mới lạ trong trải nghiệm người dùng.

Live Demo

Lợi thế của thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này, đó chính là làm hoàn toàn bằng CSS, tốc độ tải cực nhanh, chuẩn SEO...không làm nặng website, giúp tiết kiệm thời gian tải hơn so với các thủ thuật khác. Nào giờ thì cùng Terocket chúng tớ xử lý và thực hiện thủ thuật này nha!

Bước 1 - Chèn đoạn mã code sau vào một HTML/Javascript hoặc HTML của trang.

Đầu tiên hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript → Copy đoạn mã code sau vào và Lưu lại.

<style>/* Tips For Blogger by Terocket.com */
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
</style>
<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYGN0IgZ0TISMWkmi0I2c_Zcg9_CRBtOavOxTB5-o2-qZ9u_iBtTbMifz27eRUmQ68kYiK9n-wli2f3_D5-0MF4SDAYLxMO_u36p743m-4Ej6dWRyaimUANLzBu0KCCT3KXan2DrHZKG-/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&amp;loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBz1D6JWyNPKptJPVfE0DYVtHG28qo7kyYSWLN5ZByjxltEc00lTuenz2c3C3inCDIawoDP-5kk63zG_hR3Z6g84A6jSH48JZn8HkNjnF-vRCCiXKguVti17niLZVwYEuyKznFVa9jPnUP/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/fbpageurl" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFtSo-VRk39tWvuU_4_ZzO2ob8DraJ54fFoBpCKX1ZXgmtOaaaYpwNnfrXhIs4Wdknu5y0Fmmt6QiFuMqgHsHBrVxUmzkAkmu7QLMwTvC-UgzxZfqXE1OWn6MmHds1qUtPnMmA8hB57ZU/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/twitterurl" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcRd9jlUwxt2rfvY6vaTtZN_p__u7WQQZnPKRdLTbw5q2Q_51oXGmrPcMd6OgBAtYKvHStNxD61-XgA51wk8h2Rx8VNUmUZ2u-PnOYMTH0R-eksFEBtBQIqLSjTYAqNpHLyTXZ4MIY-y4V/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/googleplusurl" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRnAPTDmf5Uf5y4RdrBWtVNFZMlKe6gaOCq8GxO9Cl34Gpp8ClmnjYF6U15vQixJeb4DyDImSOopgrW0oNTSefOgGwTK12_vJCpxHVBsLqBoAI9YWE_hinTAOh7JYWhiPoLwXCrj6hNvyG/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/pinteresturl/" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMwU4FV78oHo5nKDQZOQkPZ5CDqQJT6Vg5oHfQ34pX90m27GtsBEdFhUDgRI7aYU0urNF7OTKjxA0RkKgvjubiwNwHE8O6XDmvKZHaxsZT8H-Gm0AmT5xOdhter3MY3yCDwAdEsuWubVEG/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>

Bước 2 - Thay URL tương ứng vào cho phù hợp

Các bạn chỉ cần thay đoạn Màu Xanh trên kia thành đoạn URL của các trang cộng đồng của mình, sau đó lưu lại. Thế là xong!

Vậy là xong thủ thuật blog này [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger tại Terocket rồi. Chân thành cảm ơn các bạn. Nếu bạn nào đã làm được rồi thì chia sẻ thủ thuật này đến bạn bè nhé, còn nếu chưa được, hãy gửi comment ở dưới đây, Terocket sẽ xem và trả lời các bạn.

Nguồn Terocket.com

Read More