اضافة أزرار المشاركة بشكل دائري جذاب لمدونات بلوجر.

- إضافة أزرار المشاركة بشكل دائري جذاب :

- ان نشر المواضيع في المواقع الاجتماعية يساهم بشكل فعال في الزيادة الصاروخية للزوار في مدونتك كما يساهم ذلك في تحسين ترتيبك في محركات البحث، في قوالب بلوجر يعتمد المدونون على مجموعة من الأكواد لتشكيل اضافة أورار المشاركة الاجتماعية لقاتلب بلوجر لديهم من Css وHtml ومن خلال هذه الاكواد يمكنكم التحكم في اضافة ازرار المشاركة الاجتماعية داخل قالب بلوجر وفي شكلها وتناسقها مع الجوال .

أزرار المشاركة دائرية

معاينة

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

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

- الفايسبوك، التويتر، قوقل بليس ، لينكدين، بانتيراست .

- مواضيع ذات صلة :

1-إضافة أزرار المشاركة فلات لمدونات بلوجر .

2- إضافة روابط صفحاتك على المواقع الإجتماعية بشكل أنيق.

- تركيب اضافة ازرار المشاركة الاجتماعية سهل جدا ولايتطلب جهدا كبيرا ولاوقتا طويلا ولكن من أجل الحيطة فقط قم بالتالي حمل كود اضافة ازرار المشاركة في ملف text من هنا او قم بنسخه من اسفل نبدأ بكود Css الخاص بازرار المشاركة الاجتماعية تابع  :

• Css-Code-Download

- خذ نسخة إحتياطية ثم قم بالدخول لقالب بلوجر الخاص بك تحسبا لاي طارئ كي لاتفقد القالب  :
1- اضغط على crtl+f وابحث عن القيمة التالية:

</style>

 /* Share Button howarabi.blogspot.com*/
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;} 

  - ملاحظة حاول كتابتها يدويا قمت بتوقيف النسخ حفاظا على المواضيع من النسخ .

  - قم بلصق الكود التالي قبلها مباشرو أي فوقها .

• Html-Code-Download

2-قم بايجاد الكود التالي وألصق الكود هذا بعده مباشرة تحته لديك خياران كما في الاول اما ان تحمل الكود والاحتفاظ به للضرورة في حال قمت بالتغيير عليه واتلفته حمله واحتفظ به او قم بنسخ كود ازرارالمشاركة الاجتماعية من هنا .

<data:post.body/>

 <div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div> 

3- الكود الآخير تجدها في الأعلى غالبا قم بالبحث عنه وضع الكود التالي قبله .

• Javascript-Code-Download

</head>

 <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script> 

- وفي الأخير قم بحفظ القالب ومبروك عليك الاضافة .

- من فضلك لاتبخل بوضع رد لتدعم المدونة . - هنا الشرح بالفيديو لكيفية اضافة ازرار المشاركة الاجتماعية اسفل المواضيع  :

الكاتب : مدونة كيف

حمــزة قري مدون جزائري هاوي ولست مختص ربما تجد بعض الأخطاء آسف لذلك