Responsive Ad Slot

Hot Games

Startup

Trends

Tech

Nội dung 1
Nội dung 2
Nội dung 3
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

Rifqiy – Responsive Blogger Template

Posted on with Không có nhận xét nào

Các chức năng đã được tích hợp sẵn trong template
  • Responsive Design
  • Manual Featured Post from Image Widget (Slideshow)
  • Auto Featured Post (Slideshow)*
  • Support Advance Editor
  • Lightweight Auto read-more (support third party image, and Youtube Thumbnail)
  • Ajax load more post
  • Page Navigation New
  • Cool blogger threaded comment (Support Google+ Comment)
  • JSON Search Result *
  • Ajax Recent Post by Tag (3 Post Type(Slider, Vertical, and Horizontal)) *
  • Ajax Recent Comment Widget *
  • Ajax Related Post Widget *
  • Ajax NewsTicker *
  • Two View Mode (List and Grid) with Cookies
  • Tabs Widgets Ready
  • Optimize SEO
  • Emoticon
  • Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
  • Custom Error 404 Page
  • Professional admin layout, help you easy work with blog layout.

Demo
Download
READ MORE

Sevida – Responsive Magazine Blogger Template

Posted on with Không có nhận xét nào

Sevida là template premium responsive cho blogspot thích hợp cho mẫu blog tạp chí. Các chức năng của đã tích hợp trong mẫu:

  • Responsive Design
  • Auto Featured Post from JSON (Slideshow) *
  • Manual Featured Post Work with Image Widget(Slideshow) New
  • Support Advance Editor
  • Lightweight Auto read-more support third party image and youtube (option make it slideshow) New
  • Ajax load more post
  • Ajax Page Navigation New *
  • Cool blogger threaded comment (Support Google+ Comment)
  • JSON Search Result *
  • Lightweight Summary (option make it slideshow)
  • Two View Mode (List and Grid) width Cookies
  • Recent Comment Widget *
  • News Ticker Widget *
  • Related Post Widget *
  • Recent Post by Labels (3 Post Type (Slider, Vertical, Horizontal) support Random) New *
  • Optimize SEO
  • Archive Page *
  • Emoticon
  • Dropdown Menu
  • Top Social Icon
  • Custom Error 404 Page
  • Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
  • Professional admin layout, help you easy work with blog layout.
READ MORE

Chèn Addthis vào website blog

Posted on with Không có nhận xét nào
1. Về trang web Addthis.com

Cách đây ít lâu trang Addthis.com vừa mới thay đổi giao diện mới đồng thời cũng bắt đầu mở rộng các tiện ích ngoài social sharing toolbox được hướng dẫn trong bài viết này còn có follow widget và welcome bar.

addthis-one-button-your-content-everywhere

Addthis là một dịch vụ rất nổi tiếng tự nhận là nền tảng chia sẻ lớn nhất thế giới. Addthis cung cấp một bộ công cụ chia sẻ (social sharing tools), follow widget và welcome. Addthis giúp các tăng lượng truy cập các trang web bằng sự kết nối thông qua các dịch vụ xã hội như Facebook, Twitter, Pinterest, Google+…. Đối với các thành viên đăng ký Addthis cung cấp công cụ để theo dõi và phân tích nhằm giúp định hướng nội dung và phương thức chia sẻ.

2. Hướng dẫn cách chèn code mặc định

Cách chèn code rất cơ bản bạn vào phần trang Social Sharing Toolbox chỉ cần 3 bước là có thể lấy được code chèn vào bất kỳ trang blog/website nào.

Bước 1: Chọn nền tảng: bạn sử dụng platform nào thì chọn platform ấy, addthis hỗ trợ Blogger, Wordpress, Tumblr, TypePad, Posterous, Joomla, Drupal, Magento…

Untitled 2

Bước 2: Chọn style, bạn có thể chọn button (một nút nhấn) hoặc toolbox tập hợp nhiều nút nhấn của các dịch vụ. Đây sẽ là phần chúng ta tùy chỉnh và tạo nên bản sắc của riêng mình. Ở đây ta lấy ví dụ là sử dụng tools box

Get Sharing Tools - AddThis

Bước 3: Copy đoạn code và chèn code vào bất cứ vị trí nào bạn thích trong blog/website. Thông thường đoạn code có dạng như sau.

Data provided by Pastebin.com - Download Raw - See Original
  1. <!-- AddThis Button BEGIN -->
  2. <div class="addthis_toolbox addthis_default_style ">
  3. <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
  4. <a class="addthis_button_tweet"></a>
  5. <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
  6. <a class="addthis_counter addthis_pill_style"></a>
  7. </div>
  8. <script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>
  9. <!-- AddThis Button END –>
Get Sharing Tools

2. Tùy biến Addthis social sharing toolbox

Trong trường hợp bạn không muốn tùy chỉnh sâu hơn Addthis social sharing toolbox thì làm theo hướng dẫn dưới đây.

1. Tối ưu hóa tốc độ trang

Bạn chỉ cần đặt một đoạn code JS cho toàn bộ trang cho nên Tuarua đề nghị bạn nên cắt riêng đoạn code js bên dưới và chèn nó vào ngay bên trên thẻ </body>.
Data provided by Pastebin.com - Download Raw - See Original
  1. <script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>

2. Tùy chỉnh hình ảnh riêng cho button

Phần code bên dưới ưng với mỗi dịch vụ mạng xã hội hoặc chia sẻ được hiển trị trong toolbox.
Data provided by Pastebin.com - Download Raw - See Original
  1. <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
Trong đó
  • addthis_button_facebook_like chỉ định dịch vụ chia sẻ
  • fb:like:layout="button_count" chỉ định style của nút chia sẻ (có thể có hoặc không)
Nếu bạn muốn hiển thị những dịch vụ ưa thích của mình thì cần biết đoạn code chỉ định dịch vụ chia sẻ. Theo link sau để  tham khảo các dịch vụ mà Addthis hỗ trợ. Điều thú vị là Addthis hỗ trợ cả ZingMe với mã chỉ định là zingme. Trong toolbox đoạn code sẽ như sau.
Data provided by Pastebin.com - Download Raw - See Original
  1. <a class="addthis_button_zingme"></a>
Tuy nhiên bạn còn muốn thay đổi ảnh mặc định của addthis thành một hình ảnh nào khác của riêng bạn. Cũng dễ thôi, đoạn code đó là

Data provided by Pastebin.com - Download Raw - See Original
  1. <a class="addthis_button_zingme"><img alt='Share to ZingMe' border='0'src=”imglink”/></a>

Bạn thay imglink bằng đường link của bức ảnh.
READ MORE

Chèn ứng dụng Scroll to Top vào Blogger

Posted on with Không có nhận xét nào




Scrolltotop.com

Đây là ứng dụng căn bản mà hầu hết đều có, tuy nhiên để chọn được mẫu mã của button đó cho vừa ý đời hỏi bạn phải giỏi về kỹ năng css 1 chút. Ứng dụng của Scroll to top có thể giúp bạn làm điều đó với gần 100 mẫu cho bạn tha hồ chọn.

Để chèn ứng dụng này các bạn vào địa chỉ Scroll to top, chọn cho mình 1 kiểu giao diện sau đó coppy đoạn code. Đăng nhập vào blogger chọn Template/ Edit HTML. Tìm và dán ngay phía trên đoạn thẻ </body>

Save template của bạn lại


Nếu có vấn đề gì vui lòng các bạn hãy comment lại bên dưới
READ MORE

Hướng dẫn chèn button Pinterest Pin vào ảnh Blog

Posted on with Không có nhận xét nào



Vai trò của Social là rất quan trọng đối với các chỉ số của Google, trong đó Pinterest cũng chiếm 1 vị trí rất quan trọng,  hơn cả Tweets. Tuy nhiên so với phương pháp Pin thủ công bạn phải chọn đúng ảnh để Pin sau đó phải điền các thông tin bằng tay trước khi Pin và đó chính là lý do bạn nên cài đặt ứng dụng này vào web, blog để có thể dễ dàng hơn trong thao tác, ưu điểm của nó:


  • Tự động lấy tiêu đề bài viết và URL một cách chính xác nhất. 
  • Tự động điền vào phần mô tả với tiêu đề của bài viết.
  • Tương thích trên tất cả các trình duyệt Firefox, Chrome và Internet Explorer 

    Vai trò của mạng xã hội

    Để cài đặt các bạn làm theo các bước:

    1. Đăng nhập Blogger Template > Edit HTML.
    2. với WordPress: Go to Administration > Appearance > Editor > footer.php.
    3. Tìm kiếm vị trí thẻ </body> 
    4. Coppy và dán đoạn code bên dưới ngay phía trên thẻ </body> sau đó save lại

    <script>
    //<![CDATA[
    var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6OJv0as_RFKkJ4IVBtFxYM0Huge6e6QN2T0yorTrHMWqbjH3AZW5l_3EOHETPe_hTT9FzWflp3urz4FHwRgtbIy7Gg7AU9DEWTmE3LM9F1Vzd7XMqE8CACqEEqSh1NyEWH67KKoDrpul5/s1600/pinterestx1_72.png";
    var bs_pinButtonPos = "
    center";
    var bs_pinPrefix = "";
    var bs_pinSuffix = "";
    //]]>
    </script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
    // This Pinterest Hover Button is brought to you by bloggersentral.com.
    // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
    // Feel free to use and share, but please keep this notice intact.
    </script>

    Thay đổi vị trí xuất hiện của icon theo vị trí bạn muốn var bs_pinButtonPos
    • topleft
    • topright
    • bottomleft
    • bottomright
    Bạn có thể thay thế icon của riêng bạn thay vì icon mặc định của pinterest tại var bs_pinButtonURL



    READ MORE

    Hướng dẫn cài đặt LinkWithin thumbnails vào Blogger

    Posted on with Không có nhận xét nào
    Ứng dụng bài viết liên quan là một úng dụng có thể giúp cho người xem có thể nhìn thấy tất cả các bài đăng cũ của bạn, hoặc có thể tìm những bài viết cùng chủ để một cách nhanh chóng dễ dàng. Có rất nhiều công cụ hỗ trợ cho ứng dụng này như LinkWithin, Nrelate...


    Bài viết này tua rua sẽ hướng dẫn cách cài đặt ứng dụng LinkWithin bài viết liên quan đi kèm với ảnh thumbnails. Nếu cài theo mặc định của LinkWithin các bạn sẽ gặp phải vấn đề là LinkWithin cũng xuất hiện ở sau mỗi post ở main chính tại trang chủ của blog.

    Sau đây mình xin hướng dẫn các bạn bằng cả 2 cách thủ công và mặc định :

    a/ Cài đặt mặc định LinkWithin widget:

    1. Vào địa chỉ LinkWithin.
    2. Điền Email và địa chỉ blog của bạn:
    3. Click Get Widget và ứng dụng này sẽ tự động add vào blog của bạn
    4. Xong ! bây giờ quan sát related sẽ nằm ngay dưới mỗi bài viết 


    b/ Cài đặt thủ công LinkWithin widget

    Với cách cài này bạn có thể xóa bỏ đi sự xuất hiện ở ngay dưới mỗi post gây phiền toái và không thẩm mỹ. Ngay sau khi điền email và site add dừng lại ở bước 3 lấy thông thin site ID
    1. Đăng nhập vào Blog
    2. Edit HTML
    3. Copy đoạn code bên dưới và dán ngay trước thẻ </body> sau đó save lại:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    var linkwithin_site_id =
    SITE ID;
    linkwithin_text='RELATED POST';
    </script>
    <script src="http://www.linkwithin.com/widget.js"></script>
    <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
    </b:if>

    Sau khi điền SITE ID các bạn có thể tùy chỉnh RELATE POST trong linkwithin_text='RELATED POST'; 
    READ MORE

    Làm widget trượt giống quảng cáo Admicro cho blog và web

    Posted on with Không có nhận xét nào
    Bạn là một admin của một trang web hay một blog nào đó, website của bạn đã đến một thứ hạng tốt và có danh tiếng, việc đặt quảng cáo sẽ giúp bạn giảm gánh nặng về hosting, domain và nhân sự...có rất nhiều lựa chọn quảng cáo cho bạn..Google Adsense, Bidvertiser, ..hay các công ty quảng cáo Việt Nam như Ad360 ,Vietad và Admicro......và cũng có thể sẽ có khách hàng liên hệ với bạn để đặt quảng cáo của họ trên website của bạn.

    Tuy nhiên ở bài viết này Tua Rua ẽ không đề cập tới vấn đề này mà sẽ giới thiệu cho các bạn một cách đặt quảng cáo khá hiệu quả...Có rất nhiều cách đặt quảng cáo để thu hút người đọc, hình thức banner là hình thức khá phổ biến. Bạn có thể đặt ở header hay ở cuối bài đăng,chân trang , chạy dọc 2 bên trang web và bất cứ chỗ nào để mang lại hiệu quả nhất cho hoạt động quảng cáo..

    Ở bài viết này, Tua Rua sẽ cung cấp cho các bạn một cách đặt banner quảng cáo khá hiệu quả,áp dụng đối với các mẫu 120x600 hoặc 160x600 chạy dọc sidebar. Banner sẽ đặt ở cuối cùng của sidebar, khi chưa kéo qua nó, nó sẽ được giữ cố định. Khi khách truy cập vào xem một bài viết tương đối dài, họ sẽ rê chuột qua cái Banner đó và Banner của chúng ta cũng tự động được kéo theo. Quảng cáo sẽ trôi theo chiều dọc sidebar xuống đến phần footer thì sẽ biến mất. Cách bố trí quảng cáo dạng trôi này cũng bù lấp khoảng trống làm cho site của chúng ta trở nên đẹp mắt và "pro" hơn ...........

    Widget sẽ chạy dọc theo thân bài viết
    Các bạn có thể áp dụng  cho các widget bám theo sidebar cũng được. Kiểu float này giống kiểu trượt quảng cáo của Admicro mà các bạn có thể gặp ở các trang Vtc.vn, Kenh14.vn hay chính Tua Rua cũng đang áp dụng kiểu quảng cáo dạng trượt này. 

    Các bạn xem demo ngay trên Tua Rua

    • 1. Đăng nhập Blogger 
    • 2. Vào Mẫu, chọn chỉnh sửa HTML
    • 3. Chèn code bên dưới vào  sau thẻ  <head>
    <script src="http://bachkhoamedia.googlecode.com/files/jquery.min.js"type="text/javascript"></script>

    Nếu bạn nào trong template đã có file jquery.min.js rồi thì bạn bỏ qua bước 3 này
    • 4. Save template lại và mở tab Bố cục>Thêm tiện ích (Nơi bạn muốn chèn quảng cáo ) 
    • 5. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
    Thêm vào đoạn code sau :

    <style type='text/css'>
    #floatDivWrapper {font-size:11px}
    #floatDiv.fixed {position:fixed;top:30px}

    </style>

    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>2500){
    //$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30});
    var bottomHeight=1200;var msie6=$.browser=='msie'&&$.browser.version<7;if(!msie6){var top=$('#floatDiv').offset().top-parseFloat($('#floatDiv').css('margin-top').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top&&y<=(documentHeight-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}});
    //]]></script>
    <script type='text/javascript'>//<![CDATA[
    var s=true;function doBlink(){$('.blink').css('display',function(index,val){s=!s;return (s)?'block':'none';})}
    $(document).ready(function() {setInterval("doBlink()",0)});
    //]]></script>

    <div class='widget HTML' id='floatDiv'>

    Chèn nột dung muốn hiển thị

    </div>

    • 6.Lưu và xem kết quả
    Chú ý một số thông số để tuỳ chỉnh :

     + top:30px : Khoảng cách của widget Ads với lề trên của trang web,thường đặt là 0.Nếu bạn nào có menu header cố định thì sẽ thay đổi cho widget dãn xuống phù hợp(bachkhoamedia là 30)

    documentH>1000 : Thông số này có nghĩa là nếu bài viết của bạn dài quá 1000px thì widget sẽ float, còn nếu bài viết có height nhỏ hơn 1000px thì widget sẽ không float

    +bottomHeight=1400 : Thông số này quy định chiều cao tối thiểu mà widget có thể xuống được.Khi cách lè dưới 1400px thì widget sẽ tự động trượt lên trên. Các bạn chỉnh sử thông số này sao cho phù hợp nhất với footer của các bạn.

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

    READ MORE

    3 thủ thuật đơn giản giúp blog bạn trở nên mướt rượt

    Posted on with Không có nhận xét nào

    3 thủ thuật blog này rất cơ bản và đơn giản, bạn không cần phải có quá nhiều kiến thức về code để ứng dụng nó cho blog của mình. Mướt rượt là một từ miền Nam nó có nghĩa là đẹp một cách lả lướt. Thật đúng như cái tựa đề bài viết này nếu như bạn phối hợp cùng lúc cả 3 thủ thuật nó sẽ tạo cảm giác thật nhẹ nhàng uyển chuyển và chuyên nghiệp cho blog. Bây giờ hãy bắt tay vào làm nhé.
    Cả 3 thủ thuật đều dùng đến thư viện jquery nên bạn cần chèn thư viện này vào blog. Jquery có rất nhiều ứng dụng nên việc chèn vào là cần thiết. Nếu blog bạn đã có thì bỏ qua bước này.
    Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

    1. Scroll to top với hiệu ứng trượt

    scroll-to-top-wordpress


    Có rất nhiều kiểu làm nút trở lên đầu trang ở đây có liệt kê 7 cách tạo nút scroll to top với jquery rất đáng để tham khảo. Hoặc cực kỳ đơn giản là chỉ cần chèn một đoạn code html sau đây vào vị trí mình thích là được.
    <a href="#" target="_blank">Top</a>
    Cách làm tôi hướng dẫn sao đây vừa dễ làm lại vừa tạo được hiệu ứng trượt tuyệt vời. Đối với blogger bạn mở phần Chỉnh sửa HTML không cần mở rộng mẫu tiện ích tìm đến thẻ </body> ở cuối cùng và chèn vào trước nó đoạn code
    <script src='http://blogthietke.googlecode.com/files/scrolltopcontrol-smallblack.js'/>

    2. Hiệu ứng tải ảnh tuần tự  thật mượt mà với lazy load images

    jQuery-Image-Lazy-Load-WP
    Hiệu ứng này đặc biệt hữu dụng đối với những blog ảnh hoặc những bài viết có nhiều hình ảnh. Nó giúp cho những blog này hiển thị được mượt mà hơn. Nguyên tắc của nó là không tải tất cả các ảnh cùng lúc mà tải một cách tuần tự khi người đọc từ từ kéo thanh trượt xuống. Thêm một chút hiệu ứng mờ ảo khiến quá trình tải ảnh trở nên thật mượt mà.
    Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code
    <script src='http://blogthietke.googlecode.com/files/lazypic.js'/> 
    <script charset='utf-8' type='text/javascript'>
    $(function() {    
    $(&quot;img&quot;)
    .lazyload({
    placeholder: &quot;https://lh3.googleusercontent.com/-Z9XhV1m9Jak/T3AqzaLp1EI/AAAAAAAACyw/Y1dC7eoBPxM/s5/eee.gif&quot;,
    effect: &quot;fadeIn&quot;});
    });
    </script>

    3. Làm mờ ảo các thành phần trong danh sách (list)

    Hiệu ứng này giúp làm nổi rõ thành phần trong danh sách mà bạn rê chuột đến và làm mờ đi những thành phần còn lại của danh sách (xem ảnh). Bạn có thể kết hợp với Cool Popular Post để tạo ra widget bài viết phổ biến đầy màu sắc cực kỳ lung linh.
    blog thiết kế
    Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code
    <script src='http://blogthietke.googlecode.com/files/fadelist.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
    if(!$.browser.msie) $(&quot;ul li&quot;).hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
    function() { $(this).siblings().stop().fadeTo(400,1); });
    });
    </script>
    Thực tế thiết kế blog cũng giống như nấu ăn điều quan trọng của người đầu biết là biết cách phối hợp những gia vị một cách vừa phải để tạo nên món ăn ngon. Trong việc viết blog nếu bạn cũng có thể phối hợp những hiệu ứng với nhau để tạo một cảm giác tuyệt vời cho người đọc.

    Nguồn: http://blog.nguoiaolam.net

    READ MORE

    Latest

    Recent Gallery