هديتى لكم : اضافة عن المدونة بشكل جديد واحترافى
الان اضافة عن المدونة بشكل جديد واحترافى
السلام عليكم ورحمة الله تعالى وبركاته متابعى مدونة مبتكرويب, اليوم سنقدم لكم اضضافة جميلة وخفيفة لمدونات بلوجر وهي اضافة للتعريف عن المدونة مع ايقونات التواصل الاجتماعي وزر الانضمام الى المدونة, اضافة انصحكم بها ليتعرف الزائر عن المدونة خلال الدخول اليها, تحتوي الاضافة ايظا عن صورة شخصية لتعطي جمالية اكثر للاضافة, اترككم الان مع طريقة التركيب.
الان طريقة التركيب
- ولا نقوم بالذهاب الى تحرير القالب
- ثم نبحث باستعمال Ctrl+F عن الوسم ]]></b:skin>
- ونضع فوقه مباشرة هذه الاكواد
.sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}.sosmedarl-img{position:relative;max-height:255px;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:'';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{text-align:center}.sosmedarl-float{text-align:center;display:inline-block}.sosmedarl-float a{background:transparent;color:#243750;padding:8px 14px;z-index:2;display:table-cell;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #243750;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 0;position:relative}.sosmedarl-wrpicon .extender{width:90%;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:fontawesome;margin:0 3px 0 0}.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:#243750}.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff}.sosmedarl-info{margin:10px 0;font-size:13px;text-align:center}.sosmedarl-info p{margin:5px 0}.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}
- الآن بعد هذه الخطوة نحفظ القالب
- وننتقل الى التخطيط
- ثم نختار آداة Html/Javasscript
- ونضع فيه هذه الاكواد
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="sosmedarl-img">
<img alt="Judul Blog" class="img-responsive" height="auto" src="http://www.m5zn.com/newuploads/2017/05/20/png//4af9a07bb9c6f3b.png" width="300" />
</div>
</div>
<div class="sosmedarl-info">
<h4><span>مبتكرويب</span></h4>
<p>مدونة تقنية عريبية تقنية, تأسست سنة 2016 هذفها نشر مواضيع تقنية والمتعلقة بالبلوجر, تسعى الى الارتقاء بالويب العربي والمغربي الى الافضل, مديرها محمد ابراهيم.</p>
</div>
<div class="aboutfloat-img"><span class="sosmedarl-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=3016169891337403942" rel="nofollow" target="_blank" title="Join Our Site"><i class="fa fa-user"></i> إنضم إلينا</a></span></div>
<div class="sosmedarl-wrpicon">
<ul class="extender">
<li class="sosmedarl-icon fbl"><a href="https://www.facebook.com/moptkerweb" target="_blank" title="تابعنا على فيسبوك"><i class="fa fa-facebook fa-fw"></i></a></li>
<li class="sosmedarl-icon twitt"><a href="https://twitter.com/Moptker_web" target="_blank" title="تابعنا على تويتر"><i class="fa fa-twitter fa-fw"> </i></a></li>
<li class="sosmedarl-icon crcl"><a href="https://plus.google.com/u/0/+MohamedEbrahemELJOKER2" rel="nofollow" target="_blank" title="تابعنا على جوجل بلس"><i class="fa fa-google-plus fa-fw"></i></a></li>
</ul>
</div>
</div>
مبروك عليك الاضافة
اذا واجهتك اى مشاكل قباب التعليقات مفتوح دائما
0 comments