شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق 2018 2019 اضافات بلوجر بلوجر تطوير مواقع سكربت شريط اخبار CSS html java أغسطس 23, 2018

شريط اخبار مثبت يعرض اخر المواضيع على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 23, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

الاكواد تمتاز بأخر  الاكواد البرمجية الحصرية 

معاينة

شرح التركيب

1. إبحث على 

<b:tag name='style' type='text/css'><b:if cond='data:view.isMultipleItems'>.clearfix:after,.clearfix:before,.container:after,.container:before{display:table;content:" "} .container{position:relative} @media (min-width:1200px){.container{width:1170px}} @media (min-width:992px){.container{width:970px}} @media (min-width:768px){.container{width:750px}} .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:768px){.container{width:750px}} @media (min-width:992px){.container{width:970px}} @media (min-width:1200px){.container{width:1170px}}#breakingnews{background-color:#003350;bottom:0;height:50px;position:fixed;right:0;width:100%;z-index:9999} #breakingnews .title{background-color:#d60f0a;float:right;height:65px;line-height:65px;position:relative;text-align:center;top:-15px;width:4%} #breakingnews .title img{height:40px;width:40px;margin-top: 14px} #breakingnews .title::after{border-style:solid;border-width:0 0 15px 15px;border-color:transparent transparent #cc0500 transparent;_border-color:#000000 #000000 #cc0500 #000000;_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');content:"";display:inline-block;height:0;left:-15px;line-height:0;position:absolute;top:0;width:0} .marquee{direction:ltr;float:right;height:50px;overflow:hidden;width:96%} #breakingnews .marquee .js-marquee ul li{direction:rtl;display:inline-block;float:right;font-size:18px;line-height:50px;margin:0 0 0 35px;padding:0 0 0 35px;position:relative} #breakingnews .marquee .js-marquee ul li::before{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc16N0XfIFNXWVchoZw3LHyVedSLg7iFHsjKk96M1RWY_tambeP7zS5p_CoVFdi78nEngKRrnAMvI9ylPpttsmdFI1EGd_p7yBUSU30-AKxG2VLN2RrDYyJX7HzTuUX-l-3eBcdAwrmqA/s1600/small-logo.png");background-size:35px 35px;content:"";display:inline-block;height:35px;left:-35px;line-height:35px;margin:0 15px;position:absolute;top:5px;width:35px} #breakingnews .marquee .js-marquee ul li a{color:#fff} #breakingnews .marquee .js-marquee ul li a:hover{color:#e01914} #breakingnews button.closebtn{background-color:#df0303;border:medium none;border-radius:3px;color:#fff;float:left;font-family:play;font-size:20px;height:30px;left:5px;line-height:30px;padding:0;position:absolute;text-align:center;top:10px;width:30px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} #breakingnews button.closebtn:hover{background-color:#d00000} </b:if></b:tag>

1. الان إبحث على  وضع الكود التالي فوقه مباشرة

تحميل الملف

• الان لتغيير الوجو الخاص بي إبحث على رابط  الصورة هذا من هنا  وغيره بصورة التي تريدها انت

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

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر CSS html java أغسطس 22, 2018

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

Admin Amer

أغسطس 22, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

شرح تركيب الاضافة

1. إبحث في القالب على  او 

<style>/* shadow sec */ .shadow{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);transition: .3s ease-out;} .shadow:hover{box-shadow: 0 14px 25px rgba(0,0,0,.16);} /*اضافة من الخبير عامر بشير*/ .ball-message{position:fixed;bottom:12px;z-index:999999999999;right:52px;margin-top:-50px;margin-left:-50px;height:100px;width:100px;border:3px solid #FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbv6g5SqgcYL4I0wMdMn8tXpZQoKRhyrFixPoVR8SGAzvy5OMdQpvlCXIQbUTDzsARgBw7PvU3fNFjzT_DT4fwYeRpqQlWq9JASl6zuCdn-zWq1sCunBxifYRnJ8n-kpoMNsBLfsLfTX4/s320/24294136_1809479985752209_1304656175277181735_n.png);background-size:contain;border-radius:1000px;transform:scale(0);transition-duration:0;transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);} .ball-message .msg-count{position:absolute;top:0;left:0;color:#FFF;border:3px solid #FFF;background:#E80202;height:25px;width:25px;border-radius:1000px;text-align:center;line-height:18px;font-size:12px;opacity:0;transform:scale(0);transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);} .ball-message .halo{position:absolute;top:18px;left:18px;right:18px;bottom:18px;border-radius:1000px;background:rgba(255,255,255,0.6);transform:scale(0)} .ball-message .notif{position:absolute;top:-50px;left:-45px;width:183px;opacity:0} .ball-message .notif .bar{position:relative;border-radius:1000px;background:#FFF;height:30px;line-height:30px;width:0;margin:0 auto;padding:0 10px;overflow:hidden} .ball-message .notif .bar .text{position:absolute;margin:0;font-size:12px;color:#555;width:175px;z-index:1} .ball-message .notif .bar .action{position:relative;z-index:2;height:20px;width:20px;background:#BABABA;float:left;margin-top:5px;border-radius:100px;box-shadow:10px 0 0 0 #FFF,-10px 0 10px 0 #FFF,inset 0 0 0 1px #FFF;border:1px solid #BABABA;} .ball-message .notif .bar .action::after{content:'';border-left:5px solid #FFF;border-top:4px solid transparent;border-bottom:4px solid transparent;display:block;margin-left:7px;margin-top:4px} .ball-message .notif .arrow{top:30px;border-top:7px solid #FFF;border-left:7px solid transparent;border-right:7px solid transparent;width:0;margin:0 auto;transform-origin:top;transform:scale(0)} .anim-start .ball-message{transform:none;transition-duration:.3s} .anim-start .ball-message .notif{opacity:1;transition-duration:.2s;transition-delay:1.6s} .anim-start .ball-message .notif .bar{width:100%;transition-duration:.6s;transition-delay:1.6s} .anim-start .ball-message .notif .arrow{transform:none;transition-delay:1.6s;transition-duration:.3s} .anim-start .ball-message .halo{opacity:0;transform:none;transition-duration:.6s;transition-delay:1.2s} .anim-start .ball-message .msg-count{opacity:1;transform:none;transition-duration:.3s;transition-delay:.6s} .autowrite{animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite} @keyframes typing{from{width:0}to{width:100%}} @keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#dedede}} </style>

1. إبحث على 

• تحميل الكود من هنا

إذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد

تغيير شكل اقتباس في تدويينات بلوجر واضافة رابط نشر الاقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق 2018 اضافات بلوجر بلوجر سكربت CSS java أغسطس 12, 2018

تغيير شكل اقتباس في تدويينات بلوجر واضافة رابط نشر الاقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 12, 2018

0 تعليقات

شاركه غرد جوجل+

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

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

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

يمكنك معاينة الاضافة من هنا

شرح تركيب الاضافة 

• إبحث على 

<style type='text/css'>/*<![CDATA[*/ /* صندوق اقتباس من الخبير عامر بشير */ .post-body blockquote{width:90%;clear:both;-webkit-print-color-adjust:exact;padding:10px 30px;margin:15px auto;line-height:2;text-indent:15px;color:#ffffff;-webkit-border-radius:5px;border-radius:5px;position:relative;border:none;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.post-body blockquote:before{content:"\f10e";top:0;right:-4px}.post-body blockquote:before,blockquote:after{font-family:FontAwesome;font-size:20px;color:#ffffff;position:absolute}.post-body blockquote:after{content:"\f10d";bottom:0;left:15px}.quote-share a{background:#ffffff;text-align:center;display:inline-block;width:25px;height:25px;text-indent:0;-webkit-border-radius:100%;border-radius:100%;border:2px solid #ffffff;font-size:11px;margin:0 1px;color:#fff;background-repeat:no-repeat;background-size:1000% 1000%;background-clip:border-box;background:linear-gradient( to bottom right,#26a69a,#a044ff);background-repeat:no-repeat;background-size:1000% 1000%}.quote-share a:hover{-webkit-animation:quoteHover .5s ease both;-moz-animation:quoteHover .5s ease both;animation:quoteHover .5s ease both}.quote-share{position:absolute;left:50px;bottom:-12px}@-webkit-keyframes quoteHover{to{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHover{to{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHover{to{transform:scale(1.5) rotate(360deg)}}@-webkit-keyframes quoteHoveroff{from{-webkit-transform:scale(1.5) rotate(360deg)}}@-moz-keyframes quoteHoveroff{from{-moz-transform:scale(1.5) rotate(360deg)}}@keyframes quoteHoveroff{from{transform:scale(1.5) rotate(360deg)}} /*]]>*/ </style>

• الان إبحث على  وضع الكود التالي فوقه 
• تحميل الكود من هنا

الان احفظ القالب ومبروك عليك الاضافة 

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

محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر محرك بحث CSS html java مارس 06, 2018

محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

مارس 06, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

1. ابحث على  وضع هذا الكود اسفله

<div class='seacgoom'><div class='inputpoint'><form class='machine' id='search'><div class='input'><input class='search' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='search' value='إبحث...'/><button class='submit fa fa-search' type='submit' value=''/></div><button class='fa fa-times' id='close' type='reset' value=''/></form></div><div class='search-content'><div class='search-result' id='scroll-hide'><div class='inner'><span/></div></div><div class='query-result'>تحميل المزيد</div></div></div>

1. الان ابحث على  وضع هذا الكود فوقه مباشرة

<style>/* Search ajax */ #search .input,#search .input .search{height:40px;transition:all .3s ease-out} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none} .seacgoom{position:fixed;overflow:auto;top:15%;right:20%;left:20%;bottom:10%;max-width:879px;margin:auto;background:rgba(0, 0, 0, 0.92);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s} .seacgoom.active{opacity:1;visibility:visible;margin:auto;transform:scale(1)} .seacgoom .inputpoint{background:rgb(1, 64, 152);margin:0 auto 15px;padding:10px 0} .seacgoom .machine{width:90%;margin:auto;padding:10px 0;outline:0;display:block} #search .input{background:rgba(255,255,255,1);width:100%;margin:30px auto;padding:0 20px 0 0;max-width:1000px} #search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9} #search #close,#search .input .search,#search .input .submit{padding:0;margin:0;border:0;outline:0} #search #close,.query-result{border-radius:5px;text-align:center;cursor:pointer} #search .input .search{float:right;width:calc(100% - 140px);background:0;font-size:16px;color:rgba(0,0,0,.4);line-height:40px} #search .input .submit{display:inline-block;float:left;cursor:pointer;width:14%;height:40.7px;background:#0045a6;font-size:14px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;transition:all .3s ease-out} #search .input .search:active,#search .input .search:hover,font-awesome.min.css:4 #search .input .search:focus{color:rgba(0,0,0,.8)} #search .input .submit:focus,#search .input .submit:hover{background:#0b408a;color:rgba(255,255,255,1)} #search #close{position:absolute;top:10px;left:10px;width:32px;font-size:30px;height:32px;font-weight:200;font-family:fontawesome;background:0;color:rgba(0,0,0,.3);line-height:32px;transition:all .3s} .queryword,.sidebar h2{font-weight:700} #search #close:hover{color:rgba(0,0,0,.6)} .search-content{z-index:6;display:none;position:relative} .seacgoom .search:focus{outline:0} .search-result{padding:0 20px;margin:0 auto 15px} .search-result .search-item{overflow:auto;padding:10px 0;border-bottom:1px solid #eee} .search-result .search-item:last-child{border-bottom:0} .search-item img{width:120px;height:85px;float:right;background:#fdfdfd} .search-item a{width:calc(100% - 150px);float:left;display:block;color:#014098;text-decoration:none;padding:10px 0;font-size:24px;line-height:30px} .search-item a:hover,.search-item:hover a{color:#014098} .query-result{display:none;background:#014098;color:#fff;padding:12px;margin:20px auto 40px;font-weight:500;text-transform:uppercase;line-height:normal;font-size:80%;max-width:90px;transition:all .3s ease-out} .query-result:hover{background:#bb4d23;color:#fff;border-color:transparent} .query-result a{text-decoration:none;color:#3bbb8e} .query-result a:hover,.query-result:hover a{color:#fff} .searchbutton{margin-top: 0.4%;text-align:center;float:left;padding-right:10px;padding-left:10px;font-size:20px;cursor:pointer} .searchbutton i.fa{color:#fff} </style>

1. و في الخطوة الثالثة ابحث على 
2. وضع هذا الكود فوقه  رابط تحميل الكود من هنا

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

<div class="searchbutton" title="بحث"><i aria-hidden="true" class="fa fa-search"></i></div>


ملاحظة: لتحكم بشكل زر المحرك فكود الستايل المسوول عنه هوا .searchbutton  و لتحكم ب الايقونة فبهذا .searchbutton i.fa


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