قالب وجهات النسخة الثالثة

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

الواجهة كاملة

معاينة / طلب

معاينة
شراء القالب

المميزات / الإضافات

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

إقرأ المزيد

أدوات مسطحة مكتبية رائعة

"الشخص الذي يعمل بيديه هو عامل، والشخص الذي يعمل بيديه وعقله هو حرفي، ولكن الشخص الذي يعمل بيديه وبعقله وقلبه فهو فنان." Louis Nizer

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

تحميل الملحق

تحميل
تحميل

معلومات عن الملحق

• حجم الملف : 5.4 MB
• الصيغة : PSD - EPS
• الترخيص : مجاني
• المصدر : Behance

إقرأ المزيد

قالب نجوم

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

الواجهة كاملة

تحميل القالب

معاينة
تحميل
تحميل
الحصول عليه من بيكاليكا

المميزات / الإضافات

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

إقرأ المزيد

إضافة تعليقات Disqus يدويا

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

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

وجب التذكير أن خدمة نقل تعليقات بلوجر الموجودة لديك لDisqus لم تعد متوفرة حالياً بسبب تحديثات جوجل مع ذلك ففريق ديسكس يعمل على تجديد الخدمة

من أهم النقاط التي تميز نظام التعليقات الجديد في عرب ويب هي :

1. يمكن متابعة التعليقات التي تم طرحها بسهوله

2. يمكن متابعة تصويتات الإعجاب او عدم الإعجاب التي تم طرحها

3. يمكنك متابعة أشخاص او ان يكون لديك متابعين شبيهه بتويتر  Followers و Following

4. يتم تحديث التعليقات وظهوره بوقت تلقائي لا يحتاج إلى تحديث الصفحة نهائياً

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

6. إمكانية إضافة صورة أو فيديو يظهر بالصندوق مباشر

7. يمكنك مشاهدة من قام بالرد عليك بتعليقاتك سواء في نفس الموقع  أو في مواقع أخرى شاركت بالتعليق فيها من خلال نظام Disqus

8. إمكانية التعليق عبر الهاتف والإشراف على التعليقات في أي مكان فهو متوافق مع الهواتف الذكية

9. مشاهدة تعليقات مرتبطة التي تم إضافتها في الموقع ككل بحيث يظهر تعليقات قد تثير اهتمامك

شرح طريقة التركيب
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن الكود التالي [إن لم تجده فإبحث عن نصفه]

<b:includable id='comments' var='post'> <div class='comments' id='comments'>

3. ضع الكود التالي أسفله

 <script type='text/javascript'>
                var disqus_shortname = &quot;Ar1web&quot;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
                    (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                })();
                </script>

4. غير Ar1web بإسم التعلقيات الخاص بك
5. إبحث عن ]]></b:skin> ضع الكود التالي فوقه

#comments {display:none;}
.post-comment-link { visibility: hidden; }

6. إحفظ القالب ومبروك عليك الإضافة

للتحكم بالتعليقات من حيث اللون والإعدادات توجه لهذا الرابط

* تحميل أداة تعليقات ديسكس تضاف بأداةHtml/Javascript

• تحميل

إقرأ المزيد

تأثيرات Css فريدة

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

• معاينة

شرح طريقة التركيب
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن </head>
3. ضع الكود التالي قبله

<link href='//ar1web-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/>

4. لتفعيل الكود فضع الكود التالي بالمكان الذي تريد تطبيق عليه التأثير

<div class='animated bounceInDown'></div>

5. طبعاً يجب أن تكون على دراية ولو قليلاً لتفعيله فيجب على نهاية </div> أن تكون بأخر المعرف أي كود الصورة مثلاً أو شيء آخر هكذا :

<div class='animated bounceInDown'>
<h2 class='title'>هذا مثال</h2>
  </div>

6. ما يتبقى عليك إلاّ إختيار إسم التأثير ووضعه بدل bounceInDown بدون حذف animated
ملاحظة : بعض التأثيرات لا تعمل في أمكان معينة، لذا وجب تجربة تأثير آخر لليقين بأن المشكلة في مكان وضع التأثير
قائمة أسماء التأثيرات كما هي بالمعاينة :
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

إقرأ المزيد

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !

إن كنت مدون , فمن الظروري النظر إلى موقعك من جانبك كزائر و متابع للمدونة , لا كصاحبها أو كناشر فيها .

و بالتالي عليك توفير أفضل الإضافات و إستعمالها في موقعك مما يجعل تصفح موقعك أسهل و أريح للمتابعين .

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

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

طريقة التعديل :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></center> <script type="text/javascript" > var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0d8zTAJz_L1XvJvfDCNTaRW11zfltfE9pFvqBM7Ih58KLqddbAj02OoakkUUH4ac2oK785JnyinEjQaZ-ObbFaJDQyoJVBqq9IC2jxaxDZrksSxphkY3o_Mu14Llsxx2Xg-EPwCvmQoL_/s1600/Blue-Arrow-Up--BloggerAdsenSeO.BlogSpot.Com.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, /*<a href='http://www.bloggeradsenseo.blogspot.com/2013/10/add-go-up-to-top-arrow-up.html'></a>*/ keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:''}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') /*<a href='http://BloggerAdsenSeO.blogspot.com'></a>*/ if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

بإمكانك تغيير شكل السهم و اختيار أحد النماذج التالية عبر البحث عن :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByoLi-B733csXTsfrrMjFOQUhlrzs9NleuKPvlHIf5zdHRdpt72VuXVtOHgCaYLBTGTTlKA3JLwkh6lddvYi3sNJw28NqXT-oTeUZfM3vpqyl3CGlX_eYHqJXfIRJnWJcIxZ4UZqDoB4/s1600/modawin-blogger-top-button-1.png

و تغييره برابط أحد الصور التالية .
(إضغط على الصورة و ستجد الرابط المباشر لها )

نموجذ 1

نموذج 2

نموذج 3

نموذج 4

ممتاز , الأن لم يتبقى إلا التركيب :

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

قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة html / javascript

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

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

(أزرار مشاركة المقالة أسفل التدوينة)

إقرأ المزيد

صناديق واردة الشكل الأول

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

• معاينة

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

1. توجه لتخطيط

2. أضف أداة HTML/JAVASCRIPT

3. ضع بها الكود التالي

<style>   
.befeature{height: 250px;overflow: hidden;width: 995px;padding: 0px 0px 0px 0px;  margin: 0 auto;}
.bebox:hover{margin-top: -180px;}
.bebox{float: right;height: 485px;margin: 0px 9px 0px 9px;margin-left: 0%;moz-transition: all .3s ease-in-out;ms-transition: all .3s ease-in-out;o-transition: all .3s ease-in-out;overflow: hidden;padding: 193px 0 0 0;transition: all .3s ease-in-out;webkit-transition: all .3s ease-in-out;width: 24%;}
.beupbox{height: 50px;margin: 0;overflow: hidden;padding: 5px 10px 0px 10px;width: 100%;}.beupbox h1{color: #fff;font-family: cursive,droid arabic kufi;font-size: 15px;font-weight: 400;margin: 0;padding: 0px 0px 0px 0px;width: 95%;text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);}
.beupbox a{text-decoration: none;}
.bedownbox{height: 400px;margin: 0;padding: 5px 10px 0px 9px;width: 94%;}
.bedownbox p{color: #FDFDFD;font-family: cursive;font-size: 13px;font-weight: 400;  text-align: right;}
#bebox1{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox2{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox3{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox4{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
    </style>
    <div class='befeature'>
    <div class='bebox' id='bebox1'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox2'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox3'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox4'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div></div></div>

* رابط الصورة محددة باللون الأصفر 

* ألوان الصناديق محددة باللون الأخضر

* ضع بدل # رابط الموضوع

* العنوان / الوصف

إقرأ المزيد

خلفيات المبرمج ـ المهووس ـ المصمم

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

|| المصمم ||

|| المبرمج ||

|| المهووس ||

تحميل الخلفيات

تحميل

إقرأ المزيد

[الدرس الاول]دورة قراصنة غزة لاختراق المواقع والمنتديات~للمبتدئين

[الدرس الاول]دورة قراصنة غزة لاختراق المواقع والمنتديات~للمبتدئين السلام عليكم ورحمة الله وبركاته  --------------------------------------------- [الدرس الاول]دورة قراصنة غزة لاختراق المواقع والمنتديات ~ للمبتدئين --------------------------------------------- التحميل على اكثر من سيرفر  ---------------------- من هنــــا---------------------- اى استفسار انا جاهز الموضوع الأصلي : [الدرس الاول]دورة قراصنة غزة لاختراق المواقع والمنتديات~للمبتدئين     -||-     المصدر : فريق قراصنة غزة | Gaza Hacker Team     -||-     الكاتب : ClaW

التوقيع : .:: فريق قراصنة غزة ::.

إقرأ المزيد