Hiển thị các bài đăng có nhãn Tiện ích cho blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Tiện ích cho blog. Hiển thị tất cả bài đăng

13/2/15

Chèn hộp Mã hóa code trước khung comment của blogger

Như các bạn đã viết trong khi comment nhiều khi chúng ta phải chèn một đoạn mã sử dụng các ký tự đặc biệt (như < > '" &) vào comment. Nếu cứ thế chèn vào thì nó sẽ không hiển thị được vì thế giải pháp đưa ra là phải mã hóa nó để có thể hiển thị được ở phần comment. Bài viết này mình sẽ hướng dẫn các bạn cách chèn thẳng một tiện ích mã hóa code vào trước khung commmet của blogger.
Chèn tiện ích mã hóa code trước khung comment của blogger
Các bạn có thể xem demo trực tiếp trên blog mình nha.

Cách chèn tiện ích mã hóa code trước khung comment của blogger


1. Đăng nhập vào blog.
2. Chọn mẫu (template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code bên dưới vào trước thẻ </head> 

<script type='text/javascript'>
      //<![CDATA[
      function moreMahoa() {
        document.getElementById('mahoa-more').style.display = 'inline','200';
        document.getElementById('mahoa-toggle').innerHTML = '<a class="button medium closemh" href="javascript:lessMahoa()">Đóng Lại</a></span>';
      }
      function lessMahoa() {
        document.getElementById('mahoa-more').style.display = 'none','200';
        document.getElementById('mahoa-toggle').innerHTML = '<a class="button medium openmh" href="javascript:moreMahoa()">Mã Hóa Code</a>';
      };
      //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
//Character count script
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
//]]>
</script>
<script type='text/javascript'>var a=navigator,b=&quot;userAgent&quot;,c=&quot;indexOf&quot;,f=&quot;&amp;m=1&quot;,g=&quot;(^|&amp;)m=&quot;,h=&quot;?&quot;,i=&quot;?m=1&quot;;function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0&gt;=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c](&quot;Mobile&quot;)&amp;&amp;-1!=a[b][c](&quot;WebKit&quot;)&amp;&amp;-1==a[b][c](&quot;iPad&quot;)||-1!=a[b][c](&quot;Opera Mini&quot;)||-1!=a[b][c](&quot;IEMobile&quot;)){var k=j();k&amp;&amp;window.location.replace(k)};
</script><script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

5. Yêu cầu là chèn đoạn mã đó trước khung comment do vậy bạn hãy tìm đoạn mã của khung comment như sau:
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

- Dán vào trước nó đoạn code bên dưới (Lưu ý một blog có nhiềuđoạn mã như trên nên bạn phải chèn đúng đoạn cần thiết nó mới hiển thị nha: 
<span id='mahoa-toggle'>
<a class='button medium' href='javascript:moreMahoa()'>Mã Hóa Code</a>
</span>
<br/>
<span id='mahoa-more' style='display: none;'>
<form>
<font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'>
  <textarea name='data1' style='width: 500px; height: 180px;overflow:hidden; background:#333; padding:10px'/>
</font>
<font color='#6B828E' face='Arial, Helvetica, sans-serif' size='2'><br/>
<input class='abt2' name='button' onClick='html2entities(this.form.data1)' onMouseOut='this.className=&apos;abt2&apos;' onMouseOver='this.className=&apos;abt2 abt2hov&apos;' type='button' value='Convert'/>
<input class='abt3' name='Clear' onMouseOut='this.className=&apos;abt3&apos;' onMouseOver='this.className=&apos;abt3 abt3hov&apos;' type='reset' value='  Clear  '/>
</font>
</form>
</span>

Giờ là điều chỉnh nút mã hóa code cho đẹp bạn chỉ cần dán đoạn code sau vào trước thẻ ]]></b:skin>
.button {border: 1px solid #055;box-shadow: 0 1px rgba(255,255,255,.2) inset;background: #066;color: #fff!important;text-decoration: none!important;cursor: pointer;padding: 5px 10px;}
.button.medium {padding: 5px 10px;font-size: 12px;}
Giờ lưu mẫu lại và kiểm tra kết quả bạn đã làm được nha.
                                                                                                                            Theo: Namkna

27/4/14

Tạo hộp thông báo dạng popup chỉ xuất hiện 1 lần khi vào trang web blogspot


Hôm nay, mình sẽ hướng dẫn các bạn tạo code tạo popup thông báo hay banner thông báo,quảng cáo...chỉ lần đầu tiên vào website không xuất hiện thêm nữa khí vào đọc các bài viết khác nhau để không gây khó chịu cho người dùng

10/3/14

Tạo đếm lượt người xem bài viết trong Blogspot

Blogger ngày càng khẳng định sức mạnh bởi sự đơn giản trong thiết kế cũng như việc quản lý. Việc thống kê số lượt xem trên mỗi bài viết cũng được khá nhiều bạn quan tâm. Trong bài viết này mình sẽ hướng dẫn bạn cách đếm lượt truy cập trên mỗi bài viết. Các bài hướng dẫn tạo bộ đếm truy cập Blog thì khá nhiều nhưng bài hướng dẫn đếm số lượt xem của độc giả ở các bài viết của mình trên Blog thì khá hiếm.
     Tôi muốn trang bị cho Blog của mình bộ đếm số người xem bài viết của mình nhưng tìm mãi trên mạng không có cái nào. Có cái cứ vào blog là các bài viết đồng loạt được tăng lên một cả. Tìm mãi tôi mới thấy thủ thuật này là hay vì chỉ vào bài viết nào thì bài đó mới được tăng lượt dếm còn các bài khác không vào số đếm vẫn được giữ nguyên ! Có điều con số tăng chỉ hiện lên sau lần vào sau thôi không hiện ngay lúc ta vào.
     Tuy vậy tôi vẫn chưa ưng ý với bộ đếm này lắm vì mỗi lần Reload thì bộ đếm vẫn xem như ta đã vào bài viết này và chỉ đếm được kể từ khi ta lập bộ đếm này thôi còn trước đó thì không !
Tôi xin viết tút lại rất cụ thể với hình ảnh minh họa để các bạn không quen với việc chỉnh sữa HTML của Blog lắm dễ sử dụng thủ thuật hơn. Trong quá trình áp dụng thủ thuật này tôi đã được sự giúp đỡ nhiệt tình của bạn Minh Anh với đ/c mail : connect@erhay.com. Tôi xin có lời cảm ơn !
Đầu tiên mời bạn xem Demo:
Sau đây là các thao tác thực hiện (Kích vào ảnh để xem ảnh to hơn)
Bước 1: Tạo một tài khoản  Firebase
Nhấn vào đây để đăng ký

Bước 2: Tạo trang Firebase.

19/1/14

Tùy chỉnh hộp bình luận cho blogger với nền đẹp theo ý


Trên thực tế, các hộp bình luận mặc định không được hấp dẫn cho lắm. vậy làm cách nào để tùy chỉnh cho nó trở nên bắt mắt hơn?  Bài viết này sẽ giúp bạn tùy chỉnh hộp bình luận với màu nền không phải mặc định mà được tùy chỉnh theo ý thích của bạn. 


Tùy chỉnh Blogger Comment Box

Bạn hãy làm theo các bước đơn giản sau để thêm nó vào blog của bạn:

1. Đăng nhập vào blogger  Thiết kế > . Chỉnh sửa HTML 
2. Tìm thẻ này bằng cách sử dụng tổ hợp phím Ctrl + F   ]]> </ b: skin>
3. Dán mã dưới đây trước thẻ : ]]> </ b: skin> :

#mbt-form iframe{ 
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYwx3lMD2AJFcAK_a2ibguV7CsmA4S7MA1PUjNjMij4imU3O1yIqSPPilCaLHkPn0WZPZHCoRKJAR1n-CLj5_66C0udAaGnvwFRA-erV-y1MJ-isPasZqHAJcu598AoFYchV6XVJxZ8fZ/s400/11.png) repeat-x; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:5px; 
font:normal 12pt "ms sans serif", Arial; 
color:#2F97FF; 
width:560px; height:213px !important; 
}
#mbt-form a{ 
color:#fff; 
}
* Lưu ý: Bạn có thể thay thế dòng link ảnh màu đỏ bằng link ảnh khác bạn yêu thích.
4. Tìm lại mã sau bằng cách sử dụng tổ hợp phím Ctrl + F:   <div class='comment-form'> 
5. Bây giờ thay thế <div class='comment-form'>  với mã dưới đây:

<div id='mbt-form'>
6. Bây giờ lưu mẫu của bạn.
Chúc bạn thành công !... 
                                                                                               Tham khảo từ: bloggertrix.com

1/1/14

Tùy chỉnh hộp popup cho các nút xã hội trên Blogger


Tùy chỉnh + Khuyến nghị + + Xã hội Widget

Trong bài viết này sẽ giải thích cách làm thế nào để thêm hộp popup tùy chỉnh cho các blogger. Trên thực tế đây chỉ là widget. Bạn có thể thêm nó vào blog của bạn dễ dàng. Mẫu dưới đây bao gồm Google+, Facebok và Twitter counters. Hãy bấm xuống dưới liên kết để xem bản demo.


Đề nghị Widget xã hội cho Blogger:

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

Tạo Tabbed Navigation CSS3 đẹp cho Blogger


CSS3 + + Tabbed Navigation
Trong bài viết này sẽ hướng dẫn bạn làm thế nào để thêm CSS3 tab chuyển hướng cho các blogger.Bạn có thể thêm nó vào blogger như widget. Nếu bạn muốn thêm vào như trang fan hâm mộ, các nút xã hội hoặc các mã số để nút cá nhân, bạn có thể thêm nó bằng cách thay thế mô tả. Tiện ích này chỉ sử dụng CSS3 và hỗ trợ HTML




Thêm CSS3 Tabbed Navigation cho Blogger

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

30/12/13

Tạo phong cách hoạt hình jquery Tabs Widget cho Blogger


Vật dụng tab luôn luôn giúp đỡ để tiết kiệm khong gian cho website . Hướng dẫn này giải thích làm thế nào để thêm phụ tùng tab juery độc đáo  cho blogger. Tôi sử dụng css và jQuery để thực hiện widget này. Tab này làm việc với tất cả các phụ tùng web hiện đại. However của nó không làm việc với trình duyệt IE. Bạn có thể hãy xem trong trang demo để có được ý tưởng như thế nào nó hoạt động. 
Jquery + hoạt hình + + Tabs Widget

29/12/13

Chỉ hiển thị tiện ích với quản trị blog


Chỉ hiển thị tiện ích với quản trị blogĐây là 1 thủ thuật cũng khá đơn giản, tương tự như với nút edit widget. Chỉ khi đã đăng nhập quyền quản trị blog thì khi load blog bạn mới thấy được widget mà bạn đã ẩn đi. Lưu ý là chỉ nhưng người được cấp quyền admin cho blog mới thấy được tiện ích, còn những tác giả thông thường cũng sẽ không thấy được tiện ích này.

Hình ảnh minh họa :

Tạo bóng đổ cho ảnh hoặc các khối nội dung

Tạo bóng đổ cho ảnh hoặc các khối nội dungỞ bài này mình sẽ sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

Hướng dẫn tạo thumbnail cho ảnh với CSS

Thông thường khi muốn tạo ảnh thumbnail ta thường dùng cách bóp ảnh lại bằng việc sử dụng các lệnh width, height. Khi bóp ảnh như thế, nếu bóp theo 2 chiều (width và height) thì ảnh thường bị méo dạng (không còn tỉ lệ với ảnh gốc), nếu không muốn gặp hiện tượng này thì chỉ nên bóp theo 1 chiều. Tuy nhiên, ở những phần, ví dụ như tiện ích recent post, các bạn muốn các ảnhthumbnail được đều nhau, và có cùng kích cỡ thì việc bóp ảnh theo 1 chiều không đáp ứng được. Và hôm nay mình sẽ giới thiệu cho các bạn 1 các để lấy ảnh thumbnail từ ảnh gốc mà chỉ cần dùng CSS.

Hướng dẫn tạo thumbnail cho ảnh với CSS

26/12/13

Tạo hiệu ứng mô tả cho link liên kết trên blog


Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.

Hình ảnh minh họa:
Tạo hiệu ứng mô tả cho link liên kết trên blog

Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

Sript đổi màu nền cho blog


Sript đổi màu nền cho blogBài này mình sẽ giới thiệu cho các bạn 1 đoạn script nhỏ làm thay đổi màu nền của blog. Với đoạn script này, màu nền sẽ tự động thay đổi 1 cách tuần tự sau 1 khoảng thời gian mà chúng ta đã định trước.

Để tạo nên hiệu hứng đổi màu cho đẹp và liên tục, các bạn sẽ tạo 1 mảng các trị màu thay đổi 1 cách tuần tự.

Để thực hiện thủ thuật này, các bạn chỉ cần chèn đoạn code JS bên dưới vào trước thẻ đóng </head> hoặc sau thẻ mở <head>


21/12/13

Khắc phục sự cố không hiện thị được Favicon


Khắc phục sự cố không hiện thị được Favicon
Sau khi đã tạo được Favicom và chèn nó vào blog, có thể xảy ra trường hợp Favicom không hiển thị, và bạn sẽ thắc tại sao mình đã add biểu tượng riêng của mình lên rồi mà trên thanh address vẫn chỉ có biểu tượng của Blogger, hoặc cũng có thắc mắc là tại sao nó chỉ hiện thị một cách không thường xuyên. Bài viết hôm nay mình đề cập tới vấn đề này.

Dưới đây là 1 số cách nho nhỏ để khắc phục tình trạng này.

1. Phải chắc rằng phần mở rộng của file fải là .ico , nếu file của bạn có đuôi .gif hoặc .jpg thì Favicon cũng xuất hiện, nhưng đôi khi nó biến mất.

Hướng dẫn tạo favicon cho web /blog


www.favicon.cc là 1 web site cho phép bạn thiết kế 1 file favicon.ico trực tuyến. Với việc hỗ trợ thiết kế đến từng pixel, sẽ cho bạn một favicon sắc nét.
Để tạo 1 favicon riêng cho blog của mình, bạn hãy vào trang :http://www.favicon.cc/


Khi bạn vào web, sẽ thấy giao diện như hình bên dưới:
Hướng dẫn Tạo favicon cho web /blog

20/12/13

Tạo Form Liên hệ chèn vào blog - style 4




Tạo Form Liên hệ chèn vào blog
Bài viết trước, mình đã hướng dẫn Chèn Form Liên hệ từ kontactr.com vào blog. Hôm nay, mình xin giới thiệu một trang Web khác và hướng dẫn cách làm để các bạn chỉ trong vài bước đơn giản sau là bạn đã có thể tạo ra cho mình một Form liên hệ ưng ý.
Hình thức liên lạc ở Web này dễ dàng, miễn phí cho trang web hoặc blog của bạn. Đặc biệt, hơn, các hình thức liên lạc cho website của bạn với bảo vệ chống thư rác được tích hợp!

Bạn hãy nhấp vào đây để truy cập trang Foxyform.com.
Chọn hình thức liên hệ với các lĩnh vực của bạn và quyết định họ là bắt buộc hay không.


19/12/13

Tạo trang Liên hệ cho blog - style 3



Tạo Form Liên hệ từ kontactr.com vào bloggerTrang liện hệ rất quan trọng với các blogger nếu muốn hướng đến sự chuyên nghiệp. Đây là trang thông tin phản hồi giữa các độc giả và admin của blog. Nếu có một trang liên hệ tiện lợi và sự phản hồi, tương tác tốt từ 2 phía sẽ giúp blog của bạn ngày càng phát triển và giữ chân được nhiều độc giả hơn. Sau đây mình hướng dẫn tạo form liên hệ từ trang web kontactr.com


Bước 1: Đăng ký một tài khản trên kontactr:


Liên hệ Quảng cáo

Chào mừng các bạn đến với trang Liên hệ quảng cáo của Thủ thuât Số !

        Với giao diện trang nhã, thân thiện với người dùng, nội dung đa dạng, phong phú, dễ tìm kiếm, Thủ thuât Số đáp ứng khá toàn diện nhu cầu học tập của bạn đọc ở mọi tầng lớp, lứa tuổi có mong muốn tìm hiểu các thủ thuât về sử dụng vi tính, công nghệ số và mạng Internet.
Hiện nay, Thủ thuât Số nhận quảng cáo cho các cá nhân và doanh nghiệp dưới các hình thức sau:
1. Nhận post bài quảng bá sản phẩm và tex-link có nội dung định sẵn do đối tác cung cấp.
2. Nhận viết bài quảng bá sản phẩm và tex-link theo nội dung do đối tác gợi ý.
3. Nhận đặt banner quảng cáo ở các vị trí khác nhau trên blog như đầu trang, chân trang, cuối bài viết, side bar,...
4. Nhận đặt popup nhằm quảng bá và tăng lượt view cho web/ blog của đối tác.

*Điều khoản hợp tác:
Điều 1: Các bài viết, banner không vi phạm pháp luật nước CHXHCN Việt Nam, không chứa nội dung phản động, đồi trụy, lừa đảo. Các tex-link không dẫn đến các trang web/blog đen, có chứa mã độc, có nội dung đồi trụy, lừa đảo, phản động, vi phạm pháp luật Việt Nam.
Điều 2: Nếu đối tác vi phạm các nội dung đã ghi ở Điều 1 thì Thủ thuât Số sẽ đơn phương chấm dứt việc đặt quảng cáo trên blog mà không cần thông báo hoặc sự đồng ý của đối tác.
Điều 3: Chi phí cho dịch vụ quảng cáo do đối tác tự liên hệ đặt giá và thỏa thuận.
Điều 4: Thanh toán qua tài khoản ngânlượng.vn, baokim.vnAgribank hoặc thẻ cào điện thoại của Viettel hoặc Vinaphon.
                                            Giao dịch đơn giản, thuận tiện – Giá cả phải chăng .
                                                                    Hân hạnh được phục vụ quý khách !...

Để liên hệ với admin của Thủ thuât vi tính, bạn hãy điền tên, địa chỉ email và nhập nội dung cần trao đổi vào ô bên dưới, hoặc liên hệ qua email:  ngangiang369@gmail.com 
                                                                                           
                                                                                       Thân ái !
                                                                                       Admin: Ngân Giang    

  
foxyform

18/12/13

Hiện bình luận Facebook trên Tabs trong Blogger (phần 2)


facebook bình luận truy cậpĐây là phần thứ hai của loạt bài của chúng tôi trên Facebook Bình luận plugin. Facebook bình luận bây giờ được tối ưu hóa và dễ dàng lập chỉ mục và thu thập thông tin công cụ tìm kiếm. Facebook bình luận xuất hiện trong kết quả tìm kiếm và có thể lưu lượng truy cập của bạn cả hai từ 845 triệu người sử dụng đã đăng ký của mình và cũng từ Mega Công cụ tìm kiếm Google. Tôi đã chia sẻ một hướng dẫn về làm thế nào để đếm số lượng các ý kiến Facebook và hiển thị nó trên trang chủ blog của bạn và hôm nay chúng tôi sẽ sử dụng cùng một kịch bản, nhưng với một thiết kế khác nhau và cảm nhận.Thêm bình luận truy cập này là rất dễ dàng. Tất cả các bạn cần làm là để theo dõi các bước sau cho đúng. Xin vui lòng xem một bản demo đầu tiên,

Hiện bình luận Facebook trên Tabs trong Blogger (phần 1)


ý kiến ​​facebook tabFacebook Bình luận plugin đã nhanh chóng thay thế phần thứ ba hệ thống bình luận như Disqus và những người khác. Họ bây giờ cũng được thu thập và chỉ số bởi các robot tìm kiếm. Hướng dẫn đầu tiên của chúng tôi trên hộp ý kiến facebook  được đánh giá cao rộng rãi bởi một lượng lớn khán giả và giúp hầu hết các bạn. Hôm nay chúng ta có một cái gì đó thú vị hơn. Nhờ James chúng tôi đã học được một phương pháp mới để hiển thị bình luận facebook trong blog blogger. Chúng tôi sẽ sử dụng một cách tiếp cận khác nhau ở đây và chỉ bằng cách sử dụng mã javascript và mã CSS từ james và giữ các thiết lập khác hoàn toàn khác nhau.

Thêm Facebook Comments Box cho blogger

facebook-bình-boxTrong năm 2009 các nhà phát triển Facebook giới thiệu Plugin xã hội tốt nhất của họ được gọi là " Facebook Ô ". Plugin này có thể được nhúng vào bất kỳ trang web hoặc blog và du khách có thể sử dụng ID của họ về Facebook, Yahoo, AOL và Hotmail để lại comment tại trang web của bạn. Plugin này đã cho thấy rất nhiều vấn đề khi nó được nhúng vào trong Blogger. Nhưng bây giờ nhờ người bạn đồng nghiệp của chúng tôi tối đa từ Allblogtools plugin này đã được làm việc hoàn hảo với bất kỳ tổ chức Blogger blog. Tôi đã chỉnh sửa mã hóa tối đa trong một số lĩnh vực và đã đề cập đến một số tùy chọn thú vị hơn sẽ giúp bạn sử dụng Facebook bình luận hộp song song với nó là hình thức bình luận Blogger để bạn không bị mất đi bình luận trước và cung cấp cho người sử dụng với nhiều tùy chọn cho ý kiến từ khác nhau nền tảng.

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva