Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Pagination Link


Recommended Posts

Site URL: https://www.freemusicplease.com/page4

Hello everyone!

I have a problem, I have found a CSS code for pagination, this was pretty easy, but I don't have any idea on how it works!

I mean, how can I link the pages to make able people to navigate through my pages?

I have SS 7.1 and a personal plan.

Thanks in advance for the answers!

freemusicplease.com/page4#

Link to post
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

On 1/31/2021 at 6:59 PM, FMP said:

I have copy one from this page https://www.w3schools.com/css/css3_pagination.asp

Edit page > Add a Code block > Paste this code

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>

 

Link to post
On 2/6/2021 at 9:39 AM, tuanphan said:

Edit page > Add a Code block > Paste this code


<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>

 

Thank you so much @tuanphan!!! It works great!!! I have tried to add some code to center and put the symbols inside two squares.

I hope can help someone else!

 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  
}
</style>
</head>
<body>
<div class="center">
<div class="pagination">
  
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

Link to post
5 minutes ago, FMP said:

Thank you so much @tuanphan!!! It works great!!! I have tried to add some code to center and put the symbols inside two squares.

I hope can help someone else!

 


<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  
}
</style>
</head>
<body>
<div class="center">
<div class="pagination">
  
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

You can shorten code

<div class="pagination"> 
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
  text-align: center;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

Link to post
18 minutes ago, tuanphan said:

You can shorten code


<div class="pagination"> 
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
  text-align: center;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

It doens't work..... the block is still on the left..

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...