عرب تيم

إضافة تابعني على المواقع الاجتماعية لكل المدونات

1) أولا يجب عليك الذهاب إلى مدونتك في بلوجر

2) تم إضغط على قالب

3) بعدها إضغط تحرير HTML

4) ثم في الكيبورد إضغط Ctrl + F داخل لوحة تحرير ال HTML

5) بعدها إبحث عن هذا الكود

]]>

6) و أضف قبله ( فوقه ) هذا الكود

.social-icone{ height:93px;}

.social-icone div{ margin: 0 12px;}

.social-icone a{ text-decoration:none;}

.you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;}

.you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3;}

.you-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hSaoQngCIB1Rs3HnLL-ZeCwAC8nHr6cgf0qb9RewCpnvQBXNZwIO_R4vvfIBUU9K-VWi0at0WXlqidlJVxfslM0d1BQ3be5ZLNFs58DGGISw9fUrdSV70ikyZwAFcUDtKnXa61pC58A/s1600/youtube.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklBwVRfOAOf9WjTTxHRs_nkOjKCcGQLITopObiPsi_wUiJlKM7b4iYvPSD1GMV5clrT4cTjDIz1y_KDcalf-7FpWLx7Cfeq4Kg8meR9fDa3GI2F2YWKbLiel1LsGjwY5payhtKxVMRQo/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0m_Io4-5NtlqUU0HtSTIjqYSGTMO1zq4gMs8Zhgx0mlpi0YW8mPTv24e12m0_E0PXVGZJD2icVAmTP7jOve0hQALTvHWZD4MCG0sWBlMMpUqjwBF-wvQBFmkaXQet9fpEbl7hTFdP_Q/s1600/twitter.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMPFnTbNxJny6Nzo3DwUH9uHJyAWfzkrgq-dWK8GtUyze41Dgmrp066bDV8nqepAIsMYhOfMH2ON2Ipy4DP448yWgBMjJFQIqc40Py1XKR-heWpeA-U2cXhh5xyXwZ6Hsw5mVjoFUVdGc/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4WQfuoaFiQPESVg2c9xpcmk5_knFYmupNiGpbxA0ZEHqKm76gctCSdy_dXvXJ_P_RPjLteWjVSo-HQOqsAAUo6xOkgZS_quTNmFDs4CqweOITW2jIJb5hY45Hinugq4yDHcaGAFSstPs/s1600/facebook.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdMeGJt-JSmbWSDp9wVG5UvJjTBD_L1POEtoca3aYlKc4XaAukVzIdMZsqbWWprmLAGXaQVILzKosec2phXWBxuY_8IJrO_E6jqRjvQfc-4J_Uuur8Jlb2-ioW5HNQ2CwpxMkinFAdHA/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjuF0Z5vLzopG_ur_bRxy1E0TFc5mpbIWwnj6I-GulbPUWg4ZykFEouNWMEw-eNwTsPDhw4fC4By4KciO8ZXcGU4Ryq9mZRRxjfk4TC4Jljf2wMBI54Ehyphenhyphen_YcjGSqMiN0WchTdaoJQ3c/s1600/RSS.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_ZCdURrvu4BGoRY6EJDAXPNDXEWutRKHHs1gXXKQg4b_sGrD2Tdn7TNWpPux3yWvwU7wP9GxtF87N2jkUsYKgcQEOVWby3TuWxRDHsXbGlaglzDcl8_2m4mV4It9kBxXMZrBxm2wDE4/s1600/RSS2.png)top no-repeat;}

.post-footer-line > * {

margin-left: 0;

}

7) ثم بعد كل هذا قم بحفض القالب و إذهب إلى تخطيط و إختر إضافة أداة من نوع (HTML/Javascript) و أضف هذا الكود

100
مشترك

0000
متابع

2000
معجب

200
مشترك

و غير XXXX بما يناسبك

إضافة تأثيرات حركية على الصور لمدونات بلوجر

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

الآن لنتوجه لتطبيق الكود.

انتقل إلى لوح تحكم مدونتك،إختر “تصميم” ،ثم “تحريرHTML ” ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )

]]>

ثم قم بوضع الكود التالي قبله

.post img {-webkit-transition: -webkit-transform .15s linear; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); padding: 5px 5px 5px 5px; -webkit-transform: rotate(+2deg); -moz-transform: rotate(+2deg); } .post img:hover { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); }

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز(+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg-درجة الميلان عند وضع مؤشر الماوس على الصورة .

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .

إضافة سليدر صحيفة في قوالب بلوجر

في هذا الشرح الجديد سأشرح لكم طريقة إضافة سليدر صحيفة في قوالب بلوجر بطريقة جد سهلة و يضهر فقط في الصفحة الرئيسية

أولا : نأخذ نسخة إحتياطية للقالب في حال حدوث مشاكل

تانيا : نفتح إدارة المدونة في بلوجر

ثالثا : نذهب إلى قالب تم تحرير HTML

رابعا : نبحث عن هذا الكود

]]>

و نضع فوقه / قبله هذا الكود

.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}
.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6LVjwOOzTSHIyNaTrZj57-sRnIssukzuD1PU9gscszK6OjaTK2Mo60lkoGrmCGG1Nya2siohueSiZhAMy4Qxcm1AWbsS2hnLXtNTa69VJ2g7AbX6yxWIudq9-OlidM9zBe2uyxFMVXE/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}
.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}
.ei-slider-large li img{width:100%;}
.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}
.ei-title h2,.ei-title h3{text-align:right;}
.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}
.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0;}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;max-height:100px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3))           );}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}