Bài viết liên quan đẹp cho blogspot

Bài viết liên quan cho blogger ở bài viết trước mình đả giới thiệu cho các bạn. Lần này củng chủ đề đó nhưng mình tích hợp thêm Ad Words để tiện cho các bạn chèn quảng cáo từ google AdSense, banner Ad từ công ty quảng cáo nhằm tăng thu nhập cho blog của bạn.
Bài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Ad Words
Ở bài viết này mình phân bố bên trái là bài viết liên quan cho blogspot chuẩn HTML5, bên phải dành cho quảng cáo với kích thước chuẩn 300x250 hoặc 300x300 rất tiện lợi mà không làm mất thẩm mỹ của template của các bạn. Cách này được nhiều trang web sử dụng ngay cả 24h và Eva củng sử dụng thủ thuật này.

Bài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Ad Words

Thủ thuật 2 trong 1 vừa bài viết liên quan có hình cho blogspot chuẩn HTML5 vừa tích hợp Ad Words bên cạnh đó code còn responsive để phù hợp hơn cho template có chức năng này.

Tiến hành chèn code vào template:

Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> hoặc </style> Copy đoạn CSS bên dưới và Paste trên nó.

CSS bài viết liên quan vs Ad Words

/*related vs Add*/
.related-post {
 float:left;
   margin: 0;
   font:normal normal 11px/1.4 Arial,Sans-Serif;
 padding : 0 0 0 3px;
 width:50%;
 border-right:1px solid #E4E4E4;
 box-sizing: border-box;
 }
 .related-post h4 {
   font-size:150%;
 padding: 3px 5px 4px;
 background-color: whitesmoke;
 border-bottom: 1px solid #E4E4E4;
 margin:0
 }
 .related-post-style-2,
 .related-post-style-2 li {
   padding:0;
   list-style:none;
 margin-top: 5px;
 padding: 0;
 list-style: none;
 min-height: 65px;
 }
 .related-post-style-2 {
   padding:0;
   margin:0
 }
 .related-post-style-2 li {
   padding:0;
   border-bottom:1px solid #eee;
   overflow:hidden;
 }
 .related-post-style-2 li:last-child {border-bottom:none}
 .related-post-style-2 .related-post-item-thumbnail {
   width:52px;
   height:52px;
   max-width:none;
   max-height:none;
   background-color:transparent;
   border:none;
   padding:2px;
   float:left;
   margin:2px 10px 0 0;
 border: 1px solid #C4C4C4;
 }
 .related-post-style-2 .related-post-item-title {
   font-weight:bold;
   font-size:110%;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 display: inherit;
 }
 .related-post-style-2 .related-post-item-summary {
   display:block;
   overflow:hidden;
 }
 .related-post-style-2 .related-post-item-more {display:none}
 #iklan-bawah-post {
 width: 50%;
 float: right;
 box-sizing: border-box;
 }
 #iklan-bawah-post .iklanmu {
 margin: 8px auto;
 width: 300px;
 height: 250px;
 box-sizing: border-box;
 }
 
.post-bawah {
 background-color: #FCFCFC;
 box-shadow: 0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);
 border: 1px solid white;
 position: relative;
    }
 .post-bawah {
 overflow:hidden;
 margin-top: 20px;
    }
/*Responsive related vs Add*/
@media only screen and (max-width:768px){
.related-post, #iklan-bawah-post {
 width: 100%;
 float: none;
 }
}
Sau khi chèn đoạn CSS xong các bạn tìm đến thẻ <div class='post-footer'> thứ 2 đoạn này nằm trong <b:includable id='post' var='post'>...</b:includable> các bạn Copy đoạn Javascript bên dưới chèn dưới <div class='post-footer'> thứ 2 nhưng các bạn chọn vị trí thích hợp miễn sao nó nằm trên thẻ đóng </b:includable>

Javascript bài viết liên quan và Ad Words

<div class='post-bawah' id='post-bawah'>
  <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Bài viết liên quan:&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 100,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 50,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
   <script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.tuanphan.info",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img title="'+t+'" alt="'+t+'" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="'+t+'" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="'+t+'" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="'+t+'" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
 </script>
<div id='iklan-bawah-post'>
  <div class='iklanmu' style='line-height:18;text-align:center;border: 1px solid rgb(206, 203, 203);background-color: #F2F9FC;'>300 x 250</div>
  </div>
</div>
Bước 4: Lưu lại và xem kết quả
Lưu ý:

  1. numPosts: 5: Số lượng bài viết liên quan
  2. widgetStyle: 2: Kiểu hiển thị
  3. 300x250: Thay banner hoặc code hiển thị quảng cáo

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

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Báo giá Coppha thép tại TPHCM - Đỗ Hùng Phát

Hình ảnh
Đỗ Hùng Phát  là một nơi sản xuất  Coppha Thép  chuyên nghiệp, giá rẻ nhất hàng đầu tại Việt Nam. Coppha Thép là loại coppha làm bằng thép được dùng để làm khuôn đúc bê tông cho trụ, cột, sàn, dầm, đà, bó vỉa, mương nước. Coppha Thép là một trong những loại coppha phổ biến nhất hiện nay nó có nhiều hình dạng khác nhau phù hợp cho mỗi công trình. Coppha làm bằng thép được dùng để làm khuôn đúc trụ bê tông hình tròn người ta thường gọi là  Coppha Cột tròn , Coppha bằng thép dùng để nâng đỡ sàn bê tông người ta thường gọi nó là  Coppha Sàn , Những loại coppha thép khác như bó vỉa, mương nước, khuôn đúc bê tông trụ vuông thì người ta thường gọi là  Coppha Định Hình . Hiện tại chúng tôi tiếp nhận thiết kế và sản xuất Coppha thép tại các địa điểm lớn như TP.Hcm, Hà Nội, nếu muốn đặt thiết kế hay  thi công coppha giá rẻ  thì quý khác có thể đến trực tiếp để trao đổi và nhận báo giá chuẩn xác của công ty Đỗ Hùng Phát/ Coppha Thép là một trong những hình thức thi công khuôn đúc bê tông hàng đầu
Đọc thêm

Chốt sâu coppha V Góc phụ kiện cốp pha định hình

Hình ảnh
Cốp pha định hình như được nhắc đến ở những bài trước khi thi công gắn kết với nhau nhờ vào 2 phụ kiện không thể tách rời đó là V góc chốt sâu coppha . V Góc : Chiều dài 6 mét chặt ngắn theo yêu cầu của khách hàng sử dụng cho coppha định hình là loại V góc 6 được đục lỗ tròn hoặc dẹp. Chốt sâu cốp pha : là con chốt giúp siết chặt v góc và coppha định hình được uống con bởi sắt trong 10,5 hoặc 12 ly tùy vào nhu cầu của khách hàng. Nếu quý khách hàng có nhu cầu về chốt sâu cốp pha hay v góc vui lòng liên hệ với chung tôi nhé. HOTLINE : 0967 84 99 34 (HỒNG) MAIL : MANHONGIT.DHP@GMAIL.COM info@copphaviet.com Công ty TNHH Phụ Kiện và Cốp Pha Việt Địa chỉ : 19A Nguyễn Văn Bứa, Ấp 4, Xã Xuân Thới Sơn, Hóc Môn, TPHCM Website : https://copphaviet.com
Đọc thêm