آخر المقالات

الخميس، 17 سبتمبر، 2015

أضافة 30 تأثير مختلف على الصور لمدونات بلوجر
أضافة 30 تأثير مختلف على الصور لمدونات بلوجر

أضافة 30 تأثير مختلف على الصور لمدونات بلوجر


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


معاينة الاضافة

الان للشرح :
  • ادخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة 
  • ثم أنسخ هذا الكود فوقها

[code type="هذا الكود من مدونة البروفيسور الصغير فقط"]/* this code made by th3littleprofessor.com ----------------------------------------------- */
body {

font-family: 'Play', sans-serif;
width: 90%;
margin: 0 auto;
background-color: #fff;
}

article {
width: 80%;
padding 0;
margin: 0 auto;
}

article h1 {
color: #fff;
width: 95%;
padding: 5px 2.5%;
margin: 0 auto;
background-color: #4444cc;
text-align: center;
border-radius: 10px;
}
article > p {
width: 90%;
padding: 10px 5px;
margin: 0 auto;
text-align: center;
}
section {
width: 80%;
padding 20px 0;
margin: 0 auto;
}

section div {
float: left;
width: 45%;
height: auto;
padding: 0;
margin: 10px 2%;
}

section div h2 {
color: #fff;
background-color: #4B5;
width: 95%;
padding: 5px 2.5%;
margin: 5px 0;
text-align: center;
border-radius: 10px ;
}
section div img {
width: 100%;
height: auto;
}

@media only screen and (max-width:480px) {
article {
width: 95%;
}

section {
width: 98%;
}

section div {
width: 95%;
}
}

@media only screen and (min-width:481px) and (max-width:767px) {
article {
width: 90%;
}

section {
width: 95%;
}
}

.touch01{-webkit-transition-property:webkit-border-radius;-webkit-transition-duration:400ms;-webkit-transition-timing-function:ease-in;-moz-transition-property:moz-border-radius;-moz-transition-duration:400ms;-moz-transition-timing-function:ease-in;transition-property:border-radius;transition-duration:400ms;transition-timing-function:ease-in}.md76dk{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.md76dk:hover{border-radius:25%/25%}.md876dj{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.md876dj:hover{-moz-border-radius:50%/50%;-webkit-border-radius:50%/50%;border-radius:50%/50%}.mdf763md{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.mdf763md:hover{-moz-border-radius:50% 0;-webkit-border-radius:50% 0 50% 0;border-radius:50% 0 50% 0}.mjsdiu66{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.mjsdiu66:hover{-moz-border-radius:0 50%;-webkit-border-radius:0 50% 0 50%;border-radius:0 50% 0 50%}.d7sudsudy{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.d7sudsudy:hover{-moz-border-radius:100% 0;-webkit-border-radius:100% 0 100% 0;border-radius:100% 0 100% 0}.mjdk938ud{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.mjdk938ud:hover{-moz-border-radius:0 100%;-webkit-border-radius:0 100% 0 100%;border-radius:0 100% 0 100%}.rbajd8876ddjdh{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.rbajd8876ddjdh:hover{border-radius:100% 5% 0 5%}.ks7jdhdg33{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.ks7jdhdg33:hover{-moz-border-radius:5% 100% 0 5%;-webkit-border-radius:5% 100% 0 5%;border-radius:5% 100% 0 5%}.po76sjdg67{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.po76sjdg67:hover{-moz-border-radius:5% 0 5% 100%;-webkit-border-radius:5% 0 5% 100%;border-radius:5% 0 5% 100%}.jsh77is88s{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.jsh77is88s:hover{-moz-border-radius:0 5% 100%;-webkit-border-radius:0 5% 100% 5%;border-radius:0 5% 100% 5%}.s98did8{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.s98did8:hover{-moz-border-radius:0 50% 50% 0;-webkit-border-radius:0 50% 50% 0;border-radius:0 50% 50% 0}.g3ghgs88jj{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.g3ghgs88jj:hover{-moz-border-radius:50% 0 0 50%;-webkit-border-radius:50% 0 0 50%;border-radius:50% 0 0 50%}.yu7dyeudy{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.yu7dyeudy:hover{-moz-border-radius:100% 100% 0 0;-webkit-border-radius:100% 100% 0 0;border-radius:100% 100% 0 0}.osud7736hd{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.osud7736hd:hover{-moz-border-radius:0 0 100% 100%;-webkit-border-radius:0 0 100% 100%;border-radius:0 0 100% 100%}.mlka7838udj{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.mlka7838udj:hover{-moz-border-radius:50%/10%;-webkit-border-radius:50%/10%;border-radius:50%/10%}.isuj97e63hj{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.isuj97e63hj:hover{-moz-border-radius:10%/50%;-webkit-border-radius:10%/50%;border-radius:10%/50%}.syss7uej{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.syss7uej:hover{-moz-border-radius:50%/5%;-webkit-border-radius:50%/5%;border-radius:50%/5%}.nbvghdi657{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.nbvghdi657:hover{-moz-border-radius:5%/50%;-webkit-border-radius:5%/50%;border-radius:5%/50%}.idjsgdi73{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.idjsgdi73:hover{-moz-border-radius:50% 50% 0;-webkit-border-radius:50% 50% 0 50%;border-radius:50% 50% 0 50%}.sldfhw7363{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.sldfhw7363:hover{-moz-border-radius:50% 50% 50% 0;-webkit-border-radius:50% 50% 50% 0;border-radius:50% 50% 50% 0}.mxhatstsy{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.mxhatstsy:hover{-moz-border-radius:50% 0 50% 50%;-webkit-border-radius:50% 0 50% 50%;border-radius:50% 0 50% 50%}.maueh7363{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.maueh7363:hover{-moz-border-radius:0 50% 50%;-webkit-border-radius:0 50% 50% 50%;border-radius:0 50% 50% 50%}.iujdh7st{-moz-border-radius:100% 5% 0;-webkit-border-radius:100% 5% 0 5%;border-radius:100% 5% 0 5%}.iujdh7st:hover{-moz-border-radius:5% 0 5% 100%;-webkit-border-radius:5% 0 5% 100%;border-radius:5% 0 5% 100%}.mxn736dhdh{-moz-border-radius:5% 100% 5% 0;-webkit-border-radius:5% 100% 5% 0;border-radius:5% 100% 5% 0}.mxn736dhdh:hover{-moz-border-radius:5% 5% 100%;-webkit-border-radius:5% 5% 100% 5%;border-radius:5% 5% 100% 5%}.s76sjdh{-moz-border-radius:5% 0 5% 100%;-webkit-border-radius:5% 0 5% 100%;border-radius:5% 0 5% 100%}.s76sjdh:hover{-moz-border-radius:100% 5% 0;-webkit-border-radius:100% 5% 0 5%;border-radius:100% 5% 0 5%}.u7skdjhdg{-moz-border-radius:0 5% 100%;-webkit-border-radius:0 5% 100% 5%;border-radius:0 5% 100% 5%}.u7skdjhdg:hover{-moz-border-radius:5% 100% 5% 0;-webkit-border-radius:5% 100% 5% 0;border-radius:5% 100% 5% 0}.iskd8777d{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.iskd8777d:hover{-moz-border-radius:10% 50%;-webkit-border-radius:10% 50% 10% 50%;border-radius:10% 50% 10% 50%}.s983jjsh{-moz-border-radius:10%;-webkit-border-radius:10%;border-radius:10%}.s983jjsh:hover{-moz-border-radius:50% 10%;-webkit-border-radius:50% 10% 50% 10%;border-radius:50% 10% 50% 10%}.hdu73636s{-moz-border-radius:10% 50%;-webkit-border-radius:10% 50% 10% 50%;border-radius:10% 50% 10% 50%}.hdu73636s:hover{-moz-border-radius:50% 10%;-webkit-border-radius:50% 10% 50% 10%;border-radius:50% 10% 50% 10%}.ss6sshhmd{-moz-border-radius:50% 10%;-webkit-border-radius:50% 10% 50% 10%;border-radius:50% 10% 50% 10%}.ss6sshhmd:hover{-moz-border-radius:10% 50%;-webkit-border-radius:10% 50% 10% 50%;border-radius:10% 50% 10% 50%}

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 20px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
color: firebrick;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
color: firebrick;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
/* this code made by th3littleprofessor.com ----------------------------------------------- */ [/code]

ثم أحفظ القالب وعندما تدون أى مشاركة وتريد هذا التأثير على صور التدوينة كل ماعليك هو نسخ هذا الكود وتغيير رابط الصورة فقط

[code type="هذا الكود مجانا فقط على البروفيسور الصغير وحصرى"]


photo
[/code]

لتحميل باقى التأثيرات أضغط هنا



ملحوظة:لأى أستفسار لاتردد فى كتابته فى تعليق.

ليست هناك تعليقات:

إرسال تعليق

المتابعون

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

قوالب مميزة

قالب بساطة تكويد : البروفيسور الصغير