Thủ thuật blogspot - Tut seo blogspot

Diễn đàn lập trình máy tính svitk06.com là nơi học tập và chia sẽ phần mềm và chia sẽ cách seo là nơi giao lưu dành cho các bạn đam mê CNTT diễn đàn it việt

Thursday, August 21, 2014

Thủ thuật blogspot - Hộp thông báo cho bài viết

| | , | No Comments |
(svitk06.blogspot.com) Hộp thông báo cho bài viết blogspot sẽ giúp bài viết của blog bạn cuốn hút hơn
Hộp thông báo cho bài viết blogspot - thủ thuật blogspot

Notification box  cho blogspot là gì ?
Khi bạn viết bài mới cho blog, giống như thẻ quote bạn có thể nhấn mạnh bài viết mình hoặc đơng giản chỉ là 1 thông báo trỏ về link nào đó thì bạn sẽ dùng tới thủ thuật blog này : Notification box 
Cách làm Notification box này thế nào ?
Vào blog của bạn chèn code css này trên thẻ <head> nhé .
/* Notification Box / kjmagic.blogspot.com */
@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }

  .message_box {
    margin:15px 0;
  }
  .note {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkwqlLUVwtEW0HF7pOL6dnl5xYrXcFvNKjj6Tte93vtK1yKU-DQNgCG5KHHUTDne2YGauTWniELEgjZ8q1PcsBYYoqdRtmFFJMttbjmW1ZOUY0DvXZJ35WGNUvrEWpA_CDzqN_B_WTO7m/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }
  .announce {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs49FGxjkOyWwlN2brAVSVdojv0gHq_cXNoiRsrM4ynpy-UWMRyxFR3H9G7toZ94_Yx5aO3GlWgdjeE1tJQ-RKL8E4zCvA7lqiWbU4KqQGXXF3rDF_N2j1tIEWCdG2tbAUvzVaVzPBH5zq/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }
  .success {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbJfZDM33Ar4s_cvj9jvTJ3GD4Yj66D2uHHDW_XCL8DXUV5A-f_kUk8gC-2COKMA4xWQU3GqGdbv1A9e0W7FSOnY3CoL2c8cE3tvkzGzVX-tMsRIoK1nS8ZtPww5wMvRKOOMH-wT8PSFb/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }
  .warning {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFahHS8DwWe2_NNao6MBdCeU6HVsiaLcmaEt4wVUdhd3X6B492ygwDJ9l8e2HjQMmAZWKkC4pdSy7dzanaKN4Tf5nGZ46WRGK5V2yn5BD9LiYPn_00RrkRz54zNMuCi8uxgGLV4ot4wGOn/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }
Cách sử dụng notification box này thế nào ?
Đơn giản như các code nút download và nút demo cho blog vậy. Khi viết bài bạn cứ việc chọn vào HTML để chèn code html và viết thế này nhé.
Note box:
<div class="message_box note">
  Text của bạn.
</div>
Announce box:
<div class="message_box announce">
  Text của bạn.
</div>
Sucess box:
<div class="message_box success">
  Text của bạn.
</div>
Warning box:
<div class="message_box warning">
  Text của bạn.
</div>

Hãy tận hưởng đi nhé ! Chúc các bạn thành công :
Nguồn sử dụng: namkna.blogspot.com và svitk06.blogspot.com nhé !

LIKE and Share this article: :

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Về trang blog Đôn Bá Đạo