5: فبراير 2015

السبت، 28 فبراير 2015

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة طريقة تغير شكل التسميات الى شكلين احترافيين فقط على مدونة نقطة إبداع

صور للإضافة

طريقة التركيب

ادخل على التخطيط القالب تحرير html ابحث عن </head> وضع الكود التالي قبله ( فوقه )


  <style>

/* CSS Popular Posts */
.PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;}      #PopularPosts1 ul li .item-thumbnail{overflow:hidden;float :left;margin-right:10px;}      #PopularPosts1 img {overflow:hidden;width : 72px;height:72px;-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}      #PopularPosts1 img:hover{-ms-transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}      .PopularPosts .widget-content ul li{position :relative;padding:0;margin:10px auto;}      .PopularPosts .widget-content ul li:first-child {margin-top:0;}      .PopularPosts .widget-content ul li:last-child {margin-bottom:0;}      .PopularPosts .widget-content ul li:nth-child(1){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(2){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(3){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(4){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(5){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(6){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(7){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(8){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(9){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(10){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li a{color:#525f6a;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li a:hover{color: #4188D2;}      .PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5),.PopularPosts .widget-content ul li:hover:nth-child(6),.PopularPosts .widget-content ul li:hover:nth-child(7),.PopularPosts .widget-content ul li:hover:nth-child(8),.PopularPosts .widget-content ul li:hover:nth-child(9),.PopularPosts .widget-content ul li:hover:nth-child(10){background:#fff;}      .PopularPosts .widget-content{background:#fff;}      .PopularPosts .item-thumbnail{float :right;padding:0;margin:0;}      .PopularPosts .item-title {color:#b2b5be;font-weight:400;font-size:12px;padding:5px;}      .PopularPosts .item-snippet {display :none;font-size:12px;color:#b2b5be;overflow:hidden;text-align:justify;}

  </style>

الجمعة، 27 فبراير 2015

إن الشعار في هذه الأيام له قيمة كبيرة فهو يدل على مقدار جودة المنتج أو الموقع فلذا يجب أن يكون الشعار الخاص بنا مميز

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

النصائح

البساطة في التصميم:

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

فريد ومميز :

فلا شك ان تميز الشعار يترك آثراً عند الزائر يجب أن تحرص على أن يكون شعارك فريد من نوعه , وأن يكون غير متشابه بأي شعار لا موقع ولا شركة .

إختيار الألوان بعيناية :

ليس غريبا أن تجد أغلب شعارات الشركات المشهورة تستخدم لون أو لونين بالكثير ،الإكثار من الألوان في الشعار يشوش على الناظر وقد يجعل رؤيته وفهمه صعبا .. لذلك عليك أن تحرص أن يحتوي الشعار من 1 إلى 3 ألوان فقط.

تعددية الاستخدام :

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

ركز على فكرة واحدة :

فلا تفكر في أفكر كثير لانك سوف تشوش ولن تستطيع المتابعة .

الخميس، 26 فبراير 2015

أفضل خمس مواقع لتنسيق الألوان

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة أفضل خمس مواقع لتنسيق الألوان على مدونة نقطة إبداع

الموقع الأول :

Color wheel

الموقع الثاني :

pltts

الموقع الثالث : (هذا الموقع لمحبي التصميم المسطح)

Flat UI Colors

الموقع الرابع :

Web Colour Data

الموقع الخامس :

COLOURlovers

السبت، 21 فبراير 2015

قالب نقطة إبداع الإصدار الأول مجانا لكم

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة قالب نقطة إبداع الإصدار الأول مجانا على مدونة نقطة إبداع

صورة للقالب

ميزات القالب

هيدر احترافي
شكل التدوينات احترافي
سايدباررائع بل اكثر
فوتر مميز
شكل التعليقات رائع واحترافي
صفحة الخطأ 404
موضوعات ذات صلة أسفل كل موضوع
محسن لمحركات البحث
أزرار التواصل الإجتماعية بشكل رائع ( عائمة )
القالب متجاوب إي انه يعمل مع جميع الأجهزة بشكل متناسق

للتحميل القالب من هنا

الثلاثاء، 17 فبراير 2015

تغير شكل التسميات الى شكلين

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة طريقة تغير شكل التسميات الى شكلين احترافيين فقط على مدونة نقطة إبداع

صور للإضافة

طريقة التركيب

ادخل على التخطيط القالب تحرير html ابحث عن <head> وضع الكود التالي تحته

<link href="http://fonts.hosni.netdna-cdn.com/fonts/cdn/file_font/?font=JF_Flat_Regular" rel="stylesheet"/>

للتركيب الشكل الأل ابحث عن </head> وضع الكود التالي فوقه


   <style>

.list-label-widget-content ul li {
list-style:none;
padding:0;
overflow: hidden;
position: relative;
}
.list-label-widget-content ul {
padding:0
}
.list-label-widget-content ul li a {
display: block;
padding: 7px 5px;
color: #777;
border-bottom: 1px solid #FAFAFA;
font-size: 13px;
font-family: "JF_Flat_Regular";
}
.footer .list-label-widget-content ul li a {
border-bottom:1px solid #312E2E;
background-color:#3D3A3A
}
.list-label-widget-content ul li a:hover {
background-color: #5E9BE7;
color: #FFF!important;
text-decoration: none;
padding-right: 15px;
}
.footer .list-label-widget-content ul li a:hover {
background-color:#FA4710
}
.list-label-widget-content ul li a:before {
content:&quot;\f07c&quot;;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.list-label-widget-content ul li span {
font-weight: 400;
position: absolute;
top: 6px;
left: 6px;
}
.list-label-widget-content ul li:hover span {
color: #FFF;
}
.cloud-label-widget-content {
margin-top:20px
}
.cloud-label-widget-content span {
display:inline-block;
font-size:100%!important;
min-height:30px;
line-height:2em;
margin-bottom:5px
}
.cloud-label-widget-content span a {
background-color:#f0f0f0;
color:#111;
padding:5px 15px
}
.cloud-label-widget-content span a:hover {
background-color:#FA4710;
color:#fff;
text-decoration:none
}
.list-label-widget-content ul li a:before {
margin-left:10px
}
.cloud-label-widget-content span {
float:right;
margin:0 0 8px 3px
}


   </style>
}

للتركيب الشكل الثاني ابحث عن </head> وضع الكود التالي فوقه

 
   <style>

/* CSS Popular Posts */
.PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;}      #PopularPosts1 ul li .item-thumbnail{overflow:hidden;float :left;margin-right:10px;}      #PopularPosts1 img {overflow:hidden;width : 72px;height:72px;-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}      #PopularPosts1 img:hover{-ms-transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}      .PopularPosts .widget-content ul li{position :relative;padding:0;margin:10px auto;}      .PopularPosts .widget-content ul li:first-child {margin-top:0;}      .PopularPosts .widget-content ul li:last-child {margin-bottom:0;}      .PopularPosts .widget-content ul li:nth-child(1){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(2){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(3){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(4){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(5){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(6){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(202,220,85,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(7){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(243,93,92,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(8){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(10,151,181,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(9){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(15,203,205,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li:nth-child(10){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgba(16,170,206,0.8);width : 100%;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li a{color:#525f6a;transition:all 0.3s ease-out;}      .PopularPosts .widget-content ul li a:hover{color:#e1b364;}      .PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5),.PopularPosts .widget-content ul li:hover:nth-child(6),.PopularPosts .widget-content ul li:hover:nth-child(7),.PopularPosts .widget-content ul li:hover:nth-child(8),.PopularPosts .widget-content ul li:hover:nth-child(9),.PopularPosts .widget-content ul li:hover:nth-child(10){background:#fff;}      .PopularPosts .widget-content{background:#fff;}      .PopularPosts .item-thumbnail{float :right;padding:0;margin:0;}      .PopularPosts .item-title {color:#b2b5be;font-weight:400;font-size:12px;padding:5px;}      .PopularPosts .item-snippet {display :none;font-size:12px;color:#b2b5be;overflow:hidden;text-align:justify;}      .sidebar .label-size {position :relative;text-transform:none;text-decoration:none;font-size:12px;font-family:'ge_ss_threeregular';}      .sidebar .label-size a {color:#525f6a;font-weight:400;padding:10px 12px;        margin:0 0 2px 2px;float :right;display :block;border:4px solid #eceef0;transition: all 0.4s ease-in-out;}      .sidebar .label-size-1 a {box-shadow:inset 2px 0 0 0 #1abc9c;opacity:0.8;}      .sidebar .label-size-1 a:hover {box-shadow:inset 100px 0 0 0 #1abc9c;color:#fff!important;opacity:1;}      .sidebar .label-size-2 a {box-shadow:inset 2px 0 0 0 #3498db;opacity:0.8;}      .sidebar .label-size-2 a:hover {box-shadow:inset 100px 0 0 0 #2980b9;color:#fff!important;opacity:1;}      .sidebar .label-size-3 a {box-shadow:inset 2px 0 0 0 #2ecc71;opacity:0.8;}      .sidebar .label-size-3 a:hover {box-shadow:inset 100px 0 0 0 #27ae60;color:#fff!important;opacity:1;}      .sidebar .label-size-4 a {box-shadow:inset 2px 0 0 0 #9b59b6;opacity:0.8;}      .sidebar .label-size-4 a:hover {box-shadow:inset 100px 0 0 0 #8e44ad;color:#fff!important;opacity:1;}      .sidebar .label-size-5 a {box-shadow:inset 2px 0 0 0 #e74c3c;opacity:0.8;}      .sidebar .label-size-5 a:hover {box-shadow:inset 100px 0 0 0 #c0392b;color:#fff!important;opacity:1;}      .sidebar .label-size:hover{background:none;}      .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {        font-size:100%;}      .cloud-label-widget-content{text-align:right}      .label-size{display :block;float :right;margin:0 0 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}

   </style>

قالب المشرفة التربوية "حنان الزنبقي" المدفوع مجانا

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة قالب المشرفة التربوية "حنان الزنبقي" مجانا على مدونة نقطة إبداع

صور للقالب

معاينة القالب

معاينة

للحصول علي القالب يجب عليك اتمام الخطوات التالية

انضم لاعضاء المدونة _ للانضمام اضغط هنا
ثم علق علي الموضوع وبه ايميلك
سيصلك القالب فورا
سارعوا بالحصول عليه انه مجانا

ملحوظة : اذا لم تتم الخطوات لن يتم ارسال القالب

قالب عربي فلات المدفوع مجانا

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة قالب عربي فلات مجانا على مدونة نقطة إبداع

معاينة القالب

معاينة

ميزات القالب

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

للحصول علي القالب يجب عليك اتمام الخطوات التالية

انضم لاعضاء المدونة _ للانضمام اضغط هنا
ثم علق علي الموضوع وبه ايميلك
سيصلك القالب فورا
سارعوا بالحصول عليه انه مجانا

ملحوظة : اذا لم تتم الخطوات لن يتم ارسال القالب

الاثنين، 16 فبراير 2015

قالب مجلة إبداع المدفوع مجانا

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة قالب مجلة إبداع مجانا على مدونة نقطة إبداع

صورة للقالب

معاينة القالب

معاينة

ميزات القالب

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

للتحميل القالب من هنا

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

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد و على ال سيدنا محمد

اهلا بكم احبائي متابعي مدونة نقطة إبداع وزواره الكرام في هذه التدوينة الجديدة والحصرية علي مدونة نقطة إبداع

سوف نقدم لكم في هذه التدوينة اضافة اداة المواقع الإجتماعية بشكل عائم

طريقة التركيب

قم بالذهاب الى القالب من لوحة التحكم في مدونتك ثم تحرير html ثم تقوم بالبحث عن ]]></b:skin> قم بوضع الكود التالي قبلها(فوقها)

 .socialsider_left_middle a:hover {opacity: 1111;}
.socialsider { width:70px; display:block; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;  }
.socialsider ul { list-style-type:none; margin:0; padding:0; }
.socialsider li { margin:0; padding:0; }
.socialsider a { overflow:hidden; height:41px;display:block; text-decoration:none; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; position:relative;}
.socialsider a::after { display:block; font-family:'socicon'; text-decoration:none; font-size:20px; padding:10px; position:absolute;left:0;top:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.socialsider_fixed { position:fixed; }
.socialsider_absolute { position:absolute; }
/* Effects */
.socialsider_radius a { border-radius:5px; }
.socialsider_shadow a { -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);box-shadow: 0 0 2px 2px rgba(0,0,0,0.2); }
.socialsider_opacity a { opacity:0.6; }
.socialsider_opacity a:hover::after { opacity:1; }
.socialsider_spacer a { height:42px; margin-bottom:1px; }
.socialsider.socialsider_bgcolor_white a i {font-size: 23px;margin: 9px 10px 0px 0px;}
.socialsider_left_middle { left:-30px; top:30%; }
.socialsider_left_middle.socialsider_hidden { left:-45px;}
.socialsider_left_middle.socialsider_hidden:hover { left:-25px; }
.socialsider_left_middle a { left:0px;}
.socialsider_left_middle a::after { padding-left:40px; }
.socialsider_left_middle a:hover { left:10px; }
.socialsider.socialsider_bgcolor_white a{ color:#FFF;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='twitter']{ background:#4da7de;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='facebook'] { background:#3e5b98;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='youtube']{ background:#e02a20;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='instagram'] { background:#E5C538;}
.socialsider.socialsider_bgcolor_white a[data-socialsider='blogger']{ background:#ec661c;}
.socialsider.socialsider_bgcolor_white a[data-socialsider="tumblr"]{background:#45556C;}

ثم تقوم بالبحث عن </body> قم بوضع الكود التالي قبلها(فوقها)

<div class='socialsider socialsider_left_middle socialsider_fixed socialsider_bgcolor_white socialsider_radius socialsider_spacer socialsider_opacity socialsider_hidden '><ul>
<li><a data-socialsider='facebook' href='https://www.facebook.com/PointEbda3' title='Facebook'><i class='fa fa-facebook'/></a></li>
<li><a data-socialsider='twitter' href='https://twitter.com/PointEbda3' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li><a data-socialsider='youtube' href='https://www.youtube.com/channel/UCl9uGoET-YwwnxKtCyfhozw' title='YouTube'><i class='fa fa-youtube'/></a></li>
<li><a data-socialsider='instagram' href='http://instagram.com/' title='Instagram'><i class='fa fa-instagram'/></a></li>
</ul></div>