إضافة مواضيع ذات الصلة لمدونة بلوجر على شكل الماتريال الرهيب 2019

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

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

1. من لوحة تحكم المدونة أنقر على المظهر ثم أختر تحرير html أبحث عن الرمز ]]> ثم أضف الكود التالي فوق الرمز المشار إليه مباشرةً:

.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{background:#fff;margin:10px}.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}.lol h4 i,.related-post h4 i{margin-right:14px}.lol h4,.related-post h4{border-radius:4px;color:#555;font-size:100%;font-family:'Droid Arabic Kufi',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:'Droid Arabic Kufi',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:47%;margin-right: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}}

.related-post-item-thumbnail{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.related-post-item-thumbnail:hover{opacity:.8;-webkit-transform:scale(1.1) rotate(-2deg);-moz-transform:scale(1.1) rotate(-2deg);-ms-transform:scale(1.1) rotate(-2deg);transform:scale(1.1) rotate(-2deg)}

2. ثم أبحث عن الرمز