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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سكربت شريط اخبار يناير 29, 2019

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

Admin Amer

يناير 29, 2019

0 تعليقات

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

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

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

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

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

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

<b:if cond='data:view.isHomepage'><style type='text/css'>/*<![CDATA[*/ /*Breaking News ab-expert.blogspot.com*/ .breaking_news{overflow:hidden;margin:10px auto} .breaking_news .breaking-title{float:right;height:54px;line-height:50px;width:50px;text-align:center;margin-left:7px;border-radius:3px;background-color:rgb(46,53,67)} .breaking_news .breaking-title i{color:#fff} #abdoutechnews{display:inline-block} #abdoutechnews li{height:50px;display:block;transition:cubic-bezier(.17,.67,.83,.67)} #abdoutechnews li a{line-height:50px;display:block;color:#2e3543;text-indent:20px;font-weight:500} .break_arrows{display:inline-block;float:left;position:absolute;top:50%;left:1%;transform:translateY(-50%);padding:7px 8px;border-radius:3px} .break_arrows a{display:block;width:30px;height:30px;border-radius:5px;line-height:30px;background:#2e3543;text-align:center;color:#fff;margin-right:5px;font-size:12px;float:right} .breaking_news .breaking_abdoutech{position:relative;overflow:hidden;border-radius:3px;background-color:rgb(255,255,255);border:1px solid #eeeeee} @media screen and (max-width:640px){.breaking_news{display:none}} /*]]>*/ </style></b:if>

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

تحميل الكود

• الان ضع الكود التالي في المكان الذي تريد ضهور فيه شريط الاخبار

<div class='breaking_news'><div class='breaking-title'><span><i aria-hidden='true' class='fa fa-bolt'></i></span> </div><div class='breaking_abdoutech' data-show="20"/></div>


لزيادة عدد المواضيع يمكنك تغيير هذا الرقم

data-show="20"

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


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

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

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. الان إبحث على  وضع الكود التالي فوقه مباشرة

تحميل الملف

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

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