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

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

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

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

- تركيب اضافة ازرار المشاركة الاجتماعية سهل جدا ولايتطلب جهدا كبيرا ولاوقتا طويلا ولكن من أجل الحيطة فقط قم بالتالي حمل كود اضافة ازرار المشاركة في ملف text من هنا او قم بنسخه من اسفل نبدأ بكود Css الخاص بازرار المشاركة الاجتماعية تابع  :
- خذ نسخة إحتياطية ثم قم بالدخول لقالب بلوجر الخاص بك تحسبا لاي طارئ كي لاتفقد القالب  :
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;} 
  - ملاحظة حاول كتابتها يدويا قمت بتوقيف النسخ حفاظا على المواضيع من النسخ .
  - قم بلصق الكود التالي قبلها مباشرو أي فوقها .
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- الكود الآخير تجدها في الأعلى غالبا قم بالبحث عنه وضع الكود التالي قبله .
</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> 
- وفي الأخير قم بحفظ القالب ومبروك عليك الاضافة .
- من فضلك لاتبخل بوضع رد لتدعم المدونة . - هنا الشرح بالفيديو لكيفية اضافة ازرار المشاركة الاجتماعية اسفل المواضيع  :

حمــزة  مدون جزائري ارحب بك في مدونتي كيف برامج وبلوجرنافذتي المفتوحة على العالم لدعم المحــتوى العربــي ، نتمنى أن يكون مروركـــم علينا مفيـــدا كما نتمنى منكم دعمنا على المواقــع الاجتماعيـة كيف برامج وبلوجر
ندعوك للإشتراك بـ: القائمة البريدية لمدونة كيف

اشترك الآن Subscribe

الموضوع السابق
الموضوع التالي

ليست هناك تعليقات :