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

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

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


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

مميوات هذه الإضافة

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

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



صورة من الإضافة


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


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


كما قلت لكم الإضافة بسبط فى تركيب أولا سوف تدخل الى قالب مدونتك ثم الى المظهر وبعد ذلك تحرير HTML ثم تبحث عن هذا الوسم]]></b:skin>وتقوم بوضع الكود التالى فوقه.

/* Recent Post Design by wdbloog.blogspot.com */
.row-wdbloog {overflow: hidden;width: 1100px;margin: 20px auto;}
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:left;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:right;margin-left:10px}
.recenthd{padding:15px;text-align:right;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-left:1px}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:259px;max-width:100%;float:right;height:260px;margin-left:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

والأن أبحث عن هذا الوسم</body>ثم قم بوضع الكود التالى فوقه

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://isaac-wdbloog.blogspot.com";
var numPosts = 8;
var recentpost_label = "فنون";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="المزيد من المواضيع" target="_blank">المزيد</a></div>';
//]]>
</script>

والأن سوف تقوم بتغيير رابط المدونة هذا المحدد فى الكود باللون الأحمر https://isaac-wdbloog.blogspot.com  برابط مدونتك ، وايضا سوف تقوم بتغيير تسمية فنون فى الكود بسمية من مدونتك.

والرقم 8 هو عدد المواضيع يمكنك التحكم بها كما تريد ، واذا تريد عدم فتح المواضيع فى صفحة جديد احذف الكود المحدد باللون الأخر هذا target="_blank" وهذا كل شئ فى هذا الكود .

الأن مع اخر كود فى الإضافة والذى سوف تضعه فى المكان الذى تراه مناسب فى مدونتك أو المكان الذى تريد أن تظهر بها الإضافة فى مدونتك .

<div class='row-wdbloog'>
<div id='xtitlex'/>
<ul id='recent-posts'/>
</div>


وبعد وضع الكود الأخير يمكنك حفظ الإضافة الأن ومبروك عليك

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


هناك 9 تعليقات :

ليس بخل ولكن السلايد خاص بالمدونة حاليا

لا ادري كيف اشكرك عبدو طلبت منك تعديل قالب مدونتي فساعدتني الله يسعدك

أخر اريد وضعها تخت رسائل المدونة الالكترونية

ضع اخر كود مثل هذه الصورة
http://www118.zippyshare.com/v/R6L3Z2Jh/file.html

شكرآآآ لك على الاضافة
لكن الاضافة يوجد بها مشكلة في اصدارالهاتف حجمها لا يتناسب مع القالب هل يوجد حل لهذة المشكلة ؟؟
https://cinema-el2rw3.blogspot.com/

اذا كان لديك القليل من الخبره فى css
سوف تستطيع تعديلها

شكرآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ
لقد تم حل المشكلة :)