درسنا اليوم يتكلم عن اضافة غاية في الجمال والروعة وتضيف لمدونتك الاناقة والاحترافية وكما عودتكم علي ان اتي لكم باضافات جميلة درس اليوم هو عبارة عن ان تختار رابط معين ولكن مشاهدة اضافة فستتضع صورة او رابط صحيح سنجعل الرابط هكذا
لن اطيل في كلامي كثيرا ولكن الاضافة جميلة من اعجبته فليكمل معي الدرس
اولا اولا :سنذهب للوحة تحكم بلوجر
سانضيف الان كود css داخل القالب لانها من دونها لن تعمل الاضافة
نبحث عن الكود التالي باستخدم f3 او ctrl&f
]]></b:skin>
.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmh4Ndb6bawUoZQ30s2TgNeIXPlBzbSkuUdQbJbK-1v8i4yKbg3NCAFJwOUg2CZwYxKy3UMhqXvj9FLGmn7R4tN09PrDDqnBpXjh3UFnDoLSLSqUXI2iB1RIrFJQ9Bv0G18Sy09OIvuZ8/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }
هذا الحجم الكبير
زر بحجم كبير
زر بحجم كبير
<A CLASS="LARGE BLUE AWESOME" HREF="هنا رابطك">مشاهدة مباشرة"</A>
<a class="large pink awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="large orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="large yellow awesome" href="هنا رابطك">مشاهدة مباشرة</a>
<a class="large red awesome" href="هنا رابطك">مشاهدة مباشرة</a>
هذا الحجم الوسط
<a class="medium awesome" href="هنا رابطك">مشاهدة مباشرة</a>
<a class="medium blue awesome" href="هنا رابطك">مشاهدة مباشرة</a>
<a class="medium pink awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="medium orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="medium yellow awesome" href="هنا رابطك">مشاهدة مباشرة</a>
هذا الحجم الصغير
زر بالحجم الصغير
والي هنا انتهي الدرس.<a class="small blue awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small pink awesome" هنا رابطك">مشاهدة مباشرة</a><a class="small magenta awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small green awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small red awesome" href="هنا رابطك">مشاهدة مباشرة</a><a class="small orange awesome" هنا رابطك">مشاهدة مباشرة</a><a class="small yellow awesome" هنا رابطك">مشاهدة مباشرة</a>
إرسال تعليق