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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر سلايدر شو مشاركة الشائعة ديسمبر 13, 2017

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

Admin Amer

ديسمبر 13, 2017

0 تعليقات

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

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

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

معاينة

1. إبحث على  او اكتب /head
2. وضع هذا الكود فوقه

<style>#PopularPosts1.PopularPosts{background:#fff;padding:0} #PopularPosts1.PopularPosts amp-img{width:300px;height:180px;} #PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0} #PopularPosts1.PopularPosts h2 div{padding:0 10px;display:inline;float:right;} #PopularPosts1.PopularPosts .slide .caption{position:absolute;bottom:0px;left:0;right:0;padding:6px 8px 10px;background:rgba(0,0,0,.6);color:#ddd;font-size:smaller;max-height:30%;line-height:1.1em;text-align: center;} </style><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

1. الان ابحث على المشاركة الشائعة التي تستعملها 

وحددها على هذا الشكل

<b:widget id='PopularPosts1' locked='false' title='الشائعة' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>4</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>false</b:widget-setting> <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><div><data:title/></div></h2></b:if> <div class='widget-content popular-posts'><amp-carousel autoplay='autoplay' delay='2000' height='180' layout='fixed-height' type='slides'> <b:loop values='data:posts' var='post'> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div><a expr:href='data:post.href'><data:post.title/></a></div><div><data:post.snippet/></div></b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div class='slide'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'> <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='300'/> </b:with> </a> </b:if> <div class='caption'><data:post.title/></div></div></b:if> </b:loop></amp-carousel> </div></b:includable> </b:widget>

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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر مشاركة الشائعة أكتوبر 17, 2017

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

Admin Amer

أكتوبر 17, 2017

0 تعليقات

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

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

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

معاينة




نبدأ بشرح على بركة الله

1. إبحث على  وضع هذا فوقه

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>/* مشاركة شائعة */ #indexpopular ul li:hover .item-title a{color:#07ACEC!important}#indexpopular ul{margin:0;padding:0}#indexpopular ul li{width:150px;float:left;height:150px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);padding:10px!important;margin-right:10px;margin-bottom:15px}#indexpopular .item-thumbnail{margin:0}#indexpopular img{width:180px;height:100px}#indexpopular .item-title{text-align:center;height:40px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;overflow:hidden}#indexpopular h2{text-align:center;background:#07acec;color:#fff;font-family:'Roboto',sans-serif;width:200px;padding:10px;margin:10px auto;text-transform:uppercase;border-radius:3px;font-size:15px} </style></b:if></b:if>

1. الان ضع هذا فوق الفوتر 

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><b:section class='indexpopular' id='indexpopular' maxwidgets='1' showaddelement='yes'> <b:widget id='PopularPosts16' locked='false' title='مشاركة الشائعة' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>6</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>false</b:widget-setting> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'><li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 170, "1:1") : data:post.thumbnail' var='image'> <img alt='Popular Posts' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div class='clear'/> </b:if> </li></b:loop> </ul></div></b:includable> </b:widget></b:section><div class='clear'/></b:if></b:if>






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

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

Admin Amer لا يوجد تعليق بلوجر حلول مشاركة الشائعة سبتمبر 06, 2017

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

Admin Amer

سبتمبر 06, 2017

0 تعليقات

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

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

السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير في الشرح هذا سوف اقدم لكم حلول لمشكلة ردائة الصورة في المشاركة الشائعة وهيا تنتج عندما المصمم يزيد عرض الصورة او طولها سوى بزيادة او النقصان و هذا يجعل الصورة تضهر بشكل سئ و سبقى وشرح كيفية التخلص من المشكل هذا على المشاركات الاساسية في الصفحة الرئيسية و الحمدلله حلت جميع مشاكل المتابعين و اليوم اقدم لكم شرح ب الفيديو لكي تفهمو احسن من الشرح ب الكتابة لذا تايع الفيديو كامل ☺💓 تابع الفيديو 😎

الاكواد الذي وضعتهم في الشرح

الكودالثاني

رابط الاداة الذي عملنا بها و التي حلت المشكل في جميع القوالب من هنا

تغيير شكل المشاركات الشائعة V1 كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر مشاركة الشائعة يوليو 29, 2017

تغيير شكل المشاركات الشائعة V1 كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

يوليو 29, 2017

0 تعليقات

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

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

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

قبل التركيب لا تنسى حذف الاكواد الأولى

ضع هذه الاكواد فوق ال