اضافة مواضيع ذات صلة أو اقر أيضا بشكل احترافى و أنيق [ الشكل الأول ]

مواضيع ذات صلة

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله و بركاته

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

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

معاينة مواضيع ذات صلة

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

مواضيع ذات صلة

اضافة مواضيع ذات صلة الى مدونتك

1. من لوحة تحكم المدونة اختر قالب.
2. اختر تحرير HTML.
3. ابحث عن هذا الكود </head> واضف فوقه مباشرة الكود التالى

 <style>
#related-postz {
background: #F8F8F8;
width: 100%;
margin: 0 0 10px;
line-height: 10px;
font: normal 12px GESSTwoMediumRegular;
border: 1px solid #DDD;
border-right: none;
border-left: none;
padding: 0;
color: #888;
}
#related-postz h4 {
font: normal 15px GESSTwoMediumRegular;
color: #555;
padding: 8px 10px;
border: 1px solid #DDD;
background: none repeat scroll 0% 0% #FFF;
border-radius: 5px 5px 0px 0px !important;
width: 100%;
text-align: right !important;
}
#related-postz h4 {
font: normal 15px GESSTwoMediumRegular;
color: #555;
padding: 8px 10px;
border: 1px solid #DDD;
background: none repeat scroll 0% 0% #FFF;
border-radius: 5px 5px 0px 0px !important;
width: 100%;
text-align: right !important;
}
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 0.7em;
font-weight: normal;
color: #888;
font-family: GESSTwoMediumRegular;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }
#related-postz a { color: #888;text-decoration : none; }
#related-postz a:hover { color: #ffb800;text-decoration : none;color: #4BB4C7; }
#related-postz ul {
 margin: 0;
padding: 0;
 }
#related-postz ul li {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhy9Rx9nql1kOrkfdZEBSkRkbjB0rdRkq36v9Xty7qyQryXNAXzjSA_cCmt9HENN2Tz_0oQNAj2Q_uui9UBzIGBR1sSPTwRfprhewB2HYFZC_7OKMJaiYDW2wxg-dmt8CjYZoDJkXPdnfI/s1600/related+posts.png) no-repeat 2% 50%;
padding: 5px 14px 5px;
margin: 0;
line-height: 2em;
border-top: 1px solid #ddd;
font-weight: normal;
transition:0.5s;
}
#related-postz ul li:hover {
transition:0.5s;
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0h3UOolAFdgGhTvDLuJsSsRrjC72QALkH9LrFIO_HctrzgsRe29hihwv1cfblQxNYbg1IV9wO5HJlbrTMkPgBlZQJBJPZg6bViLUy2hFfRwPkQJPfktjdesLeUWSfGDG32WrS-_eKqXEP/s1600/related+posts+hover.png) no-repeat 2% 50%;
}
.puertoColor {
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOuD2O7aAycL_DFNFGbAVKWeAlgSpZbo2cA4WIWNS9kqXM6cvHQb9EPXMOCHWeQUYbboJ_1TlBM1uH64SEndEumlSjxIlbFL1a6SAbUdO-AbeI0YcT3NYyw9SHrt9nk6igI8MlaQbKdHI/s1600/bg_color.png&#39;) repeat scroll 0% 0% transparent;
height: 3px;
}
</style>

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

</script>
<div id='related-postz'>
<h4>تدوينات مفيدة :</h4>
<div class='puertoColor'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

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

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