Đối với 1 blogs, web thì việc không có hình ảnh trượt thì thật là nhàm chán đúng không ? chúng ta viết ra blog để làm gì? để được nhiều người biết đến vì thể trang trí giao dện cho blogger là 1 phần không thể thiếu được.

Hôm nay tôi sẽ hướng dẫn cho mọi người cách tạo ra những hình ảnh tự động chạy trên blogger, tiện ích của việc này là ít sử dụng javascript, do đó chắc chắn là nhẹ hơn so với bình thường. Được rồi trở lại để hướng dẫn mà tôi sẽ làm, lần này tôi sẽ thảo luận về làm thế nào để tạo một thanh trượt hình ảnh tự động đơn giản mà sẽ hiển thị bài viết mới nhất của bạn.

Tạo ảnh tự động trượt cho blogger

 Tạo ảnh tự động trượt cho blogger

Thanh trượt này chỉ mặc innerfade jquery và chu kỳ plugin jquery để làm mềm trượt nội dung chuyển giao (Bener không ya ...?), sự hiểu biết Innerfade jquery gần như thế này:

InnerFade là một plugin nhỏ cho jQuery JavaScript-Thư viện. Nó được thiết kế để bạn có bất kỳ yếu tố mờ dần bên trong một container trong và ngoài.

Nhận xét Những yếu tố này có thể là bất cứ điều gì bạn muốn, ví dụ như hình ảnh, danh sách-item, divs. Đơn giản chỉ cần tạo slideshow của riêng bạn cho danh mục đầu tư hoặc những quảng cáo vô của bạn. Tạo một newsticker hay làm một hình ảnh động.

Nguồn: PhucNguyenIT.Blogspot.com

Vâng, ngay cả bản thân mình lẫn lộn tôi MAS / ya Tôi có thể hiểu được tiếng Anh thời gian học sáu đầu tiên, chỉ cần làm thế nào để làm cho nó:

1. Đăng nhập vào blogger với tài khoản của bạn
2. Sau đó chọn blog bạn muốn thêm thanh trượt này.
3. Đăng nhập vào các mẫu >> Edit HTML , sau đó kiểm tra mở rộng tiện ích mẫu
4. Như một biện pháp phòng ngừa trong trường hợp của một sai lầm trong việc chỉnh sửa sau này, bạn nên sao lưu mẫu của bạn.
5. Sau khi tất cả các bước trên bạn, hãy đặt đoạn mã sau vào mã ]]> </ b: skin> :
6. #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
   #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
   #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
   .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
   .featuredTitle a{color:#f7441a}
   .featuredTitle a:hover{color:#000}
   .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
   ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
   ul.pagination a { float:left; margin:0 5px; display:inline; }
   ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnahCpuJ5b7qTCGI-nXUezLWKUlCPvFNg8lJKUtsjUI6-IQ51G9u-mgQf5gQK8jotK4uPJFyDnUX-biZX3cucn7iOrkU-AsPVt0PIIV1KbhL6EWzlhm9eN_IZ8GYQYWCb0rdt-1XZhFs/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
   ul.pagination a:hover { background-position:0 -12px; }
   ul.pagination a:hover { background-position:0 -12px; }
   ul.pagination a.activeSlide { background-position:0 -12px }
   a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSorpNVL9tIh8WmnUxzoMeDEJ8eGy_R5veSKJia37CiMJPHTUVcSnMk18NL-EnH3_RdqiUhEkQVj4UrLw4o0G-SIRuLxgCfA2pz3DNUqGDxIp58u37JXq7wyVhfRuPi_jog7ii9zdG1Ww/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
   border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
   a.readmore:hover {color:#ff0}
7. Lưu ý mã màu xanh ở trên, nó là chiều rộng và chiều cao của thanh trượt trên demo mà tôi đã thực hiện, bạn chỉ cần điều chỉnh kích thước của mẫu của bạn.
8. Bước tiếp theo là xác định vị trí các Chỉnh sửa HTML , chèn mã sau vào mã </ head> :
9. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaI8BcoZAJSVPHc-w6xfbFtcIjD5VwvSJp5QwEo_MmXUosSTWU1W29sB3Di8gVTeK0EhG6i0zErBZuey9YCgUHH0nFDUwsmRwPTO8l3kdT3ZADGMNZKaaxjTUkl6WuOg8cdVZC6qfFbhk/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 150;
   summaryTitle = 25;
   numposts  = 7;
   
   function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
   
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img  = new Array();
       document.write('<div class="slides">')
   if (numposts <= json.feed.entry.length) {
   maxpost = numposts;
   }
   else
          {
      maxpost=json.feed.entry.length;
      }
      for (var i = 0; i < maxpost; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
   var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }
   
   for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }
   
        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;
   
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   
   s = postcontent ; 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!="")) img[i] = d;
   
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
   document.write(trtd);
   
   
   j++;
   }
       document.write('</div>')
   }
   
   //]]>
   </script>

   1. Thông số kỹ thuật:
      

      Lưu ý các URL của các kịch bản màu đỏ ở trên, nó là mã script jquery.min.js loạt mới mà tôi sử dụng để làm cho thanh trượt này. Nếu mẫu bạn đã tìm thấy j Query.min.js mặc dù nối tiếp khác nhau, mã màu đỏ ở trên không còn cần thiết phải nhập. Chỉ cần một jquery.min.js trong mẫu, đó là vào các số series, nếu có thể các phiên bản mới nhất.

      Mã màu xanh : 7 là số thanh trượt được hiển thị. Trong khi các con số  340 và 212 là chiều dài và chiều rộng của hình ảnh là trong thanh trượt.
   2. Bước tiếp theo là để gọi các thanh trượt để xuất hiện trên blog của chúng tôi. Tìm đoạn code <div id = 'main-wrapper'> , sau đó đặt đoạn mã sau đây:
10. <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='featuredSlider'>
    <div class='container'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='navigation'>
    <ul class='pagination'/>      <script>
    $(&#39;.slides&#39;).cycle({
     fx:     &#39;fade&#39;,
     speed:  &#39;slow&#39;,
     timeout: 3000,
     pager:  &#39;.pagination&#39;
     });
    </script>
    </div>  </div> <!--end .container-->
    </div>
    </b:if>
    Nếu bạn muốn hiển thị thanh trượt cho mỗi thể loại hoặc nhãn sống chỉ cần thêm đoạn code trên:
    

    /feeds/posts/default?max-results

    Trở thành:
    

    /feeds/posts/default/-/your label?max-results

    1. Hãy thay thế " nhãn hiệu của bạn "với các thể loại bạn muốn hiển thị trên thanh trượt.
    2. Cuối cùng, lưu mẫu và xem kết quả. 

    Đó là hướng dẫn làm cho thanh trượt hình ảnh Tạo ảnh tự động trượt cho blogger.
    chúc các bạn thành công..!

Xem thêm…

PhucNguyenIT ! xin chào mọi người hôm nay chúng ta sẽ đến với chủ đề

Làm thế nào để tạo ra file lưu trữ javascript, css cho blogger ?

Yourjavascript.com  thay thể hosting để lưu javascript cho blogger

 

Hôm nay PhucNguyenIT sẽ chia sẻ cho mọi người 1 site Free hosting để lưu trữ những file java,css của blogger ..
Thật là quá tiện ích, trước kia có google code, nhưng thực sự thì nó quá khó cho những người mới sử dụng, tải lên hosting thì sao ? hay chập chờn và liệu có lâu dài không ?
Chúng ta bắt đầu nhé :

 

Ở đây tôi sẽ không thảo luận về Bộ luật Google, . Không ai trong số tài khoản của tôi trên Google Code kéo dài hơn 10 phút. Nếu có những người bạn của blogger người bị như tôi, trong bài viết này chúng tôi sẽ cung cấp một thay thế cho bạn để lưu các tập tin javascript, tất nhiên, miễn phí là tốt. Nơi lưu trữ một javascript miễn phí đó là yourjavascript.com với phương châm: Nếu bạn đã có một vấn đề với các tập tin javascript của bạn trên máy chủ của bạn, chỉ cần lưu trữ nó trên yourjavascript.com.Chúng tôi sẽ tổ chức javascript của bạn miễn phí . Điều này miễn phí lưu trữ các trang web chỉ để lưu các tập tin javascript.

Nó là rất dễ dàng cả, không phức tạp học sinh tiểu học có thể làm được. Trong yourjavascript.com Bạn không cần phải đăng ký đầu tiên, chỉ cần chọn tập tin bạn muốn tải lên javascript, sau đó điền mã xác minh và email của bạn. Javascript URL sau đó sẽ được gửi đến email. Sau đó cũng không có lựa chọn, javascript mà bạn tải lên sử dụng cá nhân của bạn hoặc mở cửa cho công chúng, nếu bạn muốn sử dụng nó để kiểm tra tin của bạn trực tiếp make-tin sau đó nhập URL của trang blog vào ô bên dưới. Như trong hình dưới đây:

 Sau khi bạn điền vào tất cả các khoảng trống như trên, mở email của bạn (xem cả tin spam). Có sau đó bạn sẽ nhận được các URL của một kịch bản javascript mà bạn đã tải lên như hình dưới đây:

Bạn có thể lưu trữ 2 GB cho mỗi tài khoản email, tôi đã thử nó và tôi đã đưa vào một số mẫu của tôi, cho đến nay rất tốt. Nếu bạn muốn thử một dịch vụ lưu trữ miễn phí cho javascript này, xin vui lòng nhấp vào biểu tượng yourjavascript.com trên. 

Chúc các bạn thành công.! hãy Share hoặc G+ bài viết nếu bạn cảm thấy nó hữu ích

Xem thêm…

P

hucNguyenIT xin chào các bạn. có rất nhiều blogger với những kiểu zoom ảnh cực kỳ lạ mắt, một số bạn có hỏi là:

 làm thế nào để tạo ra hiệu ứng zoom ảnh trong blogger?

Phóng hình ảnh với hiệu ứng jquery trong blogger

 

 Vậy hôm nay mình sẽ hướng dẫn cho mọi người một hiệu ứng phóng ảnh cực đẹp trong blogger

Làm theo những bước bên dưới đây để có 1 hiệu ứng zoom ảnh cực đẹp cho blogger nhé :

1. Đăng nhập vào blogger bạn
2. Sau đó nhấp vào Thiết kế (template)
3. Sau đó nhấp vào Chỉnh sửa HTML (edit html)
4. Sau đó, bạn tìm thấy đoạn mã sau ]]> </ b: skin>
5. Sau khi gặp nhập mã CSS sau đây trước khi mã ở trên
   

   div.jquery-image-zoom {
   line-height: 0;
   font-size: 0;
   z-index: 10;
   border: 5px solid #fff;
   margin: -5px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   }
   div.jquery-image-zoom a {
   background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   left: -17px;
   top: -17px;
   /* IE-users are prolly used to close-link in right-hand corner */
   *left: auto;
   *right: -17px;
   text-decoration: none;
   text-indent: -100000px;
   outline: 0;
   z-index: 11;
   }
   div.jquery-image-zoom a:hover {
   background-position: left -25px;
   }
   div.jquery-image-zoom img,
   div.jquery-image-zoom embed,
   div.jquery-image-zoom object,
   div.jquery-image-zoom div {
   width: 100%;
   height: 100%;
   margin: 0;
   }

6.  sau đó tìm  mã sau </ head> . coppy và dán đoạn mã  bên dưới vào sau thẻ </ head>
view plainprint?
1. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
2. <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>  
3. <script type="text/javascript">  
4. jQuery(document.body).imageZoom();  
5. </script>  
7. Sau đó Save Template bạn.

Lưu ý:
Chỉ cần một lưu ý, bạn nên lưu 1 bản template dự phòng để phòng khi lỗi các bạn có thể unrun nhé..

Phóng hình ảnh với hiệu ứng jquery trong blogger,làm thế nào để tạo ra hiệu ứng zoom ảnh trong blogger?

Bài viết được viết bởi  PhucNguyenIT - Chúc các bạn thành công !

Xem thêm…

PhucNguyenIT  xin chào tất cả mọi người, hôm nay blogs PhucNguyenIT sẽ hướng dẫn mọi người một hướng dẫn về làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery. Đăng nhập và đăng ký thường được sử dụng trên một blog hoặc trang web diễn đàn có nhiều thành viên. Ví dụ về các hình thức đăng nhập / đăng ký này có thể được tìm thấy nếu bạn đăng nhập vào Blogger, Facebook, Twitter hoặc các trang web cung cấp dịch vụ cộng đồng mạng. Ví dụ, bạn bè của tôi có thể nhìn thấy trong hình dưới đây, 

làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger

làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery

 Các bạn làm theo hướng dẫn bên dưới:

1. Đầu tiên, bạn phải đăng nhập vào blogger .
2. Sau đó nhấp vào Thiết kế ( mẫu)
3. Sau đó nhấp vào Edit Html
4. Đừng quên kiểm tra Expand Widget Templates (hãy lưu 1 bản mẫu để dự phòng)
5. Sau đó tìm  mã sau </ head>

Tiếp theo đặt đoạn code Javascript bên dưới trên </ head>

1. view plainprint?

   1. <script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>'  type='text/javascript'/><script style='display:none'  type='text/javascript'>$(document).ready(function() {  
   2.   
   3. // Expand Panel  
   4. $(&quot;#open&quot;).click(function(){  
   5. $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);  
   6. });  
   7.   
   8. // Collapse Panel  
   9. $(&quot;#close&quot;).click(function(){  
   10. $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);  
   11. });  
   12.   
   13. // Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click  
   14. $(&quot;#toggle a&quot;).click(function () {  
   15. $(&quot;#toggle a&quot;).toggle();  
   16. });  
   17.   
   18. });  
   19. </script> 

1. sau đó bạn tìm trong code đoạn thẻ ]]> </ b: skin> , Sau đó bạn dán đoạn code CSS bên dưới vào trước thẻ
   ]]> </ b: skin>

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

Sau khi tất cả mọi thứ mà bạn đã nhập vào, các bước tiếp theo là tìm mã </ body> và đặt đoạn mã sau đây bên trên  
</ body>:

<!-- Login -->
<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>

<div class='left'>

<h1>Chào mừng bạn đến với Blog PhucNguyenIT</h1>

<h2>Tạo cửa sổ Login Với JQuery</h2>

<p class='grey'>Bên cạnh đó, đây là một ví dụ trượt Login sử dụng JQuery. Đăng nhập Form Ngoài ra chỉ dụ và không thể được sử dụng như một Login Form FB, Vì Blog này là mở cửa cho công chúng mà không cần phải đăng ký làm thành viên</p>

<h2>Tutorial Blog</h2>

<p class='grey'>Untuk membuatnya Silahkan : <a href='http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html' title='Download'>Pencet Sini</a></p>

</div>

<div class='left'>

<form action='#' class='clearfix' method='post'>

<h1 class='padlock'>Member Login</h1>

<label class='grey' for='log'>Username:</label>

<input class='field' id='log' name='log' size='23' type='text' value=''/>

<label class='grey' for='pwd'>Password:</label>

<input class='field' id='pwd' name='pwd' size='23' type='password'/>

<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>

<div class='clear'/>

<input class='bt_login' name='submit' type='submit' value='Login'/>

<a class='lost-pwd' href='#'>Lost your password?</a>

</form>

</div>

<div class='left right'>

<form action='#' method='post'>

<h1>Not a member yet? Sign Up!</h1>

<label class='grey' for='signup'>Username:</label>

<input class='field' id='signup' name='signup' size='23' type='text' value=''/>

<label class='grey' for='email'>Email:</label>

<input class='field' id='email' name='email' size='23' type='text'/>

<label>A password will be e-mailed to you.</label>

<input class='bt_register' name='submit' type='submit' value='Register'/>

</form>

</div>

</div>

</div>

<!-- /login -->

<!-- The tab on top -->

<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>Xin chào Tất cả mọi người</li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#' id='open'>Đăng nhập | Đăng</a>

<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>

</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

Trong đoạn mã trên, đối với văn bản màu vàng có thể được thay đổi với các văn bản mà bạn muốn, cũng như g màu đỏ  , bạn có thể thay đổi Đăng ký và đăng ký cho ví dụ. Sau đó nhấn Save Template bạn và xem kết quả.

tạo ra cửa sổ đăng nhập / đăng ký trên blogger

Thành công rồi đó ! các bạn save lại và xem thành quả nhé..

Tool hướng dẫn làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger, làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot chúc các bạn thành công

Hãy share nếu tin có ích với bạn và commnet bên dưới nếu bạn chưa rõ 

Xem thêm…

 Cách chỉnh sửa hiển thị ảnh ở chế độ hộp đèn cho blogger

Làm thế nào để hiển thị ảnh ở chế độ hộp đèn cho blogger - chế độ hộp đèn Lightbox

Gần đây, chúng tôi đã chỉ cho bạn làm thế nào để vô hiệu hóa hình ảnh hộp đèn , nhưng chúng tôi đã không nói về một cách để tùy chỉnh hình ảnh Lightbox trong blogger. Kể từ khi,blogger là một nền tảng linh hoạt , chúng tôi có thể ghi đè lên hộp đèn kiểu hiện có để tùy chỉnh và làm cho nó trông giống như trang web của bạn. Điều này cung cấp cho bạn đủ tự do để thay đổi phong cách của Lightbox theo nhu cầu mong muốn của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn Làm thế nào để tùy chỉnh hình ảnh Lightbox trong Blogger.

Trước khi chúng tôi bắt đầu làm việc với các hướng dẫn của chúng tôi, chúng tôi đã tập hợp hai ảnh chụp màn hình dưới đây chứng minh rằng cách Lightbox của bạn sẽ xuất hiện trước và sau khi áp dụng tuỳ biến. Nó chắc chắn sẽ trông thanh lịch và tinh tế hơn. Trước khi:

Trước khi :

Sau khi :

Điều đầu tiên bạn cần làm là đăng nhập vào Tài khoản Google của bạn và đi đến Blogger >> Template >> Edit HTM L. Bây giờ trong các mẫu mã hóa tìm kiếm cho ]]> </ b: skin> tag và chỉ ở trên đó dán miếng sau của kiểu mã hóa. (Lưu ý: Trong CSS sau đây, chúng tôi đã bổ sung thêm ý kiến để giúp bạn xác định rằng làm thế nào bạn có thể tùy chỉnh các khía cạnh khác nhau của Lightbox của bạn như màu chữ, màu nền, nút đóng và vv).

/* MBL Blogger Lightbox
———————————————– */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Xin chúc mừng: Lưu mẫu bằng cách nhấn các nút màu da cam "Save Template" nằm ngay phía trên màn hình của bạn. Bây giờ bạn đã tùy chỉnh hình ảnh của bạn thành công Lightbox với kỹ thuật CSS đơn giản. Chúng tôi hy vọng hướng dẫn này có thể giúp bạn trong việc học như thế nào để tùy chỉnh một hộp ánh sáng hình ảnh trong blogger. Đừng cho chúng tôi biết nếu bạn đã sử dụng kỹ thuật này? Tại MyBloggerLab, chúng tôi có hộp đèn vô hiệu hóa vì nó cản trở trong khi một người đang đọc hướng dẫn dài. Tuy nhiên, những người có hình nền hoặc các trang web danh mục đầu tư có thể sử dụng nó tự do. Nếu bạn thích bài viết này, sau đó chia sẻ nó với bạn bè của bạn trên Facebook, Twitter và Google+.

Xem thêm…