إضافة تأثير جميل على المشاركات حجز بشكل مميز

إضافة تأثير جميل على المشاركات حجز بشكل مميز

إذا كنت ترغب بتختلف شكل الألوان المشتركة بمدونتك وإمارات بعض الألوان والتأثيرات الجميلة عليها لكي تظهر لك بشكل رائع وجذاب وغير تقليدي، قدم لك بشكل جيد وجذاب وغير تقليدي، نقدم لك اليوم من خلال هذا الدرس شكلين مختلفين لتغير شكل المشاركات الشائعة فاختر منها ما تفضله وقم باضافة الكود الخاص بالتأثير. طريقة الاضافة: 1- اذهب للوحة التحكم ثم القالب ثم تحرير HTML ابحث عن هذا الكود التالي:

 ]]> </ ب: الجلد>  

2- ثم ضعه كود اضافتها لموقعك من الشكلين التاليين 

الشكل 

كود الشكل الأول :

# PopularPosts1 ul li a: hover {color: #fff؛ زخرفة النص: لا شيء! الهامش السفلي: 0! مهم ؛} # PopularPosts1 ul li a {-webkit-text-size-adjust: auto؛ -webkit-text-stroke-width: 0px؛ اللون: # 333333 ؛ display: block؛ font-size: 14px؛ نمط الخط: طبيعي نوع الخط: عادي الخط الوزن: عادي. تباعد حروف: طبيعي؛ خط الطول: 18 بكسل ؛ الهامش اليمين: 35px؛ الحد الأدنى للارتفاع: 30 بكسل ؛ الأيتام: 2 ؛ الحشو: 0px؛ محاذاة النص: -webkit التلقائي. زخرفة النص: لا شيء! مسافة بادئة نصية: 0 بكسل ؛ تحويل النص: لا شيء ؛ مساحة بيضاء: عادي ؛ الأرامل: 2 ؛ تباعد الكلمات: 0px؛ } # PopularPosts1 ul li .item-thumbnail {float: left؛ border: 0؛ margin-right: 10px؛ background: transparent؛ padding: 0؛ height: 51px} # PopularPosts1 ul li: الطفل الأول: بعد ، # PopularPosts1 ul li: first-child + li: after، # PopularPosts1 ul li: first-child + li + li: after، # PopularPosts1 ul li: first-child + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {position: absolute؛ top: 10px؛ right: 5px؛ border-radius: 2px؛ border: 1px solid #ccc؛ background: # 353535؛ -webkit-box-shadow: 0px 0px 5px # 000؛ -moz-box-shadow: 0px 0px 5px # 000؛ width: 30px؛ height: 30px؛ line-height: 1em؛ text -align: مركز؛ حجم الخط: 28px؛ اللون: # الاتحاد الفرنسي} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li {background: # DF01D7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after {content: "8"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li {background: # B041FF؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {content: "9"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li {background: # F52887؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"} # PopularPosts1 ul li: first-child + li + li + li + li + li {background: # 7ee3c7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li: after {content: "6"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li {background: # f6993d؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after {content: "7"} # PopularPosts1 ul li: first-child + li + li + li + li {background: # 33c9f7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"} # PopularPosts1 ul li: first-child + li + li + li {background: # c7f25f؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li: after {content: "4"} # PopularPosts1 ul li: first-child + li + li {background: # ffde4c؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li: after {content: "3"} # PopularPosts1 ul li: first-child + li {background: # ff764c؛ عرض: 90٪} # PopularPosts1 ul li: first-child + li: after {content: "2"} # PopularPosts1 ul li: first-child {background: # ff4c54؛ width: 90٪} # PopularPosts1 ul li: first-child: after {content: "1"} # PopularPosts1 ul {margin: 0؛ padding: 0px 0؛ list-style-type: none} # PopularPosts1 ul li {position: relative؛ margin: 6px 0؛ border-radius: 0px 0px 0px 0px؛ border: 1px solid # f7f7f7؛ -webkit-box-shadow: 2px 2px 2px # 000؛ -moz-box-shadow: 3px 3px 3px # 000؛ padding: 10px؛} # PopularPosts1 img { الحدود بين دائرة نصف قطرها: 0px؛ ماكس العرض: 60px؛ الحد الأقصى للطول: 60px؛ هامش اليسار: 4PX. }

الشكل الثاني

 كود الشكل الثاني:

# PopularPosts1 ul li a: hover {color: # 000؛ زخرفة النص: لا شيء! الهامش السفلي: 0! مهم ؛} # PopularPosts1 ul li a {-webkit-text-size-adjust: auto؛ -webkit-text-stroke-width: 0px؛ اللون: # 333333 ؛ display: block؛ font-size: 14px؛ نمط الخط: طبيعي نوع الخط: عادي الخط الوزن: عادي. تباعد حروف: طبيعي؛ خط الطول: 18 بكسل ؛ الهامش اليمين: 35px؛ الحد الأدنى للارتفاع: 30 بكسل ؛ الأيتام: 2 ؛ الحشو: 0px؛ محاذاة النص: -webkit التلقائي. زخرفة النص: لا شيء! مسافة بادئة نصية: 0 بكسل ؛ تحويل النص: لا شيء ؛ مساحة بيضاء: عادي ؛ الأرامل: 2 ؛ تباعد الكلمات: 0px؛ } # PopularPosts1 ul li .item-thumbnail {float: left؛ border: 0؛ margin-right: 10px؛ background: transparent؛ padding: 0؛ height: 51px} # PopularPosts1 ul li: الطفل الأول: بعد ، # PopularPosts1 ul li: first-child + li: after، # PopularPosts1 ul li: first-child + li + li: after، # PopularPosts1 ul li: first-child + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {position: absolute؛ top: 10px؛ right: 5px؛ border-radius: 50٪؛ border: 2px solid #ccc؛ background: # 353535؛ -webkit-box-shadow: 0px 0px 5px # 000؛ -moz-box-shadow: 0px 0px 5px # 000؛ width: 30px؛ height: 30px؛ line-height: 1em؛ مواءمة النصوص: مركز؛ حجم الخط: 28px؛ اللون: # الاتحاد الفرنسي} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after {content: "8"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {content: "9"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"} # PopularPosts1 ul li: first-child + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li: after {content: "6"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after {content: "7"} # PopularPosts1 ul li: first-child + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"} # PopularPosts1 ul li: first-child + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li: after {content: "4"} # PopularPosts1 ul li: first-child + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li: after {content: "3"} # PopularPosts1 ul li: first-child + li {width: 90٪} # PopularPosts1 ul li: first-child + li: after {content: "2"} # PopularPosts1 ul li: الطفل الأول {width: 90٪} # PopularPosts1 ul li: first-child: after {content: "1"} # PopularPosts1 ul {margin: 0؛ padding: 0px 0؛ list-style-type: none} # PopularPosts1 ul li { خلفية: # FFFFFF. border: 2px solid # 777777؛ border-radius: 25px 0؛ الهامش: 6 بكسل × 0 الحشو: 10px؛ موقف: قريب } # PopularPosts1 ul li: hover {background: # F1FBFE؛ الحد: 2px solid # 06BBFD؛} # PopularPosts1 img { الحدود بين دائرة نصف قطرها: 200px؛ ماكس العرض: 60px؛ الحد الأقصى للطول: 60px؛ هامش اليسار: 4PX. }

ملحوظة: 
اذا كنت تريد تغير الألوان والدور من الكود الملون أعلاه.