السلام عليكم ورحمة الله وبركاته زوار ومتابعى المدونة بإذن الله فى هذا الموضوع سأضع لكم أداة أحترافية لمشاركة المواضيع عبر الشبكات الإجتماعية " تويتر, فيس بوك, جوجل بلس " وذلك من داخل التدوينة.
وهذه الإضافة مهمة لمدونات بلوجر بشكل عام والكثير من المدونين يبحثون عنها ولهذا سأريك الطريقة الصحيحة لإضافة هذه الأداة بشكل أحترافى ومتناسب مع جميع القوالب, وبإمكانك مشاهدة الإضافة عبر الصورة أسفله قبل البدء فى أستعمالها.
أولاً قم بالدخول إلى القالب ثم قم بعمل " تحرير HTML " بعد ذلك قم بالبحث عن " " بأستعمال " Ctrl + f " من ثم أضف الكود التالى أسفله مباشرة.
ثانياً تقومم بالبحث عن " ]]>
#Share { margin-top: 15px; background: rgb(40, 39, 39); height: 32px; padding: 10px; } #icon-share { float: right; margin-left: 8px; transition-duration: 0.4s; } #icon-share:before { content: "\f1e1"; font-family: fontawesome; color: #1BA49A; font-size: 27px; } #Share:hover #icon-share { transform: rotate(360deg); transition-duration: 1s; } .text-share { float: right; font: 19px normal 'Stc'; color: #fff; } .twitter-share { width: 110px; height: 32px; background: #23B0E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiWw1TPNAo-tlvwJUFVBQ0Ely5wMunMYhPb6B-Vgg2lQPxQ8pmmhqbq94pCY7PoYQHFfQ-YCUfh3evzMRnXO6oU_Ep0dkSXa5xV-I3nP9loYqoXwqprNy02sHrlPATHjqn6j-zFvTLYB0/s1600/Twitter.png) center no-repeat; float: left; margin: 0 3px; border-radius: 4px; } .twitter-share:hover { width: 130px; transition-duration: 0.5s; } .facebook-share { width: 110px; height: 32px; background: #3B5998 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93quqliLZB9C-x4lgEuNLJuvg_uQ26fCuedClxXHme7F_WLQ3LJ7zvS6ZFWcjaHvOc1JlhCNABtzkkctPLwsLXPANUuMoy2nSoMafeHtcV7IlGP8r-1KfWpe-6sdXoRCgli_tjDP2L08/s1600/facebook-e76885eb3963a60dc10145e6165a575b.png) center no-repeat; float: left; margin: 0 3px; border-radius: 4px; } .facebook-share:hover { width: 130px; transition-duration: 0.5s; } .google-share { width: 110px; height: 32px; background: #CF1717 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1W14IlIXAXBXiH9rngpxWi6JiBnbNDapdZPJW8s59MbbQFo2Vky8NlAaBCD3i2UlYU4oInYpVYql2A3g_nNFcyfYErR_-4e6A1g_cVbMXLza0KZLTPtrM4jdlg_VrQOgWwmLdkjhDmjH/s1600/google-plus-icon.png) center no-repeat; float: left; margin: 0 3px; border-radius: 4px; } .google-share:hover { width: 130px; transition-duration: 0.5s; }
ثالثاً تقوم بالبحث عن " " بأستعمال نفس طريقة البحث, لكن فى هذه الخطوة ستظهر لك العديد من النتائج لذا قم بالتوجه إلى النتيجة الثالثة وأضف الكود التالى أسفلها مباشرة.
ليست هناك تعليقات
إرسال تعليق