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

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

ضع الكود التالي فوق ال </head

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/*<![CDATA[*/
#featuredPosts{
    --maxWidth:1200px; /* حجم الاقصى للعرض*/
    --featured-1-bg:rgb(15 15 20 / 51%);
    --featured-2-bg:#1423ff;
    --featured-3-bg:#77008f;
    --featured-4-bg:#ffb469;
    --featured-5-bg:#ff9ed8;
    --featured-color-dark:#fff;
    --featured-color:#222222;
    --featured-tag-bg:#000000d4;
	width:100%;
	max-width:var(--maxWidth)
}
#featuredPosts,.loader{margin:0 auto;box-sizing:border-box}#featuredPosts,.featured-big,.featured-container,.loader{box-sizing:border-box}.loader{width:2rem;height:2rem;border:5px solid #ffb469;border-bottom-color:transparent;border-radius:50%;display:block;animation:1s linear infinite rotation}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.featured-container *{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out}.featured-container{display:flex;flex-wrap:wrap;margin:0 auto 25px;padding-right:5px;padding-left:5px}.featured-big{background-color:transparent;flex-grow:0;flex-basis:40%;will-change:transform}.featured-container .featured-item{position:relative;z-index:0;overflow:hidden;flex:1 0 305px;min-height:200px;margin:8px;padding:70px 30px 25px;transition:transform .2s;border-radius:16px;background-color:#efeff2;will-change:transform;box-sizing:border-box}.featured-s{flex:1 0 50%;display:flex;flex-wrap:wrap}.featured-container .featured-item{display:flex;flex-wrap:wrap}.featured-container .featured-item>a{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0}.featured-container .featured-item .tag-name{font-size:10px;font-weight:800;line-height:1;position:absolute;top:23px;right:29px;display:inline-block;margin:0;padding:6px 8px 6px 10px;text-transform:uppercase;color:#fff;border-radius:25px;background-color:var(--featured-tag-bg)}.featured-container .featured-item .featured-content{align-self:flex-end;width:100%}.featured-container .featured-item .featured-content .date{font-size:13px;position:relative;z-index:1;width:100%;max-width:100%;margin-bottom:10px;cursor:pointer;font-weight:800;pointer-events:none;line-height:1.3;color:var(--featured-color-dark);display:flex}.featured-container .featured-item .featured-content .date svg{margin-left:5px;fill:none;width:1rem;height:1rem;stroke-width:2px;stroke:currentColor}.featured-container .featured-item .featured-content .title{font-size:calc(19px + 0%);line-height:1.4;display:inline-block;margin:0 2px 20px 0;color:var(--featured-color-dark);font-weight:800}.featured-container .featured-item.featured-big .featured-content .title{font-size:calc(30px + 0%);width:90%;margin-bottom:4px;color:#fff}.featured-container .featured-item .featured-image:before{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;content:'';background-color:var(--featured-1-bg);opacity:.72}.featured-container .featured-item .featured-image img{position:absolute;z-index:-2;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:16px}.featured-s .featured-item:first-child .featured-image:before{background-color:var(--featured-2-bg)}.featured-s .featured-item:nth-child(2) .featured-image:before{background-color:var(--featured-3-bg)}.featured-s .featured-item:nth-child(3) .featured-image:before{background-color:var(--featured-4-bg)}.featured-s .featured-item:nth-child(4) .featured-image:before{background-color:var(--featured-5-bg)}.featured-container .featured-item:nth-child(3) .featured-content .date,.featured-container .featured-item:nth-child(3) .featured-content .title,.featured-container .featured-item:nth-child(4) .featured-content .date,.featured-container .featured-item:nth-child(4) .featured-content .title{color:var(--featured-color)}.featured-s .featured-item:first-child .tag-name{color:var(--featured-2-bg)}.featured-s .featured-item:nth-child(2) .tag-name{color:var(--featured-3-bg)}.featured-container .featured-item.featured-big .tag-name{color:var(--featured-tag-bg)}.featured-container .featured-item.featured-big .tag-name,.featured-container .featured-item:first-child .tag-name,.featured-container .featured-item:nth-child(2) .tag-name{background-color:#fff}.featured-container .featured-item:hover{transform:translateY(-3px)}
/*]]>*/        
</style>
</b:if>

ضع الكود التالي فوق ال </body

ضع الكود التالي في المكان الذي تريد ظهور فيه الاضافة

<b:if cond='data:view.isHomepage'> 
	<b:section id='featuredPosts'>
		<b:widget id='HTML99' locked='false' title='تجربة' type='HTML' version='3' visible='true'>
                 <b:widget-settings>
                   <b:widget-setting name='content'>recent</b:widget-setting>
                 </b:widget-settings>
                 <b:includable id='main'>
                   <div class='widget-content' expr:data-label='data:title' expr:data-type='data:content'>
                     <span class='loader'/>
                   </div>
                </b:includable>
               </b:widget>
             </b:section>
         </b:if>

ضعه اين المربع الاحمر