Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

- [tintuc]
Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot
Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Thủ thuật tạo thông tin tác giả chia sẻ liên kết và ngày tháng năm giống như trên facebook. Thông tin tương đối gọn gàn và đầy đủ chi tiết để có thể áp dụng được cho Blogspot. Chúng ta có 4 bước để thực hiện.

Điều đầu tiên trước khi thực hiện thủ thuật này là bạn cần xóa bỏ đi code cũ có trong blogspot từ trước để tránh trùng lặp.

Các thư viện cần có trong Blog:

Bạn có thể chèn trên </body> hoặc </head>. Nếu đã có sẳn thì bạn không cần sử dụng nữa

1. Fonts Awesome: Hiện các Icon


<script async='async' type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>


2. Code tạo nút Like, Share của Facebook

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.10&amp;appId=309376869532794&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

1. CODE HTML

Chèn Code HTML và dưới tiêu đều trong bài viết. Bạn cần xác định ID hoặc Class của tiêu đề để chèn cho thích hợp.


Tương ứng với Class trên bạn tìm dòng post-title entry-title và code sau vào bên dưới đoạn code vừa tìm:
<div class='post-meta'>
 <div class='post-info'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<img class='authoravatar' expr:src='data:post.authorPhoto.url' itemprop='image'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
  </a> đã chia sẻ một <a onclick='CopyLink()' style='color: #365899;' title='Copy liên kết này'>liên kết</a>.
</span>
<div class='spinner' style='float: right;     padding: 1px 0px 2px 6px;'>
<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' title='Chia sẻ'><i aria-hidden='true' class='fa fa-ellipsis-h'/></a>
                            <ul class='dropdown-container' style='right:10px!important'>
                              <li>
                               <div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small'/>
                              </li>
                                                     
                            </ul>
                          </div>
    </div>
<b:else/>
<span class='author-info'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</span>
</b:if>
  </b:if><br/>
<span class='adminhp'>Thành viên <b>VIP</b> <i class='fa fa-check-circle'/></span>
<span style='color: #90949c;font-size:90%'><span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <b:if cond='data:post.url'>
            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
            <span class='published'><data:post.dateHeader/></span>
          </b:if>
        </b:if>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'> <span class='post-timestamp'>
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
                   <b:if cond='data:top.showTimestamp'>
                     <b:if cond='data:post.url'>
                       <meta expr:content='data:post.canonicalUrl' itemprop='url mainEntityOfPage'/>
                      lúc <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><span class='updated'><data:post.timestamp/></span></abbr></a>
                     </b:if>
                   </b:if>
</span>
</b:if>
</b:if>

</b:if>  </span> &#183; Thành phố Hồ Chí Minh &#183; <i aria-hidden='true' class='fa fa-globe'/>
 <i aria-hidden='true' class='fa fa-sort-desc'/>
 </span>
</span>
</div>
</div>

2. CODE CSS

Chèn đoạn code sau trên thẻ /b:skin
.avatar-author{border-radius:50%}
.post-meta{color:#000;display:block;font-size:12px;font-weight:400;margin:10px 0 10px;padding:0}.g-profile{margin-left:0px}
.post-info {
}.post-author{font-size:14px}.post-info img {
    clear: none;
    width: 42px;
    border-radius: 50%;
    float: left;
    margin: 3px 10px 0px 0px;
}.post-info a {
    color: #365899;
    font-weight: 600;
}span.adminhp {
    word-wrap: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #65af35;
    color: #FFF;
    font: 100 13px segoe ui;
    margin: 0;
    padding: 0 5px 1px 5px;
    border-radius: 3px;
}.dropdown-link:active{-webkit-animation-duration:0.3s;animation-duration:0.3s;background:#ddd;border-radius:100%;-webkit-animation:ripple-effect 0.4s linear;animation:ripple-effect 0.4s linear}
.dropdown-container{background:#fff;z-index:999;position:absolute;background:#FFF;box-shadow:0 3px 8px rgba(0,0,0,.3);margin:5px 0 0 17px !important;max-height:400px;width:170px;overflow:auto;padding:10px!important;padding-bottom:10px!important;display:none}
  .dropdown-container li i{border-radius:50%;margin-right:5px}
.dropdown-container li{list-style:none}.dropdown-container li a{font-size:13px;list-style:none;color:#262626;display:block;font-weight:400;padding:6px 5px;text-transform:none}.dropdown-container li a:hover{background-color:#edf4ff}

3. CODE Javascript

Code javascript sau bạn có thể chèn trên </body> hoặc trên </head> đều được
<script>
$(document).ready(function(){
  $(&#39;.dropdown&#39;).each(function() {
    var $dropdown = $(this);
    $(&quot;.dropdown-link&quot;, $dropdown).click(function(e) {
      e.preventDefault();
      $div = $(&quot;.dropdown-container&quot;, $dropdown);
      $div.toggle();
      $(&quot;.dropdown-container&quot;).not($div).hide();
      return false;
    });
});
 
  $(&#39;html&#39;).click(function(){
    $(&quot;.dropdown-container&quot;).hide();
  });
   
});
function copyTextToClipboard(text) {
var textArea = document.createElement(&quot;textarea&quot;);
textArea.style.position = &#39;fixed&#39;;
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = &#39;2em&#39;;
textArea.style.height = &#39;2em&#39;;
textArea.style.padding = 0;
textArea.style.border = &#39;none&#39;;
textArea.style.outline = &#39;none&#39;;
textArea.style.boxShadow = &#39;none&#39;;
textArea.style.background = &#39;transparent&#39;;
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
    var successful = document.execCommand(&#39;copy&#39;);
    var msg = alert(&quot;Đã sao chép liên kết, sẳn sàng chia sẻ liên kết này ngay bây giờ!&quot;);
      } catch (err) {
    var msg = alert(&quot;Không thể sao chép liên kết!&quot;);
  }
  document.body.removeChild(textArea);
}
function CopyLink() {
copyTextToClipboard(location.href);
}
</script>

4. Cấu hình định dạng ngày, thời gian

Vào bố cục

Chỉnh sửa tiện ích BLOG như hình dưới
LƯU LẠI

Áp dụng điều kiện trong blogspot để hiển thị trên các trang tùy thích của bạn. Áp dụng cả cho HTML hoặc Javascript đều được.


Hy vọng bạn sẽ thích
Chúc bạn thành công!
[/tintuc]
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2