بسم الله الرحمن الرحيم وبه نستعين و الصلاة والسلام علي اشرف المرسلين وعلي اله وصحبه اجميعن درسنا اليوم باذن الله يتكلم عن اضافة غاية في الجمال والروعة وتضيف لمدونتك الاناقة والاحترافية وكما عودتكم علي ان اتي لكم باضافات جميلة درس اليوم هو عبارة عن ان تختار رابط معين ولكن مشاهدة اضافة فستتضع صورة او رابط صحيح سنجعل الرابط هكذا
وهذه امثلة اخري والوان واحجام كثيرة 
لن اطيل في كلامي كثيرا ولكن الاضافة جميلة من اعجبته فليكمل معي الدرس
اولا اولا :سنذهب للوحة تحكم بلوجر
سانضيف الان كود css داخل القالب لانها من دونها لن تعمل الاضافة
نبحث عن الكود التالي باستخدم f3 او ctrl&f
]]></b:skin>
.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmDP2XXEiliN7szL8snF70aFMZwBaMdq3uBKCREVOaTwDryotxq89epnAsshU3SxUAcoEXlD965W6ZdI_xH6CkGXaQ8OldK1I3Frvg02iv9YZkjY1BJeZe_7NdpXn9k-Y3jJunVTxJQc/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; }
ونضع قبله الكود التالي
عندما تريد وضع زر من الازرار في موضوع تضغظ علي تحرير html
وتضع احد من هذه الاكواد بالحجم المعين واللون الذي تريده
هذا الحجم الكبير
زر بحجم كبير
زر بحجم كبير
<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>
من فضلك اضغظ لايك لمشاهدة لينك التحميل
هل يمكنني وضع هذا في التسميات؟
ردحذف