السلام عليكم ورحمة الله

أرحب بكم من جديد متابعي مدونة عفريت بلوجر الأعزاء..

كل صاحب مدونة يرغب و يحلم في أن تصير مدونته ناجحة أكثر زيارة و مفضلة لدى الزوار..

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

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

ثانيا - الإضافات ..قم بجعل مدونتك أكثر إحترافية بإضافة أقوى و أجمل إضافات بلوجر

• مثل السلايد شو لأفضل المواضيع
• ترقيم الصفات
• عناصر المتابعة و نشر مواضيعك على المواقع الإجتماعية
• مواضيع ذات صلة بالموضوع التي تجعل الزائر يقرأ أكبر عدد من المواضيع 
• و كل هذه الإضافات تجدها على المدونة و دروس تطبيقها على مدونتك

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

رابعا - قم نشر مدونتك في أكبر دلائل البحث و اشهرها و قم بإضافة مدونتك للمحركات البحث و أشهرها (غووغل,بينج, و ياهو..)

و قم أيضا بعمل " الباكلينكس" لمدونتك ما يرفع الباج رانك الخاص بمدونتك.

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

أتمنى لكم التوفيق

...تابع القراءة

مرحبا بكم من جديد على مدونة عيش حياتك صح و أتمنى تكونوا بصحة و عافية

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

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

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

ابحث عن الكود التالي

</head>

ضع قبله مباشرة هذا الكود

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 270;
summary_img = 240;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
</b:if>
</b:if>

طبعا يمكنك التعديل على القياسات الموجود في الكود باللون الأحمر حسب رغبتك

ثانيا قم بالبحث على الكود التالي

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<data:post.body/> 
<b:else/> 
<div expr:id='&quot;summary&quot; + data:post.id'> 
<data:post.body/> 
</div> 
<script type='text/javascript'> 
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); 
</script> 
<div style='clear: both;'/> 
<span
 style='padding-top:5px;;float:right;text-align:right;'><a 
expr:href='data:post.canonicalUrl' rel='bookmark'><b>Read more 
>></b></a></span> 
</b:if> 
</b:if> 

و ستجد أن المواضيع و الصورة الرئيسية للموضوع تم تلخيصها و اصبحت مدونتك أكثر جمالية و احترافية

لا تنسونا من صالح الدعاء

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

إلى درس أخر و لقاء أخر تابعونا و ابقوا على تواصل دائم معنا و مواضيع عيش حياتك صح الحصرية 

و السلام عليكم ورحمة   

...تابع القراءة

أرحب بكم من جديد ^^' اليوم درس مفيد جدا لأصحاب مدونات بلوجر و هو طريقة إضافة هاك " المواضيع المتصلة" أسفل التدوينة أو الموضوع و هي مفيدة إذ تجعل الزائر لا يغادر مدونتك بسرعة و يقرأ المزيد و المزيد من المواضيع و التدوينات الأخرى على مدونتك ما يرفع من الوقت الذي يمضيه الزائر في مدونتك و بالتالي يتم رفع ترتيب الباج رانك و الأليكسا الخاص بمدونتك نبدأ على بركة الله أولا قم بالدخول للموقع التالي www.linkwithin.com ثانيا قم بملئ الخانات كما هو مبين في الصورة بعد ملئ جميع الخانات إضغط على Get Widget ثم اضغط على Install widget كما هو موضح في الصورة ثم في الخطوة الأخيرة قم باختيار مدونتك التي ترغب في ظهور الإضافة عليها كما هو مبين في الصورة التالية و ستظهر الإضافة في الأخير كما في الصورة الأن الإضافة ستظهر على مدونتك و إذا رغبت في عدم ظهورها في الصفحة الرئيسية قم بالبحث عن الكود التالي <b:widget id="HTML1" locked="false" title="مواضيع ذات صلة بالموضوع" type="HTML"><b:includable id="main"><data:content/></b:includable></b:widget> و استبدله بهذا الكود <b:widget id="HTML1" locked="false" title="مواضيع ذات صلة بالموضوع" type="HTML"><b:includable id="main"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable></b:widget> إذا لم تجد الكود فقم بتغير رقم الوسم HTML1 قم باستبداله HTML2 ,HTML3.. إلى أن تجده في الأخيرانتهى الدرس ^^ أتمنى يكون قد أعجبكم ووفقتم في تطبيقهإذا واجهتكم أي مشكلة قم بالتعليق و أنا في الخدمة

أرحب بكم من جديد ^^'

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

نبدأ على بركة الله

أولا قم بالدخول للموقع التالي

www.linkwithin.com

ثانيا قم بملئ الخانات كما هو مبين في الصورة

 

بعد ملئ جميع الخانات إضغط على

Get Widget

ثم اضغط على

Install widget

كما هو موضح في الصورة

ثم في الخطوة الأخيرة قم باختيار مدونتك التي ترغب في ظهور الإضافة عليها كما هو مبين في الصورة التالية

و ستظهر الإضافة في الأخير كما في الصورة

الأن الإضافة ستظهر على مدونتك

و إذا رغبت في عدم ظهورها في الصفحة الرئيسية

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

<b:widget id="HTML1" locked="false" title="مواضيع ذات صلة بالموضوع" type="HTML">
<b:includable id="main"><data:content/></b:includable>
</b:widget>




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

<b:widget id="HTML1" locked="false" title="مواضيع ذات صلة بالموضوع" type="HTML">
<b:includable id="main"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>
</b:widget>




إذا لم تجد الكود

فقم بتغير رقم الوسم

 HTML1

قم باستبداله 

HTML2 ,HTML3..

  إلى أن تجده في الأخير

انتهى الدرس ^^
 أتمنى يكون قد أعجبكم ووفقتم في تطبيقه
إذا واجهتكم أي مشكلة قم بالتعليق و أنا في الخدمة 




...تابع القراءة

من المهم في المدونة أن يكون خطها جميلا و يظهر بوضوح للزائر

في هذا الدرس الجديد من دروس بلوجر سأقوم بشرح كيفية إستبدال خط مدونتك إلى خط جميل مثل 

tahoma

و هو الخط الذي أكتب به في مدونة عفريت بلوجر

و بإمكانك تغيير خط مدونتك إلى أي خط أخر

قم بالتوجه إلى لوحة إدارة مدونتك ثم قم بتوسيع القالب 

اضغط على 

Ctrl+F

و ابحث عن السطور التالية

<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

ثم قم باستبداله بهذا

<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Tahoma, Helvetica, FreeSans, sans-serif"/>

و يمكنك تغيير حجم الخط بالتعديل على الرقم باللون الأزرق tahoma الأن تم تغيير الخط إلى

...تابع القراءة

مرحبا بكم متابعي مدونة عيش حياتك صح

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

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

إذا رغبت في إضافة الهاك 

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

</body>

 ثم ضع قبله مباشرة هذا الكود

<!-- PAGE NAVIGATION STAR-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=6;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;

</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>
<!-- PAGE NAVIGATION STOP-->

الأن سنقوم بتخصيص الإضافة بعدد التدوينات المرغوب في ظهورها

ابحث داخل الكود الذي اضفناه عن

var postperpage=6; 

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

ثم ابحث في الكود

var numshowpage=6;

قم بتغيير الرقم 6 إلى عدد المواضيع التي تريد ظهورها في باقي صفحات مدونتك

الأن نمر إلى الخطوة الثالثة و الأخيرة إن شاء الله و هي تخصيص الإضافة لتظهر باللون المتطابق للون مدونتك

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

]]></b:skin>

ثم قم بوضع إحدى هذه الأكواد قبله مباشرة **ملاحظة قم باختيار الكود المطابق للون مدونتك فقط لون واحد

اللون الأخضر

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #3F8657;
  color:#fff;
  }

.showpageOf { 
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

 اللون الأزرق

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #3B5998;
  color:#fff;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  } 

اللون البرتقالي

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #7B3A11;
  color:#fff;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  } 

اللون الرمادي

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #52575C;
  color:#fff;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

لون بنفسجي

 /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #8B2F73;
  color:#fff;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #F1BA24;
  text-decoration: none;
  }

 إنتهى الدرس أتمنى يكون قد توفقتم في تطبيقة

و السلام عليكم ورحمة الله.

...تابع القراءة

السلام عليكم و رحمة الله تعالى و بركاته,

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

 

مثال مباشر

إذا أعجبك التأثير و تريد إصافته إلى مدونتك كل ما عليك فعله هو تتبع المراحل البسيطة التالية :

• توجه إلى » لوحة التحكم الخاصة بمدونتك ثم » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript
• الآن قم بنسخ ثم لصق الكود التالي داخل الأداة.

<!--CSS Hover Effects To 125x125 Advertisement Banners--> 
<style> 
.Mohamed-Ads ul{ 
list-style-type:none; 
margin: 0px auto; 
padding: 10px 0px 10px 0px; 
width:300px; 
overflow:hidden; 
} 
.Mohamed-Ads ul li{ 
list-style-type:none; 
margin: 0px 5px 10px 5px; 
float:left; 
display:inline; 
background:orange; 
-webkit-transition:all 0.2s ease; 
-moz-transition:all 0.2s ease; 
-o-transition:all 0.2s ease; 
border-radius:100%; 
-webkit-border-radius:100%; 
-moz-border-radius:100%; 
-o-border-radius:100%; 
} 
.Mohamed-Ads ul li:hover { 
-webkit-transition:all 0.3s ease; 
-moz-transition:all 0.3s ease; 
-o-transition:all 0.3s ease; 
-o-border-radius:15%; 
-webkit-border-radius:15%; 
-moz-border-radius:15%; 
border-radius:15%; 
} 
.Mohamed-Ads ul li:active { 
-webkit-transition:all 0.2s ease; 
-moz-transition:all 0.2s ease; 
-o-transition:all 0.2s ease; 
-o-border-radius:50%; 
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
border-radius:50%; 
} 
.Mohamed-Ads ul li a img{ 
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5); 
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5); 
box-shadow:0 0 8px rgba(0,0,0,0.5); 
padding:3px; 
} 
</style> 
<div class="Mohamed-Ads"> 
<ul> 
<li style="background:#e42b2b !important;"> 
<a href="رابط المعلن" rel="nofollow"> 
<img height="125" src="رابط صورة المعلن" width="125" /> 
</a></li> 
<li style="background:#FFE500 !important;"> 
<a href="رابط المعلن" rel="nofollow"> 
<img height="125" src=" رابط صورة المعلن" width="125" /> 
</a></li> 
<li style="background:#a800ff !important;"> 
<a href="رابط المعلن" rel="nofollow"> 
<img height="125" src=" رابط صورة المعلن" width="125" /> 
</a></li> 
<li style="background:#41d05f !important;"> 
<a href="رابط المعلن" rel="nofollow"> 
<img height="125" src=" رابط صورة المعلن" width="125" /> 
</a></li> 
</ul> 
</div> 
<!--CSS Hover Effects To 125x125 Advertisement Banners—>

التعديل على الكود :

• رابط المعلن : رابط الموقع المعلن في مدونتك.
• رابط صورة المعلن : رابط صورة الموقع المعلن في مدونتك.

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

المصدر مدونة محمد

...تابع القراءة

السلام عليكم  ورحمة الله وبركاته

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

مثال مباشر

لإضافة هذا الصندوق إلى مدونتك المرجو تتبع الخطوات التالية :

• اذهب إلى لوحة التحكم الخاصة بمدونتك ثم تصميم بعد ذلك اضغط على إضافة أداة HTML/Javascript
• الآن انسخ الكود التالي و ضعه داخل الأداة

<center><style>.helperbloggerFB { 
width: 300px; 
height: 150px; 
border-radius: 3px; 
position: relative; 
background-color:#f4f4f4; 
padding:5px 10px 15px 0; 
} 
.helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after { 
background: #f4f4f4; 
border: 1px solid #ccc; 
} 
.helperbloggerFB:before, .helperbloggerFB:after { 
content: ""; 
position: absolute; 
bottom: -3px; 
left: 2px; 
right: 2px; 
height: 1px; 
border-top: none; 
} 
.helperbloggerFB:after { 
left: 4px; 
right: 4px; 
bottom: -5px; 
box-shadow: 0 0 2px #ccc; 
} 
</style>

<div class="helperbloggerFB"> 
<div style="height:155px;overflow:hidden"> 
<fb:like-box href="https://www.facebook.com/http://eshha.blogspot.com/" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2Fhttp://eshha.blogspot.com/&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box> 
</div> 
</div> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script></center>

التعديل على الكود :

http://eshha.blogspot.com/ : غيره باسم صفحتك على الفايسبوك (يوجد مرتين في الكود)

انتهى الدرس, أرجو أن تنال هذه الإضافة إعجابكم.

إذا واجهتكم أي مشكلة فلا تترددو في طرحها عبر تعليق

المصدر : مدونة محمد

...تابع القراءة