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

تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة مدهبة 

لاضافة ازرا جديدة باسماء فى المدونة وبدون دخول لوحة التحكم وتستخدم فى اضافة اى زر جديد من التخطيط وباى عدد وربطة بالروابط كلاتى 

هذا هو الكود لعدد 6 ازرار مع العلم تغير الاسم فقط 

بالشكل التالى 

<CENTER> <!--  فهرس الموقع 1  --> <style type="text/css"> #fbml_turk13 { width: 150px; font-family: Verdana, Geneva, sans-serif; } #fbml_turk13 li a { height: 30px; text-decoration: none; text-align: center; } #fbml_turk13 li a:link, #fbml_turk13 li a:visited { color: #FFFF66; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHV2inn8Dzvj-IjEiwHyN8lmXD976IjTGDbLo17HiZN4M5Hm6RapmWJLgU2Fiws0rUSXAIC6EPhv6YiB7mh9t24WqkmVVic-hJys0A86d99ULi-S4Gp48b8Mwlc2SitgrhrQe0TE0XNE2c/h120/71.png); padding: 10px 0 0 0px; } #fbml_turk13 li a:hover, #fbml_turk13 li a:active { color: #3333CC; background: url(https://lh3.googleusercontent.com/-dOxre81zoAc/TqxXYQRBzGI/AAAAAAAAAkE/KqtL1ngVKy0/h120/70.png) 0 -45px; padding: 10px 0 0 0px; } #fbml_turk13 ul li { font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12px; } </style> <div id="fbml_turk13"><ul> <table style="width: 100%"> <tr> <center> <A HREF="http://mrqas.blogspot.com/"> تم التصميم بواسطة كن داعيا للخير </A> <center> <!-- الزر الأول --> <tr> <td><li><a href="اللينك الأول" title="الزر الأول"><b> كيفية إضافة زر 1</b></a></li></td> </tr> <!-- الزر الثانى --> <tr> <td><li><a href="اللينك الثانى" title="الزر الثانى"><b> أندرويد 2</b></a></li></td> </tr> <!-- الزر الثالث --> <tr> <td><li><a href="http://mrqas.blogspot.com/" title="الزر الثالث"><b> فوتوشوب 3 </b></a></li></td> </tr> <!-- الزر الرابع --> <tr> <td><li><a href="اللينك الرابع" title="الزر الرابع"><b> أغلف الفس بك 4</b></a></li></td> </tr> <!-- الزر الخامس --> <tr> <td><li><a href="اللينك الخامس" title="الزر الخامس"><b>اضافات بلوجر 5</b></a></li></td> </tr> <!-- الزر السادس --> <tr> <td><li><a href="اللينك السادس" title="الزر السادس"><b>مدونة ضافة مميزة  6</b></a></li></td> </table> </ul> </div> </CENTER

100حجم ديكور الزر

13لو تغيرعن 13 يلغى ديكور الزروتبق كتابة عنوين فقط

12حجم الخط على الزر

3لو تغيرعن 3 يختفى الزر بمرور الموس علية 

30 عرض الزر 

ترويسة الزر 

<CENTER> <!-- مدونة الغالى1  --> <style type="text/css"> #fbml_turk13 { width: 150px; font-family: Verdana, Geneva, sans-serif; } #fbml_turk13 li a { height: 30px; text-decoration: none; text-align: center; } #fbml_turk13 li a:link, #fbml_turk13 li a:visited { color: #FFFF66; display: block; background: url(https://lh4.googleusercontent.com/-vrGEfxe3rjs/TqxXYdNiU0I/kM/yI8GpmHqJRg/h120/71.png); padding: 10px 0 0 0px; } #fbml_turk13 li a:hover, #fbml_turk13 li a:active { color: #3333CC; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupLNTWintw4i_4QkvVMxDEUej33hzTE_iSCR_ZowAT-ToQe5NypNvrZ8GIoO1UEtVdLQlTb9X9evpvsH5WzCyfSbyx34x71HkvlsjIFGFcsRAL9e6p0b0pbuZlyuSYaGcCTVN3d_RrXeP/h120/70.png) 0 -45px; padding: 10px 0 0 0px; } #fbml_turk13 ul li { font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12px; } </style> <div id="fbml_turk13"><ul> <table style="width: 100%"> <tr> <center> <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة ابو غالى </A> <center>

بينات الزر 

<!-- الزر الأول --> <tr> <td><li><a href="اللينك الأول" title="الزر الأول"><b>مدونة ابو غالى 1</b></a></li></td> </tr> 

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

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

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

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

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

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

الشكل 1

************************************************************************************* 

الشكل 2

.label-size{
 margin:0;

position:relative;
padding:0;
 } 

text-decoration:none;
.label-size a{
 float:left;

line-height:18px;
height:18px;
 position:relative;

padding:10px;
margin-bottom: 9px;
 margin-left:10px;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-color: #eeeeee;

background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);

background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);

border-radius: 3px;
border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: #333;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
font: bold 12px verdana;
    text-align: center;
  text-shadow: 0 1px 0 #eee;
  }
  .label-size a:hover {
    background-color: #dddddd;

background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);

border: 1px solid #aaa;
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-bottom: 1px solid #888;

box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
-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;

الشكل 3

.label-size{
 margin:0;

position:relative;
padding:0;

 } 

float:left;
.label-size a{
 height:18px;

position:relative;
line-height:18px;
 font:14px verdana;

padding:10px;
margin-bottom: 9px;
 margin-left:10px;
 color: #fff;

background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: #48C9FF;

background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);

background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 text-shadow: #29a3cc 0 1px 3px;
 text-decoration:none;   

border-bottom-right-radius: 10px 50px;
border-top-left-radius: 10px 50px;
 border-bottom-left-radius: 10px 50px;
 border-top-right-radius: 10px 50px;
 -moz-border-radius-topleft: 10px 50px;

-webkit-transition: all 0.5s ease;
-moz-border-radius-topright: 10px 50px;
 -moz-border-radius-bottomright: 10px 50px;
 -moz-border-radius-bottomleft: 10px 50px;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;

-moz-border-radius-bottomright: 50px 50px;
-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-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

.label-size{
 margin:0;

position:relative;
padding:0;

 } 

float:left;
.label-size a{
 height:18px;

position:relative;
line-height:18px;
 font:13px verdana;

padding:10px;
margin-bottom: 9px;
 margin-left:10px;

border-radius: 3px;
text-decoration:none;
    background-color: #ff4c47;

-moz-box-shadow: 0 2px 0 #db443d;
box-shadow: 0 2px 0 #db443d;
    -webkit-box-shadow: 0 2px 0 #db443d;

background-color: #db443d;
color: #fff;
   
    text-align: center;
}

.label-size a:hover {

}

الشكل 5

.label-size{
 margin:0;

position:relative;
padding:0;
 } 

float:left;
.label-size a{
 height:18px;

position:relative;
line-height:18px;
 font:14px verdana;

padding:10px;
margin-bottom: 9px;
 margin-left:10px;

-moz-box-shadow: inset 0 1px 0 0 #96ca6d;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
background-color: #7fbf4d;
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);

background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);

border-bottom-right-radius: 30px;
background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
 color:#fff;
 text-decoration:none;

.label-size a:hover
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;
 } 
{

border-top-right-radius: 30px;
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;

}