Thiết Kết Blogger Cho Người Mới Bắt Đầu: Bài Học
expr:class='"loading" + data:blog.mobileClass'>

Dịch Trang Sang Ngôn Ngữ Được Hỗ Trợ

Hiển thị các bài đăng có nhãn Bài Học. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Bài Học. Hiển thị tất cả bài đăng

Thứ Hai, 27 tháng 10, 2014

Bài Viết Có Thể Tham Khảo


http://caocongkien.blogspot.com/
Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Thứ Năm, 23 tháng 10, 2014

Bài 10: Hướng dẫn chèn Zopim chat vào blogspot


Bài 10: Hướng dẫn chèn Zopim chat vào blogspot. Zopim chat là một tiện ích vô cùng quan trọng giúp bạn chăm sóc khách hàng và quản lý khách hàng rất tốt. Có rất nhiều tiện ích tuyệt vời chờ bạn Zopim này. Cùng khám phá nhé.
Bài 10: Hướng dẫn chèn Zopim chat vào blogspot
Bài 10: Hướng dẫn chèn Zopim chat vào blogspot

VIDEO HƯỚNG DẪN By Bill Quy

   



Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao


Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao. Floating mạng xã hội giúp website của bạn đẹp hơn và chuyên nghiệp hơn rất nhiều. 
Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao
Bài 09: Hướng dẫn chèn Floating mxh Tiện ích nâng cao
VIDEO HƯỚNG DẪN By Bill Quy






Code

Các bạn có thể xem ảnh minh họa hoặc blog demo để thấy rõ hơn.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin>:
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8kv5SFJ60jkeIdyjBnRGBYp28gmXpMcSN-A5GaQXkFzncBoMRQTG7FoiqhgtFAgX6OyFmoMXlI3SNTCianMNX185h_AuZ9xXgQjL0VUdtLx4uV58qck9ArXztaKijIwCYSZyHEdhTyR7/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
5. THêm đoạn mã bên dưới vào trước thẻ </head> : 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

- Nếu blog của bạn đã có thư viện jquery rồi thì hãy xóa file màu xanh đi.



6. THêm mã bên dưới vào trước thẻ đóng </body>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
- Thay các phàn màu xanh thành các id của bạn tương ứng.

7. Lưu lại là oke.
Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 08: Hướng dẫn chèn comment facebook vào blogspot


Bài 08: Hướng dẫn chèn comment facebook vào blogspot Tiện ích nâng cao. Hiện nay Facebook rất phổ biến, vì vậy việc thêm tiện ích Comment Facebook vào website của bạn vô cùng quan trọng. 

Bài 08: Hướng dẫn chèn comment facebook vào blogspot Tiện ích nâng cao
Bài 08: Hướng dẫn chèn comment facebook vào blogspot Tiện ích nâng cao

VIDEO HƯỚNG DẪN By Bill Quy
Code
Cách 1.

1- Bước đầu tiên bạn phải làm là đóng comment của blogger lại bằng cách vào Cài Đặt => bài đăng và nhận xét => Facebook comments for blogger  -Chèn comment của facebook vào blogspot 
- Lưu cài đặt lại.


2-  Vào phần Mẫu (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọnMở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào trước thẻ đóng</head>.
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
Trong đó:
data-width là độ rộng của comment box.
data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết

3- Chèn đoạn code bên dưới vào sau thẻ <body>
 <div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
4- Tìm đoạn code như bên dưới :
<b:include data='post' name='post'/>
5- Chèn ngay sau nó đoạn code bên dưới :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
6- Lưu Mẫu (Save template). và ra xem kết quả.

Cách 2: là chạy 2 comment cùng 1 lúc, mặc định là form comment của blogspot, nếu muốn xem bên form comment của facebook thì click vào liên kết chuyển form.

Sau đây là các bước thực hiện: lưu ý là ở bản cập nhật này các bước thực hiện vẫn tương tự, chỉ có khác là không vào phần cài đặt để ẩn comment mà thôi. Vì thế nếu đã thực hiện bản cũ muốn update lên ở bản này thì các bạn cứ việc thay thế code đã thêm ở bản cũ bằng code của bản này là được.

1. Vào phần Mẫu (Template) -> chỉnh sửa HTML -> nhấp chọn mở rộng tiện ích mẫu.

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>.
<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var purl= location.href;
var cm_form = purl.GetValue("cm_form");
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
Trong đó:
data-width là độ rộng của comment box.
data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết

3- Chèn đoạn code bên dưới vào sau thẻ <body>.
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
4. Tìm đoạn code như bên dưới :
<b:include data='post' name='post'/>
5. Chèn ngay sau nó đoạn code bên dưới :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cmnav' style='text-align:center;'> <a 
href='?cm_form=blogger#cmnav'>Blogger Comments</a> | <a 
href='?cm_form=facebook#cmnav'>Facebook Comments</a> 
</div>

<script type='text/javascript'>
if (cm_form==&quot;facebook#cmnav&quot;) {
document.write(fbcm); 
var fbcss = document.createElement(&quot;style&quot;);
fbcss.type = &quot;text/css&quot;;
fbcss.innerHTML = &quot;#comments { display:none }&quot;;
document.body.appendChild(fbcss);
}
</script></b:if>
Ở bước 5 này có 1 lưu ý nhỏ. Bạn phải xác định thẻ div chưa nội dung của phần comment của blogger là gì, đa số nó sẽ là #comments. Tùy theo template của bạn đang xài, và tùy theo người Rip template thì có thể nó sẽ khác. Việc xác định nó cũng không khó nên mình không hướng dẫn ở đây.
- 1 điều nữa là phần liên kết chuyển form comment (href='?cm_form=blogger' và href='?cm_form=facebook'). Cái giá trị cm_form=facebook thì bạn phải giữ nguyên, còn giá trị cm_form=blogger thì các bạn có thể thay đổi theo ý thích. Cái này chỉ có tác dụng load lại trang để sang chế độ comment của blogger mà thôi. Như ở đây mình khuyên cũng nên giữ nguyên để cho nó đẹp, pro 1 tý.

6. Lưu mẫu lại..
Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 07: Hướng dẫn sử dụng tiện ích


Bài 07: Hướng dẫn sử dụng tiện ích. Tiện ích sẽ giúp website của bạn đẹp hơn - giúp bạn cung cấp thêm thông tin cho khách hàng. Tiện ích giúp bạn thêm Video, Thông tin liên hệ, Banner quảng cáo và nhiều ứng dụng khác nữa. Bạn nên tìm hiểu nhiều hơn về phần này nhé.

Bài này mình sẽ hướng dẫn một số tiện ích phổ biến nhất cho các bạn tham khảo thôi nhé.

Bài 07: Hướng dẫn sử dụng tiện ích
Bài 07: Hướng dẫn sử dụng tiện ích

VIDEO HƯỚNG DẪN By Bill Quy


Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 06: Hướng dẫn thay hình ảnh Slideshow


Bài 06: Hướng dẫn thay hình ảnh Slideshow. Slide ảnh này cũng gọi là banner để bạn tiện cho việc đưa sự nổi bật của website bạn so với các website khác - nhằm mục đích thuyết phục khách hàng quyết định hợp tác với ta.

Để tạo slide ảnh đẹp bạn nên biết thêm chút ít về PHOTOSHOP thì quá tốt - để bạn có thể tạo được banner theo kích thước mà mình muốn. Hoặc bạn có thể nhờ người bạn của bạn thì quá tốt.

Bài 06: Hướng dẫn thay hình ảnh Slideshow
Bài 06: Hướng dẫn thay hình ảnh Slideshow

VIDEO HƯỚNG DẪN By Bill Quy
Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 05: Tạo thanh Menu theo ý của bạn


Bài 05: Tạo thanh Menu theo ý của bạn. Trước tiên để tạo Menu bạn cần tham khảo và nghiên cứu những website của đối thủ. Mình thường nghiên cứu 5 website của đối thủ và đưa ra được menu theo ý riêng của mình.

Việc tạo MENU sẽ giúp bạn điều hướng khách hàng theo ý của bạn. Rất quan trọng nhằm hỗ trợ khách hàng tìm được những thông tin cần thiết và phù hợp với nhu cầu của họ. Nếu bạn làm tốt khâu này bạn sẽ lấy được lòng khách hàng.

Bài 05: Tạo thanh Menu theo ý của bạn
Bài 05: Tạo thanh Menu theo ý của bạn
VIDEO HƯỚNG DẪN By Bill Quy


Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 04: Hướng dẫn thay đổi giao diện website


Bài 04: Hướng dẫn thay đổi giao diện website. Giao diện website ảnh hưởng rất nhiều đến việc khách hàng ở lại website của bạn và ảnh hưởng luôn đến việc khách hàng quyết định hợp tác với bạn hay không. Vì vậy hãy cùng nhau nghiên cứu giao diện website nhé.
Bài 04: Hướng dẫn thay đổi giao diện website
Bài 04: Hướng dẫn thay đổi giao diện website

VIDEO HƯỚNG DẪN CỤ THỂ By Bill Quy


Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 03: Hướng dẫn đăng bài nâng cao bằng cách copywriting


Bài 03: Copywriting là một thủ thuật không thể thiếu khi bạn làm online. Nhưng đừng lạm dụng nó quá nhiều - nếu website của bạn có quá nhiều bài copywriting thì khó có thể lấy lòng được khách hàng và website của bạn khó có thể đứng top google được. 
Bài 03: Hướng dẫn đăng bài nâng cao bằng cách copywriting
Bài 03: Hướng dẫn đăng bài nâng cao bằng cách copywriting

VIDEO HƯỚNG DẪN CỤ THỂ By Bill Quy


Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 02: Hướng dẫn đăng bài lên website cơ bản


Bài 02: Mình sẽ hướng dẫn các bạn cách đăng bài lên website cơ bản. Cái này rất cần thiết - vì để khi bạn tiến đến các phần sau sẽ dễ dàng hơn rất nhiều. 

Bài 02: Hướng dẫn đăng bài lên website cơ bản
Bài 02: Hướng dẫn đăng bài lên website cơ bản

VIDEO HƯỚNG DẪN CỤ THỂ
Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam

Bài 01: Hướng dẫn đăng nhập Blogger & Tổng quan Blogger


Hướng dẫn thiết kế webiste trên nền tảng blogpsot. Mình cho ra một loạt video hướng dẫn từ cơ bản đến nâng cao dành cho những người không biết về IT. Hi vọng loạt vidoe này có ích cho cộng đồng BLOGGER Việt.

Bài 01: Mình hướng dẫn các bạn đăng nhập Blogger và tổng quan blogger. Vì nhiều bạn mới bước vào nghề không biết nên cần phải làm video này để hướng dẫn cụ thể. Chúc các bạn gặt hái được thành công như mong muốn.

Bài 1: Hướng dẫn đăng nhập Blogger & Tổng quan Blogger
Bài 1: Hướng dẫn đăng nhập Blogger & Tổng quan Blogger


Video Hướng Dẫn By Bill Quy


Read more: http://pandacanthopro.blogspot.com/
Người đăng: vào lúc
Nhãn:
By Vi Tính Tinh Núi Sập Nui Sap, tt. Núi Sập, Thoại Sơn, An Giang, Việt Nam
Đăng ký: Bài đăng (Atom)