6 نصائح لبناء مدونة ناجحة الجزء الأول

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


أولا يجب أن تعلم أن النجاح لا يأتي بين ليلة و ضحاها , بل يأتي بعد عمل وتعب وسهر و تعلم... , لكن اذا طبقت النقاط التالية على مدونتك كن متأكدا أنك ستكون قد قطعت شوطا كبيرا في طريق نجاح مدونتك .
مجال مناسب :

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



اسم قصير , مناسب ذو دلالة و معنى :
الآن و بعدما اخترت مجال يناسب اهتماماتك وميولاتك , وجب أن تختار اسم له علاقة بالمجال المختار و لإختيار اسم مميز وجذاب وجب احترام الشروط التالية :
  • اسم قصير : أي أن الإسم يجب أن يكون في حدود كلمة أو كلمتان .
  • اسم سهل : وجب الإسم أن يكون سهل وبعيدا عن التعقيد, لكي يتذكره الزائر دائما .
  • اسم ذو دلالة و معنى : يجب أن يكون الإسم المختار ذو دلالة و معنى , اي انه يرمز لشيء ذو علاقة بذلك المجال .

اختيار منصة العمل المناسبة :

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

بناء محتوى يستحق القراءة :

بعد تجهيز المدونة وتجهيز مساحة العمل المناسبة ,يجب عليك الآن التفكير في محتوى يستحق القراءة , كيف يستحق القراءة , يجب أن يكون له نفع على قرائك المستهدفين أي أن الناس المتابعة لنفس مجال مدونتك يجب أن تجد في مدونتك ما تريد , و يجب أن تبتعد عن التكرار و النقل , قم ببدل مجهود و صياغة محتوى بطريقتك الخاصة , محتوى غني و متجدد, و لا تتوقف فترات طويلة عن التدوين خصوصا في بداياتك الأولى .

بناء جمهور مهتم بمجال مدونتك ومحتواها :

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

التركيز على الأرشفة ومحركات البحث :

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

اضافة خاصية اتصل بنا منزلقة


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


1. داخل القالب ابحث عن  ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 right:15px;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:bold;
 display:inline-block;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.fa-envelope-o:before {
content: "\f003";
margin-left: 5px;
font-weight: bold;
background: rgba(68, 68, 68, 0.27);
padding: 5px;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:400px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:right;margin-right: 15px;}
.floating-ai-body .ContactForm {margin:0;display:block!important;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:droid arabic kufi;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move"><i class="fa fa-envelope-o"></i>إتصل بنا</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>
3 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة  نموذج الإتصال
داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contact{position: fixed;bottom: 0;right: 1%;background-color: #434E52;color: #555;width:250px;z-index: 999999;}
#contact h2.title{font-weight: 400;color: #FFF;padding: 8px 15px;font-size: 16px;cursor: pointer;text-align: center;background-color: #2B2B2B;border-bottom: none;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: &quot;\f1d8&quot;; font-family: FontAwesome; float: left; background-color: #434E52; padding: 15px; margin-top: -8px; margin-left: -15px; }
#contact .contact-form-widget{padding: 0px; display: none; padding-right: 10px; width: 240px;}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#DDD;color:#111;border:0;padding:10px 5px;}
.contact-form-widget {margin-right:0;max-width:250px;padding:0;padding-top:0;
width:100%;height:auto;}
.contact-form-email, .contact-form-email-message, .contact-form-name {max-width:100%;
width:100%;}#contact *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.contact-form-email, .contact-form-name {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email-message {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email:hover, .contact-form-email:focus, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email-message:hover, .contact-form-email-message:focus {background:#fff;border:none;border-top:none;outline:none;box-shadow:none;transition:.3s linear;}
form {color:#dce1e2;}
.contact-form-button-submit {width:100%;height:30px;background-color:#55849E;background-image:none;border:none;color:#fff;transition:.3s linear;  margin-top: 5px;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;}
.contact-form-button-submit:hover,.contact-form-button-submit:focus {background-color:#4DB2EC;background-image:none;;border:none;outline:none;color:#fff;cursor:pointer;transition:.3s linear;}
.contact-form-error-message-with-border {background:#FC4F3F;border:none;
bottom:0;box-shadow:none;color:#fff;font-size:11px;
font-weight:700;line-height:19px;margin-right:0;opacity:1;position:static;
text-align:center;transition:all 0.1s linear;}
.contact-form-success-message {background:#e1dae7;border:none;bottom:0;
box-shadow:none;color:#6a5b7a;font-size:11px;line-height:19px;margin-right:0;
opacity:1;position:static;text-align:center;transition:all 0.1s linear;}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
;$( &quot;#contact h2.title&quot; ).click(function() {$( &quot;#contact .contact-form-widget&quot; ).toggle(&quot;fast&quot;);});
</script>
3. ضع الكود التالي في مكان فوق الفوتر أو </body>
<b:section class='contact section' id='contact' maxwidgets='1' >
  <b:widget id='ContactForm1' locked='false' title='اتصل بنا' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
________________________________________________________________________

إضافة شارك المقال الجزء الأول


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

شرح طريقة التركيب




1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي فوقه
 .share_button { 
width: 300px;
height: 50px; 
margin: 10px auto; 
}
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
}
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%;
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
}
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
}
.share_button ul:first-child li:first-child{
text-align: right; 
}
.share_button ul:last-child li:first-child{
text-align: left; 
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
4. ابحث عن  <div class='post-footer'> 
5. ضع الكود الأتي فوقه
* ملاحظة قد تجد الكود متكرر الأخير هو المقصود .. إذا كنت تتوفر على إضافة المشاركات الإجتماعية إستبدلها بالكود الأتي
<div class='share-box'>
<div class='share_button'>
<ul>
<li><h1>
شارك المقال 
</h1></li>
<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1LgnZ6FVl8XfZ4qvvu-WgbCa_lZneQuIQ0kxkbsxUKTCvAh-qxjQHVQVlyVf-oCpx0P5Hncde-AdFeEhIgQWxuYzjJtjfwqlcgfDL916edcpQ5U0Vd1yaVXaacfazUU7XEcY4Ir_gX3hL/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkvdxBQcUefyfRJ6YpsEaWwWl5vaEig1ZHhJQ3ZofNzhbl77ZiMKXRmD2ngMK5U96BxPhANtoGkFL3-JY5ky9PeWeKKqJshMQy44K-MsvUOdHlTq5tO_9F5vxn_ZJhF1uVmQPy3WgGwGwq/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1></h1></li>
<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCk7MfSkYlJlpYqS4uQrzu9yETCOIeE3ZBiyYeP3DYDN8GizidEZ6z1Ky3NEp6Rm9lONnXBUwDT7ZZbJOWr2oRUwXeVpCK8gedNVGCHaGErglv1C2OOMwBjSOgC9_ORNJZMGeaB7u7XEcy/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJRNHFi-WjiHLih5U3Ve-Ked0SsOlRbvezYLxXi_NlpKCaNQ9Au0YqJYGYmD7UpnNDKyjY3vwzB2M9IC4lkJvAjmwRjBDb0m83QjZTEcGW81e_POoxYX5jd1OLIWJ3yqbguUkYjM9oHHca/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
* المحدد باللون الأصفر خاص بصور الشبكات الإجتماعية

تغيير شكل المشاركات الشائعة الجزء الأول



    نعود من جديد مع الشكل الثالث من ستايلات المشاركات الشائعة الامتناهية والتي تتطور مع الوقت، بخصوص هذه الإضافة فما يميزها عن سابقاتها هو شكلها طبعا وتأثيراتها وتناسقها الجميل ستغير نظرة قالبك بأكمله بمجرد تركيبها وبالحديث عن التركيب فأنصح كل من لديه ستايل آخر فليحذفه لكي لا تتداخل الأكواد في ما بينها 
    شرح  طريقة التركيب
    1. توجه إلى التخطيط ثم حرر أداة المشاركات الشائعة واختر من عرض ما يصل إلى "6"
    2. داخل القالب ابحث عن  ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
    .PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
    .PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
    .PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
    .PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:160%;text-shadow:0 0 5px rgba(0,0,0,0);font-family: &#39;Adobe Arabic&#39;,&#39;serif&#39;;}
    .PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
    .PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
    .PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
    .PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
    .PopularPosts .item-snippet{display:none;}
    .PopularPosts ul li .item-content{position:relative;overflow:hidden;}
    .PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
    .PopularPosts .widget-content ul li{position:relative;padding:5px 0;overflow:hidden;max-height:100px;transition:all .4s;}
    .PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
    .PopularPosts .widget-content ul li:hover:before{right:-55px;}
    .PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
    .PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
    .PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
    .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
    .PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
    .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
    .PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
    3. إبحث عن </body> وضع الكود التالي فوقه
    <script type='text/javascript'>
    // Popular Post Thumb
    $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
    //<![CDATA[
    // Custom Popular Post
    $(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
    //]]>
    </script>

    خبراتي في التصميم

    مقولة الأسبوع

    تابعنا أول بأول