إضافة الأقسام بشكل إحترافى لمدونه بلوجر بتقنية css

مرحباً بعودتك متابع مدونة "تعلم بلوجر" هنا في هذا المقال، طريقة إضافة الأقسام بشكل إحترافى لمدونه بلوجر بتقنية css, يبدو أن لهذه الإضافة إستخدمات عديدة, يمكنك الإستفادة من الإضافة في وضعها كقائمة صفحات داخل مدونة بلوجر الخاصة بك أو قائمة للأقسام , كما يمكنك التعديل علي الوان الأقسام المختلفة واستخدام الاتجاهين العمودي والأفقي للقائمة.

معاينة إضافات بلوجر

See the Pen
css إضافة الأقسام بشكل إحترافى لمدونه بلوجر بتقنية by Skatsofrink (@Skatsofrink)
on CodePen.

1. قم بتسجيل الدخول إلي مدونة بلوجر من هنا.
2. أنتقل ألي لوحة تحكم مدونتك.
3. إختر "تخطيط" ثم قم بإضافة أداة جديدة أختر HTML/javaScript.
4. أدخل الكود التالي داخل المربع .
5. أحفظ, الأن تم التركيب.

  <!-- blogger-educ.blogspot.com widget --> <style type="text/css"> .Blogger-Widget-ahtrafy-up a { display:block; background:#eee; border:1px solid #ccc; margin: 0 0 20px 0; height:50px; width:140px; overflow:hidden; text-decoration:none; font-family:inherit; font-size:16px; color:#000000; text-shadow:0 1px 2px rgba(0, 0, 0, 0.75); } .Blogger-Widget-ahtrafy-up h5 { color:#000000; margin-top:0px; height:65px; text-align:center; line-height:40px; -webkit-transition: margin-top 0.2s linear; } .Blogger-Widget-ahtrafy-up a:hover h5{ margin-top:-90px; } .Blogger-Widget-ahtrafy-up div { font-family:inherit; font-size:17px; color:#FFFFFF; text-align:center; padding:0px; opacity: 0; -webkit-transition: all 0.3s linear; -webkit-transform: rotate(10deg); } .Blogger-Widget-ahtrafy-up a:hover div { opacity: 1; -webkit-transform: rotate(0deg); } .Blogger-Widget-ahtrafy-up a:nth-child(1) div { background: #6a5acd; line-height:100px;} .Blogger-Widget-ahtrafy-up a:nth-child(2) div { background: #98bf0d; line-height:70px;} .Blogger-Widget-ahtrafy-up a:nth-child(3) div { background: #01b0ec; line-height:70px;} .Blogger-Widget-ahtrafy a{ text-decoration:none; margin:10px; font-family:inherit; font-size:8px; font-weight:bold; color:#000000; overflow:hidden;-webkit-transition: All 1s ease;-moz-transition: All 1.5s ease;-o-transition: All 1.5s ease;-ms-transition: All 1.5s ease;transition: All 1.5s ease; } .Blogger-Widget-ahtrafy a:hover{ text-decoration:none; margin:75px; font-family:inherit; font-size:13px; font-weight:bold; color:#1fd4e9;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease; } </style> <center> <table> <tr> <td> <section class="Blogger-Widget-ahtrafy-up"> <a href="/p/blogger-templates.html"> <h5> قوالب بلوجر </h5> <div>أنطلق</div> </a> </section></td><td> <section class="Blogger-Widget-ahtrafy-up"> <a href="/p/blogger-widgets.html"> <h5> إضافات بلوجر </h5> <div>أنطلق</div> </a> </section></td><td> <section class="Blogger-Widget-ahtrafy-up"> <a href="/p/education-blogger.html"> <h5> شروحات بلوجر </h5> <div>أنطلق</div> </a> </section></td> <td> </td></tr> </table> <center/></center></center> <!-- /blogger-educ.blogspot.com widget -->

ملحوظة

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

نرحب بالإستفسار والتعليق