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

لنمر الى طريقة التركيب 


أولا بالنسبة  لمن لا يضع أداة المشاركات الشائعة 
طريقة تركيبها 
من لوحة التحكم  اختر تخطيط ثم  اختر اضافة أداة  تم ستجد أداة بااسم المشاركات الشائعة  اضغط عليها 
ثم طبق ما يلي في الصورة 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtzA9jwThw2cg9YPda7cEYJvmZj6lH0TAnmkD8UmYApaAcSMQaMlFGPz8TQoKKzsLjmVN6Ch-CPHQSBMTa5W8CB5vnKrNyFSBjmK0cKeapZ5_zOVxjXDczcXf3ZAiDkJZcnoFYsVThvBL/s1600/12.gif 


 ثم الأن لنتوجه لوضع الكود طريقة سهلة 
طريقة التركيب 
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2YCahPyBmb7eSB232a1o5U6-GOv8NV0vdvFTLKWiCmYTPbht9B55iYhOQY9t5S4YrH5U9B57Q9uHOCEUgcmfeLD6oTsZHpIyorLFcXwJZuNO17DE2I2zWqI66bZbMLP4Wn6v6jzhVDMS/s1600/resized_ez.jpg
 ثم قم بالضغط على     ctrl + f   ثم قم بالبحث على  الكود التالي

]]></b:skin>

ثم ضع الكود التالي فوقه مباشرة

الكود :: الخاص  بتلوين المشاركات الشائعة 

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}


ثم قم بالحفض 

يمكنك الاكتفاء بهدا الكود الدي سيلون أداة المشاركات الشائعة وجعلها رائعة وجدابة ,  أو  اضافة  بعض التأثيرات على الصور لمزيد من الجادبية 

 كما قلت سأضع بين أديكم أكواد ستمكنك من تعديل وتزين الاضافة حسب دوقك(هدية من مدونة شامل كول)


  1. اضافة التأثيرات

  •   جعل الصور دائرية

شكل تأثيره 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAJb-DwF_ihOTKH3BXSjwx9sXxFZQdEpz2-xTOux-HCzxw5P02D_M4F51SUU7fyY_8mzcqQU8pcT2hAESnP2EGtEfWcrplCeyGDW7V778Kx5WrSEibbNrtMqffLMQtqMexKNht4yjUahL/s1600/222.bmp

سيسمح لك هدا الكود بجعل  الصور دائرية  في الاداة 

الكود الخاص به 

#PopularPosts1 img{
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


لتركيبه ضعه مباشرة فوق   ]]></b:skin>   وقم بالحفض




  •  تدوير الصور 380 درجة

شكل التأثير
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcRgc5cy6cyDCiBsxWbBwwjsOjYDSmCeUL2BG35QGtl0gCaM0d4YZvN-ajVmFwxjSfOq1dYH-gJyEoGNTU9AQCeIFdjhj4nfyo9G5j5OYr4A7S96nvKC1v-cgSjcO_en0GcUhbsY7VvtmK/s1600/333.bmp




سيسمح لك هدا الكود  باضافة تأثير المواس هوفر على الصورة و دوارن بنسبة 380 درجة 

الكود الخاص به 

#PopularPosts1 {
    max-width: 300px
}

#PopularPosts1 dd {
    float: left;
    border-bottom: none;
    margin: 8px 8px 0 8px;
    background: none;
    display: block;
    padding: 0
}

#PopularPosts1 img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

لتركيبه ضعه مباشرة فوق   ]]></b:skin>   وقم بالحفض

ساهم في نشر الموضوع :

Digg it StumbleUpon del.icio.us Google Yahoo! reddit

0 التعليقات:

إرسال تعليق