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

Add-social-media-buttons-professionally
المتابعين كنز المدون لذالك وجب عليك الاهتمام بهم ومراعاتهم, المتابعين من أهم الأمور الذي يجب الاهتمام بهم بحيث تلبي طلباتهم وتحل مشاكلهم, وجميعنا نحب أن يكون لنا العديد من المتابعين ولجلب متابعين يجب علينا الاهتمام في تسهيل لهم الطرق لمتابعتنا بحيث نعمل لمدونتنا صفحات في مواقع التواصل الاجتماعي ومحاولة ترويجها إلى زوار مدوناتنا, لذالك نجد أنّ يجب عليك تركيب كود أزرار المشاركة في مدونتك لما لها من تأثير ايجابي في زيادة أعداد متابعين المدونة في مواقع التواصل الاجتماعي, لذالك نقدم لكم كود ايقونات مواقع التواصل الاجتماعي بشكل احترافي ومميز, الإضافة يمكن وضعها على القائمة الجانبية كذالك الإضافة تحتوي على جميع مواقع التواصل الاجتماعي.


ملاحظة: هذه الاضافة تعمل مع جميع المواقع بجميل سكربتتها ونحن شرحنا تركيبها على بلوجر فقط, لكن  تستطيع تركيبها انت في موقعك وستعمل بدون اي مشاكل. 

تركيب اضافة ازرار المواقع الاجتماعية لمدونات بلوجر

كود أزرار المشاركة  تتكون من جزئيين الجزء الأول هو عبارة عن أيقونات التواصل الاجتماعي html أما الجزء الثاني هو عبارة عن css  كود أزرار المشاركة.

طريقة إضافة إيقونات التواصل الاجتماعي.

طريقة تركيب الإضافة سهل جدا, فقط توجه إلى التخطيط ثم اختار المكان المناسب ثم أضف أداة  HTML/JavaScript وضع الكود التالي داخلها.
<div class="social-counter">
<ul id="social">
<li class="item-social facebook count=3.5k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">3.5k</span><span class="item-text">اعجاب</span>
</a></li>
<li class="item-social twitter count=1.7k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">1.7k</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social gplus count=735;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">735</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social youtube count=2.8k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">2.8k</span><span class="item-text">اشتراك</span>
</a></li>
<li class="item-social pinterest count=524;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">524</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social dribbble count=7.3k;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">7.3k</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social instagram count=849;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">849</span><span class="item-text">تابع</span>
</a></li>
<li class="item-social rss count=286;"><a href="#">
<i class="item-icon fa"></i><span class="item-count">286</span><span class="item-text">اشتراك</span>
</a></li>
</ul>
</div>

<style  type="text/css">
.social-counter{margin:0;padding:0;overflow:hidden}
.social-counter ul{margin:0;padding:0}
.social-counter ul li{list-style: none;width:42%;float:left;text-align:left;margin:0 0 5px;padding:0 0 5px;position:relative;    position: relative;
border: 1px solid #f5f5f5;
padding: 7px;}
.social-counter ul li:nth-child(2),.social-counter ul li:nth-child(4),.social-counter ul li:nth-child(6),.social-counter ul li:nth-child(8){float:right}
.social-counter ul li a{margin:0;padding:0}
.item-icon{float:left;position:relative;text-align:center;vertical-align:middle;color:#fff;margin:0;display:inline-block;width:32px;height:32px;line-height:32px;font-size:16px;border-radius:2px}
.hide-count{display:none}
.item-count{display:inline-block;color:#333;font-weight:700;font-size:13px;line-height:32px;float:left;padding-left:10px}
.item-text{float:right;display:inline-block;color:#666666;font-size:11px;line-height:32px;font-weight:400}
.item-social.facebook .item-icon{background-color:#5271b3}
.item-social.twitter .item-icon{background-color:#49aff8}
.item-social.gplus .item-icon{background-color:#cb2027}
.item-social.rss .item-icon{background-color:#FFC200}
.item-social.youtube .item-icon{background-color:#eb1a21}
.item-social.dribbble .item-icon{background-color:#ea4c89}
.item-social.instagram .item-icon{background-color:#4E729A}
.item-social.pinterest .item-icon{background-color:#cb2027}
.item-social.facebook .item-icon:before{content:"\f09a"}
.item-social.twitter .item-icon:before{content:"\f099"}
.item-social.gplus .item-icon:before{content:"\f0d5"}
.item-social.rss .item-icon:before{content:"\f09e"}
.item-social.youtube .item-icon:before{content:"\f16a"}
.item-social.instagram .item-icon:before{content:"\f16d"}
.item-social.dribbble .item-icon:before{content:"\f17d"}
.item-social.pinterest .item-icon:before{content:"\f0d2"}
.social-counter ul li:hover .item-icon{background-color:#222222}
.social-counter ul li:hover .item-text{color:#01BD5D}
</style>

التعديلات

# استبدلها برابط صفحة المدونة في موقع التواصل الاجتماعي.
استبدل ما في ألون الأصفر بعدد متابعين صفحاتك

ملاحظة: في حالت أردّت حذف فئة من مواقع التواصل الاجتماعي أحذفها من بداية <li إلى </li>

اذا لم تظهر الأيقونات قم بوضع رابط الأيقونات في مدونتك
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


هنا نكون قد انتهينا من تركيب كود ايقونات مواقع التواصل الاجتماعي, في حالت حدثت مشكلة معك يمكن وضعها في تعليك وسنقوم برد عليك في اقرب وقت.

تغيير شكل مشاركة مميزة إلى شكل احترافي وجميل

تغيير شكل مشاركة مميزة الى شكل احترافي وجميل
نقدم لكم إضافة حصرية وهي تغيير شكل مشاركة مميزة إلى شكل أكثر احترافية, هذه الإضافة حصرية فقط لدى مدونة عبد الله منقوش.
لقد قمنا بأخذ هذه الإضافة من موقع codepen  تم قمنا بتعديلها  لتتناسب مع اكواد المشاركة المميزة
يمكنك معاينة الإضافة


تركيب اكواد تغيير شكل مشاركة مميز إلى شكل احترافي
توجه إلى لوحة التحكم في المدونة
تأكد من تفعيل إضافة مشاركة مميز من التخطيط.
بعد التأكد من تفعيل الإضافة توجه إلى المظهر تم تحرير HTML تم ابحث عن

<b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>

قم باغلاقة عن طريق الضغط على المساحة الفارغة قبل رقم السطر في اليسار تم حدد علية الى ان تصل  </b:widget> واستبدلة بكود التالي
Change-FeaturedPost-from-professional-blogger
الكود هنا

  <b:widget id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>
    <b:widget-settings>
      <b:widget-setting name='showSnippet'>true</b:widget-setting>
      <b:widget-setting name='showPostTitle'>true</b:widget-setting>
      <b:widget-setting name='showFirstImage'>true</b:widget-setting>
      <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>

  <b:include name='quickedit'/>
</b:includable>
    <b:includable id='content'>

<div class='item-list'>
<div class='item item-1'>
<div class='img'><a href='javascript:;'>
<div class='like'><i aria-hidden='true' class='fa fa-heart'/></div></a>

<a expr:href='data:postUrl'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      &lt;div class=&quot;img-content&quot; style=&quot;background-image: url(<data:postFirstImage/>);&quot;&gt;&lt;/div&gt;
    </b:if>
  </a>

</div>
<div class='social'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:postUrl' target='_blank'>
<div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div></a>
<a expr:href='&quot;whatsapp://send?text=&quot; + data:postUrl' target='_blank'><div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:postUrl' target='_blank'><div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div></a></div>
<div class='text-container'>
<div class='title'><b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
     <a expr:href='data:postUrl'><data:postTitle/></a>
    </b:if></div>
<div class='content'>
<p><data:postSummary/></p>
</div>
<div class='readmore'>
  <h4><a expr:href='data:postUrl'>أقراء المزيد</a></h4>
</div>
</div>
</div>
</div>


  <style type='text/css'>
.item {
    width: 100%;
    background: #fff;
    position: relative;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-bottom: 3px solid #c9c9c9;
    overflow: hidden;
}
.item .img {
    width: 100%;
    height: 195px;
    background: black;
    border-radius: 10px 10px 0 0;
    z-index: 5;
    overflow: hidden;
    display: block;
}
.item .img-content {
  width: 100%;
  height: 100%;
  transition: 0 !important;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg/640px-26th_Tokyo_International_Film_Festival-_Tom_Hanks_from_Captain_Phillips_%2814970103713%29.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.item.showfull .text-container {
  height: 90%;
}
.item.showfull .content {
  height: 78%;
}
.item.showfull .social {
  top: 25px;
}
.item.showfull .img-content {
  transform: scale(1.04);
  filter: blur(5px);
}
.item.showfull .like {
  margin-top: 100px;
}
.item .text-container {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: -3px -6px 8px rgba(0, 0, 0, 0.3);
    display: block;
    margin: -20px 0 0 0;
    text-align: center;
    overflow: auto;
}
.item .content {
  overflow: hidden;
}
.item .social {
width: 100%;
    height: 33px;
    direction: ltr;
    position: absolute;
    z-index: 15;
    top: 39.5%;
    display: flex;
    justify-content: flex-end;
}
.item h2 {
    margin-bottom: 0;
    margin-top: 10px;
    display: block;
}
.item .social div {
    width: 30px;
    height: 30px;
    background: green;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.item .social div:hover {
  transform: scale(1.1);
}
.item .social a:last-child {
  margin-right: 10px;
}
.item a .tw {
  background-color: #0084b4;
}
.item a .fb {
  background-color: #3b5998;
}
.item a .ig {
  background-color: #0eba31;
}
.item .like {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #e82323;
    border-radius: 50%;
    color: #fff;
    right: 8px;
    top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.item .like:hover {
  transform: scale(1.1);
}
.item .like i {
  font-size: 10px;
}
.item .like.clicked {
  background: #ffcece;
}
.item .like.clicked i {
  color: #e60026;
}
.item .readmore {
    display: block;
    padding-bottom: 5px;
}
.item .readmore h3 {
    display: block;
    width: 70px;
    text-align: center;
    padding: 10px 15px;
    border-radius: 40px;
    border: 1px solid;
    cursor: pointer;
    font-size: 10px;
    margin: 0 auto 5px;
}
    .item .readmore h3:hover{
    background: #bababa;
    color: #fff;
}
    .item .readmore h3:hover a{
    color: #fff;
}
.text-container .title{
    margin: 11px 9px 0px;
    font-size: 17px;
    padding: 0 0 3px 0;
    border-bottom: 1px solid #e82323;
}
.text-container .content{padding: 0 9px 8px;}
  </style>
<script>
//<![CDATA[
$(".item a .ig").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>
</b:includable>
  </b:widget>


تم اضغط حفظ ومبروك عليك الإضافة , في حالت حصلت مشكلة ضعها في تعليق, كذالك من المرجح ان يحدث تضارب في شكل الإضافة بسبب عدم تناسبها مع أكود قالبك لذالك لو حدث لك المشكلة ضع رابط مدونتك في تعليق

قالب Essence معرب قالب بلوجر مميز واحترافي

Template-Essence-parsed-template-professional-blogger
نقدم  لكم قالب Essence قالب بلوجر معرب, القالب احترافي ذو شكل مميز وما يميز القالب هو شكله الغريب المختلف عن القوالب, قالب Essence متجاوب مع جميع الأجهزة الذكية, القالب يحتوي على سلايد شو احترافي يعمل عن طريق وضع أحِدا التسميات, كذالك القالب يحتوي على شكل مختلف في عرض المشاركات حيث تتضمن مواضيع ذات صلة ضمن عرض المشاركات, القالب يحتوي على العديد من المميزات يمكنك اكتشافها عن طريق معاينة القالب مباشرة.



التعديلات بعد تركيب قالب Essence قالب بلوجر معرب

1- قبل تركيب القالب الأفضل عمل نسخة احتياطية وتابع هذه الدرس لعمل نسخة احتياطية مع أدوات التخطيط.
2- بعد عمل نسخة احتياطية استخدم قالب التنظيف من هنا.
3- ارفع القالب

التعديلات في التخطيط

لعمل أيقونات التواصل الاجتماعي في الإعلاء ضع الكلمات التالية في عنوان الموقع 
facebook, twitter, gplus, linkedin, youtube   
لتشغيل السلايد شو ضع تسمية

اكواد الإضافات في القائمة الجانبية 

1- كود من نحن
<div class="about-widget-wrap"><div class="about-widget-image">
<center><img src="https://avatars.hsoubcdn.com/b88abbe6dbbeb97c939e7efbec592c22?s=256" alt="About Me" original="https://avatars.hsoubcdn.com/b88abbe6dbbeb97c939e7efbec592c22?s=256" style="
        border-radius: 100%;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(235, 235, 235);
    margin:0;
    padding: 5px;
    width: 180px;
" /></center>
</div>

<div style="text-align: justify">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.<a href="#" style="text-decoration: underline;text-decoration: none;color: #000;font-weight: bold;margin: 0 3px;">المزيد من هنا</a></div>
<style>
.about-widget-image {
    max-height: 260px;
overflow:hidden;
margin-bottom: 15px;
}

</style>
</div>


استبدل https://avatars.hsoubcdn.com/b88abbe6dbbeb97c939e7efbec592c22?s=256 برابط صورتك
و استبدل # برابط صفحة من نحن او حسابك في الفيس بوك

2 كود أيقونات التواصل
<div class="icons-social">
<ul id="social">
<li><a class="youtube" href="#" title="instagram"></a></li>
<li><a class="gplus" href="#" title="gplus"></a></li>
<li><a class="twitter" href="#" title="twitter"></a></li>
<li><a class="facebook" href="#" title="facebook"></a></li>
</ul></div>

<style>
ul#social {
    text-align: center;
}
.icons-social li {
    display: inline-block;
padding: 0;
text-align: left;
;
}

.icons-social #social a {
display: block;
height: 42px;
width: 42px;
color: #2b2b2b;
text-align: center;
font-size: 20px;
}
.icons-social #social a:before {
display: inline-block;
font: normal normal normal 22px/1 FontAwesome;
font-size: inherit;
font-style: normal;
font-weight: 400;
line-height: 44px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-social .facebook:before {
content: "\f09a";
}

.icons-social .twitter:before {
content: "\f099";
}

.icons-social .gplus:before {
content: "\f0d5";
}


.icons-social .instagram:before {
content: "\f16d";
}

.icons-social .youtube:before {
content: "\f16a";
}



</style>

3- كود النشرة البريدية
<style>
#Templatesyard-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  border-radius: 1px;
}

#Templatesyard-sbox-v2 p {
  font-size: 15px;
  color: #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
}
#Templatesyard-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#Templatesyard-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #ebebeb;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#Templatesyard-sbox-v2 .rssform .button:hover {
 background:#10b765;
}
#Templatesyard-sbox-v2 .rssform .button {
  background: #2b2b2b;
  color: white!important;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
  font-family: Montserrat;
border-radius:20px;
}




#Templatesyard-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="Templatesyard-sbox-v2">
            
                 <p>الحصول على أحدث المواضيع مباشرة عبر البريد الالكتروني مجانا!</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="Name" placeholder="أدخل أسمك
" vk_14173="subscribed" vk_169e0="subscribed" vk_1c14d="subscribed" />
            <input type="text" name="email" placeholder="أدخل بريدك الالكتروني..." vk_14173="subscribed" vk_169e0="subscribed" vk_1c14d="subscribed" />
            <input type="hidden" value="Templatesyard" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input value="الاشتراك" class="button" type="submit" />
            </form>
            </div>
     
  
            </div>
استبدل mailverify باسم خلاصتك في فييدبنر

هنا نكون قد انتهينا من تركيب القالب.


تحويل تلقائي صفحة الخطأ الى الصفحة الرئيسية لمدونة بلوجر

Automatic-conversion-error-Blogger-home
نقدم لكم إضافة جميلة وهي تحويل تلقائي من صفحة الخطاء إلى الصفحة الرئيسية هذه الإضافة ستنفعك إذا كنت تحب أن تعمل ذالك لزوار مدونتك تابع الشرح لتركيب الإضافة.

هل الإضافة تعارضseo  محركات البحث؟

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

فأنت إذا قمت بتركيب هذه الإضافة لن تتأثر مدونتك في محركات البحث لأنك لن تحذف صفحة الخطأ ونماء ستعمل على تحويل الزائر إلى الصفحة الرئيسية فقط. 

شرح تركيب إضافة تحويل صفحة الخطأ إلى الصفحة الرئيسية

نتوجه إلى لوحة التحكم للمدونة ثم المظهر ثم تحرير HTML ثم نبحث </body> عن ونضع إحداء الأكود التالي فوقه مباشره.

1- هذه الكود سيعمل على التحويل الى الصفحة الرئيسية
<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;<data:blog.homepageUrl/>&quot;;
</script>
</b:if>

2- هذه الكود تستطيع من خلالة التحويل إلى رابط معين, على سبيل المثال التحويل إلى صفحة اتصل بناء
<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;https://domain_anda.com/error-404.html/&quot;;
</script>
</b:if>
قم بتغير ما بلون الأصفر ألى الرابط الذي تحب التحويل إليه.


بعد اختيار احد الاكواد اضغط حفظ ومبروك عليك الإضافة

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *