الخميس، 26 يونيو 2014

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


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

بسم الله الرحمن الرحيم ، أهلا بكم أعزائي متتبعي و زوار مدونة إبداعاتي الكرام .
اليوم وفي اول تدوينة لي في المدونة احببت ان اقدم لكم إضافة متميزة لمدونات بلوجر وهي إضافة :
المتابعة على المواقع الإجتماعية

وهي إضافة متميزة و جميلة جداً بتأثيرات 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) center center #000;
border-radius: 20px 5px;

    }
    #tw {
    background:url(http://goo.gl/6P5H0x) center center #000;
border-radius: 20px 5px;
    }
    #rss {
    background:url(http://goo.gl/oyfMfa) center center #000;
border-radius: 5px 20px;
    }
    #pg {
    background:url(http://goo.gl/eWMHFa) center center #000;
border-radius:4px;
    }
    #ut {
    background:url(http://goo.gl/RRMUAh)center center #000;
border-radius: 5px 20px;
}
#fb:hover {

    background:url(http://goo.gl/BeyC2j) center center #3B5998;
    transform:rotate(-360deg);
border-radius: 5px 20px;
    }
    #tw:hover {
background:url(http://goo.gl/CX0uoA) center center #00a0d1;
    transform:rotate(-360deg);
border-radius: 5px 20px;
    }
    #rss:hover {
 background:url(http://goo.gl/4olTZw) center center #f70;
    transform:rotate(360deg);
border-radius: 20px 5px;
    }
    #pg:hover {
background:url(http://goo.gl/D9btiG) center center #000;
    border-radius:50px;
transform:rotate(360deg);
    }
    #ut:hover {
background:url(http://goo.gl/YjYb6K) 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- غير ما باللون الاحمر برابط القناة على اليوتيوب . 

و أخيراً وليس آخراً إضغط حفظ والف مبرووووك عليك الإضافة . 
رجاءاً جداً بعدم حذف حقوق التصميم ليحفظك الله

من فضلك اضغظ لايك لمشاهدة لينك التحميل

2 التعليقات:

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار