no-style

إضافة صندوق المتابعة والإنضمام للمدونة في بلوجر 4 في 1

السلام عليكم ورحمة الله تعالى وبركاته


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

صورة الاضافة

يمكنك معاينة الاضافة مباشرة على مدونتي بالسيدبار


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


تابع معي ...


أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير HTML >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
]]></b:skin>
4 - ثم أضف الكود التالي فوقه مباشرة
/* About Me */#HTML68 .aboutind-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}.aboutind-img{position:relative;max-height:140px;overflow:hidden}.aboutind-img img {max-width:100%;width:100%;transition:all .6s;}.aboutind-img:hover img{transform:scale(1.2) rotate(-10deg)}.aboutind-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}.aboutind-img:hover:before{background:rgba(0,0,0,0.6);}.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}.aboutind-float{text-align:center;display:table;width:100%;height:100%}.aboutind-float a{background:rgba(243,156,18,.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s}.aboutind-float:hover a{background:#404040;color:#fff;}.aboutind-float a i{font-weight:normal;margin:0 0 0 5px}.aboutind-wrpicon{display:block;margin:15px auto;position:relative;}.aboutind-wrpicon .extender{width:100%;display:block;}.extender{text-align:center;font-size:16px}.extender .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}.extender .aboutind-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 .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px}.aboutind-icon.fbl a{background:#3b5998}.aboutind-icon.twitt a{background:#19bfe5}.aboutind-icon.crcl a{background:#d64136}.aboutind-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040}.extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;}.aboutind-info{margin:10px 0 0 0;font-size:13px;text-align:center;}.aboutind-info p{margin:5px 0}.aboutind-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}.aboutind-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}.aboutind-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}.aboutind-info h4:before {margin-right:-50%;text-align:left;}
5 - إبحث عن هذا الوسم
<div id='sidebar-wrapper'>
6 - وأضف الكود التالي أسفله
          <b:widget id='HTML68' locked='false' mobile='no' title='إنضم إلينا' type='HTML'>            <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>  <div class='widget-content'><div class='sidebar_about_author'><div class='inner_wrapper'><div class='aboutind-img'><img alt='العربي ويب' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q24_s7Q6M0r6fbynMAyntmbzMRREHh0lX0Ive4nSZ88TpZoGk6QKCu0SJq701Px3pnORkqD4wnhWGV6gxTYkeJkeTYkkPaeJwP3IH9xjCnuUt2KmEIrb2w0ikAHpMkORTKIiibhF5wg/s1600/florian-de-looij-4+%25281%2529.gif' title='Indzign' width='300'/><div class='aboutfloat-img'><span class='aboutind-float'><a href='https://www.blogger.com/follow-blog.g?blogID=8827414525251920223' rel='nofollow' target='_blank' title='انضم لأصدقاء الموقع'><i class='fa fa-user'/> انضم لأصدقاء الموقع</a></span></div></div></div><div class='aboutind-info'><h4><span>العربي ويب</span></h4><p>مدونة تهتم بكل ما هو جديد في عالم التقنية وأخبار الويب</p><p>انضم الينا لمتابعة جديدنا</p></div><div class='aboutind-wrpicon'><ul class='extender'><li class='aboutind-icon fbl'><a href='//www.facebook.com/mahwouss2' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook fa-fw'/> أعجبني</a></li><li class='aboutind-icon twitt'><a href='//twitter.com/el3arabyweb' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter fa-fw'/> متابعة</a></li><li class='aboutind-icon crcl'><a href='//plus.google.com/u/0/+Mohamedkhan1' rel='nofollow' target='_blank' title='انضم لنا على جوجل+'><i class='fa fa-google-plus fa-fw'/> إنضمام</a></li></ul></div></div></div></b:includable>          </b:widget>
خطوات لتعديل وتخصيص الاضافة

إستبدل الرابط الملون بالبنفسجي برابط صورة تناسبك
إستبدل الرابط الملون بالاخضر بالـ ID الخاص بمدونتك
إستبدل الرابط الملون بالأزرق برابط صفحتك في فيس بوك
إستبدل الرابط الملون بالأزرق الفاتح برابط صفحتك في تويتر
إستبدل الرابط الملون بالأحمر برابط صفحتك في جوجل بلس
إستبدل الجملة الملونة بالبرتقالي بما يناسبك

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

تعليق

أحدث أقدم