From 3415c0451b0e473a2dcad0275033243a3fee57ca Mon Sep 17 00:00:00 2001
From: Ahmad Alobaid <ahmad88me@gmail.com>
Date: Sun, 30 Jun 2024 16:31:03 +0200
Subject: [PATCH] add post share buttons

---
 _includes/share-bar-with-text.html | 165 +++++++++++++++++++++++++++++
 _includes/share-bar.html           | 157 +++++++++++++++++++++++++++
 _layouts/post.html                 |   9 ++
 _sass/sidebar.scss                 |   8 +-
 4 files changed, 335 insertions(+), 4 deletions(-)
 create mode 100644 _includes/share-bar-with-text.html
 create mode 100644 _includes/share-bar.html

diff --git a/_includes/share-bar-with-text.html b/_includes/share-bar-with-text.html
new file mode 100644
index 0000000..1500319
--- /dev/null
+++ b/_includes/share-bar-with-text.html
@@ -0,0 +1,165 @@
+<div id="share-bar">
+
+    <h4>Share this:</h4>
+
+    <div class="share-buttons">
+        <a  href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Facebook" >
+   <!--         <i class="fab fa-facebook share-button"> facebook </i> -->
+   				
+   				 <i class="fab fa-facebook share-button"> facebook original </i> 
+
+
+   				 <i class="fab fa-facebook-square share-button"> facebook original </i> 
+
+
+   				<span class="share-button fa-facebook-span">
+               		<i class="fab fa-facebook share-icon"></i>  <i  class="fab share-text"> facebook </i>
+               </span>
+   				 
+
+        </a>
+
+        <a  href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Twitter" >
+            <i class="fab fa-x-twitter share-button"> twitter</i>
+            
+
+            
+            
+        </a>
+
+        <a  href="http://pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Pinterest" >
+            <i class="fab fa-pinterest share-button"> pinterest</i>
+        </a>
+
+        <a  href="http://www.tumblr.com/share/link?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Tumblr" >
+            <i class="fab fa-tumblr share-button"> tumblr</i>
+        </a>
+
+        <a  href="http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Reddit" >
+            <i class="fab fa-reddit-alien share-button"> reddit</i>
+        </a>
+
+        <a  href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source={{ site.title }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on LinkedIn" >
+            <i class="fab fa-linkedin share-button"> linkedin</i>
+        </a>
+
+        <a  href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            title="Share via Email" >
+            <i class="fa fa-envelope share-button"> email</i>
+        </a>
+    </div>
+
+</div>
+<style type="text/css">
+/* Share Bar */
+#share-bar {
+//    font-size: 20px;
+}
+/* Title */
+#share-bar h4 {
+//    margin-bottom: 10px;
+    margin-bottom: 0.8rem;
+    font-weight: 500;
+}
+/* All buttons */
+.share-buttons {
+	font-size: 0.75rem;
+//    font-size: 2.75rem;
+	
+}
+.share-icon{
+vertical-align: middle;
+font-size: 1.5rem;
+}
+.share-text{
+vertical-align: middle;
+margin-left: 0.35rem;
+}
+
+/* Each button */
+.share-button {
+    margin: 0px;
+//    margin-bottom: 10px;
+    margin-bottom: 0.8rem;
+//    margin-right: 3px;
+    margin-right: 0.2rem;
+//    border: 1px solid #D3D6D2;
+    border: 0.05rem solid #D3D6D2;
+//    padding: 5px 10px 5px 10px;
+//    padding: 0.32rem 0.65rem 0.32rem 0.65rem;
+    padding: 1.0rem 0.65rem ;
+
+}
+.share-button:hover {
+    opacity: 1;
+    color: #ffffff;
+}
+/* Facebook button */
+.fa-facebook {
+    color: #3b5998;
+}
+.fa-facebook:hover {
+    background-color: #3b5998;
+}
+.fa-facebook-span {
+    color: #3b5998;
+}
+.fa-facebook-span:hover {
+    background-color: #3b5998;
+}
+/* Twitter button */
+.fa-x-twitter {
+    //color: #55acee;
+}
+.fa-x-twitter:hover {
+    background-color: #55acee;
+}
+/* Pinterest button */
+.fa-pinterest {
+    color: #cb2027;
+}
+.fa-pinterest:hover {
+    background-color: #cb2027;
+}
+/* Tumblr button */
+.fa-tumblr {
+    color: #32506d;
+}
+.fa-tumblr:hover {
+    background-color: #32506d;
+}
+/* Reddit button */
+.fa-reddit-alien {
+    color: #ff4500;
+}
+.fa-reddit-alien:hover {
+    background-color: #ff4500;
+}
+/* LinkedIn button */
+.fa-linkedin {
+    color: #007bb5;
+}
+.fa-linkedin:hover {
+    background-color: #007bb5;
+}
+/* Email button */
+.fa-envelope {
+    color: #444444;
+}
+.fa-envelope:hover {
+    background-color: #444444;
+}
+    
+</style>
diff --git a/_includes/share-bar.html b/_includes/share-bar.html
new file mode 100644
index 0000000..f482b58
--- /dev/null
+++ b/_includes/share-bar.html
@@ -0,0 +1,157 @@
+<div id="share-bar">
+	
+    <h4 style="vertical-align: center;">Share this post!</h4>
+
+    <div class="share-buttons">
+        <a class="facebook-color" href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Facebook" >   				
+            
+   				 <i class="fab fa-facebook-f  share-button"> </i>    				 	     				    		
+        </a>
+
+        <a class="x-twitter-color"  href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Twitter" >
+            <!-- 
+            <i class="fab  fa-square-x-twitter  x-twitter-color share-button"> </i>-->
+            <i class="fab  fa-x-twitter share-button"> </i>
+            
+
+
+                
+        </a>
+
+        <a class="pinterest-color"  href="http://pinterest.com/pin/create/button/?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Pinterest" >
+            <!-- 
+            <i class="fab fa-pinterest-square pinterest-color share-button"> </i>-->
+                        <i class="fab fa-pinterest-p  share-button"> </i>
+
+        </a>
+
+        <a class="tumblr-color"  href="http://www.tumblr.com/share/link?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Tumblr" >
+            <!-- 
+            <i class="fab fa-tumblr-square tumblr-color share-button"> </i>
+            -->
+            <i class="fab fa-tumblr  share-button"> </i>
+
+        </a>
+
+        <a class="reddit-color" href="http://www.reddit.com/submit?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on Reddit" >
+            <!-- 
+            <i class="fab  fa-square-reddit reddit-color share-button"> </i>-->
+            <i class="fab  fa-reddit  share-button"> </i>
+
+        </a>
+
+        <a class="linkedin-color"  href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ site.baseurl }}{{ page.url }}&title={{ page.title }}&summary={{ page.description }}&source={{ site.title }}"
+            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+            title="Share on LinkedIn" >
+            <!-- 
+            <i class="fab fa-linkedin linkedin-color share-button"> </i>-->
+            <i class="fab fa-linkedin-in  share-button"> </i>
+
+        </a>
+        <a  class="envelope-color" href="mailto:?subject={{ page.title }}&amp;body=Check out this site {{ site.url }}{{ site.baseurl }}{{ page.url }}"
+            title="Share via Email" >
+            <i class="fa fa-envelope  share-button"> </i>
+        </a>
+    </div>
+
+</div>
+
+
+<style type="text/css">
+
+
+
+
+
+
+.share-buttons a{
+	text-align: left;
+	width: 2.5rem;
+	height: 2.5rem;
+	border: 1px solid #909090;
+	border-radius: 100%;
+	background-color: #8292a2;	
+} 
+
+.share-buttons a i{
+	font-size: 20px;
+	color: #EDEDED;
+	//border: 1px solid #9090FF;  
+    /*The folloing lines are to center the icones */
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);	
+}
+
+
+
+
+
+
+#share-bar{
+	padding: 2rem;
+	text-align: center;
+}
+
+#share-bar h4 {
+    margin-bottom: 0.8rem;
+    font-weight: bold;
+    text-align: center;
+}
+.share-buttons {
+//    font-size: 2rem;	
+//    text-align: center;
+}
+
+
+
+.share-buttons a:hover {
+	//background-color: transparent !important;
+}
+
+
+
+
+/* Each button */
+.share-button {
+    margin: 0px;
+    margin-right: 0.4rem;
+    color: #a2a2a2;
+}
+
+
+
+.facebook-color:hover {
+    background-color: #3b5998 !important;
+}
+.x-twitter-color:hover {
+    background-color: #111111 !important;
+}
+.pinterest-color:hover {
+    background-color: #cb2027 !important;
+}
+.tumblr-color:hover {
+    background-color: #32506d !important;
+}
+.reddit-color:hover {
+    background-color: #ff4500 !important;
+}
+.linkedin-color:hover {
+    background-color: #007bb5 !important;
+}
+.envelope-color:hover {
+    background-color: #222222 !important;
+}
+    
+</style>
diff --git a/_layouts/post.html b/_layouts/post.html
index 24fd4cb..f24d73e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -52,6 +52,15 @@ <h1 style="padding-top: 1.5rem;">{{page.title}}</h1>
         
                 
         {{ content }}
+
+
+
+
+
+
+
+
+{% include share-bar.html %}
     
 </div>
 
diff --git a/_sass/sidebar.scss b/_sass/sidebar.scss
index 617c220..d9a8bc2 100644
--- a/_sass/sidebar.scss
+++ b/_sass/sidebar.scss
@@ -70,7 +70,7 @@ $linkedin: #0e76a8;
             #twitter:hover{
                 color: $twitter;
             }
-	    #x-twitter:hover{
+	    	#x-twitter:hover{
                 color: $x-twitter;
             }
             #rss:hover{
@@ -88,9 +88,9 @@ $linkedin: #0e76a8;
             #youtube:hover{
                 color: $youtube;
             }
-	    #linkedin:hover{
-		color: $linkedin;
-	    }
+		    #linkedin:hover{
+			color: $linkedin;
+		    }
 		
         }
     }