كيفية اضافة ازرار المشاركات الاجتماعيه بشكل رائع لبلوجر

كيفية اضافة ازرار المشاركات الاجتماعيه بشكل رائع لبلوجر

السلام عليكم متابعى انتكا

اليوم معنا موضوع جميل لبلوجر 

اضافة ازرار المشاركات الاجتماعية بشكل جذاب

ولكم صورة توضيحية ↙↙↙↙

كيفية اضافة ازرار المشاركات الاجتماعيه بشكل رائع لبلوجر

هذه الاضافة مهمه جدا لكل مدون بلوجر

لانها تساعد على نشر مدونتك على مواقع التواصل الاجتماعى 

بشكل افضل وايضا مفيدة لزوار مدونتك 

هذه الاضافه انيقه جدا وبشكل رائع ايضا

والان مع كيفية التركيب

1- ندخل الى الصفحه الرئيسية لبلوجر

2- نضغط على قالب

3- تحرير html

4- نضغط ctrl +f

ونبحث عن هذا الوسم

</style> فى اكواد css

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

/* CSS Share Button */ .sharepost li{width:19%;padding:0;list-style:none;} .sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;} .sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;} .sharepost li a:hover{opacity:1;color:#444;border:double #fff;} .sharepost li .twitter{background-color:#55acee;} .sharepost li .facebook{background-color:#3b5998;} .sharepost li .gplus{background-color:#dd4b39;} .sharepost li .pinterest{background-color:#cc2127;} .sharepost li .linkedin{background-color:#0976b4;} .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover, .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;} .sharepost li{float:left;margin-right:1.2%} .sharepost li:last-child{margin-right:0} .sharepost li .fa:before{margin-right:5px}

الخطوه التاليه
نبحث عن الوسم
</head>

ونضيف الكود التالى فوقه

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

واخيرا نضيف الكود التالى بعد الوسم <data:post.body/> مباشرة
ملحظه ستجد اكثر من وسم بهذا الاسم ولكننا سنختار الاخير

<b:if cond='data:blog.pageType == "item"'> <div class='sharepost'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='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'/>Share</a></li> </ul> </div> </b:if>

الان نكون قد انتهينا من تركيب الاضافه الجميله فى مدونتنا
وارجو ان يكون الشرح سهل ومفيد لكم
لو فى مشكله فى التركيب اترك لى تعليقا وسافيدك باذن الله
#انتكا

اخر الاخبار شروحات بلوجر

hisham mustafa

انا هشام اسمي هشام عايش هشام نايم هشام باكل هشام بشرب هشام