Cảm nhận tư duy và tổng hợp kiến thức

Thứ Hai, 23 tháng 11, 2015

Thiết kế Khung thông báo cho bloggger/Blogspot

Notification Box for Blogger

Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Chèn đoạn code sau phía trên </body> trong template:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8-lotAnHd6OfevoZ5A8HTi2g5X-q37b-SPxLJ8jpuQvREoZY8GVP2Rn9_GR5Sj5-MQax4rFB7VtClm3h8ysrw03oU2SnUWWPZE1zUmL6Zthx23wDhWyEYQ2Ljno7n2tGtIYT9LL3CPM/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9hBJrFMCBhE16dLKjV8k0R4V4mCUQcNPUEhpUzf7Ej7MYPUa0O2fBrHsgBJ2y1ARqBnQHFBzggl0h824zrFqgxP06_-S0pVOG74KrjnxhYAb46HYc7VbtRNbM5-He5qER6lQdZXXzyA/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>




Share:

Ẩn hình ảnh ở đầu bài viết Blogger


Ẩn hình ảnh ở đầu bài viết Blogger
Có thấy ai đây không?

Giải thích luôn, khi chúng ta tải thêm một ảnh mới và thêm nó vào bài viết bằng công cụ có sẵn ở khung soạn thảo, thì hình ảnh này sẽ được tự chèn bên ngoài nó một thẻ div có class là separator, thì lợi dụng điểm này thì mình sẽ viết ra một dòng css ẩn đi cái thẻ div đầu tiên ngay sau phần thẻ chứa bài viết. Như vậy việc bạn cần làm chỉ là vào "Mẫu » Chỉnh sửa HTML" chèn đoạn css này lên trên thẻ ]]></b:skin>
.post-body .separator:first-child {
    display: none !important;
}
hầu hết các template bây giờ, cái thẻ div bao quanh nội dung của bài viết có tên là post-body, nên mình hướng dẫn chung luôn, nếu template của bạn khác thì thay nó bằng cái khác nhé, còn không biết thì cứ comment để lại địa chỉ blog ở dưới cho mình.

Trích nguồn từ:
http://www.kslzone.net/

Share:

Thiết kế Blogger Template từ A tới Z (Phần 4) - Cách thức hoạt động của một Widget

Phần 3 tìm hiểu về Blogger XML trước đây mình có nói mình sẽ mỗ sẽ một widget của Blogger ra để các bạn hiểu được nó chạy như thế nào. Thế đây bài viết này mình sẽ giới thiệu đến các bạn cách thức hoạt động của một widget, và đây có lẽ là thứ cuối cùng bạn cần biết để tự mình viết ra một template theo ý muốn.

Cách thức hoạt động của một Widget

Đối với bài viết này thì nếu ai đã có hiểu biết về lập trình thì việc này cực kì dễ dàng, nhưng những ai chưa biết hoặc rành lắm cũng có thể yên tâm vì nó hoàn toàn không gọi là quá cao siêu cả. Ok tiến công vào việc chính của chúng ta thôi.


Share:

Cách tạo Breadcrumbs cho Blogspot

 Cách tạo Breadcrumbs cho Blogspot - Cách tạo breadcrumbs cho Blogger - Cách tạo breadcrumbs cho Blogspot hiện trên kết quả tìm kiếm - Cách hiển thi Breadcrumbs trên kết quả tìm kiếm

Breadcrumb là gì ?

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumb thì người dùng dễ lâm vào tình trạng : ô mình đang ở trang nào đây, mục nào đây nhỉ?

Lợi ích của Breadcrumbs với người dùng

Giúp người dùng biết được vị trí của mình trên website
Thuận tiện khi di chuyển giữa các trang, không phải quay trở về trang chủ
Giảm tỷ lệ thoát (bound rates) -> tăng chất lượng website & tỷ lệ mua hàng .

Breadcrumbs rất quan trọng đối với Google

Giúp Google đánh giá chính xác PR, PA và keyword relation của một trang web.
Đánh giá được tổng thể cấu trúc của website,
Bạn sẽ có nhiều cơ hội đạt vị trí cao với những từ khóa mong muốn.

Cách tạo Breadcrumbs cho Blogspot 

Để tạo Breadcrumbs cho Blogspot bạn cần thực hiện qua các bước sau đây :

Bước 1: Vào Template (Mẫu) => Edit HTML (chỉnh sửa HTML) Tìm tới dòng ]]></b:skin> (dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé)

Và thêm Code dưới đây ngay trên nó

#Breadcrumbs{color: #000;font-size: 14px;margin-bottom:15px;padding:10px;background:#FFCC00;border:2px solid #BBBBBB; font-weight:bold; text-decoration:none; }
#Breadcrumbs a{color: #000,font-size: 14px}
#Breadcrumbs div{float:left;}

Các bạn có thể tùy chỉnh CSS theo ý của mình nhé

(các bạn có thể tải toàn bộ code của blog về để sửa cho dễ cũng được bằng cách Template (Mẫu) => Sao lưu/Khôi phục => Tải xuống mẫu hoàn chỉnh ,sau khi thực hiện xong các bước thì các bạn up lên là Ok)

Bước 2: Các bạn tìm kiếm đoạn code sau : <b:includable id='post' var='post'> và dán đoạn code dưới đây dưới nó :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                    <div id='Breadcrumbs'>
                      <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrum'>
                        <a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
                          <span itemprop='title'>
                            Tên blog của bạn
                          </span>
                        </a>
                        &#187;  
                      </div>
                      <b:loop values='data:posts' var='post'>
                        <b:if cond='data:post.labels'>
                          <b:loop values='data:post.labels' var='label'>
                            <b:if cond='data:label.isLast == &quot;true&quot;'>
                              <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                                <a expr:href='data:label.url' itemprop='url' rel='tag'>
                                  <span itemprop='title'>
                                    <data:label.name/>
                                  </span>
                                </a>
                                &#187; 
                              </div>
                            </b:if>
                          </b:loop>
                          <span>
                            <data:post.title/>
                          </span>
                        </b:if>
         </b:loop>
     </div>
</b:if>

Thay phần chữ màu đỏ "Tên blog của bạn" thành tên bạn cần thay nhé.

Sau đó lưu mẫu lại, vào một bài viết nào đó để thấy kết quả hiển thị của Breadcrumbs !

Bước 3: Để có cơ hội hiển thị Breadcrumbs cho Blogspot  trên kết quả tìm kiếm các bạn làm như sau:
 Đăng nhập Blog => Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh (bật nó lên) rồi thêm đoạn mã sau vào :

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Allow: /search
Allow: /

Sitemap: http://bittuot.blogspot.com/sitemap.xml

Phần sitemap đổi link http://bittuot.blogspot.com thành link blog của bạn nhé

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


Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !
http://bittuot.blogspot.com

Share:

Thứ Bảy, 21 tháng 11, 2015

Mẹo chuyển hướng liên kết khi click chọn bằng Javascript

Tiêu đề khó hiểu quá nhỉ, chuyển hướng địa chỉ khi click chọn liên kết là thế nào? Đơn giản tương tự như tại bài viết hướng dẫn tạo trang chuyển tiếp tự động cho Blogger vậy, khi người dùng rê chuột vào một liên kết thì tại góc trái sẽ hiện lên địa chỉ liên kết, nhưng khi click chọn vào liên kết đó thì người dùng sẽ được chuyển hướng đến địa chỉ khác.

Mẹo thay đổi địa chỉ khi click chọn liên kết

Có rất nhiều lợi ích có thể tận dụng cho việc chuyển hướng địa chỉ liên kết mà người dùng chọn vào. Đương nhiên mình không khuyến khích các bạn tận dụng nó cho việc lừa đảo đưa người đùng đến những website có mã độc hay v.v.. rồi. Cái mà mình muốn hướng tới là giúp cho những bạn kiếm tiền bằng Affiliates (Giới thiệu sản phẩm) ẩn đi cái đuôi của phần link giới thiệu để người dùng sẵn sàng click vào hơn.

Share:

Tự động thêm nofollow cho liên kết ngoài trong Blogger

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...


Share:

Đặt ảnh Background full màn hình

Hiện nay thì trong việc trang trí và tô điểm cho blog của mình, chúng ta phải tìm cách chăm chút khá nhiều thứ. Hiện tại thì đối với Blogger, trong phần <Mẫu > Tùy chỉnh, tùy Template sẽ có những tùy chỉnh khác nhau. Có cái thì cho thay đổi font chữ, kích thước, màu sắc rồi, cả hình nền của blog nữa, nhưng có cái tùy không cho bất kì tùy chọn nào.

Đặt ảnh Background full màn hình

Do dó bắt buộc chính chúng ta phải căn thiệp vào phần code có trên template đó. Và một trong những thứ đó là chọn một ảnh nền cho blog của mình.

Đặt ảnh Background full màn hình

Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang
body {
  background: url(địa chỉ ảnh);
}
đối với đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc, không full ra toàn trang, một số bạn  thường cho thêm thuộc tính repeat vào thì ảnh sẽ lặp lại theo chiều ngang chiều dọc. Thật là khó, lắm lúc cùng quá, lấy đại ảnh khác đưa vào, miễn sao cho full mới thôi.
Nhưng kiểu nào cũng vậy hầu như nó xấu xấu thế nào ấy, Dưới đây là các khắc phục, chỉ cần sử dụng thêm một vài dòng CSS3 giúp cho ảnh tự động tràn toàn màn hình, đặc biệt nó sẽ co dãn theo đúng tỉ lệ của màn hình không làm xấu trang web, giống như động thái cover ảnh của các thợ làm ảnh chuyên nghiệp vậy.

Thay vì sử dụng đoạn mã trên thì bạn hãy sử dụng đoạn mã sau đây:

body {
  background: url(địa chỉ ảnh) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Thay địa chỉ ảnh bằng Url của ảnh mà bạn muốn load vào trang.
ở đoạn mã trên bạn sẽ thấy background-size:cover, đây là giúp cho chiều rộng của hình ảnh bằng với chiều rộng của trình duyệt đang mở, trong trường hợp bạn muốn cả chiều cao ảnh co giãn theo chiều dọc luôn thì các bạn thay "cover: bằng 100% 100%" là được, nhưng llàm vậy đôi khi làm hình ảnh biến dạng.Chúc các bạn thành công.

Share:

Thứ Sáu, 20 tháng 11, 2015

Tạo Author Avatar trước tiêu đề bài viết trong Blogspot

Nick name nào trên mạng cộng đồng cũng đều có Author Avatar. Một cách để cho tiêu đề của
bài viết thêm đẹp, ta có thể chèn thêm Author Avatar vào phía trước.

Cách làm như sau
Thêm XML:
  • Blogger có đoạn XML nhỏ giúp ta lấy được hình của Avatar đại diện từ Google Plus.
  • Nếu Template sử dụng thẻ <h2> hoặc <h3>, bạn cần phải nắm rõ được điều nầy:
TÌm kiếm các mã code bên trong Template:


Nếu là thẻ <h2> :
<h2 : class 'post - title emtry - title' itemprop = 'name'>
Nếu là thẻ <h3> :
<h3: class 'post - title emtry - title' itemprop = 'name'>

Thông thường là thẻ <h3> các thẻ như vậy thường xuất hiện 2 hoăc 3 lần trong một Template, ta chép dán code sau đây vào trên chúng:

<b : if cond = ' data : post.authorphoto.url' itemprop = 'image' width '21px' />
</b : if>

Ta có thể thay Width : '21px' cho Avatar có xuất hiện vừa vặn.

Thêm Css:
  • Tìm thẻ: ]]></b:skin>
  • Dán code dưới vào trước thẻ bạn mới tìm.
.post h2<display : inline (important)

Nếu Template sử dụng thẻ <h3> thì sử dụng code:
.post h3<display : inline(important)
  • Lưu mẫu và kiễm tra kết quả.
Chúc các bạn thành công.

Khanhnguyen' s blog

Share:

Thứ Năm, 19 tháng 11, 2015

Recent Comments có Title màu xanh dương

Công dụng: Quản lý các dòng Comments của khách.
HÌnh mẫu nầy cho phép bạn xem, tôi đặt tên trên hàng là New Comments màu xanh da trời, Widget nầy đặt phía bên phải.

 


Live Demo


Cách làm như sau:
Vào Blogger, mỡ Bố cục>>Widget tiện ích>>HTML/JavaScdip


Chép Source Code dưới đây vào khung chứa của HTML/JavaScrip.


Source Code như sau:

<center>
<div style="font-weight:bold; border: 0px #30a1db solid; padding:5px; text-align:center; background:#9fc5e8;"><span style="color: Black; font-size: large;">New Comments</span>
</div>
<div style="border: 0px solid orange; color: cyan; height: 250px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 230px;">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px
!important;padding:0 0 6px 0
!important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px
 #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 200,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script src="https://sites.google.com/site/dunghennessyjs/comment2.js" type="text/javascript"></script>
<script src="http://ngdkhanh.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=200" type="text/javascript"></script>
</div>
</center>
Bây giờ bạn thay đổi các dòng lệnh màu đ, trong đó:
* Background: màu nền của tiêu đề phía trên
* Color: màu chữ tiêu đề.
* Bình luận mới nhất của các bạn: bạn có thể thay đổi chữ nào mà bạn muốn.
* Orange: màu của khung hộp, có thể thay red (đỏ), black (đen), white (trắng), Pink (hồng), yellow (vàng), green (xanh)....
* height: chiều cao của hộp.
* Width: chiều rộng của hộp
Thay đổi dòng lệnh màu xanh, trong đó:
* AvatarSize: kích thước của Avatar
* Characters: số lượng từ của comment
* Thay http://ngdkhanh.blogspot.com/ bằng địa chỉ trang Blog của bạn
Cuối cùng bấm Lưu lại rồi trở lại blog xem kết quả. Chúc các bạn thành công!!

Khanhnguyen' s blog

Share:

Mã Code tạo Social button cho Blogspot

Công dụng: Truy cập vào RSS - Facebook - Twiter và Mail. Có hình dáng như sau:



Live Demo

Cách làm:
Vào Trang tạo Blogger, mỡ Bố cục>>Widget tiện ích>>HTML/JavaScrip


Share:

Thứ Tư, 18 tháng 11, 2015

Cách tạo kiểu dáng cho nút Read More

Trong thẻ Tag gồm chứa nhiều Post có cùng chung một chủ đề, cứ mỗi lần xem chung nội dung của một tag, ta thường thấy có một nút lệnh Read More. Muốn đọc tiếp, chỉ cần Click chuột vào, có thể xem toàn bộ nội dung của một bài Post.

HÌnh dáng của các nút Read More là do người thiết kế, Có thể có các kiểu dáng như hình vẽ dưới đây:

1. Truy cập vào Account của Blogger, vào Design >> Edit HTML



   
2. Truy cập vào Expand Widget Templates




3. Nhấn  Ctrl+F  tìm kiếm thẻ  </head> 
4. Dán Code sau đây vào trước thẻ </head> 


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://btrixx.googlecode.com/files/btrix.js' type='text/javascript'/>

5. Nhấn  Ctrl+F tìm kiếm tiếp hàng chữ <data:post.body/> xem nó ở vị trí nào trong Source Code.
6. Xóa hàng chữ tìm được, thay thế nó bằng mã Code dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script><div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade More >></b></a></span>
</b:if>

7. Bây giờ, Save Template lại nhé, cho ứng dụng hoạt động thử.
 Chúc các bạn thành công.
Tham khảo nguồn BloggerTrix.com


Share:

Blogger comment box widget

Bài viết này mình sẽ chia sẻ một thủ thuật với phần comment của Blogger, đó là tạo một widget cho phép ẩn/hiện các comment và khung comment. Các bạn có thể xem hình bên.

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML (các bạn nên sao lưu mẫu của mình trước khi thực hiện thủ thuật).
Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    
    $(".toggle_container").hide(); 
  
    $("h3.trigger").click(function(){ 
        $(this).toggleClass("active").next().slideToggle("slow"); 
    }); 
  
}); 
</script>

Xóa đoạn màu xanh nếu blog của bạn đã có thư viện jQuery

Bước 3: Chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/*----- Comment box - www.đoàntrịnh.vn ----*/
h3.trigger { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDujbqqzjvXzlz0eD_Mepblz_UhwUJvZiHrepuPwmsh46-D7kORhwBrPAbISBPcZSGbPW3e-z9IQeLT3ScytOBzGgQM1gEklbyWHcUUS7UYdvUOEVbAuqQ-kY6TquJVTV80n904EEeI2o/s1600/comment-boxbg.png) no-repeat; 
height: 44px; 
line-height: 46px; 
width: 518px; border-radius:4px; 
font-family:Arial; 
font-size: 1.4em; 
font-weight: bold; 
text-align:left; 
color:#A1A1A1; 
float: left; 
cursor:pointer; 
box-shadow: #333 0px 1px 3px; 
padding:0 0 0 50px; 
margin:10px 0px 10px 10px; 
}
h3.active { 
background-position: bottom left; 
color:#ddd; 
} 
.toggle_container { 
padding-left:10px; 
overflow: hidden; 
clear: both; 
}

- Có thể thay đổi độ rộng 518px cho phù hợp với blog của bạn
- Có thể tùy chỉnh style của widget tùy ý nếu bạn hiểu biết về code

Bước 4: Tìm dòng <b:includable id='comment-form' var='post'> và chèn đoạn code sau vào bên dưới nó:

<h3 class='trigger'>Click Here To add Comment</h3> 
<div class='toggle_container'> 
<div class='block'>

Bạn có thể sửa dòng chữ màu xanh theo ý thích của mình

Bước 5: Tiếp tục tìm </b:includable> và chèn phía trên nó đoạn code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.đoàntrịnh.vn' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div> 
</div>

Để việc thực hiện thủ thuật được chính xác, các bạn hãy xem hình sau:



Nếu có bất cứ thắc mắc gì hãy để lại comment bên dưới.
Chúc các bạn thành công !
Sưu tập từ Terocket.com

Share:

Thứ Ba, 17 tháng 11, 2015

Tạo màu nền riêng phân biệt nhận xét của tác giả

Bài viết này mình sẽ chia sẻ thủ thuật tạo màu nền riêng cho nhận xét của tác giả trong Blogger (áp dụng cho Thread Comment), đây là một cách để giúp độc giả dễ dàng nhận ra nhận xét của tác giả trong một bài viết nào đó trên blog.


» Cách thay đổi màu nền phân biệt tác giả cho comment blogspot:


Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML.
Bước 2: Chèn đoạn code sau vào trước thẻ đóng </body>:
<!--Highlight Author Comment by kjmagic.blogspot.com-->
<script src='http://yourjavascript.com/42151052165/kjmagic-cmt.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('background','#FFE4B5 url("http://www.blogblog.com/1kt/
transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!--/Highlight Author Comment by kjmagic.blogspot.com-->

Có thể thay đổi màu nền bạn thích bằng cách sửa chỗ mình đánh dấu thành mã màu HTML của bạn.

Chúc thành công !

Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP