طريقة تعديل أشكال التسميات بشكل رائع وبتأثيرات جميلة و جذابة

 

مواضيع ذات صلة بتقنية ماتريال ديزاين

السلام عليكم زوار مدونة كلشي مجاني نضع بين يديكم اليوم اضافة مميزة ومهمة جدا لبلوجر و سيو ولإبقاء الزوار وقت اكثر في مدونتك

اضافة مواضيع ذات صلة بلوجر - تعتبر مشاركات ذات صلة من اهم الاضافة آلتي يجب ان تكون بالمدونة لان بعد انتهاء القراء من الموضوع يفضلوا إستمرار بالبحث في نفس الموضوع و بالتالي يجب عليك تركيب هذة الاضافة للاحتفاظ بالزوار اكثر مده ممكنه
و هنا بطبيعة الحال العديد من المميزات آلتي تترك هذه اضافة. 

سوف نتعرف كيفية تركيبها بافضل تنسيق  لتنال اعجابكم هذه الإضافات .

طريقة اضافة مواضيع ذات صلة بلوجر

•  اولا نتوجه الى لوحة تحكم بلوجر BLOGGER
• ثم نختار المظهر
• تم تعديل HTML  من القالب ابحث عن  </body> ثم اضف الكود التالي فوقه:

<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> .related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:right;text-overflow:ellipsis;padding:10px} #related-post .material-icons{font-size:200%;left:20px;color:#607D8B;top:-1px;position:absolute} #related-post{border-radius: 7px;box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);background:#fff;padding:10px} .related-post{margin:30px 0 0;position:relative;padding:0 0 10px}.lol h4 i,.related-post h4 i{margin-left:14px} .lol h4,.related-post h4{border-radius:4px;color:#555;font-size:100%;font-family:'tharabic',Arial;text-transform:uppercase;text-align:right;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px} .related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word} .related-post-style-3 li a{font-family:'tharabic',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em} .related-post-style-3 li a:hover{color:#111} .related-post-style-3 .related-post-item{display:inline-block;float:right;border-radius:3px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:48%;margin-left:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden}.related-post-style-3 .related-post-item:focus{outline:none;border:none}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:right}.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out}.related-post-item:hover .related-post-item-tooltip a{opacity:1}.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative} @media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important}.related-post-style-3 .related-post-item-thumbnail{height:100px!important} .adspost{max-width:360px;padding:0;}} </style>

الان ابحث عن   <data:post.body/>  ثم اضف كود html التالي اسفله:

<!-- related post --> <b:if cond='data:view.isPost'> <div class='related-post' id='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4><i class='fa fa-bookmark'></i> مواضيع دات صلة</h4>", numPosts: 6, summaryLength: 370, titleLength: "auto", thumbnailSize: 300, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "related-post", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() {} }; </script> <script type='text/javascript'> //<![CDATA[ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.idblanter.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]> </script> </b:if> <!-- related post -->

يمكنك رؤية الاضافة :

 بالضغط هنا

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