Hot Post

Social Profile và Search Box phong cách Metro UI với hiệu ứng Zoom & Glow cho Blogger

5/01/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Metro UI Social Profile and Search Box with Zoom & Glow Effects For Blogger

Chắc hẳn bạn đã từng thấy rất nhiều tiện ích đã được Iris Tips đăng trước đây trên blog. Hôm nay sẽ là một tiện ích khác với giao diện Metro cùng nhiều hiệu ứng bắt mắt bắng CSS3 & HTML.

Social Profile và Search Box Blogger

Social Profile và Search Box phong cách Metro UI với hiệu ứng Zoom & Glow cho Blogger

Cách thực hiện: Vào Bố cục >> Thêm tiện ích HTML/Javascript và copy đoạn code bên dưới vào 
 <!--iris-tips.blogspot.com-->
<style>
.mjn-metro-social
{
width:300px;
}
.mjn-metro-social li
{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.mjn-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd
{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.mjn-metro-social .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoajFfswlT61tjMjBIDXOnntpZ7-0z7aUXWdRpDiRMg5QArT92qwvBCMElk0h5ZSD7yf2j0DIL9nAgeaZiyW9fnWOQvpIqMGEBPJX0UALBSQu7SUdg7dsujQkwoxLUO3crZ9kfFk_vIs/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl1peOJK7nXNl09y95CxT6F6DxY5cUuINloZ29ruU3XJQK5fnFTGT13NiaSkDcyhglAPhHmOXJ6xyjWnjdG4Snp-yVWLmyl4lTUPbrUc4KjO2vhU0pAQ4OS5Nny2kAgLGRJ9Nzt4y-RlM/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRqVILDaYv53ddxwgn5eanwB_TX6ke7d8E-yFt6zRjjOYOyNnOmdSF6rxDT5MriMYOIzg7Znfg4QKJQyiXYvWBLm2oJR1b-T3iBdiRANYCERIecO2M18nQmgkUn5c4XGAsVKRTOYtbmc/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdzofgQbJpTug5Xonnxh86D6d0xsU0tbXWRRTpyYMJRlG3ocgTwyUvn8Q9cWVlmVeJlptZp_sbTqgNKJ7CYj8jsxfgUE3NyM5y3P1jt6BJroWQozL3PiC4pMDzqB6gXsF8MoOqu1zDhwA/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social li:hover .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2TnFmYe_lfF3sX57mZYOrHABQ3363fFCz7AfMRzoR4cZsi6R4JS4IkYsi0kdhPaaqw5COyF0a1XCZ799Z3dlaeBA0xAqvLpmM5pLolAqr6loiQKGcyOZCqOxbEwJVr3g4Q0y0S5szl8/h120/facebookfh.png) no-repeat center center #1f69b3;
 box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.mjn-metro-social li:hover .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtXvhTSTmpBqZLy1U2U2jJOMAUCz_w2ycG55GybQPqtyPDajC9lzUlG47IX-UYE-JblpTEd4s4oXbT5-yedUhNQn8DTPKrNNi8OlHD-GHz1R16AhK-7ORmqwkXQHFFE0JeTjboU-Kfp58/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
 box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.mjn-metro-social li:hover .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVphWIog0KhaAzQjDMDvmn5PX6iTq5bkLODcswiBJPCGbHNomxf562zkGptQ5gkdI9BlpNl1KVVU_NsI6Q_SNNxl4HAfWR5cAYyh_mI37A5MY4ugVhJJf7KtwUv_fpaCPW3qQy9W3wSs/h120/google+plush.png) no-repeat center center #da4a38;
 box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.mjn-metro-social li:hover .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgJyMrjoaj9jowaXRgPyofq_E4R1bq1DbjVuSgqjPQjg6DwowLRjCenr5mDkCH9iNQs_lgCdyTRiDfvmnB7PK9Q3GThWfbREHAwcjp1fbP1b7XGLOy0gzUuXoHYXuVKpB2icNPsoiVQo/h120/feedh.png) no-repeat center center #e9a01c;
 box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}   
/* Form wrapper styling */
.form-wrapper {
    width: 280px;
}
/* Form text input */
.form-wrapper input {
    width: 215px;
    height: 20px;
    padding: 10px 5px;
    float: left;  
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    border-color: #51a7e8;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}  
/* Form submit button iris-tips.blogspot.com*/
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 75px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHLOO5A_7WeZBsxIs2r-sFn-2i1gvx2WtO9Naa-QbPA-tU-Wl8Up0G2TubwPlkHvqgUIxD6mCfe27RCAIkTfxdZKbb-0xQcXEffDUh2PAUhuBFtKMcNDXpEW6Yq_QQRhG7nTDGI0Jpj0/h120/1367665345_search.png) no-repeat center center #26B11E;
    border-radius: 0 0 0 0;    
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
} 
.form-wrapper button:hover{   
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHLOO5A_7WeZBsxIs2r-sFn-2i1gvx2WtO9Naa-QbPA-tU-Wl8Up0G2TubwPlkHvqgUIxD6mCfe27RCAIkTfxdZKbb-0xQcXEffDUh2PAUhuBFtKMcNDXpEW6Yq_QQRhG7nTDGI0Jpj0/h120/1367665345_search.png) no-repeat center center #26B11E;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #44D816;
-moz-box-shadow:0px 0px 6px 3px #44D816;
-o-box-shadow:0px 0px 6px 3px #44D816;
-ms-box-shadow:0px 0px 6px 3px #44D816;
} 
.form-wrapper button:active,
.form-wrapper button:focus{ 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHLOO5A_7WeZBsxIs2r-sFn-2i1gvx2WtO9Naa-QbPA-tU-Wl8Up0G2TubwPlkHvqgUIxD6mCfe27RCAIkTfxdZKbb-0xQcXEffDUh2PAUhuBFtKMcNDXpEW6Yq_QQRhG7nTDGI0Jpj0/h120/1367665345_search.png) no-repeat center center #26B11E;
    outline: 0; 
}
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #26B11E transparent;
    top: 12px;
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #26B11E;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #26B11E;
}    
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<!--iris-tips.blogspot.com-->
<div class="mjn-metro-social">
<li><a class="fb" href="https://www.facebook.com/pages/Iris-Tips/914163981938548"></a></li>
<li><a class="tw" href="https://twitter.com/Iris_Tips"></a></li>
<li><a class="gp" href="https://plus.google.com/101485071107768481012/"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/IrisTips"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder="  Search here.. " required="" type="text" />
<button type="submit"></button>
</form><br />

Thế là xong rồi đấy ^^

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.

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

Created by mjnt/Iris Tips

Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Social Profile và Search Box phong cách Metro UI với hiệu ứng Zoom & Glow cho Blogger"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)