طريقة التركيب
- أولا نقوم بالذهاب الى تحرير القالب
- ثم نبحث باستعمال 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="https://b.top4top.net/p_506qxa2f1.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/nak1ha/" target="_blank" title="تابعنا على فيسبوك"><i class="fa fa-facebook fa-fw"></i></a></li>
<li class="sosmedarl-icon twitt"><a href="https://www.twitter.com/nak1ha/" 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/117526277138998925869" rel="nofollow" target="_blank" title="تابعنا على جوجل بلس"><i class="fa fa-google-plus fa-fw"></i></a></li>
</ul>
</div>
</div>
- يبقى عليك تغيير الملون بما يناسبك
- الأحمر: اسم مدونتك
- الأخضر: رابط الصورة
- الأزرق: الكلام المناسب لك
- البرتقالي: روابط مواقع التواصل الاجتماعي الخاصة بك
- البنفسجي: رابط الانضمام الى المدونة
لا تقرأ وترحل .. شارك قول رأيك
0 تعليقات: