السبت، 31 يناير 2015

أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

2:15 م  hadjkada  لا يوجد تعليقات


 أزرار المشاركات أصبحت إضافة تضفي جمالاعلى المدونة  وهي من أهم العوامل في زيادة شهرة المدونه لأنها تساعد في نشر مواضيع المدونه على شبكات التواصل الاجتماعى

 وإضافة اليوم جميلة وهي خاصة  بأزرار المشاركات أسفل المواضيع في البلوجر وشكلها الجميل ومتوفيرة بنوعين رائعين
الإضافة الأولى بهذا الشكل وفي الحقيقة تبدوا بالشكل الرمادي وعند مرور مؤشر الماوس عليها تبدوا بالشكل التالي 

ولتركيبها إذهب إلى قالب ثم تحرير HTML 
ثم إبحث عن الوسم التالي <data:post.body/>
ثم ضع الكود التالي أسفله


  <b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open +Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
width: 475px;
overflow: hidden;
margin: 20px auto -10px;
}

.social-sharing-title{
background: #E74C3C;
color: #ffffff;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 643px;
height: 40px;
display: block;
margin: 20px 0px -5px;
}

.button {
float: left;
margin-right: 10px;
width: 110px;
background:#E2E2E2;
border: 1px solid #cbcbcb;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 15px 5px 5px;
box-sizing: border-box;
}

.button i {
background: #353535;
color: #eaeaea;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 40px;
height: 40px;
display: block;
margin: 0 auto 10px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

.social-container {
text-align: center;
text-transform: uppercase;
font-size: 18px;
color: #353535;
line-height: 54px;
font-family: GESSTwoMediumRegular;
background: #d8d8d8;
width: 100%;
height: 45px;
box-shadow: inset 0 -2px 4px #c7c7c7;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: relative;
overflow: hidden;
}

.slide, .button i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}

.slide {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
border-radius: 0 0 22px 22px;
-o-border-radius: 0 0 22px 22px;
-ms-border-radius: 0 0 22px 22px;
-moz-border-radius: 0 0 22px 22px;
-webkit-border-radius: 0 0 22px 22px;
/* top fix */
transition: all 0.2s ease-in-out;
position: absolute;
height: 45px;
width: 100%;
top: -35px;
}

.slide::after {
content: &quot;&quot;;
display: block;
position: absolute;
width: 100%;
height: 10px;
box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eaeaea;
border: 1px solid #cbcbcb;
box-sizing: border-box;
bottom: 0;
}

.button:hover .slide {
top: 0;
border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
top: 1px;
position: relative;
}

.twitter iframe {
width: 79px !important;
}

.google #___plusone_0 {
width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
background: #305c99;
color: white;
}

.button.twitter:hover i, .twitter .slide {
background: #00cdff;
color: white;
}

.button.google:hover i, .google .slide {
background: #d24228;
color: white;
}

.button.linkedin:hover i, .linkedin .slide {
background: #007bb6;
color: white;
}

.button.linkedin {
margin-right: 0;
}

.credit {
display: none;
}

.credit a {
display: none;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='social-sharing-title'>الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div>
<div id='buttons'>
<div class='facebook button'>
<i class='icon-facebook'/>
<div class='social-container fb'>
<div class='slide'>
<iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px; }'/>
</div>
فيس بوك
</div>
</div>
<div class='twitter button'>
<i class='icon-twitter'/>
<div class='social-container tw'>
<div class='slide'>
<a class='twitter-share-button' data-hashtags='' data-via='iTh3Maestro' href='https://twitter.com/share '>
غرد </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
</div>
تويتر
</div>
</div>
<div class='google button'>
<i class='icon-google-plus'/>
<div class='social-container tw'>
<div class='slide'>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'>
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
جوجل +
</div>
</div>
<div class='linkedin button'>
<i class='icon-linkedin'/>
<div class='social-container tw'>
<div class='slide'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<script type='IN/Share'/>
</div>
لينكدان
</div>
</div>
</div>
<div class='credit'>
<a href='http://goo.gl/vnNkHv ' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div>

</b:if></b:if>    

الآن يمكنك إستبدال ماباللّون الأزرق بجملة تناسبك  الرجاء مشاركة الموضوع لتعم الفائده على الجميع

أما الإضافة الثانية فهي مثلها فقط بها بعض التغييرات كما في الصورة التالية
ولتركيبها قم بنفس العمل السابق
الكود :

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 20px auto -10px;
}

.social-sharing-title{
    background: #E74C3C;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 600px;
    height: 40px;
    display: block;
    margin: 20px 0px -5px;
}

.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background:#DE14E1;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 10px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #353535;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 70px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    color: #353535;
    line-height: 100px;
    font-family: GESSTwoMediumRegular;
    background: #d8d8d8;
    width: 100%;
    height: 65px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 65px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: &quot;&quot;;
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: 1px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-right: 0;
}

.credit {
   display: none;
}

.credit a {
   display: none;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='social-sharing-title'>الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div>
<div id='buttons'>
<div class='facebook button'>
 <i class='icon-facebook'/>
 <div class='social-container fb'>
  <div class='slide'>
   <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px; }'/>
  </div>
فيس بوك
 </div>
</div>
<div class='twitter button'>
 <i class='icon-twitter'/>
 <div class='social-container tw'>
  <div class='slide'>
   <a class='twitter-share-button' data-hashtags='المايسترو' data-via='iTh3Maestro' href='https://twitter.com/share'>
   غرد </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
  </script>
  </div>
  تويتر
 </div>
</div>
<div class='google button'>
 <i class='icon-google-plus'/>
 <div class='social-container tw'>
  <div class='slide'>
   <!-- Place this tag where you want the +1 button to render. -->
   <div class='g-plusone' data-size='medium'>
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div>
  جوجل +
 </div>
</div>
<div class='linkedin button'>
 <i class='icon-linkedin'/>
 <div class='social-container tw'>
  <div class='slide'>
   <script src='//platform.linkedin.com/in.js' type='text/javascript'>
 lang: en_US
   </script>
   <script type='IN/Share'/>
  </div>
   لينكدان
 </div>
</div>
</div>
<div class='credit'>
  <a href='http://goo.gl/vnNkHv' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div>
  </b:if></b:if>  


Posted in:

0 التعليقات:

إرسال تعليق

شــــــــا رك
Twitter Delicious Facebook Digg Stumbleupon Favorites More