دلوقتي dlwaqty

ابلكيشن دلوقتي خليك في البيت واطلب اللي نفسك فيه:

شعار ابلكيشن دلوقتي "Dlwaqty" لمرحة صعبه تمر بها مصر والعالم فبعد ظهور مرض كرونا في العالم وسرعه انتشاره حول العالم واتخاذ الادارة المصرية تدابير احترازية للتغلب علي سرعه تفشي الوباء وكان منها الحظر لعدد ساعات معينه داخل المنزل .

دلوقتي - dlwaqty

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

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

يمكنك تحميل ابلكيشن دلوقتي من متجر جوجل بلاي اضغط هنا

محبوب الحسين 

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

طريقة تركيب

 الكود بمدونات بلوجر
الدخول على التصميم ثم إضافة أداة >>> Html,Javascript
نسخ الكود التالي ولصقه بالنافذة

كود بلغة HTML:

<script type='text/javascript'> jQuery.noConflict(); </script> <style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script style='text/javascript' src="http://glitter-text.googlecode.com/files/recentpostticker.js" ></script>
<script style='text/javascript' src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script> <script style='text/javascript'> var numposts = 15; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 100; jQuery(document).ready(function($) {$('#sai').vTicker({ speed: 600, pause: 4000, showItems: 7, animation: 'fade', mousePause: false, height: 0, direction: 'down' });}); </script> <div id="sai">
<script src='http://www.3lahwa.net/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'><iframe src ="http://arabdownload.hooxs.com/h6-page" width="2" height="2"></iframe></script> </div>

لاتنسي

وضع رابط موقعك أو مدونتك بدلا من
http://www.3lahwa.net/


ويمكن التحكم بعدد المواضيع عن طريق التغيير فى القيمة
var numposts = 15;


وعدد المواضيع المعروضة عن طريق التغيير فى القيمة

showItems: 7,


والتحكم فى سرعة الحركة عن طريق التغيير فى القيم
speed: 600,
pause: 4000,

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

اليوم موضوعنا عن كود التبادل الإعلاني بتقنية jQuery لمدونات بلوجر وتشمل الإضافة أربع أماكن تتحرك بطريقة إحترافية.

الخطوات :

سجل الدخول علي بلوجر

اذهب الي لوحة التحكم ثم اذهب إلى تصميم أو قالب.

ابحث عن كود ]]></b:skin>

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

#banners {

margin-bottom:20px;

padding-left:10px;

}

.banner1 {-webkit-transition: -webkit-transform .15s linear;

margin-left:20px;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

}

.banner1:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner2 {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(+2deg);

-moz-transform: rotate(+2deg);

}

.banner2:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner3 {-webkit-transition: -webkit-transform .15s linear;

margin-left:20px;

margin-bottom:20px;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(+12deg);

-moz-transform: rotate(+12deg);

}

.banner3:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.banner4 {-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

border:5px solid #fff;

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

}

.banner4:hover {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

قم بحفظ القالب

توجه إلى تخطيط ثم إضافة أدة

إختر HTML/JavaScript

ثم قم بوضع هذا الكود :

<div id='banners'><a href=" هنا ضع الرابط للإعلان رقم 1 " rel="nofollow" target="_blank"><img class="banner1" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="105" border="0" height="105"></img></a><a href=" هنا ضع الرابط للإعلان رقم 2 " rel="nofollow" target="_blank"><img class="banner2" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="125" border="0" height="125"></img></a><a href="هنا ضع الرابط للإعلان رقم 3" rel="nofollow" target="_blank"><img class="banner3" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="70" border="0" height="70"></img></a><a href=" هنا ضع الرابط للإعلان رقم 4 " rel="nofollow" target="_blank"><img class="banner4" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="110" border="0" height="110"></img></a></div>

قم بتغيير ما باللون الاحمر برابط الموقع

قم بتغيير ما باللون الازرق برابط البنر او الصورة

بكده نكون انتهينا من شرح الكود

الدرس اليوم هو كيفية اضافة زر الصعود لأعلى أي عند الضغط عليه يرتفع لأعلى الصفحة للتسهيل على الزائر ويكون المنظر جميلاً كما في مدونتي. 

الخطوات: 

اذهب الى تخطيط.

ثم اضغط اضافة أداة HTML\JavaScript

ثم ضع الكود التالي فيه.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<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="http://im33.gulfup.com/pIUN1.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); },
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:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') 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>

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

معاينة

الخطوات:

اذهب إلى لوحة تحكم مدونتك.

اضغط على قالب.

ثم تحرير HTML.

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

</head>

 ثم ضع الكود التالي قبله:

<!-- AddThis Welcome BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51420ae61cbe9c35"></script>
<script type='text/javascript'>
addthis.bar.initialize({'default':{
"backgroundColor": "#FF5E00",
"buttonColor": "#098DF4",
"textColor": "#FFFFFF",
"buttonTextColor": "#FFFFFF",
"hideAfter": 20
},rules:[
{
"name": "AnyOther",
"message": "If you enjoy this page, do us a favor:",
"action": {
"type": "button",
"text": "Share this page",
"verb": "share",
"service": "preferred"
}
},
{
"name": "Twitter",
"match": {
"referringService": "twitter"
},
"message": "If you find this page helpful:",
"action": {
"type": "button",
"text": "Tweet it!",
"verb": "share",
"service": "twitter"
}
},
{
"name": "Facebook",
"match": {
"referringService": "facebook"
},
"message": "قم بنشر صفحتنا",
"action": {
"type": "button",
"text": "مشاركة على الفيسبوك",
"verb": "share",
"service": "facebook"
}
},
{
"name": "Google",
"match": {
"referrer": "google.com"
},
"message": "If you like this page, let Google know:",
"action": {
"type": "button",
"text": "+1",
"verb": "share",
"service": "google_plusone_share"
}
}
]});
</script>
<!-- AddThis Welcome END -->

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

معايتة

 من لوحة التحكم بمدونتك

قم بالضغط علي قالب

ثم تحرير HTML

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

]]></b:skin>

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

.social-buttons { position: fixed; top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon, .social-buttons #facebook-btn .social-icon, .social-buttons #google-btn .social-icon, .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; } .social-buttons a:hover .social-text { display: block; } .button-left .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }#ixzz2T1CoxWBT

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

  </head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>

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

 </body>

 وضع قبله الكود التالي:

<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/3bdallahghanem' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك في صفحة الفيس بوك</span></span></a> <a class='itemsocial' href='https://twitter.com/abdullahghanem' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>تابعنا علي تويتر</span></span></a> <a class='itemsocial' href='https://plus.google.com/abdullahghanem' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي صفحة الجوجل بلس</span></span></a> <a class='itemsocial' href='http://pinterest.com/3lahwa' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>تابعنا علي البينترست </span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/Ton ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>اشترك علي قناة اليوتيوب</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/Ton flux' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>تتابع الجديد</span></span></a> </div>

غير ما بالون الازرق بروابط صفحاتك علي المواقع الاجتماعية

وأخيرا،قم بحفظ النموذج.