السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم ، أهلا بكم أعزائي متتبعي و زوار مدونة إبداعاتي الكرام .
بسم الله الرحمن الرحيم ، أهلا بكم أعزائي متتبعي و زوار مدونة إبداعاتي الكرام .
اليوم وفي اول تدوينة لي في المدونة احببت ان اقدم لكم إضافة متميزة لمدونات بلوجر وهي إضافة :
المتابعة على المواقع الإجتماعية
وهي إضافة متميزة و جميلة جداً بتأثيرات CSS الإحترافية قمت بتصميمها فقط لكم في أول تدوينة لي و ما يلي بعض الصور للإضافة
وهي إضافة متميزة و جميلة جداً بتأثيرات CSS الإحترافية قمت بتصميمها فقط لكم في أول تدوينة لي و ما يلي بعض الصور للإضافة
: اول شئ , معاينة الاداه
الآن : كيفية تركيب الأداة في المدونة
خطوات تركيب الأداة بسيطة جداً وهي :
1- ادخل للوحة تحكم بلوجر.
2- اختر تخطيط في القائمة الجانبية.
3- إضغط على إضافة أداة في المكان الذي تريده.
4- اختر أداة HTML/JavaScript.
5- انسخ الكود التالي و قم بلصقه في الآداة.
ان واجهتك مشكله فى فهم احد الخطوات يمكنك الاستعانه بالشرح المصور من هنا
<!-- Don't Change The Code -->
<!-- Social Icons by Mohammad Khader -->
<style>
.memo-socials {
width:230px;
margin: 5px;
padding: 0px;
overflow: hidden;
list-style: none outside none;
}
.memo-socials a {
display: block;
margin: 0px 10px 0px 0px;
color: #FFF;
animation-duration: 2s;
animation-fill-mode: both;
}
.memo-socials li {
list-style:none outside none;
width: 39px;
height: 35px;
display: inline-block;
font-size: 26px;
float: left;
padding:8px 0px 0px 4px;
margin: 0px 0px 0px 1px;
transition: all 0.4s ease-in-out 0s;
}
.memo-socials li:hover {
transition: all 0.4s ease-in-out 0s;
}
#fb {
background:url(http://goo.gl/y16yje)repeat center center #000;
border-radius: 20px 5px;
}
#tw {
background:url(http://goo.gl/6P5H0x)repeat center center #000;
border-radius: 20px 5px;
}
#rss {
background:url(http://goo.gl/oyfMfa)repeat center center #000;
border-radius: 5px 20px;
}
#pg {
background:url(http://goo.gl/eWMHFa)repeat center center #000;
border-radius:4px;
}
#ut {
background:url(http://goo.gl/RRMUAh)repeat center center #000;
border-radius: 5px 20px;
}
#fb:hover {
background:url(http://goo.gl/BeyC2j) repeat center center #3B5998;
transform:rotate(-360deg);
border-radius: 5px 20px;
}
#tw:hover {
background:url(http://goo.gl/CX0uoA) repeat center center #00a0d1;
transform:rotate(-360deg);
border-radius: 5px 20px;
}
#rss:hover {
background:url(http://goo.gl/4olTZw) repeat center center #f70;
transform:rotate(360deg);
border-radius: 20px 5px;
}
#pg:hover {
background:url(http://goo.gl/D9btiG) repeat center center #000;
border-radius:50px;
transform:rotate(360deg);
}
#ut:hover {
background:url(http://goo.gl/YjYb6K) repeat center center #C4302B;
transform:rotate(360deg);
border-radius: 20px 5px;
}
.social {
background: none;
margin: 0 auto;
width: 231px;
text-align: center;
}
</style>
<center>
<div class="social">
<ul class="memo-socials">
<a href="#facebook"><li id="fb"></li></a>
<a href="#twitter"><li id="tw"></li></a>
<a href="#plus-google"><li id="pg"></li></a>
<a href="#rss"><li id="rss"></li></a>
<a href="#youtube"><li id="ut"></li></a>
</ul>
</div>
</center>
<!-- Don't Change The Code -->
أمور لابد من تعديلها
هنالك بعض الأمور لابد من تغييرها في كود الأداة :
1- غير ما باللون الأزرق الفاتح برابط الصفحة على الفيسبوك .
2- غير في باللون النهدي برابط الحساب على تويتر .
3- غي ما باللون البرتقالي برابط الصفحة على جوجل بلس .
4- غير ما باللون الأصفر برابط التغذية الخاصة بالمدونة .
5- غير ما باللون الاحمر برابط القناة على اليوتيوب .
و أخيراً وليس آخراً إضغط حفظ والف مبرووووك عليك الإضافة .
رجاءاً جداً بعدم حذف حقوق التصميم ليحفظك الله
0 التعليقات