الخميس، 14 مايو 2015

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

3:23 ص | مرسلة بواسطة الجنرال محمود غالى | | تعديل الرسالة

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

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

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

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

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

<CENTER>  <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/AVvXsEiudcMCfOzLzv2_uxvqZlMo2eS3wrvxrXbSAxQQYCsv1gQjwCkol2I0bHRjxpS7cwaXt-Bi5sftoB4TzRsFVk7XV9VO8lKVMmTo6gFfVoU-UIBGFPCYMleURC8RMLn8rr6oGAs0juwtc24n/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://conda3ianllkhir.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://conda3ianllkhir.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>  <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/AVvXsEiNMaf13pJnObSVOksau2cEIWuBLlUisRIB2gaGXegPLiQg8aEQ5yQq48gyAfq_NnS0NEKycwUOyBVnAzU_WvW9Mfpq7jr32AB2ko07b_67HiAooDF_U0VbH2KexzBSb4P_m354C9gwfMem/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;

}

ثم أحف

التسميات: قوائم منسدلة

التعليقات

0 التعليقات

اخر أخبار مصر أخبار العالم العربى أخبار الرياضة

( محمـــــــــــــــــــود غــــالـــــــى )

تسجيل الدخول

تــــــــــــابـــع اعمـــــــــــــــــــالــــــــى

من اعمـــــــــــــــــــــالـــــــــــــى

مســـــاحة اعـــــلانيـــــة

.باب دخول الادارة

0

من شاهد اعمالى

المتابعون

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

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

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

0 التعليقات:

إرسال تعليق

تــــابع اعمـــــــــا لــــــــــــى

استمع الى القران

من اعمالى

المشاركات الشائعة

من اعمالى

من اعمالى

اخر أخبار مصر ** أخبار العالم العربى ** أخبار الرياضة

( محمـــــــــــــــــــود غــــالـــــــى )

تسجيل الدخول

تــــــــــــابـــع اعمـــــــــــــــــــالــــــــى

من اعمـــــــــــــــــــــالـــــــــــــى

مســـــاحة اعـــــلانيـــــة

.باب دخول الادارة

0

من شاهد اعمالى

المتابعون

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

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

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

0 التعليقات:

إرسال تعليق

تــــابع اعمـــــــــا لــــــــــــى

استمع الى القران

من اعمالى

المشاركات الشائعة

من اعمالى

من اعمالى

اخر أخبار مصر أخبار العالم العربى أخبار الرياضة