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

هل تعبت من كتابة الاكواد بنفسك ؟

الان يمكنك عمل اداه بنفسك بدون الحاجة الي كتابة اكواد بلغة HTML / CSS .

المعاينة

او انظر اسفل التدوينة

فقط قم بنسخ الكود بالاسفل و اختر موقعه بعناية

الكود

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px 10px 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 29px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>

<button class="accordion"><img alt="Facebook" src="https://icon-library.net/images/share-button-icon-png/share-button-icon-png-0.jpg" style="border: 0px;display: inline;padding: 0px;width: 46px;margin: 0px 0px -12px;"> share</button>
<div class="panel">
<p>

<a href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtSCKqVCT4_BTuZKSVPsK4q4cBBpwx-vaXovlDxcTYYcsqdLrFF9awSCD61tG7n2RXqYvJLIChg0ke7p7aaQw5UDuvk5nxK1fXZHIYH5eIF3aoj2XJJeCE3YRF-4s800x0QqS6lvo_qKo/s1600/facebook.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>
<a href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXYNtI01KZC7ZTptiUymjHHdq8dRddtQaSMrn9Wc2FOrvbgTbHMnyFagTxUDjC28ZcEQGfe7olLoQaGpGwb5eD7gAUh9qLr5imEsvLZORGz5VDIl_EDpP6aPikr3rBbLExWH3dqq62hVK/s1600/twitter.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>

<a title="Share on telegram" href='https://telegram.me/share/url?url=<URL>&text=Share&description=<TITLE>' onclick="window.open('https://telegram.me/share/url?url=<URL>&text=Share link&description=<TITLE>&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;" ><img alt="Digg" src="https://web.telegram.org/img/logo_share.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>
<a href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"><img alt="Reddit" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoQLAq5w8BL8jPmkJv0rzCGisgLe77v5zDJ8u9ydLT1P2WF5YBu33fwqabcoXwhrnw5PELE7iCm_ki0HAVXm9pQCnaQX2MJHmTHdj_vGu5ujNVTOL3gkjDaav4u5319YpIpU6XO74jIet6/s1600/reddit.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"><img alt="LinkedIn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1tApddKTZs1bBgSjcoLsqtjy7gYrrxlezPWnpNl3u6fMzpQvH1InjmYW7-dsbk6mBhPggfVeb6YmviHIw4IfD2o9CjETNgiN8shKZxz2zZQ0f5aWqnvnOywTOfMz-YtczN1aiUc6fNTuf/s1600/linkedin.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>
<a title="Pin it" target="_blank" href='http://pinterest.com/pin/create/button/?url=<URL>&description=<TITLE>'

onclick="window.open('http://pinterest.com/pin/create/button/?url=<URL>&description=<TITLE>&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"><img alt="Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRkLZAu8-Dp-Ayl2-FOtovWZWfllCXO8thWMaF74KI-UXOewxMx_snRNXJHMchkyPcbzQtpAX0r0OZbhWKX0G2SZhGLiuVLkUXj8Et0k1ZvJyWTFuQ0D5kXcE2ZK-ncz3Cu4MMIoxJp_Gp/s1600/pinterest.png" style="border: 0px; display: inline; padding: 5px; width: 35px;" /></a><span style="text-align: start;"> </span>

</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>