إضافة أزرار المشاركة في المواقع الإجتماعية للمُدونات بلوجر بأشكال إحترافية جديدة 2015

السلام عليكم

مرحبا في هذا الدرس الحصري و الذي سنتطرق فيه الى طريقة اضافة أداة  أزرار المشاركة في المواقع الإجتماعية للمُدونات بلوجر بعدة أشكال جديدة و احترافية 2015 ، هذه الإضافة لها 4 أشكال احترافية متناسقة مع جميع الاجهزة الإلكترونية و الحصرية فقط على مدونة حكمات .  يمكنكم اختيار الشكل المناسب لك و اضافته للمدونة سريعا فقط تابع الشرح التالي و المفيد .

طريقة اضافتها الى مدونات البلوجر

• نتوجه الى المدونة ،  قالب ،
• تحرير HTML  ،  ثم نبحث عن </head>
• نضيف الكود التالي فوقه مباشرة .

<style type='text/css'>
#demo1.sharrre {
width: 100%;
display: inline-block;
}
.sharrre .box {
float: left;
}
.sharrre .count {
color: #444444;
display: block;
font-size: 17px;
line-height: 34px;
height: 34px;
padding: 4px 0;
position: relative;
text-align: center;
text-decoration: none;
width: 50px;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.sharrre .share {
color: #FFFFFF;
display: block;
font-size: 11px;
height: 16px;
line-height: 16px;
margin-top: 3px;
padding: 0;
text-align: center;
text-decoration: none;
width: 50px;
background-color: #9CCE39;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.sharrre .buttons {
display: none;
float: left;
width: 300px;
}
.sharrre .button {
float: left;
max-width: 50px;
height: 50px;
margin-left: 10px;
}
</style>
<script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
<script src='http://yourjavascript.com/27299101294/jquery-sharrre-min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/22512901748/jquery-sharrre.js' type='text/javascript'/>

• نبحث الآن عن الكود  </body>
• نضيف الكود التالي فوقه مباشرة .

<script>
$(function(){
$(&#39;#demo1&#39;).sharrre({
share: {
googlePlus: true,
facebook: true,
<a href='http://www.jqueryscript.net/tags.php?/twitter/'>twitter</a>: true,
delicious: true
},
buttons: {
googlePlus: {size: &#39;tall&#39;},
facebook: {layout: &#39;box_count&#39;},
twitter: {count: &#39;vertical&#39;},
delicious: {size: &#39;tall&#39;}
},
hover: function(api, options){
$(api.element).find(&#39;.buttons&#39;).show();
},
hide: function(api, options){
$(api.element).find(&#39;.buttons&#39;).hide();
}
});
});
</script>

ها قد انتهينا من المرحلة الأولى ، الأن نختار اللإضافة التي نريدها و نضيف الكود الخاص بها الى المدونة .

• الشكل  1 

الحصول على الكود

• الشكل 2

الحصول على الكود

• الشكل 3

الحصول على الكود

• الشكل 4

الحصول على الكود

• و أخيرا نضغط على حفظ .

مقالات ذات صلة