اضافة صندوق التعريف بالكاتب في السيدباربشكل جديد - اضافات بلوجر.


Add author box for templete blogger-slidbar
اضافة صندوق التعريف بالكاتب في السيدبار

اضافة التعريف بالكاتب واحدة من اضافات بلوجر التي لاتقل اهمية ، حيث تسهل للزائر معرفة كاتب التدوينة والتواصل معه ، ومن ناحية اخرى اضافة صندوق التعريف بالكاتب يساهم في جلب الزوار ربما تتساءل كيف في يومنا هذا الزوار تستهدف الشخص لثقتهم في مواضيعه .

اضافة صندوق التعريف بالكاتب في السيدبار

- الاضافة مصممة بأكواد CSS3 .
- كما في الصورة انظر لجمالية اضافة صندوق التعريف بالكاتب وايقونات التواصل الاجتماعي الخاصة بها الاضافة يمكنك تركيبها في قالب بلوجر بطريقتبن ليست في السيدبار فقط ، يمكنك وضعها أسفل المواضيع ، كي لاأطيل عليكم لكم حرية الاختيار في ذلك حسب قالب بلوجر الذي تعمل عليه .

اقرأ أيضا: اضافات بلوجرجديدة وحصرية 2016.

كيفية تركيب الاضافة :
- توجه للوحة التحكم - تحرير - استخرج صندوق البحث داخل قالب بلوجر الخاص بك  CTRL+F- ابحث عن الكود التالي</style>
- قم بنسخ كود CSS3التالي وضعه قبلها مباشرة .
 /* About Me 2 Hamza Guerri */
[class*=&quot;entypo-&quot;]:before {font-family: &#39;entypo&#39;, sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none; transition: all .4s; }
.container { margin: 0 auto; }
.container:hover .author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; }
.author2:before { content: &quot;&quot;; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url(&quot;https://4.bp.blogspot.com/-tyfKVlP-i3w/Vpwk5JW7GsI/AAAAAAAAANI/ErhqC5qKLxY/s320/2016-01-18_003117.pngpg&quot;) no-repeat; background-size: 80px; border-radius: 100%; }
.author2  h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
.author-body a:hover { background: #515761; }
.author-body a:last-child { border-right: none; }
.foot { /*height: 100px;*/ }
[class^=&quot;footItem&quot;] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^=&quot;footItem&quot;] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background: #dd4b39;    color: white!important;}
.footItem2 { background: #3b5998;    color: white!important; }
.footItem3 { background: #00aced;     color: white!important;}
.widget-content {    box-shadow: 0 0 0 0px #D3D3D3;} 
- قم بتغيير الصورة كما هو مبين في الرابط التالي :
https://4.bp.blogspot.com/-tyfKVlP-i3w/Vpwk5JW7GsI/AAAAAAAAANI/ErhqC5qKLxY/s320/2016-01-18_003117.png
- قم بحفظ قالب بلوجر  وتوجه الى التخطيط  قم بالاختيار اين تريد ان تضعها اسفل السيدبار أو اعلاه حسي رغبتك
افتح نافذة JAVASCRIPI/HTML جديدة وضع الكود التالي داخلها
 <div class="container">
<div class="author2">
        <h6>Hamza Guerri</h6>
        The Designer
    </div>

    <div class="foot">
    <a href="https://plus.google.com/u/0/+HA07ZA" class="footItem1"><span class="entypo-heart"></span>Google+</a><a href="https://www.facebook.com/islam777777" class="footItem2"><span class="entypo-user"></span>Facebook</a><a href="https://twitter.com/HA07ZA" class="footItem3"><span class="entypo-plus"></span>Twitter</a>
  </div>
</div> 
- قم بحفظ قالب بلوجر خاصتك وانظر النتيجة .

حمــزة  مدون جزائري ارحب بك في مدونتي كيف برامج وبلوجرنافذتي المفتوحة على العالم لدعم المحــتوى العربــي ، نتمنى أن يكون مروركـــم علينا مفيـــدا كما نتمنى منكم دعمنا على المواقــع الاجتماعيـة كيف برامج وبلوجر
ندعوك للإشتراك بـ: القائمة البريدية لمدونة كيف

اشترك الآن Subscribe

الموضوع السابق
الموضوع الأول

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