السلام عليكم ورحمة الله تعالى وبركاته, اليوم سنقدم لكم اضضافة جميلة وخفيفة لمدونات بلوجر وهي اضافة للتعريف عن المدونة مع ايقونات التواصل الاجتماعي وزر الانضمام الى المدونة, اضافة انصحكم بها ليتعرف الزائر عن المدونة خلال الدخول اليها, تحتوي الاضافة ايظا عن صورة شخصية لتعطي جمالية اكثر للاضافة, اترككم الان مع طريقة التركيب.
طريقة التركيب
- أولا نقوم بالذهاب الى تحرير القالب
- ثم نبحث باستعمال 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>
- يبقى عليك تغيير الملون بما يناسبك
- الأحمر: اسم مدونتك
- الأخضر: رابط الصورة
- الأزرق: الكلام المناسب لك
- البرتقالي: روابط مواقع التواصل الاجتماعي الخاصة بك
- البنفسجي: رابط الانضمام الى المدونة
المصدر نكهة التقنية
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).