Sunday, 10 March 2019

اضافة فهرس كامل أو لتسمية واحدة

اضافة فهرس كامل أو لتسمية واحدة


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



لإضافة الصفحة قم بالتوجه الى بلوجر وسجل دخولك لمدونتك ثم اختر المظهر  ثم تعديل HTML  ثم ابحث بإستخدام Ctrl + F عن الوسم </head> ثم ألصق الكود التالي فوقه/قبله


<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>


هذا الكود هو كود استدعاء خط الأيقونات fontawesome  اذا كان موجودا لديك لاداعي لإضافته
الان اختر الصفحات وقم بإضافة صفحة جديدة ثم اختر تبويب HTML  ,قم بمسح جميع الأكواد ثم ألصق الكود التالي داخلها:
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 0 10px 20px;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46MjiqM6N4yHc1Q8pr6nA62_fIchackQ4rByykrINApg47d1Uj14wKWMqmOQzDJ4SGA7aivtpBVxjba0WmnJvHQROZWGL9RLteYep11e5hxHa6icr6Z4Pb8BiRuG-ztWsaUviAnZUSoIt/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type="text/javascript">
//<![CDATA[
var numfeed = 14;
var startfeed = 0;
var urlblog = "https://blog.itheric.com/";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYZXvSO4m178IdHWSqnQu3QuG4mtfeoH_-t21pJOnSProjFio5xIqX0c9zHikv-Cf-Apw-J3sOwdBx_4f-1pe7pC0RIi2AA0W-m4k-TJmu543AMadUXAcBwYMp7syQwbOlzsmAZMuxrm3/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed")
.innerHTML="";var t=urlblog+"/feeds/posts/default/-/إضافات بلوجر"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<br /></div>

الرقم 14 هو عدد التوينات
الرابط https://blog.itheric.com/ قم بإستبدله برابط مدونتك
إذا كنت تريد جعل الفهرس لتسمية محدد قم بتغيير التسميه في هذه الجزئية من الكود /feeds/posts/default/-/إضافات بلوجر أما اذا كنت تريد جعل الفهرس يعمل بشكل كامل على جميع التسميات قم بجعل لجزئية على هذا الشكل /feeds/posts/default 


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

Saturday, 9 March 2019

جعل السايدبار ثابتا اثناء التمرير

جعل السايدبار ثابتا اثناء التمرير

مرحبا بكم في مقال جديد على مدونة الأثير
في هذا المقال سأقدم طريقة لـ جعل السايدبار ثابتا أثناء تمرير الصفحة , واقصد بهذا أنه عند تصفح مقال كبير و تمرير الصفحة للأسفل يبقى السايدبار مرافقا للمحتوى ولا يبقى مكانه فارغا كما العادة.

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

مـعـاينة الإضـافــة

كما شاهدت فالسايدبار يبقى ملاصقا للمحتوى ولا يتم تركه في الاعلى
كيف اضيف هذه الميزة الى مدونتي؟؟
اتجه الى بلوجر ثم سجل دخولك لمدونتك ثم اختر المظهر ثم اختر تعديل HTML ثم ابحث بإستخدام Ctrl+F عن الوسم </body>
ثم ضع الكود التالي فوقه/قبله

<script async='async' type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
$(document).ready(function(){$("#sidebar-wrapper").theiaStickySidebar({additionalMarginTop:85,additionalMarginBottom:20})});};
//]]>
</script>



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

Wednesday, 6 March 2019

تحديث صفحات المدونة تلقائيا

تحديث صفحات المدونة تلقائيا


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

الطريقة الأولى
اتجه الى المظهر ثم اختر تعديل HTML ثم ابحث باستخدام Ctrl + F عن الوسم <head>   وألصق الكود التالي بعدة/اسفله


<b:if cond='data:view.isHomepage'>
<meta content='90' http-equiv='refresh'/>
</b:if>

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

الطريقة الثانية
ابحث باستخدام Ctrl + F عن الوسم </body>  وألصق الكود التالي قبله/فوقه

<b:if cond='data:view.isHomepage'>
<script type='text/javascript'>
//<![CDATA[
setTimeout('location.href=\"/"' ,90000);
//]]>
</script>
</b:if>

90000 هو عدد أجزاء الثواني قبل التحديث 90000 = 90 ثانية
بعد الإنتهاء من وضع الكود اضغط على حفظ ثم شاهد النتائج
ملاحظة : الكود مرفق بعلامة شريطة ويعمل على الصفحة الرئيسية فقط, لأنه اذا كانت تعمل على جميع الصفحات سوف تكون ازعاج كبير للزوار.
وستكون مفيدة أيضا للمواقع التي تحوي على عدد كبير من الكتّاب و المحررين , حيث سيحصل الزائر بفضلها على تدوينات محدثة .
الى هنا اكون قد انتهيت من تقديم اضافة تحديث صفحات المدونة تلقائيا , اتمنى ان أكون قد وفقت بطرحها , ولا تنسونا من تعليقاتكم المشجعة

Tuesday, 5 March 2019

اضافة صفحة اتصل بنا بتصميم الماتيريال الرائع

اضافة صفحة اتصل بنا بتصميم الماتيريال الرائع


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


مـعـاينة الــصــفحـة

أولا وقبل كل شيء عليك اضافة الاداة الاساسية للإضافة ,وذلك عبر الذهاب الى تخطيط ثم اختر اضافة أداة ( لايهم اين مكانها إن كان في السايدبار أو غيره) ثم أضف أداة نموذج الإتصال ثم اضغط على حفظ.
الان وبعد  قيامنا بإاضافة أداة نموذج الإتصال التي غالبا بعد اضافتها سيظهر نموذج  الاتصال عبر صفحات المدونة بمكان إضافته , لكن نحن نريد تفعيله فقط في صفحة اتصل بنا, ولحل هذه المشكلة نحتاج لإخفاء النموذج وذالك عبر الذهاب الى المظهر ثم اختر تعديل HTML ثم ابحث بواسطة Ctrl + F عن الوسم </head> ثم ألصق الكود التالي أعلاه/قبله

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>


إذا لم يظهر النموذج في صفحات المدونة لا داعي لإضافة الكود السابق غالبا الكثير من القوالب تحتويه.
الأن نتجه الى الصفحات ونقوم بإنشاء صفحة جديدة ولنسميها مثلا contact-us أو contact وثم نقوم بالضغط على تبويب  HTML و نقوم بمسح جميع الأكواد الموجودة و نلصق الكود التالي

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#2d87fb}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#2d87fb;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#2d87fb}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2d87fb;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right; font-family: unset;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
form{
padding: 0 0 40px 0;
}
</style>
<form name="contact-form">
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الإســـم</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>البريد الإلكتروني</label>
</div>
<div class="blanterinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>الرسالة</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="إرســــال" />

<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>



وقم أيضا بجعل اعدادات الصفحة كالتالي  ثم نضغط على حفظ


الأن نقوم بمراجعة النتائج عبر معاينة او عرض الصفحة
قم بالضغط على زر الارسال فقط لإختبار نموذج الإتصال إذا ظهرت رسالة   يلزم ادخال بريد الكتروني صالح   فهذا يعني أن النموذج يعمل على أكمل وجه ,أما ان لم تظهر فهذا يعني أن المدونة مسرعة عبر استبال أكواد <head> و <body> و ]]></b:skin>
و لحل هذه المشكلة نقوم بلصق الكود التالي ضمن صفحة اتصل بنا التي أنشاناها

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4717033401200122451';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4717033401200122451','//blog.itheric.com/','4717033401200122451');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '4717033401200122451', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>




قم بإستبدال 4717033401200122451  بـ ID الخاص بمدونتك مكرر 4 مرات, واستبدل blog.itheric.com  برابط مدونتك
ثم قم بالحفظ وبتجربة النموذج
الى هنا نكون قد انتهينا من هذا المقال أمل ان أكود قد وفقت بطرحه , ولا تبخلو علينا بتعليقاتكم المشجعة

Monday, 4 March 2019

سكربت التحميل من جوجل درايف برابط مباشر

سكربت التحميل من جوجل درايف برابط مباشر


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




مـعـاينة الإضـافــة

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

 <div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#mainpanel{margin-top:70px}img{max-width:100%;height:auto}body{font:15px cairo;}.container,#container{font-family:cairo;background-color:#b9cff7 !important;box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.4);}.panel-title{font-size:20px;text-align:center}.form-control{text-align:left;border-radius:4px !important}.btng-success{margin:0 4px;border-radius:4px !important}
</style>
<link href='https://raw.githack.com/MohammadQt/Itheric/master/google-drive-style.css' rel='stylesheet'/>

<div style="padding-top:5px;">
<center><img src="https://www.gstatic.com/images/branding/product/2x/drive_48dp.png" style="height:96px;" alt="Google Drive Logo"/>
<h2 style="background:white;max-width:320px;border-radius:30px;padding: 6px;"><span style="color:#10975B"> جوجل </span><span style="color:#E3B73A;"> درايف </span> <span style="color:#2E70DD;"> داونلودر </span></h2><span class="badge badge-danger">الاصدار 1.0</span>
</center>
</div>
<center><a href="https://itheric-bl.blogspot.com"><img src="https://placehold.it/728x90/4bbb8b/fff?text=ADS+Here" alt="Ads 728x90" /></a></center>

<div class="panel panel-default panel-primary" id="mainpanel">

<div class="panel-heading">

<h1 class="panel-title">سكربت التحميل من جوجل درايف برابط مباشر</h1>
</div>
<div class="panel-bodyx">
<buttoxy class="btog btog-warning" type="buttoxy" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
كيفية الاستخدام ؟ أضغط هنا لمعرفة الخطوات
</buttoxy>
<div class="collapse" id="collapseExample">
<br />
<div class="well text-center">
<ul align="right">
<p><strong>"تعمل أيضًا مع رابط ملف أي حساب"</strong></p>
<li>افتح Google Drive</li>
<li>اضغط كليك يمين علي الملف المراد تنزيله</li>
<li>ثم اضغط علي زر Share</li>
<li>ثم اضغط علي زر Get Shareable Link</li>
<li>ثم اضغط علي زر نسخ الرابط</li>
<li>الصق الرابط في الاسفل</li>
</ul>
</div>
</div>
</p>
<form>
<div class="form-group">
<label for="sharelink">الرابط</label>
<input type="text" class="form-control" id="sharelink" placeholder="https://drive.google.com/file/d/XX-X__XXXXX-XXXXXXXXXXXXXXXX/view?usp=sharing" autofocus="true">
<span class="input-group-btog">
</span>
</div>
<div class="form-group">
<label for="downloadlink">رابط التحميل المباشر</label>
<div class="input-group">
<input type="text" class="form-control" id="downloadlink" readonly>
<span class="input-group-btog">
<buttoxy id="copylinkbtog" class="btog btog-success" type="buttoxy" data-clipboard-target="#downloadlink" disabled>نسخ الرابط</buttoxy>
</span>
</div>
</div>

</form>

<center><a href="https://itheric-bl.blogspot.com"><img src="https://placehold.it/728x90/4bbb8b/fff?text=ADS+Here" alt="Ads 728x90" /></a></center>

</div>
<div class="panel-footex"> جميع الحقوق محفوظة </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>

<script type="text/javascript">
//<![CDATA[
(function($) {
$(function() {
var $shareLink = $('#sharelink'),
$downloadLink = $('#downloadlink'),
$copybuttoxy = $('#copylinkbtog'),
clipboard;

$shareLink.on('keyup paste', function() {
var link = $shareLink.val(),
l = link.replace(/\/file\/d\/(.+)\/(.+)/, "/uc?export=download&id=$1");
if(l !== link) {
$downloadLink.val(l);
$copybuttoxy.removeAttr('disabled');
} else {
$downloadLink.val('');
$copybuttoxy.attr('disabled', 'disabled');
}
});

$downloadLink.on('click', function() {
$downloadLink.select();
});

clipboard = new Clipboard('#copylinkbtog');
clipboard.on('success', function(e) {
$.notify({
icon: ' ',
title: 'تم نسخ الرابط التالي الى الحافظة:',
message: e.text,
url: e.text,
target: '_blank'
}, {
// settings
type: "success",
placement: {
from: "top",
align: "center"
}
});

// $.notify(e.text + " copied to clipboard.");

e.clearSelection();
});

});
})(jQuery);
//]]>
</script>

</div>



استبدل الكود التالي بكود إعلاني خاص بك

<center><a href="https://itheric-bl.blogspot.com"><img src="https://placehold.it/728x90/4bbb8b/fff?text=ADS+Here" alt="Ads 728x90" /></a></center>

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

Friday, 1 March 2019

قالب مدونة الاثير الإصدار1 مجانا و بدون حقوق

قالب مدونة الاثير الإصدار1 مجانا و بدون حقوق



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

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

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



يشرفنا انظمامك الى متابعي المدونة من من هنا

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

الإضافات في السايدبار

قم بإضافتها داخل أداة "HTML/JavaScript"

إضافة أداة السوشيال ميديا في السايدبار


<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='N Light' class='img-responsive' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggH74SO8EGHPnmLw7rnpERKG13JozprURrtOYDS-aBt4PRDwENeseePX6I7NH-ZFl8I3jvKpXAMqIK85FYmoXX8Cw9muNCzBJ8tspkFGhple6ahkbnlzmJ6WE8tZA3icOlSl16c8NyVTcS/s1600/Info+Arlina.jpg' title='الأثير' width='300'/>
<div class='aboutfloat-img'><span class='lightsosmed-float'><a href='https://www.blogger.com/follow-blog.g?blogID=1944583533354688007' rel='nofollow' target='_blank' title='كن أحد متابعينا'><i class='fa fa-user'/> </i> كن أحد متابعينا </a></span></div>
</div>
</div>
<div class='lightsosmed-info'>
<h4><span>الاثــيــر</span></h4>
<p>كل مايخص البلوجر
و التصميم الجرافيكي</p>
</div>
<div class='lightsosmed-wrpicon'>
<ul class='extender'>
<li class='lightsosmed-icon fbl'><a href='https://www.facebook.com/arlinadesign' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> </i> إعجاب </a></li>
<li class='lightsosmed-icon twitt'><a href='https://twitter.com/ArlinaDesign' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> </i> متابعة </a></li>
<li class='lightsosmed-icon crcl'><a href='https://plus.google.com/+AmeliaPutri90' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/></i> اشتراك </a></li>
</ul>
</div>
</div>


إضافة اداة شاهد أيضا


<ul id="recent-posts"></ul>
<style>
/* Recent Post Widget */
ul#recent-posts {
list-style: none;
margin: 0;
padding: 5px;
margin: 0;
text-align: right;
}


li.recent-posts {
display: block;
clear: both;
overflow: hidden;
list-style: none;
border-bottom: 1px solid #fff;
word-break: break-word;
padding: 10px;
margin: 0;
background:linear-gradient(270deg,#2672db, #6a5acd, #19bfe5);background-size:600% 600%;animation:Gradient 25s ease infinite;
}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
li.recent-posts:hover {
color: #fff;
background:linear-gradient(270deg,#2672db, #6a5fff, #19bfe5);background-size:600% 600%;
}
li.recent-posts:last-child {

border-bottom: 0;
}

li.recent-posts a {
color: #fff;

}

li.recent-posts a:hover {
color: #fff;
text-decoration: ;


}
</style>
<script type='text/javascript'>
//<![CDATA[
var homePage = "https://itheric-v1.blogspot.com/",
numPosts = 5;

function recentPosts(a) {
if (document.getElementById("recent-posts")) {
var e = a.feed.entry,
title, link, content = "",
ct = document.getElementById("recent-posts");
for (var i = 0; i < numPosts; i++) {
for (var j = 0; j < numPosts; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t;
content += '<li class="recent-posts"><a href="' + link + '" title="' + title + '" target="_blank" rel="nofollow">' + title + '</a></li>'
}
ct.innerHTML = content
}
}
var rcp = document.createElement('script');
rcp.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>


إضافة الإعلانات 

إضافة الإعلانات أعلى و أسفل المواضيع
ابحث عن <!-- adss --> و الصق اسفله الكود الاعلاني, ستجده مكرر مرتين

إضافة الإعلانات في اسفل القائمة و فوق الفوترقم بإضافتها من تخطيط عبر أداتي بنر إعلاني 1 و 2

الإضافات داخل التدوينات


اضفها من تحرير HTML للمقال

إضافة الصندوق الملون


  <div class="colorbox blue">
الصندوق البنفسجي
</div>
<div class="colorbox green">
الصندوق الاخضر
</div>
<div class="colorbox red">
الصندوق الأحمر
</div>
<div class="colorbox orange">
الصندوق البرتقالي
</div>


إضافة الجدول


  <table cellpadding="0" cellspacing="0" style="text-align: right;"><tbody>
<tr><th>قالب مساين</th><th>النسخة</th><th>السعر</th></tr>
<tr><td>قالب مساين</td><td>v3.00</td><td>$5.00 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v4.00</td><td>$5.40 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.00</td><td>$3.10 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.00</td><td>$2.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.9</td><td>$3.50 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v4.1</td><td>$6.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.5</td><td>$1.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v2.1</td><td>$4.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v3.15</td><td>$7.99 <a href="https://blog.itheric.com/" rel="nofollow" target="_blank">شراء</a></td></tr>
<tr><td>قالب مساين</td><td>v1.00</td><td>$9.99</td></tr>
<tr><td>قالب مساين</td><td>v0.00</td><td>$0.99</td></tr>
</tbody></table>



اضافة صندوق الأكواد


  <code><pre>
.......ضع الكود هنااا......
</code></pre>

إضافة أزرار المعاينة و التحميل في السايد بار


<a class="storebutton but1" href="https://blog.itheric.com/" rel="nofollow noopener" target="_blank">معاينة مباشرة</a><br />
<a class="storebutton but1" href="https://blog.itheric.com/" rel="nofollow noopener" target="_blank">تحميل مجاني</a></div>
<div id="store-style">
<a class="storebutton but2" href="https://blog.itheric.com/" target="_blank">$5.25 - شراء</a><br />
<div class="rio-ss">
<span class="storelist">مواصفات بريميوم</span><br />
<span class="storelist">مواصفات بريميوم</span><br />
<span class="storelist">مواصفات بريميوم</span><br />
<span class="storelist">مواصفات بريميوم</span></div>
</div>
</div>

إضافة الأزرار العادية



<center>


<a href="https://blog.itheric.com/" rel="nofollow" target="_blank"><button><i aria-hidden="true" class="fa fa-download"></i> تحميل </button> </a> <br/><a href="https://blog.itheric.com/" rel="nofollow" target="_blank"><button><i aria-hidden="true" class="fa fa-eye"></i> معاينة</button></a> <br /> </center>


إضافة الأزرار الكبيرة
<ul class="button">
<li><a class="demo" href="https://blog.itheric.com/" target="_blank">مــعــايــنة</a></li>
<li><a class="download" href="https://blog.itheric.com/" target="_blank">تـــحـــمـــيل</a></li>
</ul>

استبدل الكلمات و الراوابط بما يناسبك

إضافة محتوى مخفي
<div id="flippy">
<button>عــرض / إخفاء</button></div>
<div id="flippanel">
ضع هنا اي محتوى تريد
</div>
</div>

إضافة فيديو يوتيوب متجاوب


<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/hoHfVJi9WBU">
</div>
</div>
</div>

استبدل المضلل بلأحمر بمعرف الفيديو الذي تريد اضافته
إضافة نص بعمودين



<div class="bagidua">
النص هنا
</div>


إضافة نص بثلاث أعمدة

<div class="bagitiga">
النص هنا
</div>

إضافة نص بأربعة أعمدة


<div class="bagiempat">
النص هنا
</div>



إذا واجهتك أي مشكلة لا تترد في وضعها بالتعليقات

Powered by Blogger.

Report Abuse

الأقسام الشائعة

نموذج الاتصال

Name

Email *

Message *

اتصل بنا

Name

Email *

Message *

إحصائيات المدونة

Search This Blog

Blog Archive

Labels

التسميات (الأقسام)

أداة الترجمة والإعدادات

Categories

إعلان بجانب الشعار

Comments

حقوق المدونة

الصفحات

الصفحات

Follow Us

مربع البحث

كود التفعيل

U3F1ZWV6ZTMwMTY4NzcyMzc1MTQwX0ZyZWUxOTAzMzA3MDMzMzkxNA==