تغيير شكل التسميات وجعلها جذابة

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

كما ترون في الصورة الشكل مميز وجذاب ويتميز بـ :

ألوان متعددة لكل قسم معين

دمج عداد المواضيع في كل قسم بشكل مميز

سهلة التركيب ولن تأخد منك أكثر من دقيقة

لتركيب الشكل كل ما عليك فعله هو تحرير القالب ثم البحث عن الوسم التالي :

]]></b:skin>

ثم فوقه ضع هذا الكود :

cloud-label-widget-content { text-align: right; } .label-size { background: #5498C9; display: block; float: right; margin:0 0 3px 3px; color: #fff; font-size: 11px; text-transform: uppercase; } .label-size:nth-child(1) { background: #F53477; } .label-size:nth-child(2) { background: #89C237; } .label-size:nth-child(3) { background: #44CCF2; } .label-size:nth-child(4) { background: #01ACE2; } .label-size:nth-child(5) { background: #94368E; } .label-size:nth-child(6) { background: #A51A5D; } .label-size:nth-child(7) { background: #555; } .label-size:nth-child(8) { background: #f2a261; } .label-size:nth-child(9) { background: #00ff80; } .label-size:nth-child(10) { background: #b8870b; } .label-size:nth-child(11) { background: #99cc33; } .label-size:nth-child(12) { background: #ffff00; } .label-size:nth-child(13) { background: #40dece; } .label-size:nth-child(14) { background: #ff6347; } .label-size:nth-child(15) { background: #f0e68d; } .label-size:nth-child(16) { background: #7fffd2; } .label-size:nth-child(17) { background: #7a68ed; } .label-size:nth-child(18) { background: #ff1491; } .label-size:nth-child(19) { background: #698c23; } .label-size:nth-child(20) { background: #00ff00; } .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-count { white-space: nowrap; padding-left: 3px; margin-right: -3px; background: #333; color: #fff ; } - See more at: http://www.arabe-eye.com/2014/10/nice-cloud-labels-style-for-blogger.html#sthash.8DBuzfMt.dpuf <i class='clear'></i> <div id='postAD-bottom'></div> <i class='clear'></i> </article> </div> <div class='share'> <h7>هل ترغب في قراءة موضوعات أخرى مشابهة ؟ </h7> <a class='facebook' href='https://www.facebook.com/sharer/sharer.php?v=4&u=https://mosawraty.blogspot.com/2021/09/change.html' onclick='window.open(this.href,"_blank","width=640,height=320"); return false;' target='_blank' title='مشاركه على Facebook'></a> <a class='twitter' href='https://twitter.com/intent/tweet?url=https://mosawraty.blogspot.com/2021/09/change.html' onclick='window.open(this.href,"_blank","width=640,height=320"); return false;' target='_blank' title='مشاركه على Twitter'></a> <a class='pinterest' href='https://pinterest.com/pin/create/button/?url=https://mosawraty.blogspot.com/2021/09/change.html&media=https://web.archive.org/web/20170616133055im_/https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGQZlA8YnpX5sxt-VygrNWqXfd8s-LICZGkzoHkr1QGjPY7QeYCXjx_2UDod_3hNAVx4c-GtuJp_TWzfbuGSeiaFi11z1AWQFGJvdMxXqpvHRK767A60MdenppMUzjQiYjVHKT4En_E0b/s1600/27-10-2014+01-45-37.png&description=تغيير شكل التسميات وجعلها جذابة ' onclick='window.open(this.href,"_blank","width=640,height=320"); return false;' target='_blank' title='مشاركة على Pinterest'></a> <a class='whatsapp' data-link='https://mosawraty.blogspot.com/2021/09/change.html' data-text='تغيير شكل التسميات وجعلها جذابة '></a> <a class='print' onclick='window.print()' target='_blank' title='طباعة المقال'></a> <div class='fb-like' data-action='like' data-href='https://mosawraty.blogspot.com/2021/09/change.html' data-layout='button' data-share='false' data-show-faces='false'></div> <div class='plus-one'> <div class='g-plusone' data-annotation='none' data-href='https://mosawraty.blogspot.com/2021/09/change.html'></div> </div> <i class='clear'></i> </div> مساحة اعلانية 4 <div><div class='ha1pcauthor'> <img alt='بقلم : مصراوي' src=''/> <h3><i class='fa fa-user'></i>بقلم : مصراوي<ul id='ha1pcaucohv'> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='موقعي الإلكتروني' href='/' target='_blank'><i class='fa fa-globe'></i></a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة فيسبوك' href='https://www.facebook.com/Dot.com.dz' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i> </a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة تويتر' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a> <a class='ha1pc-tooltip ha1pc-tooltip-right' data-ha1pc-tooltip='حسابي في شبكة جوجل بلس' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a> </ul> </h3> <p><i class='fa fa-info-circle'></i>موقع متخصص أخبار التكنولوجيا والاقتصاد وتصميم المواقع</p> </div> <div class='ha1pc2-3' style='border-top-color:rgb(221,221,221);border-top-style:dashed;border-width:2px 0 0;box-sizing:border-box;font-family:ge_dinar_tworegular;font-style:inherit;font-weight:inherit;margin:16px 0px 0;outline:0;padding:14px 0 0;text-align:center;vertical-align:baseline;'></div> </div> </div> <div class='comments' id='comments'><a name='comments' title='comment form'></a><div id='Blog1_comments-block-wrapper'><dl class='avatar-comment-indent' id='comments-block'></dl></div><p class='comment-footer'> <div class='comment-form'><a name='comment-form' title='comment form'></a><p> </p> <a href='https://www.blogger.com/comment/frame/1910048656269851797?po=4738159068703117848&hl=ar&saa=85391&origin=https://mosawraty.blogspot.com' id='comment-editor-src' title='comment src'></a><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe><!--Can't find substitution for tag [post.friendConnectJs]--> <script src='https://www.blogger.com/static/v1/jsbin/1212307205-comment_from_post_iframe.js' type='text/javascript'></script><script type='text/javascript'>BLOG_CMT_createIframe("https://www.blogger.com/rpc_relay.html");</script></div> </p><div id='backlinks-container'><div id='Blog1_backlinks-container'></div></div></div> </div> <i class='clear'></i> <!--Can't find substitution for tag [adEnd]--> </div> </div><!--تعذّر عرض الأداة "HTML106". There was an error processing the markup. --><div class='widget HTML' data-version='1' id='HTML108'> </div><div class='widget HTML' data-version='1' id='HTML107'> </div><div class='widget HTML' data-version='1' id='HTML201'> <script async='async' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> <!-- 880x400 --> <ins class='adsbygoogle' data-ad-client='ca-pub-9291954134403829' data-ad-slot='9696244668' style='display:inline-block;width:880px;height:400px'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class='widget HTML' data-version='1' id='HTML202'> <script async='async' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> <ins class='adsbygoogle' data-ad-client='ca-pub-9291954134403829' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='5730433169' style='display:block; text-align:center;'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class='widget HTML' data-version='1' id='HTML203'> <script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9291954134403829" crossorigin="anonymous"></script> <!-- مصوراتي مستطيل --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9291954134403829" data-ad-slot="9077747275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class='widget ContactForm' data-version='1' id='ContactForm2'> <form class='inside-contact' name='contact-form'> <input class='contact-form-name' id='ContactForm2_contact-form-name' name='name' placeholder='الأسم' size='30' type='text' value=''/> <input class='contact-form-email' id='ContactForm2_contact-form-email' name='email' placeholder='البريد الإلكتروني' size='30' type='text' value=''/> <br/> <textarea class='contact-form-email-message' cols='25' id='ContactForm2_contact-form-email-message' name='email-message' placeholder='الرسالة' rows='5'>