شرح تعديل على علامة الاقتباس بالمدونة باستخدام CSS لتصبح بشكل جذاب جدا

مرحبا لكل متابعي مدونة PH3ahmed

طريقة تعديل على علامة الاقتباس في المدونة كما هي موضوعة في مدوناتي لاحظ الكود في الاسفل انها رائعة

طريقة الاضافة اتبع الشرح على محرر html الحديث
1. سجل دخول الى مدونة بلوجر لوحة التحكم اختر الالقالب ثم اضغط على تحرير html
2. ثم اضغط على الرمز <b:skin>...</b:skin> (ستجد الرمز اول الصفحة في محرر html) كما بالصورة

اضغط على الصورة لتظهر بالحجم الاصلي

3.بعد الضغط على الرمز <b:skin>...</b:skin>  سوف تجد هذا الرمز ]]></b:skin>  في نهاية الرمز الذي ضغط عليه

 تابع الفيديو  لكي تعرف الطريقة بشكل صحيح 100%

4. بعد ان وجدت الرمز  ]]></b:skin> اضف الكود التالي فوق الرمز ]]></b:skin> مباشر

blockquote {

         padding: 10px;

         margin: 10px 0 10px 20px;

         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);

         font: 13px/17px Serif, Times, Helvetica;

         font-style: italic;

         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */

         text-shadow: 1px 1px 1px #000;

         border: 1px ridge  #0099FF;

         border-radius: 20px 10px 20px 10px;

        -moz-border-radius: 20px 10px 20px 10px;

        -webkit-border-radius: 20px 10px 20px 10px;

        -o-transition: all 1.2s ease-in;

        -moz-transition: all 1.2s ease-in;

        -webkit-transition: all 1.2s ease-in; 

}

blockquote:hover {

         color: #eee;

        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);

        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);

        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}

blockquote span.bbuka, blockquote span.btutup {

         float: left;

         margin-right: 5px;

         height: 17px;

         width: 22px;

         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;

        -o-transition: all 1.2s ease-in;

        -moz-transition: all 1.2s ease-in;

        -webkit-transition: all 1.2s ease-in;

}

blockquote span.bbtutup {

         float: right;

         margin-left: 5px;

         margin-right: 0;

         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;

}

blockquote:hover span.bbuka, blockquote:hover span.btutup {

        -o-transform: rotate(1090deg) scale(1.1);

        -moz-transform: rotate(1090deg) scale(1.1);

        -webkit-transform: rotate(1090deg) scale(1.1);

} 

5. ااختر الحفظ ومبروك عليك

هل أعجبك الموضوع ؟

Share

Tweet