[ حصريا ] اضافة اداة موضوع مميز لمدونات بلوجر

[sidebar_right]

اضافة اداة موضوع مميز لمدونات بلوجر

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

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

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

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

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

يمكنكم معاينة الاضافة أحبابى فى الله عن طريق النظر فى العمود الجانبى تحت عنوان تدوينة مميزة

طريقة الاضافة الى مدونتك

1.  من لوحة التحكم اذهب التخطيط ثم إصافة اداة HTML/JavaScript
2.  ألصق هذا الكود : 

<div class="Tech-ly_today_img">
<img alt="قالب موسوعة بلوجر" src="http://goo.gl/yNoeDZ" />
<a href="http://blog-ency.blogspot.com/2015/03/th3-encyclopedia-blogger-template.html"><i class="fa fa-arrows-alt"></i></a>
<p>قالب مدونة الموسوعة الشاملة السابق</p>
</div>
<style>
.Tech-ly_today_img{
position:relative;
padding-top:5px
}
.Tech-ly_today_img img{
width:100%;
height:200px
}
.Tech-ly_today_img a{
display:block;
width:48px;
height:48px;
background:rgba(255,255,255,0.8);
color:#e23a3e;
font-size:20px;
text-align:center;
line-height:2.6;
opacity:0;
-webkit-transition:all .3s ease 0;
-moz-transition:all .3s ease 0;
-ms-transition:all .3s ease 0;
-o-transition:all .3s ease 0;
transition:all .3s ease 0;
-webkit-transform:scale(0.2);
-moz-transform:scale(0.2);
-ms-transform:scale(0.2);
-o-transform:scale(0.2);
transform:scale(0.2);
position:absolute;
top:76px;
left:126px;
z-index:1001;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%
}
.Tech-ly_today_img p{
position:absolute;
bottom:0;
left:0;
background: rgba(77, 135, 209, 0.6);
text-align: center;
padding:12px 29px;
margin:0;
font-size:15.1px;
color:#FFF;
}
.Tech-ly_today_img:hover a{
opacity:1;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0)
}
.Tech-ly_today_img:hover a:hover{
color:#333
}
.Tech-ly_posts{
float:right;width:730px;
background:#FFF;
margin:24px 0;
-webkit-box-shadow:0 0 5px #DDD;
-moz-box-shadow:0 0 5px #DDD;
box-shadow:0 0 5px #DDD
}
.Tech-ly_post{
position:relative;
padding:24px;
border-bottom:1px solid #EEE
}
.Tech-ly_post_title h1{
padding:0;
margin:0;
font-size:24px;
font-weight:400
}
</style>

و أخيرا

1. قم بتغيير ما باللون الاحمر بـ " رابط الصورة الخاصة بالتدوينة "
2. قم بتغيير ما باللون الاخضر بـ " رابط التدوينة "
3. قم بتغيير ما اللون الأزرق بـ " عنوان التدوينة المميزة "

.

.

.

.

.

.

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