السلام عليكم ورحمة الله وبركاته زوار ومتابعى المدونة بإذن الله فى هذا الموضوع سأضع لكم أداة أحترافية لمشاركة المواضيع عبر الشبكات الإجتماعية " تويتر, فيس بوك, جوجل بلس " وذلك من داخل التدوينة.
وهذه الإضافة مهمة لمدونات بلوجر بشكل عام والكثير من المدونين يبحثون عنها ولهذا سأريك الطريقة الصحيحة لإضافة هذه الأداة بشكل أحترافى ومتناسب مع جميع القوالب, وبإمكانك مشاهدة الإضافة عبر الصورة أسفله قبل البدء فى أستعمالها.
أولاً قم بالدخول إلى القالب ثم قم بعمل " تحرير HTML " بعد ذلك قم بالبحث عن " <head> " بأستعمال " Ctrl + f " من ثم أضف الكود التالى أسفله مباشرة.
<link href='http://fonts.hosni.netdna-cdn.com/fonts/cdn/file_font/?font=Stc' rel='stylesheet'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
#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/AVvXsEizRx9nINQu3NJg_hEjnqV5opPWzU_iAOmjAD-i38tWMdyEPkx5O3YfSkw8lBjeXal4mLSNhNfRCMnNKEXiOW7iPQsTQGgRXFkvmcjYdxnHWrfmy2UYBz6hwkgVs1R4NZkPOiAfoqx6OgE/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/AVvXsEj3_AqIODym0PEptbgMera41b7F0q3Z74dUNGCSX7co5r53Fd4Tea5QUeMjnwPuzFTDnTOcpaDQZ1PqZyobf4NejVOF8RKqodj3M6mxvGeSGbD-M0_YyJa9M38PBdfQNNdOMZ2HM_gRaSQ/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/AVvXsEjT7QCqv-EI5iBE0joXGoPEUBaYtUqyM6xXWOEl7ZiZCxx3Ff40sJa5C-JSLjfqe_rdYvOZf2Z4powIqtmXEIaOBTD6dwXzfkCABk3gK0UtQqMudE-N7yKS474Ja0VWVmKelh37byDTjbdR/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; }
<div id='Share'> <div id='icon-share'/> <a class='text-share'>مشاركة الموضوع</a> <b:if cond='data:top.showTwitterButton'><a class='twitter-share' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if> <b:if cond='data:top.showFacebookButton'><a class='facebook-share' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if> <b:if cond='data:top.showFacebookButton'><a class='google-share' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='المشاركة في Google'><div id='googl'/></a> </b:if> </div>
ليست هناك تعليقات:
إرسال تعليق