Saturday, October 25, 2014

Create a Pretty New Page From Search Labels


This isn't so much of a step-by-step tutorial as a gathering of all the appropriate links to the tutorials. I have been searching and Googling and clicking on Pins and links. I want to create a new page on my blog that shows all of my DIY posts in one perfect spot. However, I only want to have summary of the post there. Yeah, I know, I'm pretty picky.

I  already knew that I could create a new page on my blog with the search for the specific label. In case you haven't reached that level of blog-platform-DIY-what-the-heck-am-I-doing, I'll give a quick synopses here:
  • Bring up your blog and search/click on the label you would like to show up on your new page. 
  • Copy the link of the page you've been brought to.
  • Go to the far right of your tabs and click the edit icon.
  • A pop-up will appear that says "Configure Page List".
  • Click "Add External Link".
  • Fill out everything (and make sure you don't have two http://).
  • Arrange it where you want, if necessary. Sometimes I have to save and go back into this menu before I can do this, though.
Now I have a new page with my DIY posts. But they're the full posts and there's that ugly "Showing all posts..." deal up at the top. No, thank you. Let's make this prettier!

Xomisse's post is step two in my ultimate page of perfection. This post will explain how to have your posts show up as summaries with an image when a label is searched. Making these changes will not only make your new page look better, but will also apply this to when labels are actually searched. Please, remember to back up your blog before editing html.

Be sure to read the whole post if you see that your images are skewed or stretched. She doesn't exactly tell you how to fix it, but she puts you to the right place. I had a lot of issues making mine look okay since I had some photos that were horizontal and some were vertical. I decided to give preference to my vertical pictures due to the fact that I'm going to make those my thumbnail from this point on. Little tip I've learned: Vertical pictures with text do best on Pinterest. So forgive any funky looking pictures...I plan on fixing that at a later date. If anyone has any suggestions on fixing this, please comment or email me!

I had some issues with the coding, too.  I did NOT have to put the second code in twice, even though I had the data.post blahblahblah thing twice. Also, I changed the second code to:

<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'> <br/> <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

The code I personally plugged in for the photo dimension size is:

summary_noimg = 350;
summary_img = 600;
img_thumb_height = 275;
img_thumb_width = 200;

Now we'll move to getting rid of the gray bar on the top of this page.  I went to this post and everything went perfectly with there directions.

I began clicking around on my blog after this to look at how everything was affected, and I found out that my About Me and Grab a Button pages became all funky. Damn it. My solution for this was to make some posts with the same information (dated two years ago) and link those the same way I linked my DIY labels page. My only issues are that this will kind of mess with my stats on the views of my pages and that the date of October 1, 2012 is showing up on my pages. I haven't found a way to hide the date on specific posts yet, but it's my solution for now.

Later on, I realized that this made all of my posts that didn't show up on the first page appear in summary form. For me, this was a plus!

And that's it! If you have any questions or further suggestions, I would love to hear them!

No comments:

Post a Comment