‏إظهار الرسائل ذات التسميات قوائم منسدلة. إظهار كافة الرسائل

الخميس، 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 التعليقات

الأحد، 26 أبريل 2015

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

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

قمت بتقديم 4 دروس حول تغيير شكل سحابة التسميات الى أشكال مختلفة .كل درس فيه أشكال جميلة وتأثيرات جذابة لسحابة التسميات في بلوجر.اليوم درس جديد يصب في نفس الموضوع وهو تغيير شكل سحابة التسميات .سوف أقدم فيه المزيد من الاشكال الأنيقة و التأثيرات الرائعة.

تركيب الاضافة

1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)

2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>

3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.

4- احفظ القالب .

تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)

الشكل 1

كود الاضافة

/* ------Sidebar Label Cloud  By http://rydnet.blogspot.com/---------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;} - See more at: http://rydnet.blogspot.com/2013/11/labels-cloud-widget-some-efficts4.html

الشكل 2

كود الاضافة

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
display:inline-block;float:none;font-family:”Trebuchet MS”,”Arial”,”Helvetica”,sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#1BA1E2;color:#fff !important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;
}
.label-size:hover {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px rgb(0,0,50);box-shadow:0 0 10px rgb(0,0,50);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=’auto expand’);
zoom: 1;
}
.label-size a  {
display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:”Trebuchet MS”,”Arial”,”Helvetica”,sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#252c44;color:#fff !important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);
}
.label-size a:hover  {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px rgb(0,0,50);box-shadow:0 0 10px rgb(0,0,50);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);-webkit-transform:rotate(-3deg) scale(1.2);-moz-transform:rotate(-3deg) scale(1.2);-o-transform:rotate(-3deg) scale(1.2);background-color:#0c92da;transform:rotate(-3deg) scale(1.2);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);background-color:#0c92da;-webkit-transform:rotate(2deg) scale(1.2);-moz-transform:rotate(2deg) scale(1.2);background-color:#0c92da;-o-transform:rotate(2deg) scale(1.2);transform:rotate(2deg) scale(1.2);
}

الشكل 3

كود الاضافة

.label-size a {
font-size: 14px!important;
padding: 1px 6px;
border-top: 1px solid #CACACA;
border-left: 4px solid #00A8FF;
margin-bottom: 5px;
float: left;
margin-right: 5px;
background: #F5F5F5;
border-right: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
}
.label-size a:hover {
border-left: 2px solid #222222;
border-right: 3px solid #222222;
background: #fff;
}

الشكل 4

كود الاضافة

.label-size a {
text-transform: uppercase;
float: left;
text-decoration: none;
margin: 0 3px 6px 0;
padding: 3px;
border: solid 1px #999;
border-radius: 3px;
font-size: 12px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.label-size a:hover {
border: 1px solid black;
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}

الشكل5

كود الاضافة

.label-size a {
text-transform: uppercase;
float: left;
text-decoration: none;
margin: 2px 3px 6px 0;
padding: 3px;
border: solid 1px #999;
border-radius: 3px;
font-size: 12px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-moz-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-ms-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
-o-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);
}
.label-size a:hover {
border: 1px solid black;
-webkit-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-ms-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);
}

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-4 - جديد !

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

انتهينا من الاضافة........

مع تحيات محمود غالـــى .........

إقرأ المزيد...

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

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

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

قمت بتقديم 3 دروس حول تغيير شكل سحابة التسميات الى أشكال مختلفة .كل درس فيه أشكال جميلة وتأثيرات جذابة لسحابة التسميات في بلوجر.اليوم درس جديد يصب في نفس الموضوع وهو تغيير شكل سحابة التسميات .سوف أقدم فيه المزيد من الاشكال الأنيقة و التأثيرات الرائعة.

تركيب الاضافة

1- من لوحة التسجيل >>> قالب >>> تحرير HTML (احفظ نسخة من القالب)

2- ابحث بواسطة CTRL+F على الوسم : ]]></b:skin>

3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.

4- احفظ القالب .

تنبيه : لا تنس اضافة أداة التسميات من خلال تخطيط >>> اضافة أداة >>> التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)

الشكل 1

كود الاضافة

/*-----Custom Labels widget by http://rydnet.blogspot.com/----*/
#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid; 
border-bottom-color: #D8D8D8;}

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

الشكل 2

كود الاضافة

#Label1 a{
position:relative !important;
margin:4px;
padding:3px;
float:left;
white-space:nowrap;
background:#E0DDDD;
color:#454242;
border:1px solid #454242;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
font-family: "Arial","Helvetica",sans-serif;
font-size:12px;
text-decoration:none;
text-transform:capitalize;
-moz-transition:all .6s linear ;
-webkit-transition:all .6s linear ;
-o-transition:all .6s linear ;
transition:all .6s linear ;
}
#Label1 a:hover {
background:#6992E9;
color:#F3F4F8;
-moz-transition:all .3s ease ;
-webkit-transition:all .3s ease ;
-o-transition:all .3s ease ;
transition:all .3s ease ;
}

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

الشكل 3

كود الاضافة

/* http://rydnet.blogspot.com/ BY LABEL Custom Cloud--------------------------------------------- */ .Label a{ padding-left:20px; background:#000; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important; 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:10px; margin-bottom:5px;} .Label a:hover{ color:#fff !important; background:#e25f07 }

الشكل 4

كود الاضافة

 .label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 15px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
    color: #000000;
    border: 1px dotted #FFFFFF;
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#330000',GradientType=0 );
}
.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
    text-decoration: none;
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 );
}

الشكل5

كود الاضافة

    .label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 15px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
    color: #000000;
    border: 3px solid #FFFFFF;
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#330000',GradientType=0 );
}
.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
    text-decoration: none;
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 );
}

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-5 - جديد !

انتهينا من الاضافة........

مع تحيات محمود غالـــى .........

إقرأ المزيد...

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

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

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

تسجيل الدخول

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

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

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

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

0

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

المتابعون

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

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

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

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

تركيب الاضافة

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-4 - جديد !

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

تركيب الاضافة

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-5 - جديد !

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

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

من اعمالى

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

من اعمالى

من اعمالى

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

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

تسجيل الدخول

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

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

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

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

0

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

المتابعون

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

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

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

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

تركيب الاضافة

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-4 - جديد !

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

تركيب الاضافة

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

تغيير شكل سحابة التسميات-1 - جديد !

تغيير شكل سحابة التسميات-2 - جديد !

تغيير شكل سحابة التسميات-3 - جديد !

تغيير شكل سحابة التسميات-5 - جديد !

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

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

من اعمالى

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

من اعمالى

من اعمالى

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