As webmasters, we all prefer to find fun ways to display our gallery links on our posts. I have found a few ways throughout 10+ years as a webmaster and thought I would share two of those with you today. The following includes two different ways you can display gallery links or even press links for external or internal articles for posts on fansites. You can use these fun ways on any site (fan, blog, news) or network related to it. Enjoy!
View the styles coded by clicking on the image previews.
Place the following code in your stylesheet:
.gallerylinks { padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; font-size: 80%; text-transform:uppercase; border:1px solid #f5f5f5; font-family: 'Poppins', sans-serif; font-weight:400; } .gallerylinks a:link { color:#696969; text-transform:uppercase; text-decoration:none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; font-family: 'Poppins', sans-serif; font-weight:400; } .gallerylinks a:hover{ color:#242424; text-transform:uppercase; text-decoration:none; font-family: 'Poppins', sans-serif; font-weight:400; } .gallerylinks:before { content: "Gallery Links"; background-color: #9cc1df; display:block; font-size: 89%; max-width:150px; font-style: normal; color:#ffffff; margin-left:8px; margin-top:-28px; text-align:center; text-transform:uppercase; letter-spacing:1px; font-family: 'Poppins', sans-serif; font-weight:400; }
Add the following code to your posts. If you have changed the class title from gallerylinks to something else, just replace that in the following code as well.
<div class="gallerylinks"> Appearances > Events in 2016 > <a href="#">March 25: The Art Of People Gala</a> Appearances > Events in 2016 > <a href="#">March 26: The Art Of Trees Gala</a> </div>
Place the following code in your stylesheet:
.elinks { margin:0; padding:5px; } .elinks u { text-transform: uppercase; font-weight: 700; padding-left: 3px; padding-right: 3px; margin-top: 5px; margin-bottom: 5px; text-decoration: none; background-color: #74b2b6; color: #ffffff; margin-bottom:-8px; } .elinks ul { padding: 0px; margin:0; } .elinks li { padding: 5px; list-style: none; -webkit-transition: opacity 0.3s linear; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-bottom:1px dotted rgba(0, 0, 0, 0.1); }
Add the following code to your posts. If you have changed the class title from elinks to something else, just replace that in the following code as well.
<div class="elinks"><u>Update Links:</u> <ul> <li>Photos: Public Appearances: <a href="http://jimmisimpsonfan.com/photos/thumbnails.php?album=544">February 26: Jimmi Visits BUILD Series NY</a></li> <li>Photos: Screen Captures: <a href="http://jimmisimpsonfan.com/photos/thumbnails.php?album=552">NBC New York</a><li> <li>Videos: <a href="https://www.youtube.com/channel/UCUQBtYVB4Zlb4uPA2OiF19A/videos">Unsolved Clips + Interview</a></li> </ul>
If this tutorial helped you, please consider buying me a coffee using Ko-Fi.