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

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

الكاتب : سعدن ولد حماه الله التاريخ : on 2:05 ص

السلام عليكم ورحمة الله وبركاتة
مرحبا بكل أعضاء وزوار المدون برو
أضافة ايقونات التواصل الأجتماعى بشكل جديد واحترافي لمدونات بلوجر 2017

الصور المصغرة المرفقة

  

:: شرح طريقة التركيب ::

اذهب الى بلوجر ==> المظهر ==> تحرير HTML ==> من خلال زرين Ctrl + F نقوم بالبحث عن الكود التالى

رمز Code:

]]></b:skin>

وتقوم بأضافة الكود التالى فوقة مباشرة

رمز Code:

.social {   position: fixed;   top: 25%;   left:0px; z-index:999999999999999999999999999999; } .social ul {   padding: 0px;   -webkit-transform: translate(-270px, 0);   -moz-transform: translate(-270px, 0);   -ms-transform: translate(-270px, 0);   -o-transform: translate(-270px, 0);   transform: translate(-270px, 0); } .social ul li {   display: block;   margin: 5px;   background: #e5bd01;   width: 300px;   text-align: right;   padding: 10px;   -webkit-border-radius: 0 30px 30px 0;   -moz-border-radius: 0 30px 30px 0;   border-radius: 0 30px 30px 0;   -webkit-transition: all 1s;   -moz-transition: all 1s;   -ms-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; } .social ul li:hover {   -webkit-transform: translate(20px, 0);   -moz-transform: translate(20px, 0);   -ms-transform: translate(20px, 0);   -o-transform: translate(20px, 0);   transform: translate(20px, 0);   background: #1b58b3;  } .social ul li:hover a {   color: #000; } .social ul li:hover i {   color: #fff;   background: rgba(0, 0, 0, 0.36);   -webkit-transform: rotate(360deg);   -moz-transform: rotate(360deg);   -ms-transform: rotate(360deg);   -o-transform: rotate(360deg);   transform: rotate(360deg);   -webkit-transition: all 1s;   -moz-transition: all 1s;   -ms-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; } .social ul li i {   margin-left: 10px;   color: #000;   background: #fff;   padding: 10px;   -webkit-border-radius: 50%;   -moz-border-radius: 50%;   border-radius: 50%;   width: 20px;   height: 20px;   font-size: 20px;   background: #ffffff;   -webkit-transform: rotate(0deg);   -moz-transform: rotate(0deg);   -ms-transform: rotate(0deg);   -o-transform: rotate(0deg);   transform: rotate(0deg); }

والأن نقوم بالبحث عن الكود التالى

رمز Code:

</head>

وتقوم بوضع الكود التالى أسفلة مباشرة

رمز Code:

<nav class="social">           <ul>               <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>               <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>                <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>                <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>                 <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>                 <li><a href="#" target="_blank"><i class="fa fa-android"></i></a></li>                  <li><a href="#"><i class="fa fa-apple"></i></a></li>                             </ul>       </nav>

مع مراعاة تغيير رمز # بما يقابلة

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

وفي الأخير صل على سيدنا ونبينا محمد صلى الله عليه وسلم

:: تحياتى لكم جميعا ::

(( الى اللقاء ))

﴾ الخاتمة ﴿

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