من شاهد اعمالى
السبت، 25 أبريل 2015
أهلا و سهلا بزوارنا الكرام .اليوم اضافة جديدة و رائعة عبارة عن تغيير شكل سحابة التسميات و الاقسام عند تمرير الماوس عليها.هذه الاضافة تزيد مدونتك أناقة و جاذبية....في هذا الموضوع سأقدم عدة أشكال في موضوع واحد .
اختر الشكل الذي يعجبك وأضفه الى مدونتك.
هذه الاضافة لها عدة أشكال و تأثيرات وكل شكل له كود خاص سنتطرق في البداية الى طريقة تركيب الكود ثم سنعرض الشكل و الكود المناسب له.
تركيب الاضافة:
1- من لوحة التحكم >>> قالب >>> تحرير html (احفظ نسخة من القالب)
2- ابحث بواسطة ctrl+f عن الوسم : ]]></b:skin>
3- انسخ الكود الذي اخترته وضعه قبل الوسم مباشرة.
4- احفظ القالب.
الآن اختر الشكل المناسب لمدونتك
الشكل 1
كود الاضافة
/*----- Labels Cloud effects widget by http://rydnet.blogspot.com----*/
.label-size{
background-color: #FBFBFB;
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: 3px solid #BAB4B8;
border-radius:10px;
float:left;
text-decoration:none;font-size:15px;color:#666;}
.label-size:hover {
background-color: #FBFBFB;
border:3px solid #000000;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0 4px 2px #555;
-moz-box-shadow: 0 5px 2px #555;
-webkit-box-shadow: 0 5px 2px #555;
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
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 {
text-transform: uppercase;
float:center;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
الشكل2
كود الاضافة
/*-----Labels Cloud effects widget by http://rydnet.blogspot.com----*/
.label-size{
background-color: #FBFBFB;
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: 3px solid #BAB4B8;
border-radius:10px;
float:left;
text-decoration:none;font-size:15px;color:#666;}
.label-size:hover {
background-color: #FBFBFB;
border:3px solid #000000;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0 4px 2px #555;
-moz-box-shadow: 0 5px 2px #555;
-webkit-box-shadow: 0 5px 2px #555;
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 {
text-transform: uppercase;
float:center;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
كود الاضافة
/*----- Labels Cloud effects widget by http://rydnet.blogspot.com----*/
.label-size{
background-color: none;
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: 2px solid #545353;
border-radius:5px;
float:left;
text-decoration:none;font-size:15px;color:#666;}
.label-size:hover {
background-color: #DEDDDD;
border:none;
border-radius:10px;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0 4px 2px #555;
-moz-box-shadow: 0 5px 2px #555;
-webkit-box-shadow: 0 5px 2px #555;
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 {
text-transform: uppercase;
float:center;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
الشكل4
كود الاضافة
/*----- Labels Cloud effects widget by http://rydnet.blogspot.com----*/
.label-size{
background-color: #EEBE7F;
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: none;
border-radius:5px;
float:left;
text-decoration:none;font-size:15px;color:#666;}
.label-size:hover {
background-color: #EE8B0B;
border:none;
border-radius:7px;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0 2px 1px #555;
-moz-box-shadow: 0 3px 1px #555;
-webkit-box-shadow: 0 3px 1px #555;
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 {
text-transform: uppercase;
float:center;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
كود الاضافة
/*----- Labels Cloud effects widget by http://rydnet.blogspot.com----*/
.label-size{
background-color: #ECCAEA;
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: none;
border-radius:10px;
float:left;
text-decoration:none;
font-size:15px;
color:#666;}
.label-size:hover {
background-color: #DBE2EA;
border:none;
border-radius:10px;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0 0px 0px #555;
-moz-box-shadow: 0 0px 0px #555;
-webkit-box-shadow: 0 0px 0px #555;
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 {
text-transform: uppercase;
float:center;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
تنبيه هام : قد تختلف تسمية أداة الكلمات الدلالية في قالب مدونتك .في الكود أعلاه اسم الاداة هوlabel-size ابحث في قالب مدونتك عن اسم أداة الكلمات الدلالية و استبدلها في الكود أعلاه باسم الاداة لديك.
مبروك انتهت الاضافة ........
انتهت الاضافة..........
مع تحيات محمود غـــالى ...........
أشكال أخرى لسحابة التسميات وتأثيرات رائعة جدا |
تغيير شكل سحابة التسميات-2 - جديد ! |
تغيير شكل سحابة التسميات-3 - جديد ! |
تغيير شكل سحابة التسميات-4 - جديد ! |
تغيير شكل سحابة التسميات-5 - جديد ! |
0 التعليقات
الاشتراك في:
تعليقات الرسالة (Atom)
المشاركات الشائعة
-
السلام عليكم ورحمة الله وبركاته أهلآ بكل متابعى و زوار مدونة الغالى الكرام سنتعرف اليوم بأذن الله على كود يبحث عنه الكثير من المدونين و... -
بسم الله و الحمد لله و الصلاة و السلام على المصطفى الأمين نبينا محمد العدنان و على الآل و الصحب أجمعين. السلام عليكم و رحمة الله. بعد أن ... -
طريقة التحكم في حجم الهيدر فى قوالب بلوجر شرح كامل header قسم إضافات بلوجر كل التدوينات السلام عليكم ورحمة الله تعالى و... -
أسهل طريقة لإضافة Slider Show للمدونة عمل احترافي بسم الله الرحمان الرحيم من أجمل الاضافات التي تعطي احترافية لأي مدونة هي ...
-
سلايدر رائع لعرض مواضيعك المميزة هذا السلايد يعمل بشكل تلقائي بحيث انك لا تحتاج لإضافة صور او كتابة شئ كل ما عليك فعله هو ان تربطه بأ... -
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين سأوضح كيفية تركيبها لصفحات الفيس بوك ... -
سكربت شريط الاخبار احصل علي شريط اخبار لموقعك مجانا. يمكنك اختيار من اشرطة الاخبار التالية. ويمكنك اضافة كود شريط الاخبار في ...
-
أهلا و سهلا بكم من جديد، في هذا الموضوع سوف نتطرق الى معرفة كيفية اضافة 3 أعمدة أسفل المدونة والتي تحظى بها القليل من المدونات ،وتت...
-
سوف اقدم لكم طريقة اضافة ازرار المشاركة الاجتماعية بشكل احترافي وانيط وبسيط الاضافة مهمة لكل المدونات تقريباً لكي يتمكن ال... -
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين أقدم لكم اليوم بعض أكواد لبعض ...
