إضافة جميلة لمدونات بلوجر و هي تبويبات تشبه واجهة Metro التي بالويندوز 8
للمتتابعة على المواقع الاجتماعية بتأتير CSS تفيدك هذه الاضافة بالمنح
لزوارك من متابعت مدونتك و التوصل بكل جديدها لن أطيل عليكم الاضافة جيدة
نمر لتجريبها أو تركيبها على مدونتك
خطوات اضافة الأداة
- إذهب للوحة تحكم بلوجر
- إذهب إلى تخطيط
- إضافة أدا ثم اختر HTML/JAVASCRIPT
- قم بنسخ و ألصق هذا الكود و عدل XXXX.بما يناسبك
<ul id='jocial'>
<li><a class='icon facebook' href='https://www.facebook.com/XXXX'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/XXXX'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/XXXX'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/XXXX'/></a></li>
</ul>
<style>
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYISzO4q_v1QYBV1Xcw2ACrex-50v9UZq3KW_ciZrf7HUtKGXJYhD0mmRQ0j_OxyGRKAUCjQQq7nNY6osAyXjdCbhbGJxmeN0lJYu3ABWEhBlbyjiM9j-bBOmnoUonPDASJCPys4Vm1KqO/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWa_xpkxx4F9RCRWwgC3jGY8Adjqxn6psf1ddlreILsrqkBgjW8edeB5MD9O4_FJQHkhAEdF_7Kovncqn719kDS73phGBZndz_aIigCDp6qzBYIti30vtLHdwi6vcb353fGQnRUmiBgPz/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71VaSg39XhDb6Mm9bh5_bpYPWOZJHeQP_6ZhhbAIiPvmjdQL598iQ9vTBEn5Cu6pYd57M7p3oPRNK_UV2L5k7qGyLHfpv4DixQXSXIZJlvfZDQtxVrVR9PebiLvi8xDgiU3WyHm8lSLms/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AdQmn8pbgB2E5PXraOP6-GH85u5iV3iHAIfhBc_jILU6iMFrz1kfNmSRnUuwZ3UZqafjmV-K7tQVurTMaSh_-A0PvO8mkuzZinTN29VnHcul0jC7mPLX1L48eGJpvlnB284aO_pPHxb1/s1600/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWa_xpkxx4F9RCRWwgC3jGY8Adjqxn6psf1ddlreILsrqkBgjW8edeB5MD9O4_FJQHkhAEdF_7Kovncqn719kDS73phGBZndz_aIigCDp6qzBYIti30vtLHdwi6vcb353fGQnRUmiBgPz/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71VaSg39XhDb6Mm9bh5_bpYPWOZJHeQP_6ZhhbAIiPvmjdQL598iQ9vTBEn5Cu6pYd57M7p3oPRNK_UV2L5k7qGyLHfpv4DixQXSXIZJlvfZDQtxVrVR9PebiLvi8xDgiU3WyHm8lSLms/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AdQmn8pbgB2E5PXraOP6-GH85u5iV3iHAIfhBc_jILU6iMFrz1kfNmSRnUuwZ3UZqafjmV-K7tQVurTMaSh_-A0PvO8mkuzZinTN29VnHcul0jC7mPLX1L48eGJpvlnB284aO_pPHxb1/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>
<li><a class='icon facebook' href='https://www.facebook.com/XXXX'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/XXXX'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/XXXX'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/XXXX'/></a></li>
</ul>
<style>
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYISzO4q_v1QYBV1Xcw2ACrex-50v9UZq3KW_ciZrf7HUtKGXJYhD0mmRQ0j_OxyGRKAUCjQQq7nNY6osAyXjdCbhbGJxmeN0lJYu3ABWEhBlbyjiM9j-bBOmnoUonPDASJCPys4Vm1KqO/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWa_xpkxx4F9RCRWwgC3jGY8Adjqxn6psf1ddlreILsrqkBgjW8edeB5MD9O4_FJQHkhAEdF_7Kovncqn719kDS73phGBZndz_aIigCDp6qzBYIti30vtLHdwi6vcb353fGQnRUmiBgPz/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71VaSg39XhDb6Mm9bh5_bpYPWOZJHeQP_6ZhhbAIiPvmjdQL598iQ9vTBEn5Cu6pYd57M7p3oPRNK_UV2L5k7qGyLHfpv4DixQXSXIZJlvfZDQtxVrVR9PebiLvi8xDgiU3WyHm8lSLms/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AdQmn8pbgB2E5PXraOP6-GH85u5iV3iHAIfhBc_jILU6iMFrz1kfNmSRnUuwZ3UZqafjmV-K7tQVurTMaSh_-A0PvO8mkuzZinTN29VnHcul0jC7mPLX1L48eGJpvlnB284aO_pPHxb1/s1600/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWa_xpkxx4F9RCRWwgC3jGY8Adjqxn6psf1ddlreILsrqkBgjW8edeB5MD9O4_FJQHkhAEdF_7Kovncqn719kDS73phGBZndz_aIigCDp6qzBYIti30vtLHdwi6vcb353fGQnRUmiBgPz/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71VaSg39XhDb6Mm9bh5_bpYPWOZJHeQP_6ZhhbAIiPvmjdQL598iQ9vTBEn5Cu6pYd57M7p3oPRNK_UV2L5k7qGyLHfpv4DixQXSXIZJlvfZDQtxVrVR9PebiLvi8xDgiU3WyHm8lSLms/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AdQmn8pbgB2E5PXraOP6-GH85u5iV3iHAIfhBc_jILU6iMFrz1kfNmSRnUuwZ3UZqafjmV-K7tQVurTMaSh_-A0PvO8mkuzZinTN29VnHcul0jC7mPLX1L48eGJpvlnB284aO_pPHxb1/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>
0 التعليقات:
إرسال تعليق