404
الصفحة او الكلمة التي تبحث (ي) عنها لا يوجد ما يطابقها

الأربعاء، 13 أبريل، 2016

إضافة أداة إنتضم إلينا و المتابعة


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


تركيب الإضافة 

اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة .

1- قم بالبحث فى قالب مدونتك على الوسم </head> وقم بوضع فوقه الكود التالى ( قبلة )

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>


2- قم بالبحث عن الوسم ]]></b:skin> وقم بوضع فوقه الكود التالى ( قبلة )

/* Sosial Media Widget */
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family: 'Droid Arabic Kufi',serif;margin:0 3px 0 0;margin-top: 10px;text-decoration: none;}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;text-decoration: none;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0;font-family: 'Droid Arabic Kufi',serif;}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;font-family: 'Droid Arabic Kufi',serif;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}

3- الأن الكود الأخير فى الإضافة وهذا الكود يتم وضعه فى أداة HTML/JavaScript من التخطيط

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></data:title></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://4.bp.blogspot.com/-FvpegXpczOQ/VuyAZaQJcaI/AAAAAAAAQ-8/ML97ym9O0hAy2CJgKp91TMZlh-TP26s2w/s1600/1.jpeg' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> الأنضمام لأعضاء المدونة</i></a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>أنضم إلينا</span></h4>
<p>للحصول على كل جديد المدونة</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='تابعنا على الفيسبوك'><i class='فيسبوك'/>فيسبوك</i></a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='تابعنا على تويتر'><i class='تويتر'/>تويتر</i></a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل بلس'><i class='جوجل بلس'/>جوجل بلس</i></a></li>
</ul>
</div>
</div>
</div>

4- يمكن التعديل على الكلمات التى فى الإضافة بالذى تردها ويمكنك ايضا تغيير صورة الخلفية .

والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

مواضيع أخر من المدونة

شارك الموضوع ليستفيد الجميع

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

اضافة جمل اخي تابع الله يوفقك

هدا واجب اخي تستهل اكتر والله انت على راسي

العفو اخى انت بكلمك هذا تفرحتى كثيرا شكرا لك

اخي انت مانع النصخ في المدونة كيف احصل على الأكواد

اضغط مرتين على الكواد لتحديدها ثم اضغط ctrl + c لنسخها

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر