تغيير شكل سحابة تسميات بلوجر إلى انماط جميلة وإحترافية

مرحبا بعشاق بلوجر, اليوم سوف أشارك معكم كيفية تغيير شكل انماط التسميات في مدونة بلوجر أو أقسام المدونة أو التصنيف وهي مهمة لكل مدونة بلوجر لتقسيم المدونة إلى أقسام منوعة, على سبيل المثال: بلوجر, قوالب بلوجر, إضافات بلوجر

كيفية إضافتها إلى مدونتك: يمكن إضافتها من خلال لوحة التحم في مدونتك -->> التخطيط -->> إضافة أداة ثم نقوم بالإختيار من بين الادوات أداة

ولكن الشكل التقليدي لها ليس جميل ولا يعطي رونق خاص بمدونتك لذلك اليوم سوف نتعلم كيف نقوم بتجميل تسميات مدونة بلوجر بـ 5 أشكال يمكنك أختيار الشكل المناسب مع قالب مدونتك.

كيفية تجميل تسميات مدونة بلوجر

أولا توجه إلى التخطيط ثم إضافة اداة ثم اختر التسميات, وإذا كانت مضافة لديك بالفعل قم بتحريرها ثم إضبط الأداة كما هي بالصورة التالية:

بعد ذلك توجه إلى القالب ثم انقر على تحرير html الآن أبحث عن الرمز ]]></b:skin> ثم أختر الشكل الذي تراه مناسب مع قالب مدونتك ثم ألصق الكود الخاص به فوق الرمز ]]></b:skin> بشكل مباشر.

الشكل 1

label-size{
 margin:0;
 padding:0;
 position:relative;

} 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
text-decoration:none;
  background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
   text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  }
  .label-size a:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
     }

الشكل2

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ text-decoration:none; float:left; height:18px; line-height:18px; position:relative; margin-bottom: 9px; margin-left:10px; padding:10px; background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #333; font: bold 12px verdana; text-align: center; text-shadow: 0 1px 0 #eee; } .label-size a:hover { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb)); background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(top, #dddddd, #bbbbbb); border: 1px solid #bbb; border-bottom: 1px solid #999; text-shadow: 0 1px 0 #ddd; } button.clean-gray:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }

الشكل3

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:18px; line-height:18px; position:relative; font:14px verdana; margin-bottom: 9px; margin-left:10px; padding:10px; color: #fff; background: #48C9FF; background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%); text-shadow: #29a3cc 0 1px 3px; text-decoration:none; border-top-left-radius: 10px 50px; border-bottom-left-radius: 10px 50px; border-top-right-radius: 10px 50px; border-bottom-right-radius: 10px 50px; -moz-border-radius-topleft: 10px 50px; -moz-border-radius-topright: 10px 50px; -moz-border-radius-bottomright: 10px 50px; -moz-border-radius-bottomleft: 10px 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .label-size a:hover { -moz-border-radius-topleft: 50px 50px; -moz-border-radius-topright: 50px 50px; -moz-border-radius-bottomright: 50px 50px; -moz-border-radius-bottomleft: 50px 50px; border-top-left-radius: 50px 50px; border-bottom-left-radius: 50px 50px; border-top-right-radius: 50px 50px; border-bottom-right-radius: 50px 50px; }

الشكل 4

الشكل5

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:18px; line-height:18px; position:relative; font:14px verdana; margin-bottom: 9px; margin-left:10px; padding:10px; -webkit-box-shadow: inset 0 1px 0 0 #96ca6d; -moz-box-shadow: inset 0 1px 0 0 #96ca6d; box-shadow: inset 0 1px 0 0 #96ca6d; background-color: #7fbf4d; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f)); background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f); background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f); background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f); background-image: -o-linear-gradient(top, #7fbf4d, #63a62f); background-image: linear-gradient(top, #7fbf4d, #63a62f); border: 1px solid #63a62f; border-bottom: 1px solid #5b992b; color:#fff; text-decoration:none; border-bottom-right-radius: 30px; border-top-left-radius: 30px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .label-size a:hover { text-shadow:5px 5px 5px #dcdcdc; background:orange; border:1px solid orange; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 30px; border-top-right-radius: 30px; }

ثم أحفظ القالب وقم بمعاينة مدونتك كيف أصبحت تبدو