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

حصريات
فوتوشوب
شروحات
إضافات
قوالب

الصفحة غير موجودة ، 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- يمكن التعديل على الكلمات التى فى الإضافة بالذى تردها ويمكنك ايضا تغيير صورة الخلفية .

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


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

مواضيع قد تهمك ايضا

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

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

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

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

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

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

شكرا للموضوع ولكن كيف اقدر اغير الخلفية ؟

فى الكود الثالث أخى الفاضل سوف تجد رابط للخلفيه وهو

https://4.bp.blogspot.com/-FvpegXpczOQ/VuyAZaQJcaI/AAAAAAAAQ-8/ML97ym9O0hAy2CJgKp91TMZlh-TP26s2w/s1600/1.jpeg

قم بتغييره كما تريد

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

Mohon Aktifkan Javascript!Enable JavaScript

إتصل بنا

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