اضافة سلايدر شو رائع .....

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

درس اليوم ان شاء الله هو اضافة جديدة ورائعة لمدونات بلوجر وهو اضافة سلايدر شو  بطريقة سهلة ورائعة ولا تأثر علي سرعة اداء المدونة
لمعاينة الاداة الاداة موجودة علي المدونة

طريقة تركيب الاداة 

1- اذهب الي لوحة التحكم بالمدونة 

2- تخطيط 

3- اضافة اداة html

4-ضع الكود التالي ثم احفظ 

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://inf0tec.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

5- غير ماهو باللون  الاحمر لرابط مدونتك

6- مبروك عليك الاضافة
والي اللقاء في موضوع جديد علي تكنولوجيا المعلومات
لاتنسي لايك لصفحتنا واضف تعليقك ولو بكلمة شكر

3 اسرار لظهور موقعك في المراتب الاولي لمحركات البحث SEO

3 اسرار لظهور موقعك في المراتب الاولي لمحركات البحث  SEO

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

SEO

اليوم سوف نتطرق  الي موضوع غاية في الاهمية وهو من اسرار ظهور موقعك في 

المراتب الاولى لمحركات البحث

 كثير منا يريد ان يكون موقعة او مدونتة من اوائل المدونات والمواقع في محركات 

البحث . ومن منا لايريد ذلك؟
اقدم لكم اليوم 3 اسرار مهمة وغير تقليدية في جعل مدونتك او موقعك يكون في المراتب الاولي لمحركات البحث 

السر الاول:حجز الدومين لموقعك لفترة كبيرة

طبعا من المعروف ان معظمكم يحجز لفترة سنه واحدة وطبعا دة يجعل جوجل تقلل الثقة في موقعك اما اذا حجزت لفترة اطول من سنة مثلا 3 سنوات او 5 سنوات ذلك يجعل موقعك موثوق بة من قبل جوجل وكل محركات البحث

السر الثاني:Bounce Rate

ماهو البونس رات؟ هو الوقت الذي يقضية الزائر في موقعك وكلما قل البونس رات كلما كان موقعك جيد وموثوق بة من قبل محركات البحث

ازاي؟

يعني اي قل ؟ يعني البونس رات بيعتمد علي الوقت اللي بيقعدة الزائر في مدونتك كلما جلست فترة طويلة كلما قل البونس رات بتاع موقعك وكلما قل البونس رات كلما كان موثوق بة من قبل محركات البحث لانة بذلك يكون قد حصل الزائر علي مايبحث عنه

السر الثالث:وقت تحميل موقعك 

وهو الوقت المستغرق عند كتابة عنوان موقعك والانتظار لفتحها كلما قل الوقت كانت مميزة وهو عامل مهم من عوامل ظهو موقعك في مقدمة المواقع في محركات البحث ولتسرع مدونتك سوف اتطرق لهذة التدوينة في وقت لاحق 

هذه كانت اهم اسرار تقدم موقعك في الصفحات الاول لمحركات البحث وثقة محركات البحث في موقعك

 اللي اللقاء في موضوع اخر ان شاء الله

اضافة الخطوط العربية لمدونات بلوجر "حصري"

خطوط عربية لمدونة بلوجر

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

Amiri

Droid Arabic Kufi

Droid Arabic Naskh

Lateef

Scheherazade

Thabit

وحتى أسهل عليكم , ها هى الخطوط السته وأشكالهم فى الصور

Amiri

Droid Arabic Kufi

Droid Arabic Naskh

Lateef

Scheherazade

Thabit

طريقة تركيب الاضافة في المدونة:

هناك طريقتين للاضافة 

الطريقة الاولي: عن طريق اضافة الكود :

إفتح أكواد HTML الخاصه بقالب مدونتك , ثم قم بالبحث عن الكود التالى

<head>

وضع تحته مباشرة الكود الخاص بالخط وهو كالتالى للخطوط السته على التوالىملحوظه : عليك بوضع السطر الخاص بالخط المطلوب فقط وليس كل الخطوط .

    <link href=’http://fonts.googleapis.com/earlyaccess/amiri.css’ rel=’stylesheet’ type=’text/css’/>

<link href=’http://fonts.googleapis.com/earlyaccess/droidarabickufi.css’ rel=’stylesheet’ type=’text/css’/>

<link href=’http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css’ rel=’stylesheet’ type=’text/css’/>

<link href=’http://fonts.googleapis.com/earlyaccess/lateef.css’ rel=’stylesheet’ type=’text/css’/>

<link href=’http://fonts.googleapis.com/earlyaccess/scheherazade.css’ rel=’stylesheet’ type=’text/css’/>

<link href=’http://fonts.googleapis.com/earlyaccess/thabit.css’ rel=’stylesheet’ type=’text/css’/>

الطريقة الثانية

: تعديل نوع الخط فى الجزء الذى تريد تغييره

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

ملحوظه : عليك إستخدام كود واحد من الأكواد التاليه , وإختر هذا الكود على أسس إختيارك لكود نوع الخط السابق .

    font-family: ‘Amiri’, serif;

font-family: ‘Droid Arabic Kufi’, serif;

font-family: ‘Droid Arabic Naskh’, serif;

font-family: ‘Lateef’, serif;

font-family: ‘Scheherazade’, serif;

font-family: ‘Thabit’, serif;

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

BlackOrange Blogger Template

dawnload

Black Orange is Blogger template for travel and personal related sites. This template has 3 columns in the header, 2 columns and 3 other columns in footer and in header, lot of place to put your widgets. The nice and large wide view is combined with this colors that fit together nicely, black and orange are the principal colors. It is not some over charged designed, it is very simple that permits you to use it mostly for your professional stuff. Recommended for business blog.

Black Orange template has by default pages on menu, but also you can add and custom links, since blogger support it.

Features:

• Featured Slider-Show Content – to show your favorite post above the content, simple to edit from blogger panel
• Ads banners ready – monetize your site, accepted Google ads and any HTML / script code
• Popular posts in sidebar with thumbnail
• Social icons, easy to edit through option panel
• Colors – black, orange

BlackForme Blogger Template

للمعاينة              للتحميل 

BlackForme is Blogger template for tech or business related sites. This template has 2 columns and 3 other columns in footer, lot of place to put your widgets. This is the most simplest template ever. The background is all grey with black header. It is suitable for everything that you want to use it. Recommended for tech or business blog.

BlackForme template has by default pages on menu, but also you can add and custom links, since blogger support it.

Features:

• Featured Slider-Show Content – to show your favorite post above the content, simple to edit from blogger panel
• Ads banners ready – monetize your site, accepted Google ads and any HTML / script code
• Popular posts in sidebar with thumbnail
• Social icons, easy to edit through option panel
• Colors – grey, black

القالب الاسلامي

السلام عليكم ورحمه الله وبركاتة بسم الله دائما نبدأ

اليوم صادفني قالب في منتهي الروعة والجمال للمدونة الاسلامية فعلا قالب يستحق التحميل 

القالب الاسلامي

1. تميز القالب بزخرفه اسلاميه رائعه
2. القالب مصمم خصيصا للمدونات الدعويه
3. قالب انيق ومميز واحترافي
4. يتميز القالب بارشفه قويه
5. يتميز بخفة في التصفح
6. متوافق مع جميع المتصفحات الرئيسيه (جوجل كروم، فايرفوكس وإنترنت إكسبلورر)
7. سلايدشو احترافي مع عرض موضوع التدوينه ووصفها
8. أماكن مخصص للإعلانات بقياسات مختلفة
9. إضافة مواضيع ذات صله مع صوره مصغره
10. إضافة اقرا المزيد 
11. سايد بار على اليمين
12. قوائم منسدله
13. للقالب صندوق تعليقات بشكل ومميز
14. يتميز بالوان خفيفه بني وخشبي
15. نظام تعليقات مترابطه
16. لتحميل القالب 

اضافة طائر تويتر المتحرك بأشكال رائعه "حصريا في اضافات بلوجر"

اعزائي متابعي مدونة تكنولوجيا المعلومات  اليوم اقدم لكم موضوع رائع في قسم المدونة الجديد اضافات بلوجر 

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

طريقة الاضافة:

الطريقة بسيطة وسهلة وفعالة وانا مجربها 

- اذهب الي لوحة التحكم في المدونة ثم تجه الى تصميم  < اضافة اداة < ثم اختر Html/java script

وضع الكود  التالي

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

الكود الاول 

<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/Making Different-tripleflap.js"></script><script type="text/javascript">
var twitterAccount = "ضع رابط عنوانك علي تويتر هنا";
var tweetThisText = "Blogger Widgets, Tips, Hacks";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.makingdifferent.com">Making Different</a></span></noscript>

الكود الثاني

<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/Making Different-Crishtmas.js"></script><script type="text/javascript">
var twitterAccount = "ضع عنوانك علي تويتر هنا ";
var tweetThisText = "Blogger Widgets, Tips, Hacks";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.makingdifferent.com">Making Different</a></span></noscript>

واعمل حفظ  ونتمني ان يكون الشرح مستوفي  ولا تبخل علينا بتعليق  وزيارة مرة قادمة مع اداة جديدة