الأربعاء، 7 أغسطس 2013

إضافة روعة أزرار للمواقع الاجتماعية و RSS

5:21 ص  دون ياقلم  لا يوجد تعليقات


مرحبا بكم إخواني الاعزاء زوار المهوس العربي اليوم بفضل الله تعالى سأقدم لكم إضافة جميلة لمنصة البلوجر ألا و 
هي تبويبات تشبه واجهة Metro التي بالويندوز 8 للمتتابعة على المواقع الاجتماعية بتأتير CSS تفيدك هذه الاضافة بالمنح لزوارك من متابعت مدونتك و التوصل بكل جديدها لن أطيل عليكم الاضافة جيدة نمر لتجريبها أو تركيبها على مدونتك
  1. أولا : إذهب للوحة تحكم بلوجر
  2. ثانيا : إذهب إلى تخطيط
  3. ثالثا : إضافة أداة
  4. رابعا : HTML/JAVASCRIPT
  5. .بما يناسبك  ثم أنسخ و ألصق هذا الكود و عدل 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/AVvXsEivsDQ-qlqJDluH2EzZOkUi29UViU4idZeW80zU6ritem4diCE5pWZrXYxcw1dv42-mm1gZddM8_D8rw0viMrQLLATV81skftdltGbn8KdpsvkjYBbRP_KGpcrOy7mUdQpCr_bLokOD2mq2/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/AVvXsEj2Ve-A0Av4_DUtdZAq81GM4YVR6Fms_z6IxZrOkX-zBgcE2EIhNXL79wCFGp6q2yBBV-N7xjYifzBUBpOMQXZkHqSN8rTu_pdcWKlACpohzSBHgpPy3UOSYzFWwZ3m249GfMLtNqnDuYV7/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/AVvXsEj5doyKbvQKIbVVSqv451prTRtBVh-Cm2VPE2FpqCe6SW3H_TRy5qefj8vMdEtS9KXgupa5iYO1wsQMvunCZvqkB7aKW1R0I_SLd-Q1awG6nYgiePey6d_bp2HhCikXkV2A7NC82hdO_fKz/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/AVvXsEgx0vFU3I0gMb3vaPr4lTYeGzMOG43QkSzSuRLLNwa_f6fU4bUzYLFs6SzfUqQ0WQa8ULtc_foM8oFGMdwVLVLGb0fs1-qKOqfDcxAuLTh6UmXCHKgIRKYvIBmAHkIrmqTftnK1kaoAjkRT/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/AVvXsEj2Ve-A0Av4_DUtdZAq81GM4YVR6Fms_z6IxZrOkX-zBgcE2EIhNXL79wCFGp6q2yBBV-N7xjYifzBUBpOMQXZkHqSN8rTu_pdcWKlACpohzSBHgpPy3UOSYzFWwZ3m249GfMLtNqnDuYV7/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/AVvXsEj5doyKbvQKIbVVSqv451prTRtBVh-Cm2VPE2FpqCe6SW3H_TRy5qefj8vMdEtS9KXgupa5iYO1wsQMvunCZvqkB7aKW1R0I_SLd-Q1awG6nYgiePey6d_bp2HhCikXkV2A7NC82hdO_fKz/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/AVvXsEgx0vFU3I0gMb3vaPr4lTYeGzMOG43QkSzSuRLLNwa_f6fU4bUzYLFs6SzfUqQ0WQa8ULtc_foM8oFGMdwVLVLGb0fs1-qKOqfDcxAuLTh6UmXCHKgIRKYvIBmAHkIrmqTftnK1kaoAjkRT/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 التعليقات:

إرسال تعليق