قوالب بلوجر معربة

السبت، 11 أغسطس، 2012

ازرار css3 لوضع روابط تدوينتك والمواضيع بشكل جميل وجديد بتقنية css

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

لن اطيل في كلامي كثيرا ولكن الاضافة جميلة من اعجبته فليكمل معي الدرس

اولا اولا :سنذهب للوحة تحكم بلوجر


سانضيف الان كود css داخل القالب لانها من دونها لن تعمل الاضافة

نبحث عن الكود التالي باستخدم f3  او  ctrl&f
]]></b:skin>


.awesome, .awesome:visited {
    background: #222 url(http://4.bp.blogspot.com/-ZZiYrEqBOcM/UAmqhzAdSWI/AAAAAAAABC4/iz5ScL_5Pj4/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>


والي هنا انتهي الدرس وارجو ان اكون افتدكم منتظرتقيمكم واي استفسار انا في الخدمة مع عليك هو ترك تعليق فقط
من فضلك اضغظ لايك لمشاهدة لينك التحميل

1 التعليقات:

افلام اون لاين

اختارنا لكم

 
© 2014 جميع حقوق النشر محفوظة لدى المعرفة Blog | تصميم قوالب بلوجر