Làm đẹp widget lable blogger

Đây là lable cloud đã được thay đổi bằng css

Còn đây là lable mặc định của blogspot

Bạn thích kiểu lable bên phải hay trái, nếu bạn thích kiểu bên phải thì bạn không cần can thiệp vào mẫu, bạn chỉ việc thêm widget lable và chọn kiểu cloud là được. Nếu bạn thích kiểu lable bên trái thì việc tiếp theo bạn thực hiện như sau:

• Vào chỉnh sữa Mẫu, copy đoạn code bên dưới paste phía trên ]]></b:skin>, lưu mẫu lại và xem kết quả nhé!

/*----- CSS lable Cho Blogspot ----*/
.widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
  padding: .25em 0;
  margin: 0;
  text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}

Read More »

Menu 2 cấp responsive cho blogger

Như tiêu đề, loại menu này có 2 cấp và tự động thay đổi giao diện khi độ rộng màn hình thay đổi. Ngày nay, dạng menu responsive rất phổ biến và rất thân thiện với thiết bị di động.

Giao diện menu ở chế độ bình thường

Giao diên menu ở chế độ thu gọn

Giao diện menu ở chế độ thu gọn, duyệt chuyên mục

• Khi tải source code về bạn giải nén ra ta được 3 file: style.css, script.js, index.html
• Cách cài đặt menu cho blogspot như sau:

          + Copy đoạn code sau pase phía trên </head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
          Đối với file "script.js" bạn nên upload lên host lưu trữ miễn phí như dropbox.com, sau đó lấy link thay vào.

          + Đối với file "Style.css", bạn dùng một chương trình notepad để mở nó ra và copy toàn bộ code trong đó, sau đó pase phía trên </b:sink>
          + Bước cuối cùng là copy đoạn code sau vào nơi bạn muốn menu xuất hiện
<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Products</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

Bạn có thể thay đổi và thêm nhiều nội dung cho menu.

|| Tải source code 2 sub responsive menu

Read More »

Tạo Jump Menu như thế nào

Jump menu rất thích hợp trong việc giúp bạn tăng thêm nhiều nội dung liên kết trên một không gian nhỏ. Chúng thật hiệu quả với những website có nhiều chuyên mục nhưng không gian hạn hẹp. Jump menu giúp cho website của bạn trông gọn gàng và chuyên nghiêp hơn. Sau đây dientudieukhien sẽ giúp bạn từng bước tạo một jump menu nhé!

Giao diện thu gọn của jump menu

Jump menu khi mở rộng

• Trước tiên bạn tạo một Widget HTML/JAVASCRIP
• Bạn dán đoạn mã sau vào và Save lại thế là xong.

<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<body>
<form name="form" id="form">
  <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    <option>Chọn trang xem phim</option>
    <option value="http://phimmoi.net">Phim Mới</option>
    <option value="http://phimnhanh.net">Phim Nhanh</option>
  </select>
</form>

• Bạn có thể thay đổi các liên kết ở trên hoặc thêm nhiều liên kết khác.

|| Xem Demo tại đây

Read More »

Tạo một facebook like box trượt dọc như thế nào

Tạo một facebook like box trượt dọc như thế nào

Fanpage ngày trở thành một thứ thiết yếu trong quá trình seo một blog, việc tạo một like box như thế nào trông đẹp nhưng không mất vẻ mĩ quan và không làm khó chịu bạn đọc là điều ta quan tâm, sau đây dientudieukhien.net chia sẽ cùng bạn cách tạo một facebook like box cho blogspot.

Tạo facebook like box

Trong hình trên bạn thấy khung like box trong khung đánh dấu không?

Thực hiện:

Vào "Bố cục"--->tạo một "Widget HTML/JAVSCRIP" và pase đoạn code sau vào:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://3.bp.blogspot.com/-_AyXpki-aa4/U7n2772IRmI/AAAAAAAACms/zSyAMv1P6e0/s1600/fb-ico.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 180px;padding: 0 5px 0 46px;width: 273px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div style='background:#fff'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fdientudieukhien.net&amp;width=273&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=239280146120423" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:273px; height:180px;" allowtransparency="true"></iframe>
</div></div>
Chọn Lưu lại là ok.
*Chú ý: Bạn thay phần code màu xanh bằng code box facebook của bạn nha. Bạn vào đây để tạo iframe cho like facebook. https://developers.facebook.com/docs/plugins/like-box-for-pages

Read More »

Tạo ảnh tròn giống như ảnh google+ như thế nào - không sử dụng Jquery hay css

Tạo ảnh tròn giống như ảnh google+ như thế nào - không sử dụng Jquery hay css

Bạn đã từng tham gia vào mạng xã hội google+, chắc hẵn bạn đã thấy những biểu tượng hình ảnh tròn theo phong cách google+ và bạn muốn tạo một ảnh như thế từ một ảnh bất kỳ mà không dùng đến Jquery hay Css.

Giả sử bạn có một hình ảnh như sau:

Ở ảnh trên bạn có địa chỉ url là: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEm-uP-TShcOoIIsbguqzYEjcxE38CPQLB_jtmmVhE9PZPxW44vKTZIR5Dex0u3dbwm4dFAbs15bOd9mOfJWm1pKvH_C291NUpOJlQ0ssXxwebcEAqfGXmcyRPn0sHXSDPhpRXYwiCGA/s1600/TAOANHTRONKHONG+CANCCS3.jpg

Bạn có để ý đoạn s1600 không? Nó là ảnh có độ phân giải 1600px, vậy bạn muốn có ảnh độ phân giải nhỏ hơn, ví dụ 250px thì ta chỉ cần đổi s1600 thành s250, bạn click link sau sẽ thấy.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEm-uP-TShcOoIIsbguqzYEjcxE38CPQLB_jtmmVhE9PZPxW44vKTZIR5Dex0u3dbwm4dFAbs15bOd9mOfJWm1pKvH_C291NUpOJlQ0ssXxwebcEAqfGXmcyRPn0sHXSDPhpRXYwiCGA/s250/TAOANHTRONKHONG+CANCCS3.jpg

Tạo ảnh tròn không cần Jquery hay Css

Làm sao để làm ảnh tròn từ một ảnh hình chữ nhật trên, thật dễ dàng, bạn chỉ cần thêm "-cc" sau "s1600", ví dụ s1600-cc, hoàn chỉnh như url sau:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEm-uP-TShcOoIIsbguqzYEjcxE38CPQLB_jtmmVhE9PZPxW44vKTZIR5Dex0u3dbwm4dFAbs15bOd9mOfJWm1pKvH_C291NUpOJlQ0ssXxwebcEAqfGXmcyRPn0sHXSDPhpRXYwiCGA/s1600-cc/TAOANHTRONKHONG%2BCANCCS3.jpg

Như vậy bạn đã tạo được một ảnh tròn bằng cách thật đơn giản rồi.

nguôn: dientudieukhien.net

Read More »

Config Robot.txt for google adsense

Robot.txt for google adsense

Robot.txt là một tập gồm các dòng lệnh, khi các robot của google muốn lập chỉ mục trang web của bạn thì nó sẽ thông qua file robot.txt này.

Robot.txt cho googleAdsense

Nếu bạn đã sửa đổi tệp robots.txt của trang web để không cho phép trình thu thập thông tin của AdSense lập chỉ mục các trang của bạn, thì google adsense sẽ không thể phân phát quảng cáo của Google trên các trang của bạn.

Để cập nhật tệp robots.txt để cấp cho trình thu thập thông tin của google adsense quyền truy cập vào các trang của bạn, hãy xóa hai hàng văn bản sau đây khỏi tệp robots.txt của bạn:

User-agent: Mediapartners-Google
Disallow: /

Thay đổi này sẽ cho phép trình thu thập thông tin của google adsense lập chỉ mục nội dung trang web của bạn và cung cấp cho bạn quảng cáo của Google. Lưu ý rằng bất kỳ thay đổi nào bạn thực hiện đối với tệp robots.txt có thể không được phản ánh trong chỉ mục của chúng tôi cho đến khi trình thu thập thông tin của google adsense cố gắng truy cập lại trang web của bạn.

Xem nội dung gốc tại đây: https://support.google.com/adsense/answer/10532?hl=vi

Read More »

Hướng dẫn tạo google custom search trong google adsense

Hướng dẫn tạo google custom search trong google adsense

Khi bạn tham gia vào mạng lưới quảng google adsense thì việc tạo một hộp tìm kiếm tùy chỉnh của google cũng sẽ góp phần tăng thu nhập của bạn từ quảng cáo. Sau đây, dientudieukhien.net sẽ hướng dẫn bạn tạo một box google tìm kiếm tùy chỉnh trong adsense:

Bước 1: Bạn phải có một tài khoảng adsense và đăng nhập vào tài khoảng ấy, chọn mục "Search".

Đăng nhập vào google adsense, chọn mục Search

Bước 2: Bạn chọn "New custom search engine", một cửa sổ hiện ra bạ điền thông tin theo các bước như hình sau:

Điền thông tin phần 1

Chọn kiểu hộp search box style

Chọn kiểu format kiểu quảng cao

Chọn nơi bạn cho hiển thị kết quả tìm kiếm - với blogspot bạn có thể tạo một trang riêng

Cuối cùng bạn chọn "Save and get code"

Save and get code

Ở đây bạn thấy có 2 khung code: ở khung 1 bạn copy code và pase vào nơi bạn muốn hộp search xuất hiện , ở khung code 2 bạn copy và pase vào nơi bạn muốn kết quả tìm kiếm xuất hiện (đối với blogspot bạn có thể tạo một page mới và chọn HTML và pase code 2 này vào. Kết quả như bên dưới, bạn có thể thử nó trên trang dientudieukhien.net

Kết quả thực hiện google custom search

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

nguồn: dientudieukhien.net

Read More »

Tạo Recent Post có ảnh thumbnails theo lable cho blogspot

Để các bài viết trong một nhãn nào đó được nhiều người quan tâm và dễ truy cập, thì việc tạo một widget trên trang chủ là cần thiết. Làm thế nào để các widget đó trông đẹp và không chiếm nhiều khoảng không và tránh rối mắt là điều ta cần quan tâm. Sau đây, dientudieukhien.net chia sẽ cùng bạn cách tạo một Recent Post có ảnh thumbnails, dạng cột đứng, thích hợp cho theme 2, 3 cột.

Recent Post có Thumbnails

 Bước 1: Vào chỉnh sửa mẫu (lưu ý: bạn nên lưu dự phòng một bản backup nha)

• Tìm đoạn code ]]></b:skin>, thêm vào trước đó đoạn code sau

 /* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }

• Tìm code </head>, thêm trước nó đoạn code sau

 <script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yymbheOtjuunMlT80BDUVbZroThRamDTJ3QDcmExJt3EomnptnlsP1uCLEWi7jYeWkO3RzlqiXL81I1bU-kDcEqQsSw2qE8a-2r38ln4RJ49fjVR30xRCnfVe5UJOzcOAqOYuKL_miQ/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

*Chú ý: bạn có thể thay đổi đường link ảnh màu xanh ở trên để thay thế ảnh đại diện khi bài post của bạn không có hình.

• Tìm code </body>, thêm phía trên nó đoạn code sau

 <script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize("label_with_thumbs",210);              
</script>

• Vào Bố Cục Thêm một Widget dạng HTML/JAVASCRIP và chèn đoạn code sau vào

 <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> 
<script type="text/javascript" src="http://dientudieukhien.net/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

* Chú ý: bạn nên đổi địa chỉ web http://dientudieukhien.net thành địa chỉ blog của bạn nha, đổi Name-of-the-lable thành lable mà bạn muốn hiển thị bài viết.

Read More »

Kiểm tra tốc độ tải (load) trang của blog,web.

Tốc độ load trang là một phần quan trọng để tăng thứ hạn cho blog bạn (chắc hẳn bạn sẽ cảm thấy khó chịu khi phải chờ lâu để xem một bài viết). PageSpeed Insights sẽ test tốc độ load blog của bạn, điều hay nữa là nó sẽ đưa ra những hướng khắc phục để blog của bạn được load nhanh hơn.

Giao diện của PageSpeed Insights

* Bạn chỉ cần điền url blog của bạn vào trường và chọn "PHÂN TICH", chờ vài giây, trang web sẽ đưa ra kêt quả, điểm tính tỉ lệ X/100, nếu X>60 thì tốc độ load trang chấp nhận được, nếu dưới 60 thì bạn cần khắc phục.

|| Bạn có thể tham khảo thêm nhiều tool webmaster tại đây

nguồn: dientudieukhien.net

Read More »

Cách tạo nút like cho web/blog

HIện nay, một trong nhiều cách quảng bá một site hay một blog là sử dụng mạng xã hội. Trong số các mạng xã hội thì facebook là một gã khổng lồ ta cần quan tâm. Để tiện cho việc quảng bá thì các admin thường thêm các nút like, share....lên trang chủ, hay sau từng bài viết. Sau đây, dientudieukhien.net sẽ hướng dẫn bạn tạo các nút like, share của facebook.
---------------------------------
>>Tạo nút Google+ sau mỗi bài đăng
---------------------------------

* Bước 1: Vào trang https://developers.facebook.com/docs/plugins

Bảng quản lý tạo các nút

Bước 2: Chọn một trong các nút ta cần tạo, ví dụ trong hình trên ta chọn Like Box, một giao diện như sau.

Tạo nút Like Box

Bạn điền url của Fanpage của bạn vào trường "Facebook Page URL", và chọn các thuộc tính bên dưới.

Bước 3: click vào nút Get Code, vào tab IFRAME

Get Code

Coppy code và pase vào nơi bạn muốn hiển thị Like Box.

* Các nút khác như Like, share làm tương tự nha!

nguồn: dientudieukhien.net

Read More »

Tạo nút Google + dưới mỗi bài đăng trong blogspotT

Hiện nay, trên mạng có rất nhiều bài hướng dẫn bạn thêm các nút như; pacebook, tweet, G+. Nhưng khi mình test thử thì thấy tốc độ load trang chậm đi một chút, do code không gọn. Mình vào trang https://developers.google.com, thấy hướng dẫn rất hây, code rất ngắn, load trang rất nhanh. Nếu bạn muốn thêm một nút g+ như thế sau mỗi bài đăng thì làm như sau:

Tạo nút g+ sau mỗi bài đăng

Bước1: Login vào blogspot-->vào mẫu-->chỉnh sửa HTML
*Tìm dòng lệnh: <data:post.body/>  (có thể trong teampalte của bạn có tới 3 lệnh như trên, bạn thêm code sau trên lệnh cuối thử nha)
*Thêm 2 đoạn code sau trên <data:post.body/>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone><script type="text/javascript">

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

nguồn: dientudieukhien.net

Read More »

Giới hạn độ rộng của ảnh trong bài viết của blogspot

Các bạn viết blog chắc hẳn có lần phát hiện hình ảnh trong bài đăng của mình quá khổ, che cả phần cột bên trái (nhất là khi chuyển đổi teamplate của blog). Vậy bằng cách nào để mình có thể resize hàng loạt ảnh trong rất nhiều bài viết của mình? Sau đây là một cách rất đơn giản.

Giới hạn kích thước ảnh cho blogspot

* Bạn login vào blogspot-->mẫu-->Chỉnh sửa HTML-->tìm dòng ]]<b/:sink>
   Thêm trước nó đoạn mã sau: .post img{max-width:600px;}

  Trong đó  600px là độ rộng tối đa của ảnh.

Read More »

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, Hôm nay dientudieukhien chia sẽ lại 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 riêng 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.dientudiwukhien.net ...)

 --> 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, mình đang mua domain 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.

dientudieukhien.net 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, dientudieukhien.net đã 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: tenten.vn

Read More »