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


سلايدر

شاهد المزيد
قوالب

أفضل اضافات

شاهد المزيد

الأحد، 9 أكتوبر، 2016

اضافة صندوق بأزرار في السيدبار

كيف تجعل الأزرار في السيدبار، عادة هذه الاضافة تجدونها في المواقع التي تقدم القوالب بصفة عامة واليوم سنتكلم عن طريقة اضافتها، لن أشارككم فقط السكربت الذي يجعل الصندوق في اليسار بل ايضا ترافقه صناديق وأزرار فنحن أيضا نستخدمها في تحميل القوالب والملحقات وبناء على طلباتكم وضعنا تدوينة لها وأظنها لمسة جميلة لأصحاب المواقع الذين لديهم روابط للتحميل بكثرة.
الآن يمكنكم رؤية المعاينة قبل أن ندخل للشرح
شرح طريقة التركيب
1. ضع الكود التالي فوق ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
/*تحميل  معاينة */
#store-style{overflow:hidden;font-family:Droid Arabic Naskh,sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}
a.storebutton.but3,a.storebutton.but2 { display: inherit; padding: 10px 0; margin: 20px auto; width: 97%; background: #4F4F52!important; }
a.storebutton.but2 {background: #F9A741!important;margin:0 auto!important}
#store-style .storebutton:hover,a.storebutton.but3:hover{background:#333!important;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:right}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}
2. ضع الكود التالي فوق </head>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>
3. ابحث عن كود السيدبار الخاص بك الكود يختلف من قالب لقالب وقد يكون هكذا : <aside id='sidebar-wrapper' أو هكذا : <div id='sidebar-wrapper' وإن كان عكس ذلك ولم تعرفه فقط ابحث عن اسم الأداة الأولى وسيوجهك اليه بعدها ضع الكود التالي أسفله
<a name='details'/> 
<div class='clear'/>



4. قم بحفظ النموذج
تركيب الأزرار
1. قم بتحرير موضوع ثم انتقل الى تبويب HTML وضع الكود التالي في أي مكان
<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<center>
<a class="storebutton but1" href="رابط المعاينة#" target="_blank">معاينة مباشرة</a>
<a class="storebutton but3" href="رابط التحميل#" target="_blank">تحميل القالب</a>
</center>
</div>
<div id="store-style">
<center>
<a class="storebutton but2" href="رابط الشراء#" target="_blank">$5 - النسخة المدفوعة</a></center>
<div class="rio-ss">
<span class="storelist">دعم دائم</span>
<span class="storelist">حذف حقوق التصميم</span>
<span class="storelist">يستخدم بأي مدونة</span>
<span class="storelist">لا وجود للسكربتات المشفرة</span>
<span class="storelist">تغيير ألوان القالب</span>
<span class="storelist">والمزيد...</span>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
2. غير الروابط والكلمات ثم انشر الموضوع

طريقة جعل صورة الموضوع فوق السيدبار والموضوع

السلام عليكم ورحمة الله وبركاته
أعود لكم بدرس جديد من دروس إضافات بلوجر والذي يتمثل في إضافة صورة الموضوع والعنوان فوق السيدبار ومحتوى الموضوع أي ستكون كالكوفر وهذا ما تمثلة صورة هذه التدوينة وأيضا المثال الذي سنشاهده بالمعاينة، طبعا هذه الإضافة قد تغير الكثير في شكل موقعك من حيث المواضيع لأنها تقوم بأخذ الصورة الرئيسية للموضوع وتفرقها بمكان واسع وواضح... أود أن أذكر أن لها سلبية بسيطة وهي أن لابد أن تضيف كود بداخل كل موضوع لديك لتظهر الصورة فإذا كان لديك أزيد من 100 موضوع قد تجد صعوبة في تحرير كل موضوع وإضافة الكود ولكن إذا أحببتها وتريدها بموقعك فطبعا ستفعل الواجب.
شرح طريقة التركيب
1. ابحث عن </head> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 auto;padding:20px 0 20px;}
.post-upper p.title{font-size:37px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0;position: absolute; top: 500px; left: 0; text-align: center; right: 0;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.36);z-index: 99;}
.post-upper .thumb-post{text-align:center;margin:0;padding:0}
.post-upper .thumb-post img{width:100%;max-width:100%;height:550px;margin-top:15px;border: 1px solid #dedede;border-radius: 3px;}
h3.post-title,.post-header,.post h1,.post h2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
p.att-javascript{font-size:150%;text-align:center}
.thumb-post img { -webkit-filter: brightness(0.9); transition: 0.2s all ease-in-out; } .thumb-post img:hover { -webkit-filter: brightness(1); }
</style>
</b:if>
* كما شاهدتم بالمعاينة فمكان العنوان وسط الصورة إذا أردت وضعه خارج الصورة أي بأعلاها فاحذف الكود المحدد بالأحمر
* لتغيير لون الخط فهو محدد بالبرتقالي
* إن لم يرق لك التأثير الذي يضلل على الصورة بالأسود فيمكنك حذفه وهو محدد بالأخضر
2. ضع الكود التالي فوق </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var items=document.getElementById("items-thumbnail"),divs=document.getElementsByClassName("thumb-post");[].slice.call(divs).forEach(function(e){e.innerHTML=items.innerHTML});
//]]>
</script>
</b:if>
3. المرحلة بعد الأخيرة وقد يختلف كل قالب عن هذا الكود: <div class='main-outer'> إذا وجدته ضع الكود الآتي أسفله
للقوالب المعدلة إبحث عن هذا <div class='content-wrapper'> : أو هذا : <div class='outer-wrapper'>



* إذا واجهت صعوبة في إيجاده فأدعوك لمراسلتي برابط موقعك عبر مراسلتنا وسأرد عليك بمكانه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-upper'>
<p class='title'>
          <data:blog.pageName/>
        </p>
<div class='thumb-post'/>
  </div>
</b:if>
وصلنا للمرحلة الأخيرة من فضلك تذكر أنه يجب أن تكون صورة الموضوع ذات مقاس معقول أي لا تكون صغيرة وهذا المقاس الأفضل 720px x 350px ويفضل أن لا يتعدى حجمها 100kb.
4. الآن عندما تفتح موضوع إنتقل لتبويب HTML واحذف ما به من كتابة إذا وجدتها ثم إرفع الصورة واختر الحجم الأصلي بعدما تضاف أحذف الكودات المحددة بالأحمر :
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></a></div>
بحذف رابط الصورة والإطار سيصبح هكذا :
<div class="separator" style="clear: both; text-align: center;"><img  src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></div>
ثم أضف الكود : id = "items-thumbnail" بعد <div ليصبح هكذا :
<div id = "items-thumbnail" class="separator" style="clear: both; text-align: center;"><img  src="http://3.bp.blogspot.com/-yR56elXEFVU/VjyheFbDpII/AAAAAAAAJNI/-wn6e8O2LFo/s1600/Pop-out-widget.png" /></div>
* طبعا إن كان لديك مواضيع كثيرة فيمكنك فقط نقل الكود الآخير وتغييره بما لديك حتى لا تتكبد العناء ولا تنسى نسخ الصورة ووضعها بدل مكان المحددة بالأخضر
انتهى الموضوع والشرح... ومرحبا بالإستفسارات 

كيفية تغيير شكل صندوق الاقتباس في مدونات بلوجر

  
ghtp


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

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>


 واضف الكود التالي فوقه مباشرة


.post blockquote {
    background: rgb(49, 49, 49) !important;
    border-radius: 4px !important;
    border: 1px solid rgb(221, 221, 221) !important;
    box-sizing: border-box;
    clear: both !important;
    color: rgb(248, 248, 248) !important;
    direction: ltr !important;
    font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif !important;
    font-size: 12px !important;
    font-stretch: normal !important;
    line-height: 1.6em !important;
    margin: 0px 1.15385em;
    max-height: 400px !important;
    outline: 0px;
    overflow-x: auto !important;
    padding: 0px 10px 10px !important;
    position: relative !important;
    quotes: "" "";
    text-align: left !important;
    vertical-align: baseline;
    z-index: 50 !important;}
 بعدها قم بحفظ القالب ولتفعيله ادهب مشاركة جديدة اتبع الصورة

Capture

ولاي استفسار باب التعليق مفتوح

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

3d5b3f39306dc59e04d87db14dc28f17


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

اولا توجه الى قالب المدونة وابحث عن الكود التالي
]]></b:skin>
واضف فوقها الكود التالي
#oi-web-live {border: 5px solid #fff; padding: 10px 10px;background: #29567D url(http://3.bp.blogspot.com/-JTpuU7eTzso/VEiGa00vQ3I/AAAAAAAADTU/97Fv4hIrXgg/s1600/header-bg.png) no-repeat left bottom; color: #fff; position: relative; overflow: hidden; }.right-live {position: relative; float: right; }.right-live img { width: 118px;}.left-live { text-align: center; overflow: hidden; position: absolute; right: 0; font-size: 17px; left: 0; width: 550px; top: 40px; margin: 0 auto; display: block; font-weight: normal;font-size: 16px;}.time-live { float: left; margin-top: 10px;text-align: center; z-index: 99999999; font-size: 18px; position: relative; width: 129px; font-family: "Ta3alamFont"; }span#saaa { font-size: 37px; margin-right: 3px; margin-left: 21px; line-height: 46px; }.left-live a:hover { background: #F74047; }.left-live a { margin-right: 10px;margin-top: 6px; border-radius: 3px; transition: 0.2s; color: #fff; display: inline-block; padding: 8px; border: 2px solid #F74047; font-size: 16px; font-weight: normal;}
 وهذا هو كود html يمكنك اضافته في اي مكان مثلا في الهيدر فوق الفوتر في اداة داخل التخطيط ...
 <div id='oi-web-live'>
<div class='right-live wow bounceIn animated'>
<img src='https://lh3.googleusercontent.com/-EQrOkedTg4U/VyfYeI0G50I/AAAAAAAAGPI/OzfTkwLXLG48uV9UFqmz3qU05pwFJkmSACCo/s256/streaming.png'/></div>
<div class='left-live wow bounceInUp animated'>
<span id='ssgf1'><i class='fa fa-microphone'/>
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك</span><a href='#'>قريبا.... <i class='fa fa-spinner fa-spin'/></a></div>
<div class='time-live wow bounceInLeft animated'><i class='fa fa-check-square-o'/>
<span id='saaa'>7</span>:<span id='d9i9a'>30</span>
<span id='ssss'>بتوقيت غرينيتش</span>
</div>
</div>
<div class='clear'/>
قم بتغيير ما يلي بما تريد
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك
وقم ايضا بتغير # برابط صفحة البت الخاص بك 
ونتمنى من كل شخص استفاد يترك تعليق لتحفيزنا من اجل المزيد


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

اضافة مواقيت الصلاة الى مدونة بلوجر


اضافة مواقيت الصلاة الى مدونة بلوجر

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

مميزات الاضافة 

  1. تشغيل الأذان في موقعك عندما يحين وقت الأذان
  2. عرض وصف المدينة مع التاريخ الخاص بها في الأعلى
  3. عرض التوقيت الخاص بالمدينة
  4. عرض الوقت المتبقي للصلاة القادمة
  5. اختيارك لون التصميم

الطريقة بأسم الله


  1. اذهب الى هذا الرابط http://adyou.me/IuVm
  2. اختر دولة الاذان
  3. اختر المدينة (يفضل اذا كانت العاصمة)
  4. ضبط الخيارات
  5. اختار لون
  6. انسخ الكود
  7. ثم اذهب لمدونتك ثم تخطيط
  8. ثم اضف الكود الذى نسخته فى اداة html

الأربعاء، 5 أكتوبر، 2016

أفضل و أسرع قالب بلوجر 2016

أفضل و أسرع قالب بلوجر 2016

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

مميزات القالب :


  1. تصميم أنيق و متجاوب مع جميع الشاشات 100% .
  2.  سلايد شو مميز و احترافي يعمل بواسطة أحدث المقالات او بواسطة التسميات و يمكنك ايضاً إخفاءه عن الظهور .
  3. مبني بأحدث التقنيات HTML5 و CSS3 و jQuery .
  4.  10 ايقونات التواصل الاجتماعي مجهزة مع القالب و سهلة التحكم . المعاينة
  5. صفحة خطأ 404 .
  6. مساحات إعلانية 728×90 اعلى المدونة بالإضافة الي مساحات إعلانية اعلى و اسفل المقالة سهلة التعديل من لوحة التحكم .
  7.  دعم شاشات الريتنا .
  8. محسن لمحركات البحث و سريع التصفح و الأرشفة .
  9. أداة متابعين الفيس بوك بدون أكواد . 
  10.  التوافق في المظهر مع جميع أدوات بلوجر الأساسية .
  11.  إمكانية أخفاء و إظهار مربع البحث عبر لوحة التحكم .
  12. لوحة تحكم منسقة المظهرة و شاملة التحكم حيث أنك لن تحتاج للتعامل مع الأكواد .
  13.  امكانية تخصيص القالب مع عدد لانهائي من الالوان و مجموعة كبيرة من الخلفيات مع إمكانية رفع خلفية من الحاسوب .


 معاينة القالب : من هنا                تحميل القالب : من هنا 

مهم ! من أجل تشغيل السلايدر شو يجب عليك الذهاب الى التخطيط و إضافة أداة جديدة في مكان وضع السلايدر شو ، وأضف الكود التالي :
 <script src=’/feeds/posts/default?published&alt=json-in-script&callback=rs’></script> 
وقم بحفظ .



الأربعاء، 31 أغسطس، 2016

تحميل اللعبة الاسطورية pes 2017 كاملة مجانا للاندرويد


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

تحميل اللعبة برابط واحد مباشر وبصيغة apk + data ومعها ملف obb من هنا.

والى اللقاء

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