بلوجر
شرح اضافة ازرار مشاركات مواقع تواصل اجتماعي اسفل مواضيع مدونة بلوجر
بسم الله الرحمن الرحيم
اهلا بكم في هذا الموضوع الذي يهم كافة مدراء ومشرفي مدونات بلوجر
وهو شرح اضافة ازرار مشاركات مواقع تواصل اجتماعي اسفل مواضيع مدونة بلوجر
شرح اضافة الاضافة
اولا نتوكل على الله ثم ناخذ نسخة احتياطية من القالب
ثم اتبع الخطوات التالية
ابحث عن <head>
ان وجدت الكود التالي
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
فلا تضعه
ابحث عن </b:skin>
ضع اسفلها الكود التالي
/* CSS Share Button */
.share-text {color: #434A54; font: 14px DroidKufi-Bold; padding: 1px 12px ;}
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:right;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}
@media screen and (max-width:480px) {
.share-post li{width:100%}}
وابحث عن <data:post.body/>
ضع تحتها الكود التالي
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
<b:if cond='data:blog.pageType == "item"'>
<h3 class='share-text'>
شارك الموضوع !
</h3>
<div class='share-post'>
<ul>
<li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على الفيسبوك' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>فيسبوك</a></li>
<li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على التويتر' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>تويتر</a></li>
<li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على جوجل بلس' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>جوجل بلس</a></li>
<li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
<li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "media=" + data:post.thumbnailUrl + "description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
</ul>
</div>
<div style='clear:both'/>
</b:if>
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
ومبروك عليك الاضافة
في امان الله
اهلا بكم في هذا الموضوع الذي يهم كافة مدراء ومشرفي مدونات بلوجر
وهو شرح اضافة ازرار مشاركات مواقع تواصل اجتماعي اسفل مواضيع مدونة بلوجر
شرح اضافة الاضافة
اولا نتوكل على الله ثم ناخذ نسخة احتياطية من القالب
ثم اتبع الخطوات التالية
ابحث عن <head>
ان وجدت الكود التالي
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
فلا تضعه
ابحث عن </b:skin>
ضع اسفلها الكود التالي
/* CSS Share Button */
.share-text {color: #434A54; font: 14px DroidKufi-Bold; padding: 1px 12px ;}
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:right;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}
@media screen and (max-width:480px) {
.share-post li{width:100%}}
وابحث عن <data:post.body/>
ضع تحتها الكود التالي
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
<b:if cond='data:blog.pageType == "item"'>
<h3 class='share-text'>
شارك الموضوع !
</h3>
<div class='share-post'>
<ul>
<li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على الفيسبوك' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>فيسبوك</a></li>
<li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على التويتر' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>تويتر</a></li>
<li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='شارك الموضوع على جوجل بلس' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>جوجل بلس</a></li>
<li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
<li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "media=" + data:post.thumbnailUrl + "description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
</ul>
</div>
<div style='clear:both'/>
</b:if>
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
ومبروك عليك الاضافة
في امان الله
0 Comments: