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


صورة الاضافة






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

اذهب الى لوحة التحكمفي مدونتك > تخطيط > اضافة اداة ثم اختر HTML/Javascript بعدها الصق الكود التالي حيث تشاء

<div class='clear'></div><div class='widget HTML' id='HTML1'><div class='widget-content'><style type='text/css'>#info-JmK{z-index:1000;background:-moz-linear-gradient(top,#1F2326,#000);background:-webkit-gradient(linear,left top,left bottom,from(#1F2326),to(#000));box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;-moz-box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;-webkit-box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;width:400px;position:fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px}#info-JmK{-o-transition:all 1s ease-in;-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in}#info-JmK:hover{width:400px;opacity:1.0;margin-left:0}.JmKinbox{border:1px solid #444;width:290px;margin:0 90px 10px 10px;background:transparent;color:#fff;border-radius:20px;padding:5px 0;-moz-border-radius:20px;-webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:.2}.JmKinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000;-moz-box-shadow:1px 1px 15px #000;-webkit-box-shadow:1px 1px 15px #000;background:#000;-moz-opacity:1.0;opacity:.8;-khtml-opacity:.0;-moz-border-radius-bottomleft:30px;-moz-border-radius-bottomright:30px}.JmKinbox2{margin:5px 10px;padding:0 8px 10px;color:#fff;overflow:hidden;height:450px}.JmK15{border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px}.JmK2 ul.bom{margin:0;padding:0}.JmKinbox2 li{margin-left:20px}.JmKinbox2 li a{color:#FFFFF;line-height:4px;font-size:11px;font-weight:bold;text-decoration:none}.JmKinbox2 li a:hover{color:red;text-shadow:0 1px 1px #000}.JmKinbox2 h2{font:18px Droid Serif;font-weight:bold;padding:0 8px;color:#f00;text-shadow:0 1px 1px #ddd;border-bottom:1px solid #f00}.JmKtouch{font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin:3px 10px 0 0;-o-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;text-decoration:blink}.JmKtouch:hover{-o-transform:scale(2) rotate(720deg) translate(0px);-moz-transform:scale(2) rotate(720deg) translate(0px);-webkit-transform:scale(2) rotate(720deg) translate(0px);color:red}</style><div id='info-JmK'><span class='JmKtouch'>تعليقات</span><div class='JmKinbox'><div class='JmKinbox2 JmK15'><h2>اخر التعليقات</h2><p style='text-align:justify'><div style='overflow:auto;width:ancho;height:330px'><style type="text/css">#komentar{background:#fff;border:1px solid #8181f7;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar ul{margin:0;padding:0;list-style:none}#komentar ul li:first-child{border-top:0}#komentar ul li{height:46px;background:#a9d0f5;list-style-type:none;margin:0 0 5px 0;padding:5px 5px 5px 5px!important;font-size:12px!important;font-weight:550;border:1px solid #8181f7;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar ul li:last-child{border-bottom:0}#komentar ul li:hover{background:#cff;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar a,#komentar a:link,#komentar a:visited{clear:both;color:#222;display:block;text-decoration:none}#komentar .gamen{display:block;float:left;height:42px;left:4px;margin-right:15px;position:relative;width:42px}#komentar .gamen>img{border:2px solid #fff;-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;box-shadow:0 1px 2px #222;background:url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x}#komentar ul li div.ismen{color:#333;text-shadow:-1px -1px 1px #ccc}#komentar .ismen{display:block;font-size:1em;font-style:italic;line-height:1.2;padding:2px 4px 2px 0}#komentar .gamen>span{width:150px;height:auto;line-height:20px;padding:5px;left:115px;margin-left:-64px;font-size:1em;font-weight:bold;color:#212121;text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-align:center;border:4px solid #5858fa;background:rgba(255,255,255,0.7);text-indent:0;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;box-shadow:1px 1px 2px rgba(0,0,0,0.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#komentar .gamen>span:before,#komentar .gamen>span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1)}#komentar .gamen>span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #5858fa}#komentar .gamen:hover>span{opacity:.9;bottom:55px}</style><div id="komentar"><ul><script type="text/javascript">var jmlkomentar=100;var jmlkarakter=60;</script><script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script><script src="http:/3alamihtiraf.co.vu/feeds/comments/default?alt=json&callback=tampilkankomentar" type="text/javascript"></script></ul></div></div>CREATED BY : <a href="http://3alamihtiraf.co.vu/"><blink>RB&#8482;</blink></a></p></div></div></div></div></div>

الخطوة الاخيرة غير رابط مدوناتي  ذا اللون الاحمر برابط مدونتك ثم اختر حفظ وشاهد النتائج!



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

 

مميزات الفوتر:

  • شكل إحترافي منسق تماماً
  • أزرار مواقع التواصل الإجتماعي مع تأثيرات خاصة
  • متوافق مع جميع الأجهزة اللوحية, المكتبية, المحمولة

كيفية تركيب الفوتر على مدونة بلوجر:

أولا توجه إلى لوحة التحكم في مدونتك أختر القالب ثم أنقر على زر   تحرير html
  بعد ذلك قم بالبحث عن الرمز ]]></b:skin> الآن أضف الكود التالي فوقه مباشرةً



 

#footerr {
background-color: #3E454C;
bottom: 0;
color: #7C8EA1;
font: normal .9em 'Open Sans', sans-serif;
right: 0;
padding: 18px 0;

width: 100%;
}

#footerr a {
color: #7C8EA1;
text-decoration: none;
}

#footerr a:hover {
color: #FFF;
}

.inner-wrapper {
margin: auto;
max-width: 1200px;
width: 90%;
}

#copyright {
display: inline-block;
padding: 10px 0;
}

#footer-logo {
margin: 0 5px 0 0;
vertical-align: middle;
}

.site-name {
font-weight: 600;
color: #FFF;
}

.social-menu {
display: inline-block;
float: left;
/* by: www.madad2.com */
line-height: 0;
margin: 0;
padding: 0;
}

.social-menu > li {
background-color: #353B41;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 34px;
margin: 3px;
transition: background-color .5s;
width: 34px;
}

.social-menu > li:hover {
background-color: #F2762E;
}

.clear {
clear: both;
}

@media (max-width: 767px) {
#footer-container {
text-align: center;
}

#copyright {
display: block !important;
}

.social-menu {
float: none !important;
}
}

الخطوة الأخيرة قم بالبحث عن الرمز <footer>

أو <footer أو أسفل حقوق القالب قم بمسح جميع الروابط أسفل مدونتك ثم أستبدلها بالفوتر الجديد مع الكود التالي:
<footer id='footerr'>

<div class='inner-wrapper' id='footer-container'>
<div id='copyright'>

<span class='site-name'>
جميع الحقوق محفوظة</span>
&#169; 2014 | <a href='
#'>سياسة الخصوصية</a>
</div>

<ul class='social-menu'>
<li title='
Facebook'>
<a href='
#'><img alt='Facebook' height='34' src='http://s26.postimg.org/bee0b3p1h/facebook.png' target='_blank' width='34'/></a>
</li>
<li title='
Twitter'>
<a href='
#'><img alt='Twitter' height='34' src='http://s26.postimg.org/addrlz81x/twitter.png' target='_blank' width='34'/></a>
</li>
<li title='
Feed'>
<a href='
#'><img alt='Feed' height='34' src='http://s26.postimg.org/shgs6m5qd/feed.png' target='_blank' width='34'/></a>
</li>
<li title='
Google+'>
<a href='
#'><img alt='Google+' height='34' src='http://s26.postimg.org/jnpvpiirp/google.png' target='_blank' width='34'/></a>
</li>
</ul>

<div class='clear'/>
</div>
</footer>
ضع رابط سياسة الخصوصية أو نموذج الأتصال بدلاً من إشارة المربع #
ولا تنسى أيضا إضافة روابط صفحاتك على مواقع التواصل الإجتماعي بدلا من المربع # فيدبرز, فيس بوك, تويتر, جوجل بلس

بعد أن تنتهي إضغط حفظ القالب.

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


اليوم باذن الله مع قالب حصري ولأول مرة يطرح في المواقع و المدونات وهو قالب خاص بالخدمات
قالب خدمات بليس

                                                                         صور قالب






او على موقع اخر



في هده التدوينة نتطرق الى طريقة انشاء موقع العاب فلاش في مدونة بلوجر

طريقة الانشاء

الطريقة الاولى:1- إنشاء مدونة جديدة على بلوجر
2- إختيار قالب مميز لمدونتك
3- إذهب لأي موقع ألعاب فلاش تريده
4- إختر اللعبة التي تريد أن تضيفها لمدونتك
5- قم بالضغط على  ctr+u أو الزر الأيمن للفأرة ثم اختر view source page
6- إبحث عن الكود التالي:

swf
بالضغط على ctr+f
7- عندما تجده ضع الرابط كامل مثال:
http://www8.agame.com/mirror/flash/m/Most_wanted_bandito/TheMostWantedBandito-Spil-final.swf

8- قم بانشاء تدوينة جديدة 
9- توجه الى تحرير الـHTML و ضع الكود التالي :
<embed align="middle" allowscriptaccess="always" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www8.agame.com/mirror/flash/m/Most_wanted_bandito/TheMostWantedBandito-Spil-final.swf" type="application/x-shockwave-flash" width="480"></embed>

تغيير الابعاد 400 -480 باللون الازرق للتتناسب مع مدونتك 
غير ما بالون الاحمر برابط اللعبة التي تريد اضافتها 
10- اضف الوصف للعبة التي وضعتها 

11- واخيرا قم بنشر تدوينتك الجديدة.

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

1.اذهب لوقع يعرض روابط اللعبة مثال :
2.اذهب الي العبة التي تريد وضعها في مدونتك
3.ستجد   Embed
Ashampoo_Snap_2010.12.23_21h38m11s_001_Siege+Of+Troy+-+Free+Games+For+Your+Website+-+Opera

4.اضف الرابط الذي امامها مثال :
<iframe src="http://www.freeonlinegames.com/embed/23280" width="670" height="550" frameborder="no" scrolling="no"></iframe>
5.  قم بنشر تدوينتك. مبروك النجاح في إنشاء موقع ألعاب فلاش مجاني على بلوجر!

يوفر بالتالي على المستخدم عناء البحث بشكل يدوي.


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

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

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

BrPuSNCCUAAyXU2.png large

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

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

وأشارت الشركة إلى أن الدقيقة التي مرّت بها لحظة إضاعة ركلة الجزاء الحاسمة من قِبل لاعب الفريق التشيلي؛ غونزالو خارا رييس، حصدت ما يزيد عن 389 ألف تغريدية، وهو ما تجاوز أعلى عدد تغريدات تم الوصول إليه في تويتر خلال حدث رياضي، والذي كان قد بلغ 382 ألف تغريدة.

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

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

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

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

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

وقالت “فيسبوك” إن إحدى محاكم مدينة نيويورك الأمريكية طلبت منها الكشف عن حسابات 381 شخص، وأضافت أنها كانت تحت وطأة أمر قضائي “مضحك” إذ مُنعت من الحديث عن هذه القضية أو إخطار الأشخاص المتضررين حتى وقت قريب.

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

وكانت “فيسبوك” قد أعلنت في وقت سابق أنها تلقت خلال المدة بين شهري تموز/يوليو وكانون الأول/ديسمبر 2013 نحو 12,598 طلبًا من جهات إنفاذ القانون في الولايات المتحدة التي طلبت معلومات عن حوالي 18،715 من المستخدمين أو الحسابات.

السلام عليكم

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



1- انتقل إلى لوح تحكم مدونتك الخاصة بحسابك على بلوجر

2- إختر " تصميم " ثم " تحرير HTML " (تذكر أن تحتفظ بنسخة احتياطية من القالب)

3- اضغط على CTRL+F للبحث عن :
 
</style> 
 
4- ثم أضف الكود التالي فوقه مباشرة :
#navbar { width: 0px; height: 0px; display:none; }
 
 
واخيرااا قم بحفض التغييرات تم قم بالتحقق 
و السلام عليكم
 
 


السلام عليكم 

راح اقدم لكم اليوم في غياب طويل . خاصية  تسجيل الدخول لمدونة بلوجر

 

 

طريقة تركيب هذه الإضافة :

1- أدخل إلى لوحة التحكم الخاصة بمدونتك على البلوجر، ثم اضغط على تخطيط و أضف HTML/JavaScript.
2- قم بنسخ و لصق الكود التالي داخل الأداة :

<style>
.signinform1{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugAGFW-mpk64XouXJWG6ERa-tnsPZ4p00Q0IEnqUgzAtZ0s9VBjpeQDI030MRynqZgcOR5ZR-dLa4HuOj7WffUI6lQ1vqnb7C-3SVBHdd-pcwE7qRJ6QN1u4MWSoGYC_h2At_Gw1xa0ez/s1600/colored-strip+-+www.afkarpro.blogspot.com.png") repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #AAAAAA; border-radius: 3px; margin-top: 0px; margin-bottom: 10px; padding: 3px 0; /* afkarpro.blogspot.com */
}
.signinform2{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQQ1Wdiq2F5m8HOyETMPrZZ64sH6bxfRcRGDdF_cGtOLKTE6zF3v5X0gHU8xWLB5MeR4JtCxGaN3nqvLJSv0AwfTv7wmgK_OdafFHv18vbSPN05xK4MIsTn-wz2GTyZFu5QPSL2K77Psp/s1600/bg-pattern+-+www.afkarpro.blogspot.com.png") repeat scroll 0 0 #F7F7F7; color: #111111; font-size: 14px; line-height: 20px; padding: 5px 20px 1px; text-align: center; text-transform: uppercase; /* afkarpro.blogspot.com */
}
.signinform2 h3{
color: rgb(227, 103, 31); border-top-width: 1px; border-bottom-width: 1px; border-radius: 10px 10px 10px 10px; padding-right: 25px; padding-left: 25px; margin-right: -20px; margin-top: 0px; margin-bottom: -5px; font: bold 17px Droid Arabic Naskh,serif; border-style: dashed; border-right-color: rgb(84, 84, 84); border-left: 3px dashed rgb(183, 38, 38); width: 242px; /* afkarpro.blogspot.com */
}
.signinform2 b{
display:block; padding-left: 3px; font:bold 12px Droid Arabic Naskh,serif; margin-right: 15px; text-align: right; /* afkarpro.blogspot.com */
}
.ubtn-block {
background: -moz-linear-gradient(center top , #F3650F, #E96516) repeat scroll 0 0 rgba(0, 0, 0, 0); border-color: #FFFFFF !important; border-left: 1px solid #FFFFFF !important; border-radius: 6px; border-style: solid !important; border-width: 1px 1px 2px !important; box-shadow: 0 8px 6px -6px #909090; color: #FFFFFF; cursor: pointer; font: bold 13px DroidKufi-bold,Arila,Tahoma; height: 30px; margin: 0px 0 10px 0; padding: 4px 14px 30px; transition: all 1s ease 0s; /* afkarpro.blogspot.com */
}
.ubtn-block:hover {
background-color: #357AE8; background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8); border-color: #2F5BB7; /* afkarpro.blogspot.com */
}
</style>

<div class="signinform1">
<div class="signinform2">
<h3>تسجيل الدخول بمدونة بلوجر</h3><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div>
<label for="Email"><b>اسم المستخدم : </b><input id="Email" tabindex="1" value="" name="Email" size="35" type="text"/></label></div><div>
<label for="Passwd"><b>كلمة السر : (<a target="_top" title="هل نسيت الرقم السري" href="https://www.blogger.com/forgot.g">؟</a>)</b> </label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="35" type="password"/></div><br/>
<input id="signin-btn-ns" tabindex="0" value="سجل الدخول الآن" class="ubtn ubtn-block" name="submit" type="submit"/></form>
</div>
</div>




ثم قم بحفظ الإضافة.




*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ..



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

undefined

كيفية اضافة هذه القطعه الى مدونتك

1- انتقل إلى لوحة تحكم مدونتك

2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript

3- والآن الصق داخل المستطيل الكود التالي

]]></b:skin>


ثم قم بإضافة هذا الكود قبله مباشرة :












ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center
border: none;
 }

 بعد ذلك إبحث عن هذا الكود :

</head>

 و ألصق الكود التالي قبله :




<script src='http://code.jquery.com/jquery-latest.js'

type='text/javascript'/>

<script type='text/javascript'>

$undefineddocument).readyundefinedfunctionundefined){

//Larger thumbnail preview

$undefined&quot;ul.thumb li&quot;).hoverundefinedfunctionundefined) {

$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;10&#39;});

$undefinedthis).findundefined&#39;img&#39;).addClassundefined&quot;hover&quot;)

.stopundefined)

.animateundefined{

marginTop: &#39;-110px&#39;,

marginLeft: &#39;-110px&#39;,

top: &#39;50%&#39;,

left: &#39;50%&#39;,

width: &#39;174px&#39;,

height: &#39;174px&#39;,

padding: &#39;20px&#39;

}, 200);

} , functionundefined) {

$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;0&#39;});

$undefinedthis).findundefined&#39;img&#39;).removeClassundefined&quot;hover&quot;)

.stopundefined)

.animateundefined{

marginTop: &#39;0&#39;,

marginLeft: &#39;0&#39;,

top: &#39;0&#39;,

left: &#39;0&#39;,

width: &#39;100px&#39;,

height: &#39;100px&#39;,

padding: &#39;5px&#39;

}, 400);

});

//Swap Image on Click

$undefined&quot;ul.thumb li a&quot;).clickundefinedfunctionundefined) {

var mainImage = $undefinedthis).attrundefined&quot;href&quot;); //Find Image Name

$undefined&quot;#main_view img&quot;).attrundefined{ src: mainImage });

});

});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>

</script>

والآن قم بحفظ القالب


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر  HTML/Javascriptولآن الصق الكود التالي :


<ul class="thumb">
    <li><a href="رابط المعلن"><img src="banner  رابط البنر " alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="bannerرابط البنر " alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="banner رابط البنر" alt="" /></a></li>
    <li><a href="رابط المعلن"><img src="banner رابط البنر" alt="" /></a></li>
    </ul>

  واخيرآ قم باستبدل ماباللون الازرق برابط صورة المعلن 

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


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


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

الكود يعتمد على تأثير css وهي اللغة التي تبرمج بها التأثيرات للhtml اللإضافة سهله جدا كل ماعليك فعلة

هو إتباع هذه الخطوات :



لخطوات : 


توجة إلى blogger.com لوحه التحكم 

إختار المدونة التي تريد 

توجه إلى قالب 

 ثم إلى تحرير html

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


]]></b:skin>


  • ثم أضف قبلة هذا الكود : 



.post img {
border:10px solid #fff;
overflow:hidden;
-webkit-box-shadow:5px 5px 5px #111;
box-shadow:5px 5px 5px #111;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;
margin:20px;
}

.post img:hover {
border-radius:50%;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

بعد ذلك قم بحفظ القالب



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

الطريقة سهلة جدااا 

1. ندهب الى القالب 

2 . ندهب الى تحرير HTML

نقم بالضغط على CTRL + F ابحث عن الكود التالي :


]]></b:skin>


3 . ثم انسخ مباشرة فوقه هذا الكود

 

html {
          overflow-x: hidden;
        }


4 . سوف يختفي شريط التمرير السفلي


ممكن نشر الموضوع ليستفيد الجميع


^_^

' و السلام عاليكم '

 

 

 

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

وهي منفذة بال css مع تأثير Jqeury و ال html

 

وهذا ملف ال css

رمز PHP:

 

body {
    
background:#E5F0FF none repeat scroll 0 0;
    
color:#595959;
    
font-familyTraditional ArabicArial;text-alignright;
    
font-weightbold;
    
font-size14px;
}
ulli{
    
padding0px;
    
margin0px;
}
ul.dropmenu{
    
positionrelative;
    
margin0px;
    
padding1px 0px 0px 0px;
    
background:transparent url(images/navigation.pngrepeat-x scroll 0 0;
    
display:block;
    
height35px;
    
font-familyTraditional ArabicArial;text-aligncenter;
    
font-weightbold;
    
font-size14px;
}
.
dropmenu li{
    
positionrelative;
    list-
stylenone;
    
floatright;
    
margin0px;
    
padding0px;
}
.
dropmenu li a{
    
height22px;
    
padding9px 30px 0px 15px;
    
displayblock;
    
cursorpoint;
    
border-rightsolid 1px #4a779d;
    
color#FFFFFF;
    
text-transformuppercase;
    
text-decorationnone;
}
.
dropmenu li span{
    
displayblock;
    
floatleft;
    
height10px;
    
width10px;
    
background:transparent url(images/arrow_up.pngrepeat-x scroll 0 0;
    
positionabsolute;
    
top12px;
    
right10px;
}
.
dropmenu li  a:hover span{
    
background:transparent url(images/arrow_hover.pngrepeat-x scroll 0 0;
}
.
dropmenu li:hover ul, .dropmenu li:hover div{
    
displayblock;
}
.
dropmenu ul{
    
positionabsolute;
    
displaynone;
    
width140px;
    
padding0px;
    
margin0px;
    
border-bottom1px solid #ccc;
    
background#FFFFFF url(images/gradient.png) repeat-x scroll 0 0;}
.
dropmenu ul li{
    
border0;
    
floatnone;
}
.
dropmenu ul a {
  
border1px solid #ccc;
  
border-bottom0;
  
white-spacenowrap;
  
display:block;
  
color#0657AD;
  
text-decorationunderline;
  
text-transformnone;
}
a.selecteda:hover{
    
color#0657AD !important;
    
background#FFFFFF url(images/gradient.png) repeat-x scroll 0 0;}a.selected span{
    
background:transparent url(images/arrow_hover.pngrepeat-x scroll 0 0;
}
.
dropmenu ul a:hover {
    
color:#F67A00 !important;
    
text-decorationnone;
    
background-color#F0F0F0;
    
background-imagenone;
}
.
dropmenu div ul{
    
positionrelative;
    
displayblock;
}
.
dropmenu li div{
    
background#FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
    
border1px solid #ccc;
    
padding5px;
    
displaynone;
    
positionabsolute;
}
.
dropmenu li div ul{
    
bordernone;
    
backgroundnone;
    
positionrelative !important;
}
.
dropmenu li div a{
    
bordernone;
    
border-bottom1px solid #ccc;}
.
dropmenu li div div{
    
displayblock;
    
positionrelative;
    
backgroundnone;
    
bordernone;
}
.
dropmenu li div div a{
    
displayinline;
    
bordernone;
    
color#666;
    
text-decorationunderline;
    
padding0px;
    
margin0px;
    
text-transformnone;
}
.
dropmenu li div div a:hover{
    
color#000;
    
text-decorationnone;
}
ul.left{
    
floatleft;
    
width145px;
}
ul.right{
    
floatright;
    
width145px;
}
.
small{
    
color#666;
    
font-size10px;
    
padding10px 5px 8px 5px !important;
    
displayblock;
    
clearboth;
    
font-familyTraditional ArabicArial;

    
font-weightbold;
    
font-size13px;
}
.
products{
    
width300px;
    
padding15px !important;
}
.
products ul{
    
width100%;
}
.
products ul li{
    
border-bottom1px solid #ccc;
    
height40px;
    
padding10px 0px;
}
.
products h2{
    
font-size16px;
    
padding2px 0px 3px 0px;
    
margin0px;
}
.
products p{font-familyTraditional ArabicArial;

    
font-weightbold;

    
color#666;
    
font-size13px;
    
padding0px;
    
margin0px;
}
.
products img{
    
floatright;
    
padding-right10px;
}
.
products  ul li a{
    
displayinline;
    
bordernone;
    
color#666;
    
text-decorationunderline;
    
padding0px;
    
margin0px;
    
text-transformnone;
}
.
products  ul li  a:hover{
    
color#000 !important;
    
text-decorationnone;
    
backgroundnone !important;
}

.
tutorials{
    
width300px;
}

.
login{
    
padding15px !important;
    
width180px;
    
font-familyTraditional ArabicArial;

text-alignright;
    
font-weightbold;
    
font-size14px;
}
input{
    
border:1px solid #4A779D;
    
padding3px 8px;
    
margin-bottom8px;
    
width164px;
}
label{
    
padding0px 0px 4px 0px;
    
display:block;
}
button{
    
background#4A779D url(images/navigation.png) repeat-x scroll 0 0;
    
color#FFF;
    
border:1px solid #4A779D;
    
padding4px 10px;
    
width180px;
}



وهذا ملف ال html

رمز PHP:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"><head profile="http://gmpg.org/xfn/11">
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>القوائم الافقية بشكل جميل</title>
<
meta name="description" content="Computer tips, tricks en tutorials voor de gevorderde computer gebruikers." />
<
meta name="keywords" content="computerfaq, leren, handleidingen, programmeren, php, webdevlopment, scripting, handleidingen" />
<
script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="dropmenu.js"></script> 
<script>
$(document).ready(function(){
    $("#nav-one").dropmenu();
});
</script>
<link rel="stylesheet" id="smthemenewprint-css"  href="style.css" type="text/css" />
</head>

<body>
<ul id="nav-one" class="dropmenu"> 
            <li> 
                <a href="#">الرئيسية</a> 
            </li> 
            <li> 
                <a href="#">المنتديات</a> 
                <ul> 
                    <li><a href="#">الدعم الفني</a></li> 
                    <li><a href="#">المساعدة</a></li> 
                    <li><a href="#">صفحة تجريبية</a></li>
                    <li><a href="#">صفحة تجريبية</a></li>
                </ul> 
            </li> 
            <li> 
                <a href="#item3">التحميل</a> 
                <ul> 
                    <li><a href="#">برامج كمبيوتر</a></li> 
                    <li><a href="#">كتب و راجع</a></li> 
                    <li><a href="#">مشاريع جاهزة</a></li> 
                </ul> 
            </li>  
            <li> 
                <a href="#">المنتجــات</a> 
                <div class="products">
                    <ul> 
                        <li><img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                        <li><img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>تجربة تجربة</h2><p><a href="#">كلام يكتب هنا</a></p></li> 
                    </ul>
                    <div class="small">وصف يكتب هنا وصف يكتب هنا وصف يكتب هنا.</div>
                </div>
            </li>
            <li> 
                <a href="#">أدوات الهاكر الأخلاقي</a> 
                <div class="tutorials">
                    <ul class="left"> 
                        <li><a href="#">الميتاسبلووت</a></li> 
                        <li><a href="#">برنامج Nikto</a></li> 
                        <li><a href="#">برامج فحص السرفرات</a></li> 
                    </ul>
                    <ul class="right"> 
                        <li><a href="#">برامج الهندسة العكسية</a></li> 
                        <li><a href="#">الهندسة العكسية</a></li> 
                        <li><a href="#">برامج الحقن</a></li> 
                    </ul>
                    <div class="small">مشاهدة <a href="#">جميع الأقسام</a> او <a href="#">اختر ما يناسبك من القائمة</a>.</div>
                </div>
            </li>
            <li> 
                <a href="#">روابط</a> 
                <ul> 
                    <li><a href="#">برمجة و تصميم</a></li> 
                    <li><a href="#">أمن معلومات</a></li> 
                    <li><a href="#">الويب 2.0</a></li> 
                    <li><a href="#">الدعم الفني</a></li> 
                    <li><a href="#">تجربة تجربة</a></li> 
                    <li><a href="#">قواعد البيانات</a></li> 
                    <li><a href="#">تجربة تجربة</a></li> 
                </ul> 
            </li>
            <li> 
                <a href="#">تسجيل الدخول</a> 
                <div class="login" dir="rtl">
                    <label for="txtuser">اسم المستخدم: </label>
                    <input type="text" name="txtuser" id="txtuser" />
                    <label for="txtuser">كلمة المرور: </label>
                    <input type="password" name="txtpass" id="txtpass" />
                    <button>دخول</button>
                </div>
            </li>             
        </ul> 
</html>



ممكن نشر المضوع ليستفسد الجميع
^_^

MARI themes

يتم التشغيل بواسطة Blogger.