Giới hạn số dòng văn bản được hiển thị trong blogspot bằng CSS

Trong khi thiết kế, chỉnh sửa giao diện, viết nội dung Blog, nếu bạn muốn khống chế khu vực mà đoạn văn bản có thể được hiển thị, đơn giản bạn chỉ cần giới hạn số dòng mà đoạn văn bản có thể hiển thị bằng cách sử dụng CSS.

Xem code ví dụ:

.max-lines{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /*số dòng muốn hiện */
   font-size: F;          /*cỡ chữ, đơn vị px */
   line-height: X;        /* khoảng cách giữa các dòng, đơn vị em*/
   max-height: F*N*X;   /* chiều cao tối đa đoạn văn bản = (cỡ chữ) x (số dòng) x (chiều cao) */
}

Cách sử dụng

Khi muốn sử dụng, bạn thêm class "max-lines" cho đoạn văn bản đó, có thể xem DEMO

Áp dụng

Bạn có thể áp dụng cách này để khống chế, giới hạn số dòng của tiêu đề bài viết trên trang chủ để không làm vỡ Layout, bạn chỉ cần chỉnh sửa CSS tương tự bên dưới là được:

h2.post-title, h2.post-title a {
    font-size: 20px;
    line-height: 1.3em;
    color: #3b5998!important;
    margin: 0 0 5px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 52px;
}

Đây là vấn đề về mặt thẩm mỹ thường xuyên để canh chỉnh hàng chữ mà chúng ta cần sử dụng. Hy vọng sẽ giúp ích cho các bạn trong việc thiết kế.

Bài viết thuộc quyền quản lý bởi: Trucnt

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Tạo sitemap (sơ đồ) blogspot theo phong cách chuyên nghiệp cho blogger

Sitemap (sơ đồ) một từ ngữ không quá xa lạ. Nhưng các bạn phải phân biết cho rõ nhé Sitemap mà các bạn gửi lên Google webmasters hay Bing webmaster … Các Sơ đồ đó có nhiệm vụ "khai báo" với các công cụ tìm kiếm những thông tin chứa trong đó. Như vậy, sẽ giúp cho blog SEO (tối ưu tìm kiếm) tốt hơn. Khi các công cụ tìm kiếm "quét" qua Blog, tiêu điểm sẽ là sơ đồ blog. Còn Sitemap (sơ đồ) mà mình hướng ngày sau đây nó giúp cho người đọc có một cái nhìn tổng thể về trang Blog đang truy cập... Nhờ có sơ đồ, người đọc dễ dàng tìm đến các chuyên mục và bài viết chứa những thông tin cần tìm kiếm.

Tóm tại Sitemap (sơ đồ) là một tiện vô cùng quan trọng là một giải pháp vời của một Blogger … Nó không khác gì một cuốn sách có MỤC LỤC, MỤC LỤC sẽ nói lên toàn bộ nội dùng của cuốn sách đó, người sẽ quyết định có ĐỌC hay là KHÔNG ĐỌC. Vậy việc tạo 1 Sitemap (sơ đồ) chuyện nghiệp là một điều vô cùng quan trọng và hôm nay Niệm Style sẽ giúp bạn là đều đó @! Ở bài viết này Niệm Style sẽ đưa ra 1 phong cách cho các bạn lựa chọn.

☼ Cách tiến hành:Đầu tiên bạn vào Blog => Trang => Trang mới => Chọn HTML và dán đoạn mã code dưới đây vào và chọn Xuất bản.

<style>
/* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
  margin: 0 auto;
  background-color: #FFFFFF;
  border: 4px dashed rgb(48, 167, 229);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
  color: #333;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color: #434B50;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:rgba(110, 193, 255, 0.68);
  color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color: #6EC1FF;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
    width: 80%;
  float: right;
  background-color: white;
  border-left: 2px dotted #30A7E5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  color: #434B50;
  line-height: 40px;
  height: 35px;
  padding: 0 12px;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color: #CAE6F2;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="Link Blog" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Blogging Tips and Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "Link Blog", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://cdn.rawgit.com/quangmen93/Javhay.org/master/sitemap.JS" type="text/javascript"></script>

Các bạn lưu ý sửa Link Blog thành Link Blog của mình nha! Chúc các bạn thành công.
DEMO

Loading...

Blogging Tips and Tricks
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Tạo button hiệu ứng hover cực đẹp và tinh tế cho blogspot

Bài viết này mình sẽ giới thiệu đến các bạn mẫu button với hiệu ứng hover tuyệt đẹp và tinh tế, sử dụng hoàn toàn CSS để tạo ra hiệu ứng. Button này mình tham khảo ở một trang nước ngoài, chỉnh sửa lại một số CSS và chia sẻ lại cho các bạn. Button này hoàn toàn bằng CSS nên mọi người cứ yên tâm không ảnh hưởng chút nào đến tốc độ load blog của các bạn.

Các bước thực hiện như sau:
Bước 1: Các bạn thêm đoạn CSS sau lên thẻ ]]></b:skin>

/* button */
.bttn-success {
  color: #28b78d;
}
.bttn,
.bttn-lg,
.bttn-md,
.bttn-sm,
.bttn-xs {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
}
.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
}
.bttn-unite {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #1d89ff;
  border-radius: 100px;
  background: #fff;
  color: #1d89ff;
  -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #d6e3ff;
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg);
          transform: translate3d(-110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(214,227,255,0.7);
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg);
          transform: translate3d(110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover,
.bttn-unite:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
  color: #1d89ff;
  -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:hover:before,
.bttn-unite:focus:before {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg);
          transform: translate3d(-50%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover:after,
.bttn-unite:focus:after {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg);
          transform: translate3d(50%, -10%, 0) skewX(-20deg);
}
.bttn-unite.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
}
.bttn-unite.bttn-md:hover,
.bttn-unite.bttn-md:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
}
.bttn-unite.bttn-success {
  border-color: #28b78d;
  color: #28b78d;
}
.bttn-unite.bttn-success:hover,
.bttn-unite.bttn-success:focus {
  background: #28b78d;
  color: #fff;
}
.bttn-unite.bttn-success:before {
  background: #209271;
}
.bttn-unite.bttn-success:after {
  background: #28b78d;
}

Bước 2: Đây là đoạn code hiển thị Button của bạn. Đặt trong bài viết hoặc bất cứ đâu.

<button class="bttn-unite bttn-md bttn-success">Xem Demo</button>
<button class="bttn-unite bttn-md bttn-success">Xem Demo2</button>

Hãy tạo một Button phong cách riêng cho mình đi nào. Nếu thấy hay đừng quên để lại một comment để ủng hộ mình nhé.!.

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Hiển thị thông báo khi xóa Comment blogspot/blogger

Đây là một thủ thuật khá đơn giản giúp bạn hiển thị một thông báo khi bạn xóa một comment nào đó từ người comment trên blog bạn. Nó giúp cho bạn truyền đạt được nội dung cũng như lý do mà bạn xóa comment đó. Nó cũng góp phần làm cho blog của bạn thêm chuyên nghiệp hơn!

Thực hiện: Các bạn copy đoạn code sau và dán trên thẻ ]]></b:skin>

.comments .deleted-comment:after{content:" Vui lòng đọc lại nội quy bình luận tại: https://niemstyle.blogspot.com/p/noi-quy-binh-luan.html nhé"}
.comments .deleted-comment:before{content:"\f00d";font-family:fontawesome;margin:0 6px 0 0}

Các bạn chỉnh sửa lại nội dung CSS theo ý thích của mình là được. Lưu template lại và thưởng thức thành quả.
Các bạn lưu ý một điều như thế này: Khi các bạn xóa comment đừng nên xóa vĩnh viễn nha, xóa thông thường thôi, ko là nó sẽ ko hiện thông báo lên đâu.

Chúc các bạn thành công! đừng quên để lại 1 comment để ủng hộ tác giả nhé!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

SEO smart link: Liên kết thông minh trên blogspot

Trên thực tế Smart Link SEO là một trong những plugin có trong wordpress và bây giờ nó đã có js để sử dụng trong blogspot.
Liên kết thông minh này phục vụ thay đổi mọi từ khóa hoặc một từ khóa trên blog của bạn thành một liên kết, cả trong bài đăng và trên trang blog.

Nói nôm na cho các bạn dễ hiểu là khi các bạn cài đặt sẵn những từ khóa smart link này rồi thì khi bài viết của các bạn có những từ đã thiết lập sẵn đó nó sẽ tự động chuyển thành link liên kết (nhìn code phía dưới sẽ hiểu)
Ví dụ: Khi bạn cài sẵn smart link SEO cho từ khóa "Blogger" chẳng hạn thì tất cả các bài viết trên blog hay trên trang của bạn mà có từ "Blogger" nó sẽ tự động chuyển thành link liên kết hết.

Hướng dẫn cài đặt smart link SEO

Các bạn chèn đoạn Js sau vào trên thẻ </body>

<!--LK thông minh-->
<script type='text/javascript'>
function smartLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;SEO&quot;, &quot;https://www.niemstyle.com/search/label/SEOer&quot;);
f.add(&quot;Blogger&quot;, &quot;https://www.niemstyle.com/search/label/Blogger&quot;);
f.add(&quot;Blogspot&quot;, &quot;https://www.niemstyle.com/search/label/Blogspot&quot;);
f.add(&quot;Template&quot;, &quot;https://www.niemstyle.com/search/label/TemplateBlogger&quot;);
f.add(&quot;kiếm tiền&quot;, &quot;https://www.niemstyle.com/search/label/Make-money&quot;);
f.add(&quot;Facebook&quot;, &quot;https://www.niemstyle.com/search/label/Facebook&quot;);
f.add(&quot;Youtube&quot;, &quot;https://www.niemstyle.com/search/label/Youtube&quot;);
f.startScript();
</script>

Trong đoạn js trên, các bạn chú ý phần code ở cuối là những từ khóa mình đang sử dụng, các bạn lướt blog mình mà thấy mấy từ đó là có link hết, kể cả ngoài blog lẫn trong bài viết.
Các bạn cũng có thể làm in đậm hoặc in nghiêng từ khóa như sau:

f.add(&quot;&lt;b&gt;SEO&lt;/b&gt;&quot;, &quot;https://www.niemstyle.com/&quot;);
f.add(&quot;&lt;i&gt;SEO&lt;/i&gt;&quot;, &quot;https://www.niemstyle.com/&quot;);

và thêm nhiều từ khóa cũng được.

Lưu ý

Mặc dù một bài đăng trên blog có nhiều từ khóa được nhắm mục tiêu, smart link này sẽ chỉ thay đổi từ khóa thành một liên kết ở trên cùng hoặc từ khóa đầu tiên, vì vậy từ khóa tiếp theo sẽ vẫn là văn bản bình thường.
Nếu bạn muốn kích hoạt nó chỉ trong các bài viết trên blog, bạn có thể thêm một mã thẻ có điều kiện vào mã javascript ở trên.

Kết luận

SEO smart link này hoàn hảo cho những ai muốn xây dựng một liên kết nội bộ với các từ khóa được nhắm mục tiêu, vì vậy việc thiết lập nó dễ dàng hơn vì tất cả từ khóa được nhắm mục tiêu sẽ tự động trở thành liên kết.

Bài viết được tham khảo từ: caramanual

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Tìm hiểu về SEO Onpage. Cách SEO thân thiện với các công cụ tìm kiếm

SEO Onpage là gì? 

SEO Onpage là thuật ngữ SEO nhằm ám chỉ quá trình mà chúng ta tối ưu hóa website, các trang con trong website giúp cho trang website đó thân thiện với các công cụ tìm kiếm.
SEO Onpage chính là một cách SEO trên chính trang web của mình, là một yếu tố khá quan trọng quyết định đến thành công cho cả một chiến dịch SEO.

SEO Onpage rất quan trọng

SEO Onpage là toàn bộ công việc liên quan đến website, tối ưu các nội dung, hình ảnh, các thẻ h1, h2…, các thẻ meta…tốc độ tải trang, liên kết nội bộ, v.v…
Đây là công đoạn khá quan trọng khi chúng ta thực hiện một chiến dịch SEO, khi chúng ta làm tốt được các yếu tố về SEO Onpage sẽ giúp cho website thân thiện hơn với các Search Engine. Google luôn đánh giá cao những trang website có tốc độ tải trang nhanh, nội dung và hình ảnh chất lượng và thân thiện với mình. Ngoài ra đây cũng là cốt lõi của SEO, nếu làm tốt Onpage, chắc chắn website của bạn sẽ có thứ hạng cao khi làm SEO.

Các tối ưu SEO Onpage

Nếu bạn vừa mới bắt đầu một dự án SEO thì việc tối ưu SEO Onpage là một việc vô cùng quan trọng để mang lại hiệu quả cao khi làm SEO, thời gian lên top cũng rút ngắn hơn rất nhiều.

Viết content chuẩn SEO

Với SEO thì content luôn là quan trọng, để có được thứ hạng cao trên các công cụ tìm kiếm thì không thể thiếu nội dung chất lượng. Để có nội dung chất lượng, thân thiện với các công cụ tìm kiếm chúng ta cần dựa trên những yếu tố:
Nội dung hay và độc đáo
Nội dung tốt luôn có văn bản đi kèm ( Hình ảnh, video… )
Nội dung hữu ích với người dùng
Không nhồi nhé từ khóa quá nhiều
Tuyệt đối nói không với coppy nội dung

Tối ưu thẻ title, thẻ meta description, thẻ alt cho hình ảnh, và các thẻ H1,H2,H3…

• Thẻ title (tiêu đề): Tiêu đề trên trang chính là thông tin đầu tiên mà người dùng sẽ tìm kiếm thông qua các Search Engine, hãy dựa vào tiêu đề để nói cho họ biết bạn đang viết về cái gì. Ngoài ra tiêu đề bắt đầu bằng từ khóa chính sẽ có thứ hạng cao hơn trên Google khi bạn đặt nó ở giữa hay ở cuối tiêu đề. Thẻ tiêu đề tốt nhất chỉ nên viết từ 50 đến 65 kí tự.
• Thẻ meta description (thẻ mô tả): Ngoài một từ khóa chính nằm ở thẻ title thì các bạn cũng nên viết từ khóa đó vào thẻ mô tả ít nhất một lần. Thẻ mô tả này sẽ là đoạn văn bản xuất hiện trên Google, hãy tạo một thẻ mô tả hay và kích thích nhất để người dùng sẽ click và website của bạn. Chú ý là không quá 140 kí tự.
• Thẻ H1, H2, H3…(Thẻ tiêu đề phụ): Một bài viết chỉ nên có một thẻ H1 đó là tiêu đề, lần lượt các thẻ H2, H3… các bạn phân bổ theo bố cục bài viết để thành một bài viết chuyên nghiệp và đẹp mắt hơn trong mắt người sử dụng. Việc sử dụng các thẻ hợp lý sẽ giúp cho người đọc dễ dang tìm được phần nội dung chính mà họ quan tâm, ngoài ra sử dụng các thẻ tiêu đề phụ này còn rất tốt cho SEO.
• Thẻ Alt (hình ảnh): Thẻ này cần xuất hiện dưới mỗi hình ảnh, các bạn nên để thẻ Alt có dấu. Việc có thẻ Alt trong mỗi hình ảnh sẽ giúp Google dễ dàng tiếp cận và đánh giá cao nội dung của bạn hơn.

Liên kết nội bộ (Internal link)
Liên kết nội bộ sẽ giúp các Bot tìm kiếm của Google cũng như người dùng ở lại lâu trong website của chúng ta, hãy tạo những liên kết nội bộ hài hòa và hợp lý sẽ rất tốt cho SEO.
Thiết lập Sitemap cho website
Việc cài Site map cho website cũng rất quan trọng, nó giúp cho người sử dụng dễ dang tìm thấy địa chỉ của chúng ta trên Google. Ngoài ra thì đây cũng là 1 tiêu chí để Google xếp hạng do nó nâng cao độ trust và uy tín cho website.
Tối ưu URL
Xây dựng URL tránh trùng lặp và điều hướng sao cho hợp lý nhất, không được trùng lặp với Categories.
Tốc độ tải trang
Việc tối ưu CSS giúp trang web của bạn được vận hành trơn tru và Tốc độ load website nhanh hơn.( tránh người dùng thoát nhanh khỏi trang web )

Kết luận

Quá trình SEO Onpage rất quan trọng cho chiến dịch SEO. Hi vọng với những chia sẻ trên đây sẽ giúp cho các bạn SEO Onpage tốt hơn, mang đến quá trình SEO của bạn nhẹ nhàng và dễ dàng hơn!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Gắn Fanpage vào trang cá nhân Facebook mới nhất 2019

Bạn đang sử dụng Facebook cá nhân, và bạn luôn muốn trang chủ Facebook của mình trông đẹp hơnvà chuyên nghiệp hơn? Hay chẳng hạn như bạn đang tham gia nhiều hoạt động trong một Group, hội nhóm nào đó và bạn thường rất hay lui tới đó để chém gió, giao lưu, học hỏi? Hoặc thậm chí là bạn đang rất thần tượng một idol nào đó, bạn muốn sử dụng Avatar Fanpage của người đó vào một vị trí trang trọng nhất trên trang Facebook cá nhân của mình? Hoặc là Fanpage của bạn đang bán hàng, bạn muốn thêm nó vào mục chú ý của trang cá nhân mình?

Vậy thì Ok! Hãy đọc ngay bài viết của mình ngày hôm nay để bạn có thể biết cách áp dụng nó ngay trên chính Facebook của mình nhé. Bài này sẽ hướng dẫn các bạn gắn Fanpage vào trang cá nhân Facebook mới nhất 2019 một cách hết sức đơn giản!

Các bước thực hiện

Đầu tiên, các bạn vào trang cá nhân Facebook của mình và kéo xuống phần Thêm vào mục Đáng chú ý hoặc là các bạn đang thêm ảnh rồi thì mình bấm vào chỉnh sửa.

Sau đó các bạn kéo xuống phần Trang và chọn cho mình Fanpage cần gắn. Có thể chọn nhiều Fanpage cùng một lúc.

Sau đó các bạn bấm Lưu.
Các bạn cũng có thể thêm nhiều mục khác nhau vào như Nhóm, Ảnh,... vào cùng một phần.
Và kết quả sẽ là:

Khá đơn giản để thực hiện đúng không các bạn. Hi vọng bài viết sẽ giúp ích các bạn phần nào trong quá trình sử dụng Facebook của mình. Nếu thấy hay hãy để lại 1 bình luận để ủng hộ mình nhé! Cám ơn các bạn đã xem!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Button CSS xu hướng thiết kế web đơn giản trong năm 2019

Thiết kế web đang ngày càng được phát triển rất nhanh và một trong những xu hướng thiết kế web hiện nay đó là thiết kế đơn giản hay còn gọi là tối giản nhất có thể. Thiết kế web tối giản bao gồm bố cục, nút, thanh điều hướng, thanh bên, màu sắc, kiểu chữ và nhiều thứ khác nữa...

Nhiều người sẽ cảm thấy thoải mái khi thiết kế một website đơn giản nhưng đôi khi có người lại cảm thấy nó khó nhìn vì quá đơn giản và không mấy đặc sắc. Thiết kế web tối giản thường được gọi là phong cách thiết kế phẳng hay thiết kế nguyên vật liệu.

Và hôm nay mình sẽ hướng dẫn các bạn làm một Button hoàn toàn bằng CSS & HTML cực kỳ đơn giản mà không kém phần đặc sắc.

Button CSS xu hướng thiết kế đơn giản trong năm 2019

Button sẽ có dạng như sau:

HTML

<a href="#" class="action-button shadow animate blue">Click xem thử</a>

CSS

.animate
{
 transition: all 0.1s;
 -webkit-transition: all 0.1s;
}
.action-button
{
 position: relative;
 padding: 10px 40px;
        margin: 0px 10px 10px 0px;
 border-radius: 3px;
 font-family: 'Lato', sans-serif;
 font-size: 18px;
 color: #FFF;
 text-decoration: none; }
.blue
{
 background-color: #3498db;
 border-bottom: 5px solid #2980B9;
 text-shadow: 0px -2px #2980B9;
}
.red
{
 background-color: #e74c3c;
 border-bottom: 5px solid #c0392b;
 text-shadow: 0px -2px #c0392b;
}
.green
{
 background-color: #2ecc71;
 border-bottom: 5px solid #27ae60;
 text-shadow: 0px -2px #27ae60;
}
.yellow
{
 background-color: #f1c40f;
 border-bottom: 5px solid #f39c12;
 text-shadow: 0px -2px #f39c12;
}
.action-button:active
{
 transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
 border-bottom: 1px solid;
}

Ở css này mình có 4 màu:  xanh da trời, đỏ, xanh lá cây và vàng
Các bạn thay blue ở HTML thành red, green, yellow tùy ý thích các bạn hoặc các bạn có thể tự viết thêm css màu khác riêng cho các bạn.

Click xem thửClick xem thửClick xem thửClick xem thử

Khá đơn giản để thực hiện. Chúc các bạn thành công!

Nếu cảm thấy thích màu mè hơn một chút các bạn có thể xem thêm các bài này:

• Tạo button hiệu ứng hover cực đẹp và tinh tế cho blogspot
• Tạo hiệu ứng button chuyên nghiệp hoàn toàn bằng css cho blogspot

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Tổng hợp các cách mở chặn link blog trên facebook đơn giản từ LeMinhUt

Như các bạn cũng biết, Facebook là một nguồn lưu lượng truy cập khá phong phú giúp chúng ta quảng bá, sản phẩm, website, blog rất nhanh chóng. Vì vậy, khi đăng link Blog thường xuyên thì rất dễ bị ăn spam và chặn link ngay lập tức từ Facebook.

Chính vì điều này thường làm cho các Blogger trẻ hiện nay hoang mang không biết làm sao để mở chặn link blog trên facebook. Nay mình xin tổng hợp lại một số cách mở chặn link đơn giản từ Lê Minh Út Blog mà ai cũng có thể làm được.

Cách 1: Mở bằng TUT kháng

Đầu tiên: các bạn đăng link blog bị chặn lên Facebook và nó sẽ báo như hình dưới đây

Sau khi hiện thông báo bị chặn nó sẽ gửi một thông báo về hộp thư hổ trợ của bạn và nó sẽ xảy ra 2 trường hợp như sau:

• Nặng thì chúng ta sẽ không post được link và sẽ nhận thông báo không thể truy xuất dữ liệu từ trang web.
• Nhẹ thì thì sẽ hiện thông báo về hộp thư có dòng chữ Đây không phải là spam.

Và tùy trường hợp chúng ta sẽ chọn báo cáo hoặc đây không phải là spam để điền thần chú phía dưới đây vào:
Tiếng Anh

Facebook must apologize to me for blocking the link to the company's website, I certify that 100% of my website links are safe and legitimate have been proven by government organizations, I hope the information This facebook message confirms the opening of the link url link: Your web link. Thank you to the Facebook team!

Tiếng Việt

Facebook phải xin lỗi tôi vì đã chặn liên kết đến trang web của công ty, tôi xác nhận rằng 100% liên kết trang web của tôi là an toàn và hợp pháp đã được chứng minh bởi tổ chức chính phủ, tôi hy vọng những thông tin này Facebook sớm nhất xác nhận mở chặn link url: link web của bạn. Cảm ơn đội Facebook!

Thần chú là thấy xàm lozg rồi đúng không các bạn :D kệ nó có còn đỡ hơn không :3
À mà chú ý điền link blog bị chặn của các bạn vào thần chú nha!

Cách 2: Dùng link kháng

Các bạn truy cập vào các link sau:
Link 1: https://m.facebook.com/help/contact/268228883256323

• Dòng đầu tiên chọn mục Khác
• Ô thứ 2 các bạn điền thần chú của Cách 1 vào nhé!

Link 2: https://m.facebook.com/help/contact/571927962827151

• Các bạn cũng coppy thần chú ở Cách 1 điền vào nhé!
• Sau đó bấm Gửi thôi.

Cách 3: Báo cáo sự cố trực tiếp

Các bạn truy cập Facebook trên Máy Tính và tìm đến mục trung tâm trợ giúp (chỗ hình chấm hỏi ? ý). Sau đó chọn Báo cáo sự cố rồi Đã xảy ra lỗi (Như hình dưới)

• Chỗ chọn một sản phẩm các bạn chọn Khác.
• Ô thứ 2 các bạn lại sử dụng thần chú ở Cách 1.
• Chỗ phần tải ảnh chụp màn hình thì các bạn chụp một tấm ảnh màn hình link blog mình đang bị chặn và up lên thôi.

Cách 4: Trình gỡ lỗi chia sẻ Facebook

Đối với việc mở chặn link blog thì không quá khó nếu bạn tôn trọng Facebook và hiểu những điều cơ bản sau để nắm rõ site nào được phép và không được phép trên Facebook, những site như sau có kháng cũng không bao giờ mở được % thành công rất ít:

• Trang web hoặc Blog chứa nhiều mã độc, phần mềm độc hại.
• Trang web hoặc Blog có dạng giống phishing skill (trang lừa login Facebook lấy mật khẩu)
• Trang web hoặc Blog có chứa nhiều popup quảng cáo độc hại, không lành mạnh...

Và chúng ta sẽ mở chặn link trang web hoặc blog như sau:
Các bạn truy cập Trình gỡ lỗi chia sẻ Facebook và dán link web hoặc blog bị chặn của mình vào > chọn Debug

Sau khi ấn chọn nếu web hoặc blog của bạn bị chặn thì trình gỡ lỗi chia sẻ sẽ cảnh báo với bạn: website này đã bị chặn trên Facebook, nếu bạn cho rằng chúng tôi đã nhầm lẫn hãy cho chúng tôi biết.

Các bạn chọn hãy cho chúng tôi biết nha, sau đó sử dụng đoạn thần chú mới này:

Hi Facebook, I am: Tên Bạn, is the representative for my Facebook website helper: https://niemstyle.blogspot.com. I hope Facebook soon review and open blocked my company's website link I My company's website is legally certified by the government. And your website is mine: https://niemstyle.blogspot.com. Thank you Facebook!

Kết luận

Đây là 4 cách cơ bản và đơn giản nhất để mở chặn link của website hoặc blog trên Facebook được mình tổng hợp và rút ngắn lại cho các bạn dễ hiểu nhất. Các bạn nào chị chặn mà sử dụng combo 4 cách này cùng một lúc thì bố thằng Facebook nó cũng sợ bạn luôn.!
Đối với những cách này làm thì nhanh tầm 4 ngày đến 1 tuần được mở, chậm thì tầm 2 tuần. Mà khuyên các bạn là không nên post link lên facebook nhiều, lâu lâu post một bài thật hữu ích lên là được rồi.
Rất cảm ơn các bài viết của bạn Lê Minh Út về kháng và mở chặn link trên Facebook này nhé!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Hiệu ứng hoa mai rơi cho blogspot nhân dịp tết đến xuân về

Năm mới sắp đến rồi, chắc hẳn những bạn làm website như mình cũng đang đi kiếm một số background hay những hiệu ứng để trang trí thêm cho Blog.
Qua tìm kiếm trên internet thì mình có tìm được hiệu ứng hoa mai rơi để làm tăng không khí tết cho Blog. Sau đây thì mình xin chia sẻ lại cho những bạn cũng đang đi tìm kiếm hiệu ứng này.

Ngoài ra, các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng sao rơi,…Thì cũng từ một đoạn Code này mà ra thôi.

Xem thêm: Tổng hợp một số code trang trí tết cho blogspot của bạn

Thực hiện

Vào Blog => Chủ đề => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head> . Sau đó dán đoạn mã Code sau ở phía trên thẻ và Lưu mẫu.

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjA55WsJLPpKx-y8lTh6nk4fP0RKjzLed_CiTWoo7o_Sf86EJJIdQo1F6VPkzFh6EcpB8iYa0ajWloGWZICClVMl5fSOYOC_qIYA7NIaoa7ROdOeU6JJA8fX7Pkr-H7SDCqy2uwRSb824/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>  

Live Preview

Tuy chỉnh

• Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjA55WsJLPpKx-y8lTh6nk4fP0RKjzLed_CiTWoo7o_Sf86EJJIdQo1F6VPkzFh6EcpB8iYa0ajWloGWZICClVMl5fSOYOC_qIYA7NIaoa7ROdOeU6JJA8fX7Pkr-H7SDCqy2uwRSb824/s1600/hoamai.png là xong.
• 15 Chiều rộng của bông.
• 15 Chiều cao của bông.
• 10 Số bông hoa xuất hiện cùng một lúc.
• 0,01 Tốc độ rơi của các bông hoa.
• 10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.

Khá đơn giản để có 1 hiệu ứng rơi như bạn mong muốn. Chúc các bạn có một năm mới vui tươi và hạnh phúc.

Backlink: Dung môi Methylene Chloride (MC)

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Hướng dẫn SEO top 1 Google thông qua Yahoo trong 3 phút

Hey! xin chào các bạn! Hôm nay mình xin giới thiệu đến các bạn một thủ thuật SEO nhanh chóng lên TOP 1 Google. Nghe hấp dẫn phải không các bạn? :)

Trước tiên mình xin giải thích một chút xíu về thủ thuật SEO này:

→Thủ thuật SEO này chủ yếu liên quan tới một cụm từ khóa mà những người tìm kiếm hay hướng đến. Ví dụ như: mua quạt máy quận 10 ở đâu; chỗ trị mụn tốt nhất tphcm; blogger nổi tiếng nhất việt nam là ai; cần mua heroin quận 8 ở đâu;...có rất nhiều cụm từ khóa mà tùy các bạn muốn hướng đến người tìm kiếm như thế nào!

→Thủ thuật này là mình chỉ thông qua Yahoo Answers để đối tượng tìm kiếm tìm thấy mình. Chắc các bạn đã biết kho dữ liệu to lớn của Yahoo như thế nào rồi mà đúng không!

Các bước thực hiện như sau:

1. Các bạn phải có tài khoản Yahoo (việc tạo tài khoản ko cần phải nói chắc các bạn ai cũng biết) để đăng nhập vào trang https://vn.yahoo.com/

   Sau đó các bạn chọn mục Hỏi & Đáp và đặt một câu hỏi theo mẫu sau:

   Ở đây mình xài cụm từ khóa: Niệm đẹp trai nhất quận 10

Các bản phải lưu ý là ở chỗ tiêu đề câu hỏi phải có cụm từ khóa và ở phần mô tả câu hỏi ít nhất cũng phải có 3 cụm từ khóa.

Sau khi đặt câu hỏi xong các bạn bấm Gửi và chọn nhóm mình cần gửi vào (ở đây là mình đẹp trai nên mình chọn nhóm Phong Cách & Vẻ Đẹp ;v)

2. Tiếp theo các bạn sẽ không thấy câu hỏi của mình nằm ở đâu.!? Yên tâm các bạn vào link sau là sẽ thấy câu hỏi của mình thôi

https://vn.answers.yahoo.com/activity/questions

và hãy nhấp vào câu hỏi của mình để xem nha!

3. Tiếp theo, bước này mới quan trọng nè! Các bạn nhờ một người nào đó (người thân hoặc bạn bè các bạn) ở một nơi nào khác, sử dụng IP khác chỗ bạn đang xài là được.

Sau đó bạn coppy Link câu hỏi của các bạn lúc này vừa xem và gửi cho họ nhờ họ trả lời theo nội dung mình đặt ra.

Ở đây mình nhờ vợ mình đang làm ở một nơi khác trả lời hộ mình. Ở câu trả lời mình cũng sử dụng ít nhất 3 cụm từ khóa và có để link Blog với FB của mình trên đó.

4. Sau khi nhờ người thân giúp đỡ thì bạn hãy quay lại Trang Câu Hỏi của mình và bấm F5 xem đã trả lời chưa. Nếu trả lời rồi thì koi như thành công 99% rồi đấy!

Đấy ! bạn có thấy câu trả lời phía dưới chưa? Vợ mình trả lời đấy! :))

5. Bây giờ đến bước cuối cùng kiểm tra kết quả trên Google rồi.

Bạn lên Google gõ cụm từ khóa mà mình tạo xem thử đi nào!

Kết quả: đã cho kết quả cụm từ khóa Niệm đẹp trai nhất quận 10 TOP 1 Google rồi thấy không?

Chúc các bạn thành công! Nếu có khuất mắt chỗ nào cứ để lại bình luận mình sẽ giải thích cho nha!

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »

Thanh Breaking News đơn giản cho blogspot

Ở nhiều trang tin tức người ta thường có 1 hoặc nhiều widget chạy ngang điểm những tin tức mới những bài viết mới và tác dụng của nó sẽ kéo thành viên ở lại trang lâu hơn bởi những tin nóng những tin hay mà nếu như bình thường người xem sẽ không để ý.
Nếu dạo qua các trang tin tức các bạn có thể thấy một thanh ngang được đặt lên đầu trang với tiêu đề là “Tin mới”, “Tiêu điểm”,… hiển thị các bài viết mới với hiệu ứng load sinh động rất thu hút người đọc. Đó gọi là Breaking News Widget (hay Widget Tin tức mới).

Trước đây, mình thấy có rất nhiều bạn viết nhiều bài viết hướng dẫn về cách làm này nhưng đa số hiện tại bây giờ xài được vì bị cái gì mà gọi là xung đột css javascript mà mình chả hiểu cm gì hết :v, nói chung là không xài được và thường bị lỗi tùm lum.
Hôm nay, mình xin chỉa sẻ cho các bạn Cách tạo một thanh Breaking News đơn giản mà đẹp có hình ảnh luôn, load chuẩn và chả có xung đột cái gì hết :)

Các bước thực hiện:
Bước 1: Truy cập Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm đoạn CSS này trước thẻ ]]></b:skin>

 /* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 0px 0px 0px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091;border-right:5px solid #3cc091; border-top:1px solid #3cc091; border-bottom:1px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Bước 3: Thêm đoạn js này trên thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News Ticker
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

Bước 4: Các bạn đặt đoạn code sau ở nơi mình muốn hiện thị Breaking News. Thường thì mình thấy người ta hay đặt ở phía dưới thanh Menu trên cùng Blog hoặc là các bạn cũng có thể tạo một Widget HTML/Javascript và đặt vào nơi nào mình muốn.

<div class='ticker-wrap' data-domain='www.niemstyle.com'>
<div id='ticker'>
</div>
</div>

Thay www.niemstyle.com thành Link Blog của bạn.

Bước 5: Lưu lại và thưởng thức thành quả :)

Khá đơn giản phải không các bạn! Chúc các bạn thành công! Nếu có vấn đề gì cứ bình luận phía dưới mình sẽ giải thích và giúp đỡ cho nhé!

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Chi tiết »