Thứ Ba, 25 tháng 6, 2013

Bài viết này thủ thuật blogspot cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.
Demo online ngay tại blog này
Các bạn có thể xem qua ảnh để thấy được kết quả hiển thị của thủ thuật rất hay này.
Bài viết liên quan theo nhiều label cho Blogspot
☼ quy trình tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Chọn Mở rộng tiện ích mẫu (Expand Widget Templates)
5- Tìm đoạn code <data:post.body/> (thường chọn là vị trí đầu tiên nếu có nhiều kết quả). Và gắn vào sau nó đoạn code bên dưới.

<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;thu-thuatblog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 6;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->
Chú ý:
Bạn sẽ pải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
Thay http://thuthuatblog2013.blogspot.com/ bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.
maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label).
maxNumberOfLabels là số nhãn (label) sẽ được hiển thị.

Chủ Nhật, 23 tháng 6, 2013

Blogger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua một tiện ích mới có tên gọi Biểu mẫu liên hệ (Contact form). Trước đây chúng ta đều phải sử dụng dịch vụ của một bên thứ ba. Nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người đọc ngay trong email mà không cần cung cấp địa chỉ email ra bên ngoài. 

Để sử dụng form này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác >Biểu mẫu liên hệ (Xem lần lượt các hình 1, 2, 3)

Hình 1
Hình 2



Hình 3

Sau khi lưu lại, nhớ kéo và thả vào vị trí bạn muốn rồi chọn Lưu sắp xếp.

Hạn chế của mẫu form chỉ xuất hiện trên sidebar hoặc footer ở nơi mà bạn vừa lưu lúc nãy. Thông thường mẫu form liên hệ người ta đặt trong một trang riêng ở đó ghi các thông tin liên hệ và kèm mẫu form bên dưới. 

Nếu muốn đặt nó vào phần trang của Blogger thì bạn làm theo gợi ý tiếp theo. 

Bước 1. Giữ nguyên mẫu form liên hệ mà bạn vừa tạo lúc nãy.

Bước 2. Nhấn Mẫu > Chỉnh sửa HTML 

Hình 4
Bước 3. Nhấp Chuyển đến tiện ích > ContactForm1  
Hình 5
Bước 4. Nhấp chuột vào mũi tên phía đầu dòng tiện ích có id='ContactForm1' như hình

Hình 6
Bước 5. Xóa hết đoạn code bên trong nó, như bạn nhìn thấy dưới đây, còn lại như hình 7 và sau đóLưu mẫu.

<b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> </div> </form> </div> </div> <b:include name='quickedit'/>

Hình 7

Bước 6. Thêm trang mới. Nhấn Trang > Trang mới > Trang trống để tạo. Nếu bạn đã có trang liên hệ rồi thì không cần tạo nữa.


Bước 7. Chọn chế độ soạn HTML rồi dán đoạn code này vào chỗ viết bài, sửa lại một số tùy chọn và đặt tên bài viết rồi nhấn Xuất bản.

<form name="contact-form"> <p></p> Name <br> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text"> <p></p> Email <span style="font-weight: bolder;">*</span> <br> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text"> <p></p> Message <span style="font-weight: bolder;">*</span> <br> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <p></p> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button"> <p></p> <div style="text-align: center; max-width: 222px; width: 100%"> <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p> <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p> </div> </form>

Nếu cần thiết bạn có thể Việt hóa những chữ màu nổi bật: Name -> Tên; Message -> Lời nhắn (Thông điệp) 


Bước 8: Điều chỉnh kích thước form
Để điều chỉnh kích thước bạn cần chèn thêm đoạn CSS sau đây phía trên thẻ ]]></b:skin>

.contact-form-name,.contact-form-email { max-width: 200px; width: 100%; }  .contact-form-email-message { max-width: 500px; width: 100%; height: 200px; }

Có thể điều chỉnh kích thước trên cho cân đối với kích thước phần bài viết của blog.Như vậy bạn đã có form riêng hệ của riêng mình.
Google AdSense đã chính thức hỗ trợ nội dung tiếng Việt! Quả là tin vui đối với cộng đồng blogger Việt Nam nói chung và những người dùng Google Blogger như chúng ta nói riêng.

Như bạn đã biết, Google AdSense luôn được xem là chương trình quảng cáo hấp dẫn của những người kiếm tiền trên mạng. Trước đây, chương trình này chỉ cho phép các trang tiếng Việt đặt công cụ tìm kiếm, chủ nhân trang sẽ kiếm được tiền nếu người dùng nhấn vào quảng cáo trên kết quả tìm kiếm. Thường thì thu nhập từ đây rất ít do đó hầu hết mọi người đều viết bằng những ngôn ngữ được hỗ trợ mà phổ biến nhất là tiếng Anh để được tham gia quảng cáo nội dung.

AdSense tiếng Việt

Nay thì rào cản lớn nhất đã được xóa bỏ! Bạn có thể tham gia chương trình ngay trên blog tiếng Việt của mình. Các bước đăng ký:


Lời khuyên dành cho những người chuẩn bị đăng ký AdSense:

  • Không nên đăng ký Google AdSense với một blog thiết kế sơ xài chỉ với một vài bài viết.
  • Không nên sao chép bài viết của người khác lấy làm bài viết của mình. Google đủ thông minh để biết bài viết đó có nguồn gốc từ đâu.
  • Thay vào đó hãy phát triển blog để thu hút càng nhiều người xem càng tốt, bằng cách đăng nhiều nội dung do chính bạn viết, chia sẻ nội dung lên các mạng xã hội (Facebook, Google+, Twitter, Zing Me, Linkhay...), tham gia thảo luận trên các diễn đàn về chủ đề bạn viết... 
  • Nên nhớ rằng bạn viết blog để thu hút người đọc chứ không phải để đăng ký AdSense. Vì một lý do đơn giản, có người xem blog mới có người nhấn quảng cáo và bạn mới có tiền!

Ý kiến của bạn như thế nào? Xin để lại dưới phần nhận xét. Từ hôm nay, bạn phải có tài khoản Google+ mới có thể đăng nhận xét trên trang này.

Anh em Blogger đâu? Chuẩn bị blog chiến thôi!

Thứ Bảy, 22 tháng 6, 2013

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

PopularPosts là 1 widget có sẵn được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc.
 Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. 
Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

PopularPosts Title

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 4. Hãy xem trên blog của bạn đã có widget PopularPosts này chưa?

đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và chọn tải template về máy để tiến hành chỉnh sửa 

Mở template và tìm với từ khóa PopularPosts1. Trong đoạn mã của widget này có 4 đoạn mà Blogger đã chú thích: <!-- (1) No snippet/thumbnail --><!-- (2) Show only snippets --><!-- (3) Show only thumbnails --><!-- (4) Show snippets and thumbnails -->

Ở đây chúng ta quan tâm đến đoạn thứ 4, đó là nơi chứa mã của kiểu hiển thị tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Dưới đây là đoạn mã chúng ta cần chú ý:
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <b:if cond='data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
        </div>
    </b:if>
    <div class='item-title'>
        <a expr:href='data:post.href'><data:post.title/></a>
    </div>
    <div class='item-snippet'>
        <data:post.snippet/>
    </div>
</div>
Chú thích:
  • data:post.thumbnail: Địa chỉ của ảnh thứ nhất trong bài đăng được Blogger resize (thays72-c vào đường dẫn).
  • data:thumbnailSize: Kích thước ảnh mà Blogger resize, là ảnh hình vuông nên bao gồm luôn cả chiều cao và chiều rộng.
  • data:post.href: Địa chỉ của bài đăng.
  • data:post.title: Tiêu đề của bài đăng.
  • data:post.snippet: Đoạn trích dẫn của bài đăng.

Hoạt động của đoạn mã này:
Đầu tiên sẽ xem xem có địa chỉ ảnh cho bài đăng phổ biến này hay không qua lệnh diều kiện<b:if cond='data:post.thumbnail'>. Nếu đúng, một thẻ div với thành phần bên trong là thẻ imgchứa địa chỉ ảnh có liên kết tới địa chỉ của bài đăng được xuất hiện, bài đăng nào không có ảnh thì bỏ qua. Tiếp theo sau đó là 2 thẻ div lần lượt chứa tiêu đề bài đăng có liên kết tới địa chỉ của bài đăng <a expr:href='data:post.href'><data:post.title/></a> và đoạn trích dẫn<data:post.snippet/>.

Bây giờ chúng ta sẽ sửa lại đoạn mã này theo hướng hiển thị tiêu đề bài đăng với title là đoạn trích dẫn và hình ảnh với kích thước tùy chọn, loại bỏ đi liên kết tới địa chỉ của bài đăng khi click vào ảnh, thêm thuộc tính alt là tiêu đề bài đăng cho ảnh này. Một vấn đề nữa là khi dùng trình duyệt từ IE7 trở về trước thì tiêu đề bài đăng bị thụt xuống một đoạn so với ảnh.

PopularPosts Eror IE

Nhưng Để hiển thị tốt trên phiên bản trình duyệt này chúng ta đưa hình ảnh và tiêu đề bài đăng vào cùng 1 thẻ div. Đoạn mã trên được viết lại như sau:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' border='0' width='38px' height='38px'/>
        </b:if>
        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
    </div>
</div>
Lưu lại và tải template lên Blogger.
Ảnh do Blogger resize có kích thước là 72x72 pixels sẽ mất cân đối khi hiển thị chỉ cùng với tiêu đề bài đăng. Đoạn mã trên đặt lại là 38x38 pixels, bạn tùy chỉnh cho phù hợp với blog của mình. Một điều mình mới phát hiện và bổ xung thêm vào đây là ảnh của bài đăng phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600s800... thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện trên widget PopularPosts.

Bạn Có thể thêm thuộc tính float:right cho class item-thumbnail để ảnh hiển thị bên phải.
Trong 3 kiểu hiển thị còn lại có ít thuộc tính hơn, tùy theo ý thích mà bạn chỉnh sửa cho phù hợp nếu muốn.
Chắc mọi người đều không xa lạ với hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. 
Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.
Hình ảnh demo:

slider popular posts
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtrbKcF54sBjoC9CtBbIJnPI51Xckk1Ecf366wsgRSOvuz_p11XiuQAzWllub-B3Xtl_vg1SXkFMBjbNAluWW6EGANzdGRkpdypbav-iGls0KdixoeHRQgEnBzCga3nNq-kb0YYn64juz/) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://duyphaminfo.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbYNvnMoppcGsXJVYpodepjqttz6E2550chuOAGZj_yiKVksyx0ktb3sU9uAnNyohpHh4zhEFVT8jWLDbvd4YLXrOFPZ54i251BKCizdy4M7u5YDRIX3TbMHMH0gwj75jaSyAcihD8J1J/", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqax8kq4OLw529eVS0_eMMnYRdSvFDCde_QdmI5POjUrJvkpoi_WC_7Ttoi1jhSYvV9dKNrDvlcYF3ig9EkFELQMcXyJRAW98_NPDuuoslwW45y6wrOVDIejWaiMYtkZNTDk3SGWqPRkE/", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Bước 3: Tìm thẻ <b:section class='main' id='main' showaddelement='yes'/> hoặc <b:section class='main' id='main' showaddelement='no'/> và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyIFSnFlsApJQckjKRF_jW6NARkjza0epEfQmlJ-27WZ_Xa8-oox_kp6beOdjnKVksYLDl_JjAonWck5ofK8MdnMo6J8f3F8R0q4_PBwYkx1Aj_oAE4Tf2G2uStMwh1cStOl_ox1K6XDM/'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

Bước 4: Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.

Lưu thiết lập và test

CHú ý: Để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...
Thread Comment cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét tạo sự khác biệt. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Đánh số theo comment có quy luật:
Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. 
Vì Thread Comment không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.
number comments2222222222
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn. 

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.

Typography Theme là một sự lựa chọn khá tối ưu và cầu toàn cho những ai cần tìm các theme WordPress yêu thích sự đơn giản nhưng lại đẹp nhờ cách tối ưu chữ viết trên theme. Giống như thuật ngữ Typography thông dụng, Typography Theme sẽ không quan trọng nhiều đến vấn đề màu sắc hay bố cục mà chỉ tập trung rất nhiều vào phần làm đẹp từng nét chữ thông qua việc tính toán tỷ lệ, khoảng cách giữa các con chữ.
Nếu bạn thích Typography giống mình thì mời bạn xem qua danh sách các theme WordPress miễn phí mang phong cách Typography khá được mắt mà mình đã sưu tầm lại, theo mình nói thì sẽ thật tuyệt vời nếu như bạn dùng các theme này vào blog cá nhân, nhật ký.

1. WP Typography

wptypography
Đây là một trong các theme Typography miễn phí mà mình thấy ưng mắt nhất. Không đơn điệu quá như các theme miễn phí khác, dù là phong cách Minimalist nhưng nó vẫn giữ được một bố cục nhìn khá hài hóa, các con chữ cũng được tối ưu vừa tầm mắt cho người dùng mà vẫn làm điểm nhấn quan trọng trên theme
Demo – Download

2. Manifest

Typography Theme WordPress đẹp mắt
Demo – Download

3. Wu Wei

Typography Theme đẹp mắt cho WordPress
Demo – Download

4. NeoClassical – Mang hơi hướm Thesis

Typography Theme miễn phí cho WordPress

5. Inuit Theme

Typography Theme đẹp mắt

6. Clear Cut

Typography Theme đẹp cho WordPress

7. MagZine

Theme phong cách Typography rất đẹp

8. Modern Clix

Theme Typography miễn phí đẹp

9. Simpility

simpility-wordpress-theme

10. F8 Lite

Typography Theme miễn phí đẹp mắt

11. Clean Minimal

Typography Theme đẹp mắt
tìm kiếm liên quan
  • tải giao diện đẹp miễn phí
  • bo cuc chu typography
  • coupon woocommerce
  • đổi màu tên người com trong wordpress

Thứ Sáu, 21 tháng 6, 2013

Hiện nay trong giới trẻ đang rộ lên phong trào vẽ hình chibi rất đáng yêu và ngộ nghĩnh. Bài viết sau đây sẽ hướng dẫn bạn cách vẽ chibi đơn giản.
Vẽ chibi là gì?
Vẽ Chibi là trào lưu “biến” những hình mẫu trong tranh thành người tí hon, tròn trĩnh dễ thương, được các bạn teen Nhật vô cùng yêu thích. Sở dĩ, trào lưu này được gắn cái tên Chibi là do theo tiếng Nhật Bản Chibi có ý nghĩa là một người bé xíu và ngắn ngủn nhưng đáng yêu. Từ khi đổ bộ vào Việt Nam, trào lưu này được giới trẻ Việt nhiệt tình đón nhận.
Cach-ve-chibi-don-gian-goc18
Bước 1: Vẽ trên giấy
1. Đầu tiên các bạn vẽ 1 hình tròn rồi chia ra như hình
Cach-ve-chibi-don-gian-goc18-1
2. Các bạn vẽ đầu, mắt, miệng.
Cach-ve-chibi-don-gian-goc18-2
3. Bây giờ thì vẽ thân người
Cach-ve-chibi-don-gian-goc18-3
4.Vẽ thêm chân, tóc.
Cach-ve-chibi-don-gian-goc18-4
5. Các bạn có thể đồ lại hình vẽ bằng viết mực nước như viết chữ A, thiên long…
Cach-ve-chibi-don-gian-goc18-5
Bước 2: Vẽ Line hình
1. Các bạn có thể chụp lại hình vẽ bằng máy ảnh, điện thoại, webcam hoặc scan..Sau đó các bạn mở ảnh lên photoshop.
Cach-ve-chibi-don-gian-goc18-6
2. Bây giờ bạn vẽ Line ảnh (đồ lại ảnh) bằng công cụ Pen tool.
Cách sử dụng Pen tool:
1. Dùng Pentool vẽ điểm đầu
2. Tiếp tục vẽ điểm cuối
3. Pick 1 điểm ở giữa đoạn thẳng vừa tạo
4. Giữ CTRL và rê chuột để điều chỉnh độ cong.
Không nên tạo điểm neo rời rạc mà nên Pick 2 điểm đầu cuối như trên để nét vẽ được mềm mại.
Cach-ve-chibi-don-gian-goc18-7
3. Sau khi đã chọn đc vùng bằng pen tool thì các bạn chọn brush nhá. Click vào biểu tượng cây cọ ( brush) ở phía bên trái.
Ở hàng trên các bạn click vào ô tam giác và chọn kiểu brush nha. ở đây mình chọn basic brush.
Cach-ve-chibi-don-gian-goc18-8
4. Sau đó các bạn trở lại với công cụ pen tool và nhấp phải chọn Stroke Path.
Cach-ve-chibi-don-gian-goc18-9
5. Chúng ta sẽ đc kết quả như hình bên dưới và các bạn tiếp tục nhấp phải chọn Delete Path.
Cach-ve-chibi-don-gian-goc18-10
6. Tương tự các bạn tiếp tục line các phần còn lại.
Cach-ve-chibi-don-gian-goc18-11
7. Các bạn lưu ý khi line chúng ta nên chỉnh độ to của brush ( mặt thì line brush nhỏ, còn áo, quần thì line brush to…)
Cach-ve-chibi-don-gian-goc18-12
Bước 3: Tô màu
1. Để tô màu không bị lem thì các bạn nên dùng Pen tool chọn vùng (các chọn vùng cũng tương tự như cách line nhưng khi chọn xong các bạn nhấp chuột phải chọn Make Selection)
Cach-ve-chibi-don-gian-goc18-13
2. Bây giờ thì tô màu nào
Cach-ve-chibi-don-gian-goc18-14
3. Hoàn thành công đoạn tô màu
Cach-ve-chibi-don-gian-goc18-15
4. Các bạn có thể chèn hình nền theo ý muốn cho đẹp
Cach-ve-chibi-don-gian-goc18-16
Dưới đây là một số mẫu chibi rất đẹp được bạn Nhái Nhí Nhố thực hiện:
Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi Hướng dẫn Cách vẽ chibi
Chúc bạn thành công.

Tags:
CÁCH CHUYỂN TỪ ẢNH THẬT SANG TRANH VẼ CHIBI CÁCH VẼ CHIBI CÁCH VẼ CHIBI BẰNG PAINT CÁCH VẼ CHIBI BẰNG PAINT TOOL SAI CÁCH VẼ CHIBI BẰNG PHOTOSHOP CÁCH VẼ CHIBI BẰNG TAY CÁCH VẼ CHIBI CƠ BẢN CÁCH VẼ CHIBI DỄ THƯƠNG CÁCH VẼ CHIBI NAM CÁCH VẼ CHIBI TRÊN MÁY TÍNH CÁCH VẼ CHIBI TRÊN PHOTOSHOP CÁCH VẼ CHIBI TRONG PHOTOSHOP CÁCH VẼ CHIBI TỪ ẢNH THẬT CÁCH VẼ CHIBI ĐẸP CÁCH VẼ CHIBI ĐƠN GIẢN CÁCH VẼ CHIBI ĐƠN GIẢN BẰNG PHOTOSHOP CÁCH VẼ CHIPI CÁCH VẼ HÌNH CHIBI CÁCH VẼ HÌNH CHIBI BẰNG PHOTOSHOP CÁCH VẼ HÌNH CHIBI DỄ THƯƠNG CÁCH VẼ HÌNH CHIBI TRÊN MÁY TÍNH CÁCH VẼ HÌNH CHIBI TRÊN PHOTOSHOP CÁCH VẼ HÌNH CHIBI ĐƠN GIẢN CÁCH VẼ HÌNH CHIPI HƯỚNG DẪN VẼ CHIBI HƯỚNG DẪN VẼ CHIBI BẰNG BÚT CHÌ HƯỚNG DẪN VẼ CHIBI BẰNG PAINT TOOL SAI HƯỚNG DẪN VẼ CHIBI BẰNG PHOTOSHOP HƯỚNG DẪN VẼ CHIBI BẰNG TAY HƯỚNG DẪN VẼ CHIBI CƠ BẢN HƯỚNG DẪN VẼ CHIBI TRUONGTON HƯỚNG DẪN VẼ CHIBI TỪ ẢNH THẬT HƯỚNG DẪN VẼ CHIBI VIETDESIGNER HƯỚNG DẪN VẼ CHIBI ĐẸP HƯỚNG DẪN VẼ CHIBI ĐƠN GIẢN