Cảm nhận tư duy và tổng hợp kiến thức

Thứ Bảy, 4 tháng 6, 2016

Hướng dẫn chi tiết cài đặt tên miền riêng vào blogger ( còn gọi là blogspot )

- Trên mạng internet có rất nhiều bài viết liên quan tới hướng dẫn cài đặt tên miền riêng cho blogspot, Tuy nhiên, Tại bài viết này, TENTEN xin hướng dẫn lại thêm một lần nữa về cách cài đặt một cách thật chi tiết, Hy vọng sẽ giúp ích được đối với các bạn đang sử dụng tên miền tại TENTEN gặp bỡ ngỡ khi cài đặt lần đầu tiên.
Thời gian cài đặt không mất nhiều, Vui lòng cùng chúng tôi tiến hành cài đặt theo từng bước.


Bước 01: Đăng nhập http://blogger.com/
 - Email: <Nhập địa chỉ gmail của bạn>
 - Mật khẩu: <Nhập mật khẩu đăng nhập gmail của bạn >


Bước 02: Sau khi đăng nhập thành công,
- Chọn menu:"LỰA CHỌN KHÁC" Từ danh sách blogger của bạn.
- Chọn chức năng: "Cài đặt"




Bước 03: Tại danh mục: "Địa chỉ blog",  Chọn chức năng: "+ Thêm tên miền tùy chỉnh" .


- Vì bạn đã sở hữu tên miền tại TENTEN, do đó bạn bỏ qua bước mua tên miền và tiếp tục với lựa chọn : " Bạn đã sở hữu một tên miền? Chuyển sang cài đặt nâng cao " .

- Tại bước cài đặt nâng cao, Hãy nhập tên miền bạn muốn sử dụng thay vì tên miền mặc định của blogger cung cấp cho bạn.
Hãy nhớ nhập cả phần mở rộng của tên miền bạn đang sở hữu ( Ví dụ: www.tenten.vn hoặc blogs.tenten.vn ...)
 --> Chọn " Lưu "


* Như vậy là có thông báo lỗi, Tuy nhiên bạn không cần lo lắng về việc này, Nguyên nhân do tên miền của bạn chưa chứng minh được quyền sở hữu của bạn trên hệ thống blogspots. Vậy việc tiếp theo là bạn hãy chứng minh bạn là chủ sở hữu của tên miền bạn đã khai báo theo hướng dẫn của blogspots.



Bây giờ, Bạn cần mở một cửa sổ trình duyệt mới và đăng nhập vào trang quản trị của tên miền bạn đang sở hữu tại: https://domain.tenten.vn , Và thực hiện thêm 02 bản ghi như blogspots hướng dẫn để chứng minh quyền sở hữu tên miền.



Hãy kiên nhẫn, chờ khoảng 2 phút sau đó quay trở lại trang cài đặt tên miền trên blogger. click vào Lựa chọn " Lưu " thêm một lần nữa để kết thúc quá trình thêm tên miền riêng vào blogger.
- Như vậy, quá trình cài đặt đã kết thúc. Hãy kiểm tra bằng cách truy cập blogspot của bạn. Hãy nhớ nhập chính xác tên miền bạn đã gán vào blogger ( trong hướng dẫn này là http://www.tuanla84.info ).


** Một số bạn có thắc mắc làm thế nào để không cần gõ thêm giá trị: www ở phía trước mà vẫn có thể sử dụng được blogger.
Bất luận người dùng trên mạng nào cũng cần phải có ít nhất một tài khoản. Công việc tạo lập tài khoản quản lý và bảo mật tài khoản người dùng trên mạng luôn luôn là một vấn đề hệ trọng, cấp thiết.
TENTEN lại tiếp tục hướng dẫn mở rộng thêm đối với trường hợp này:
- Quay trở lại bước cài đặt các bản ghi tên miền tại https://domain.tenten.vn 
Hãy thiết lập thêm các bản ghi như sau:



- Sau khi thiết lập các bản ghi này thành công. Việc cuối cùng là khai báo với blogger để hoàn tất quá trình cài đặt
  + Trong phần cài đặt cơ bản tại blogger. Chọn "Chỉnh sửa" tên miền bạn cần thay đổi


 Và đánh dấu vào mục " Chuyển hướng < tên miền > ... tới < tên miền > ...

Lưu lại.
Như vậy, TENTEN đã hướng dẫn chi tiết các bước để có thể thiết lập một tên miền mang dấu ấn riêng của bạn, sử dụng với blogger thay vì tên miền blogger cung cấp miễn phí cho bạn (rất dài và khó nhớ).

Bạn có thể xem thêm video hướng dẫn cài đặt tại đây: http://www.youtube.com/watch?v=TM3mH1ABVe4

Nguồn support.tenten.vn

Share:

Tình nồng thắm - Janna Phung



Gió đùa trên mái tóc mây.
Thoảng mùi hoa cỏ ngấy ngây hương nồng
Nhớ ngày hò hẹn bến sông
Đắm say môi mắt, má hồng gửi trao.

Bao nhiêu yêu dấu ngọt ngào
Quyện hòa tim nhỏ dạt dào... niềm tin
Thời gian trôi lại ngắm nhìn
Đậm sâu tình nghĩa vẹn in tháng ngày.

Tình nồng thắm mãi đong đầy
Hẹn ngày trở lại sum vầy nhé anh.
Trúc Mai như lá liền cành.
Ấm nồng hạnh phúc duyên lành thắm tươi.

&8&
Jana mến chúc cả nhà ngày cuối tuần an vui và hạnh phúc ngọt ngào nhé, G+ yêu!

Tác giả: Jana Phung

https://plus.google.com/u/0/107301775056331316548




Bạn có thể tham khảo các bài thơ trong Bầu rượu túi thơ do  Khanhnguyen' s blog sưu tập từ trên các diễn đàn mạng xã hội

Share:

Thứ Sáu, 3 tháng 6, 2016

Thêm Breadcrumbs Navigation cho Blogger Blog


Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ <b:includable id='post' var='post'>





3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.superwebtricks.com START. -->
<div class='swtBreadCrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:breadcrumb'>
<a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>
<span itemprop='title'><data:label.name/></span>
</a>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
</b:if>
</b:loop>
</b:if>
&#187;
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
<data:post.title/>
</span>
</a>
</div>
</div>
</b:if><!--
Breadcrumbs microdata markup added by Showeblogin END. -->

4- Nhấn Ctrl+F tìm thẻ </b:skin>





5- Chép Source Code dưới đây dán vào trên mã Code tìm được:


/*
Blogger Breadcrumbs added by www.superwebtricks.com
--------------------------------------------------*/
.swtBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
.swtBreadCrumbs{width:auto;padding:0 0 5px 0;margin:0 5px;font-size:95%;border:2px solid #EDE;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;text-align: left;color:#000;background:#C3B9A8;background:-webkit-linear-gradient(top,#C3B9A8,#F3F1E6);background:-moz-linear-gradient(top,#C3B9A8,#F3F1E6);background:-ms-linear-gradient(top,#C3B9A8,#F3F1E6);background:-o-linear-gradient(top,#C3B9A8,#F3F1E6);background:linear-gradient(top,#C3B9A8,#F3F1E6);line-height:22px}
6- Save lại Template bạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:



LINK DEMO

http://ngdkhanh12.blogspot.com/2014/05/meo-cua-nguoi-ai-cap-co-ai-xay-kim-tu.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn superwebtricks.com

Khánh Nguyễn Tổng hợp và chia sẽ

Share:

Thêm author box vào trang Blog





Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ ]]></b:skin>



3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:


.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(&#39; http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png&#39; ); color:#444444; }
.wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; }
.wc-aboutpic { float:right; margin:0 0 0 10px; }
.wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; }
.wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px  rgba(0,0,0,.3); -moz-box-shadow:0 0 10px  rgba(0,0,0,.3); box-shadow:0 0 10px  rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); }
.wc-aboutsoc img { height:35px; margin-bottom:-13px; }
.wc-aboutsoc  p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

4- Nhấn Ctrl+F tìm thẻ <data:post.body/>



5- Chép Source Code dưới đây dán vào dưới mã Code tìm được:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-goO7oYjg_D8BWkx8764x5pgfFAZs_Nb-OKDgFKk0K0dzTNA0OUGRU_q8vKfS5yQp3J-hBqAjvPlR2DDiG_e7v7FCaTRS90eG97oltjQyVZ-0LqvQD9Mgb-52YrwTQFi_10HjkoN1ys/s1600/Co-Author.jpg' width='100'/>
 </div>
 <h5>About Me :</h5>
 <div style='text-align: justify;'>
 <b>YOUR BIO HERE</b></div>
 <div class='wc-aboutsoc'>
 <p> Find us on Socail Media
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLhbEGqHhMtnNAEhrplIAiK-SvP3uiFQY0KnQ2ALv6Q0p9y_CF2-1OPM5xZD_8tdiN9MEIq-_WfvSiLK4uT4jEi7ap88GiE4NXNblhF3OAVWG590Dtf8M5-r2GUWjUsCGmzLUU9AoJ3Jr/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghguD8EyafQB2zsBsM8J25UB1-TWH1wRcdl-EsAb9aAmt5k2BxAMftBz_UAC9PMhBQBFCxk5rXqfoGvd84UpFHEn5cNqKwCneu0OcK16g1qzgVgqZqSMjifI7LMOHdMF9_ZYxowTH1hZGR/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsGlN2x1S_tvCSquNUApdrTUSbZOD6on71PIDYFNUmVKTjwJX1By-274i3Mlyi0InxAaAzozM2hpESu0a5ZhAy7l4ml9S3tKkam-hwdGqNmTYPSLQ4yK5FbSDSQFLCbBfbxVKoO3gOwYi/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk1yL8aBqg7xosjNZBwOecpOX_4Kt6htvDosC0uf2jFjUn_XLbf_K5UCbQqXPguhJS-gFEp95GWSfBxiYxcvj8fdnouvHuxjkDCG6xLVL6ErFatgAzy9FGn0UXAIrgiQGCc9Jhf-4yE8i/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>
6- Save lại Templatebạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:



http://ngdkhanh12.blogspot.com/2014/05/meo-cua-nguoi-ai-cap-co-ai-xay-kim-tu.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog

Share:

Thiết kế social media buttons cho blogger



Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ <div class='post-footer-line post-footer-line-1'>



3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:


<div class="don-share" data-bubbles="top" data-limit="4">
 <div class="don-share-total"></div>
 <div class="don-share-facebook"></div>
 <div class="don-share-twitter"></div>
 <div class="don-share-google"></div>
 <div class="don-share-pinterest"></div>
 <div class="don-share-linkedin"></div>
 <div class="don-share-tumblr"></div>
 <div class="don-share-stumbleupon"></div>
 <div class="don-share-reddit"></div>
 <div class="don-share-hackernews"></div>
 <div class="don-share-buffer"></div>
 <div class="don-share-xing"></div>
 <div class="don-share-pocket"></div>
 <div class="don-share-fancy"></div>
 <div class="don-share-yummly"></div>
 <div class="don-share-scoopit"></div>
 <div class="don-share-weibo"></div>
 <div class="don-share-vk"></div>
 <div class="don-share-mailru"></div>
 <div class="don-share-odnoklassniki"></div>
 <div class="don-share-hatena"></div>
</div>
<script type="text/javascript"> 
 (function() {
 var dr = document.createElement('script');
 dr.type = 'text/javascript'; dr.async = true;
 dr.src = '//share.donreach.com/buttons.js';
 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
 })();
</script>
4- Save lại Templatebạn mới vừa bổ sung.
5- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

Xem bản Demo:

http://ngdkhanh12.blogspot.com/2014/04/menu-button-xanh-duong.html

Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn thebloggerguide.com

Khanhnguyen's Blog

Share:

Thứ Năm, 2 tháng 6, 2016

6 Stylish recent post widgets thiết kế blogger - Blogspot


1- Mỡ Blogger, vào Layout, nhấn mỡ tiện ích Widget, chọn HTML/JavaScript
2- Chép Source Code của một trong các kiểu dưới đây dán vào phía trong khung HTML/JavaScript vừa tìm được
3- Save lại Widget mà bạn mới làm.
4- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.
5- Save lại Widget mà bạn mới làm.

1. Recent posts with page navigation


Source Code:

<script type='text/javascript'>
var numfeed = 4;
var startfeed = 0;
var urlblog = "http://www.thebloggerguide.com/";
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
  var showfeed = ghost.split("<");
  for (var i = 0; i < showfeed.length; i++) {
    if (showfeed[i].indexOf(">") != -1) {
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
    }
  }
  showfeed = showfeed.join("");
  showfeed = showfeed.substring(0, banget - 1);
  return showfeed;
}

function showterbaru(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var showblogfeed = "";
  urlprevious = "";
  urlnext = "";
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
    }
  }
  for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) {
      break;
    }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
    }
    showblogfeed += "<div class='cg-elemen'>";
    showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
    showblogfeed += "</div>";
  }
  document.getElementById("terbaru").innerHTML = showblogfeed;
  showblogfeed = "";
  if (urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
  } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
  }
  if (urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
  } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
  }
  showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
  document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url) {
  var p, parameter;
  if (url == -1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
  } else if (url == 1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
  } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
  }
  parameter += "&callback=showterbaru";
  incluirscript(parameter);
}

function incluirscript(parameter) {
  if (startfeed == 1) {
    removerscript();
  }
  document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
  document.getElementById("cg-navigasifeed").innerHTML = "";
  var archievefeed = urlblog + "/feeds/posts/default" + parameter;
  var terbaru = document.createElement('script');
  terbaru.setAttribute('type', 'text/javascript');
  terbaru.setAttribute('src', archievefeed);
  terbaru.setAttribute('id', 'MASLABEL');
  document.getElementsByTagName('head')[0].appendChild(terbaru);
  startfeed = 1;
}

function removerscript() {
  var elemen = document.getElementById("MASLABEL");
  var parent = elemen.parentNode;
  parent.removeChild(elemen);
}
onload = function() {
  navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.terbaru-container {
  background: #fff;
  width: 320px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

#cg-terbaru {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin: 5px 0;
  padding: 5px;
  height: 79px;
  background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom;
overflow: hidden;
  padding-bottom: 20px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 15px;
  width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 14px!important;
  font-weight: 500;
  margin: 0;
  color: #222;
  font-family:'Oswald';
  line-height: 18px;
  text-transform: uppercase;
  text-aligaln:'center';
}

.cg-elemen p {
  font-size: 12px;
  font-family: 'Oswald';
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}

#cg-loading {
  color: #888;
  font-family: inherit;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
  height: 470px;
}

#cg-navigasifeed {
  color: #bbb;
  font-family: Oswald;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}

#cg-navigasifeed a {
  color: #141414!important;
  font-family: inherit!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}

#cg-navigasifeed span {
  padding: 5px 10px;
}

#cg-navigasifeed .next {
  float: right;
}

#cg-navigasifeed .previous {
  float: left;
}

#cg-navigasifeed .home {
  text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
  color: transparant!important;
}
@media screen and (max-width:700px) {
    .terbaru-container, #terbaru, #cg-navigasifeed {
        width:auto;
    }
}


@media screen and (max-width:300px) {
    .cg-elemen img {
        display:none;
    }
}


Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari 

</style>
<div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div>


2. Slider Recent Post


Source Code:

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.thebloggerguide.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="wrapper">
<div id="featuredpost"></div>
</div>

3. Gallery Recent Post

Source Code:

<style>
/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

4. Recent posts without thumbnails

Source Code:

<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRSGw0WUl4blJ3NmM'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

5. Recent posts widget by label

Source Code:

<style>
/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkVkzQTlhyphenhyphenEHIjQIWot7u1uMpBehm-6WbnkV3rKSj02sBLfig4utwGTBqgwo1tyYc0Dh-pdtWUdA_QfDjrSVfWCl0qR0wPfUZXVk-FcIUSq_tcQxQ-eBizo089XV7Mt0X1qqC3b2V6iGM/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

<script>
document.write("<script src=\"http://www.thebloggerguide.com/feeds/posts/default/-/Widget?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

6. Colorful latest posts widget

Source Code:

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EbzJo_5bEJKpH4odmd-b6ho1rUoWt97-EnxBeqmeVzCxjEpMDeZUaT6tiYmYa6C0SE13cI4IjvYIRhghFdkTesXvhVLH-naygeuEW30GKMFHMcb0iTd0bwxuwbt1yhW5B9XhclH0TLM/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.thebloggerguide.com/",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAwwQp-5L93lwjRYjcqM9u22VrDuhe6GVDOr9g-DcWTCzzl3a_sj7efktNabWjaCfZCaGiRjWELaxlZrLICrq9IiMlEl6IUWEUhFTr8we6XfzcaSQmJvTn0dWr5qG0583th-whl6fPl8/s1600/minismallest-img.png",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>
Chúc các bạn thành công với những gì mà Khanhnguyen's Blog chia sẽ lại từ thebloggerguide.com

Tổng hợp và chia sẽ: Khánh Nguyễn

Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP