Ghi lại để xem - Mẹo CSS, blogger...

vào

1. Xoay khi hover - box-shadow - transform

opacity: 0.7;
moz-transform: rotate(-350deg);
-webkit-transform: rotate(-350deg);
-o-transform: rotate(-350deg);
-ms-transform: rotate(-350deg);
transform: scale(1) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(17, 131, 181, 0.4), inset 0 0 20px rgba(255,255,255,1);


2. Ẩn hiện widget tại trang bất kỳ blogspot/blogger

-chỉ hiện ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>

-chỉ hiện ở trang archive
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

-chỉ hiện ở trang bài viết
<b:if cond='data:blog.pageType == &quot;item&quot;'>

-chỉ hiện ở tranh tĩnh
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

-chỉ hiện ở trang có liên kết cho sẵn
<b:if cond='data:blog.url == "URL của trang chỉ định"'>

-chỉ hiện ở trang chủ - archive - label (index)
<b:if cond='data:blog.pageType == &quot;index&quot;'>

== : hiện ở trang
!=  : k hiện ở trang

Có thể lồng nhiều điều kiện
3. Background

 body {
    background-image: url("paper.gif");
    background-repeat: repeat-y;
    background-color: #cccccc;

 }

 Menu xổ dọc với hai (2) cột

 
<style>
#toppic {width:910px;height:30px;background:#2c2c2c;border-top:0px solid #444;margin:0 auto;padding:0;overflow:hidden;text-shadow:1px 1px 2px #002851}
#topwrapper {width:910px;height:30px;margin:0 auto;padding:0}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {border-right:1px solid #444;border-left:1px solid #111;text-align:left;display: block;text-decoration: none;padding:6px 12px 8px;font:12px Arial;text-transform:none;color:#eee;}
#top a:hover {background:#111;}
#top a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-4bxcasFuVIpbir9gGuE3ssLYUrOapprHzV6qaATiYjvXoO7kb-sZVuDPNhyTNyhyphenhyphen_RjdRoWCuFbdTlLvsDfpUe2GsWV3aF7XPplz3va3k0vmx9Zv5QU9qCB6qQbApQjJS-uvdOZB6Q/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 24px 8px 12px;background-position: right center;}
#top li {float: left;position: relative;}
#top li {position: static; width: auto;}
#top li ul, #top ul li {width:240px;}
#top ul li a  {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;border:none;}
#top li ul {z-index:100;position: absolute;display: none;background-color:#111;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#top li ul li {width:120px;float:left;margin:0;padding:0}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {color:#ddd;background-color:transparent;text-decoration:none;}
#top ul a:hover {text-decoration:underline!important;color:yellow}
</style>
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 3</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#'>Sub menu 6</a></li>
<li><a href='#'>Sub menu 7</a></li>
<li><a href='#'>Sub menu 8</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

4. Thêm ngày giờ vào tiêu đề bài viết

 <div class='postmeta-primary'> <span class='author2'>Posted By Admin </span> <span class='meta_date'>- <data:post.timestamp/> - <data:post.dateHeader/> </span> </div>

 5. Hiệu ứng nghiêng

 transform: skew(-35deg, 0deg);

 -----------------

 Gradient background:
  1. background-color: #00515f;
  2. background-image: linear-gradient(to bottom, #00515f, #67ad96);


-------------------

6. Tạo thumbnail khi share link (lên Facebook... )

 - Dán đoạn code này dưới thẻ <head>
- Thay thế link thumb cho Trang chủ bằng ảnh riêng của bạn, còn ảnh bài viết sẽ tự động lấy.
Code:

<b:if cond='data:blog.postImageUrl != &quot;&quot;'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUF4ts5qfaq1uCkpPzEj_B1B02gRpimTXyp2CxvzWpMeq-lwV1SWUIk-3-CVrLTaYf41EyMKztjLtLzVQ4SLQvnj6pTGlz3o4gXDEMsvS2vdgdClNiH_EbxMQA4pwBJwt3xH0hvTr-JQY/s1600/usb+gia+re+16gb.png' property='og:image'/>
</b:if>

-------------------

7. Tô màu gradient cho background:
--------------------

      background: linear-gradient(to right, rgba(227,89,186,1) 0%,rgba(96,171,248,1) 83%,rgb(64 238 206) 100%);


8. Tô màu Gradient cho Text:
  1. -webkit-text-fill-color: #0000;
  2. -webkit-background-clip: text;

OR
.text-gradient {
  1. -webkit-background-clip: text;
  2. -webkit-text-fill-color: transparent;

--------------------
9. Cách đưa ngày giờ đăng vào bài:
- Các bạn vào phần chỉnh sửa template của blog.

- Các bạn chèn đoạn code sau vào vị trí mà bạn muốn nó hiển thị:
<data:post.timestamp/>

* Cách chỉnh sửa định dạng hiển thị:
Vào mục cài đặt - > Ngôn ngữ và định dạng -> Định dạng dấu thời gian -> Lưu cài đặt
--------------------