Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How Can I Add A Sticky Share Buttons To My Blog
#1
Please come in.

See example below ⬇️





@dealwap,@laive,@dynamo,@cavdy,@abscheat


Attached Files Thumbnail(s)
   
[-] The following 2 users Like Makaf's post:
  • Aaron, jonath45
#2
Is your blog wordpress? Or it uses other softwares.
Posting From http://ncgblog.ga
Reply
#3
If it is wordpress their are alot of plugins that can give you what you want.

@deelino
@jonath45
@hackinubee

Can help you. Big Grin
Posting From http://ncgblog.ga
[-] The following 1 user Likes Dynamo's post:
  • Aaron
Reply
#4
@makaf here on NCT we like to encourage users to try themselves first,
Therefore although you've spoken good english, you also need to speak code whether good or bad I.e show us what you came up with Big Grin
[-] The following 1 user Likes jonath45's post:
  • Aaron
Reply
#5
(10-11-2018, 01:49 AM)jonath45 Wrote:
@makaf here on NCT we like to encourage users to try themselves first,
Therefore although you've spoken good english, you also need to speak code whether good or bad I.e show us what you came up with Big Grin


Them dulling us oh..
[-] The following 1 user Likes Deelino's post:
  • jonath45
Reply
#6
(10-11-2018, 09:04 AM)Deelino Wrote:
Them dulling us oh..


abi na Smile
Reply
#7
You can use Bootstrap 3 or 4 or even CSS to achieve this, thats if your site/wordpress blog uses Bootstrap 3 or 4.
But am going to explain how to achieve this for both Bootstrap 3, 4 and for CSS too.

Bootstrap 3
In bootstrap 3, you can achieve this by adding the class "fixed-bottom" to your div container holding your share buttons like this;

Code:
<div class="fixed-bottom">
// paste share buttons code here...
</div>


Bootstrap 4
In bootstrap 4, you can achieve this by also adding the class "fixed-bottom" to your div container holding your share buttons like this;

Code:
<div class="fixed-bottom">
// paste share buttons code here...
</div>


CSS
In CSS, you can achieve this by adding the CSS code to your div class or id;

Code:
.sticky-share-buttons-cont {
    position: sticky; // This works exactly like Bootstrap 3 affix.js, it automatically spy on the content and fix the content anywhere you want it using the margin-top or when a user scrolls near the content (i.e. Trying to go to the bottom of your site/page. Reaching the content, the content automatically fix itself to the bottom of the page).
    margin-top: 0px; // This is to fix a top margin for the share buttons when page is been scrolled
}



Code:
<div class="sticky-share-buttons-cont">
// paste share buttons code here...
</div>


For CSS, It's somehow tricky but I assure you it's easy and cooler thats if you read more about the CSS code and how to affix contents with it without the use of Affix.js (for Bootstrap 3 and for other purposes) because if you do so (by reading about it), you will be able to spy on more than 50 contents in your site/blog using the CSS code (I advice you to read and learn about the CSS code).

But if it still looks hard to you, you can go with that of Bootstrap 3 or 4 (thats if you use Bootstrap 3 or 4 in your site/blog).

@Makaf
I am a proud member of NIgerian Coders Team
[-] The following 1 user Likes Aaron's post:
  • Dynamo
Reply
#8
(10-10-2018, 09:24 PM)Dynamo Wrote:
Is your blog wordpress? Or it uses other softwares.

It is a blogger blog
Reply
#9
(10-11-2018, 02:21 PM)Aaron Wrote:
You can use Bootstrap 3 or 4 or even CSS to achieve this, thats if your site/wordpress blog uses Bootstrap 3 or 4.
But am going to explain how to achieve this for both Bootstrap 3, 4 and for CSS too.

Bootstrap 3
In bootstrap 3, you can achieve this by adding the class "fixed-bottom" to your div container holding your share buttons like this;

Code:
<div class="fixed-bottom">
// paste share buttons code here...
</div>


Bootstrap 4
In bootstrap 4, you can achieve this by also adding the class "fixed-bottom" to your div container holding your share buttons like this;

Code:
<div class="fixed-bottom">
// paste share buttons code here...
</div>


CSS
In CSS, you can achieve this by adding the CSS code to your div class or id;

Code:
.sticky-share-buttons-cont {
    position: sticky; // This works exactly like Bootstrap 3 affix.js, it automatically spy on the content and fix the content anywhere you want it using the margin-top or when a user scrolls near the content (i.e. Trying to go to the bottom of your site/page. Reaching the content, the content automatically fix itself to the bottom of the page).
    margin-top: 0px; // This is to fix a top margin for the share buttons when page is been scrolled
}



Code:
<div class="sticky-share-buttons-cont">
// paste share buttons code here...
</div>


For CSS, It's somehow tricky but I assure you it's easy and cooler thats if you read more about the CSS code and how to affix contents with it without the use of Affix.js (for Bootstrap 3 and for other purposes) because if you do so (by reading about it), you will be able to spy on more than 50 contents in your site/blog using the CSS code (I advice you to read and learn about the CSS code).

But if it still looks hard to you, you can go with that of Bootstrap 3 or 4 (thats if you use Bootstrap 3 or 4 in your site/blog).

@Makaf

Thank you for your response.... But i am using Blogger blog...
I need some help with this
Reply
#10
(10-12-2018, 01:27 PM)Makaf Wrote:
Thank you for your response.... But i am using Blogger blog...
I need some help with this


then use the CSS method.
I am a proud member of NIgerian Coders Team
Reply
#11
(10-12-2018, 03:39 PM)Aaron Wrote:
then use the CSS method.


I like to chat private with you on WhatsApp
Reply
#12
(10-12-2018, 03:39 PM)Aaron Wrote:
then use the CSS method.


I don't understand coding so much...
But show me how to use CSS and where to add it on post page?
Reply
#13
(10-12-2018, 11:02 PM)Makaf Wrote:
I don't understand coding so much...
But show me how to use CSS and where to add it on post page?


Well, I don't know blogger nor wordpress much but I know they both have place where one can edit his blog source code and if true, the CSS method will be responsible in achieving what you want.
I am a proud member of NIgerian Coders Team
[-] The following 1 user Likes Aaron's post:
  • Makaf
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  NEWS: I Have Created A Forum For Nigerian Programmers To Share Ideas And Q&a Tecep 0 28 09-19-2018, 12:31 PM
Last Post: Tecep
  FUN: Share Your Experience (journey) Into The Programming World abcheats 15 598 05-06-2018, 06:35 AM
Last Post: abcheats
  TUTORIAL: Meta Tag Code To Make Search Engine To Crawl Your Blog Every Second wisetalent1 0 472 07-10-2017, 09:39 PM
Last Post: wisetalent1
  HELP: Hello How Can I Fix Share Post In My Site Dilfgem 5 306 03-17-2017, 10:50 PM
Last Post: Eddykul
  Why Does A Blog Needs A Facebook Fanpage? dealwap 5 424 12-30-2016, 06:49 PM
Last Post: bfaschat



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise