Wednesday, August 19, 2015

Blogger Guide: How To Create a Custom Pinterest Hover Button!


Recently, I've seen a ton of my favorite blogs undergoing big design changes and also many new blogs hitting the web so today I thought I would revisit one of the things that was crucial in my first big customization overhaul as a blogger. And that is? How to design and embed your own hovering "pin-it" button! This little tweak is crucial for maintaining an easy flow of shared content to and from your site but also to simply aid in the cohesiveness of the overall aesthetics of your page! By adding embedded Pinterest links to all of your images, you make it quick and easy for readers to share the post and come back to it later!

I'm the first to admit that I started blogging with a less-than-basic amount of coding knowledge and even the slightest tweak seemed super difficult but I'm here to show you that coding can be a lot easier than it seems! Today's guide is going to be all about creating and coding your own hovering Pinterest button and it's applicable for anyone working on the Blogger platform! There are two options when creating a button. You can use one of the pre-made Pinterest options or you can customize your own. I'll show you how to do both of these here!


Option One // Pinterest Pre-made Options

This option is a tad bit simpler because it involves only entering code into a widget, so you won't have to worry about botching your overall blog template code. To do this, all you need is an HTML widget in your sidebar and some simple copy and paste!

1. Head on over to {this link} which will take you to Pinterest's pre-made options. You've got the choice here to pick either 'One image' to apply the button to, 'Any Image' on your blog or 'Hover'. I personally prefer the Hover option because it allows every image to be pinnable but also hides and easily appears when your reader slides their mouse over the image for undisrupted viewing. After you've decided which works best for you, simply choose the size, shape and color of your button and we'll move on to the coding!

2. Now here's the easy part! After you've chosen your button, the website will provide you with a code below the Preview. Go ahead and copy this and then head over to your blog! Once you open Blogger, head to Layout and "Add a Gadget". You're going to be adding an HTML/Javascript gadget. This will be invisible to your readers so it doesn't truly matter where you place it but my recommendation would be to place this at the bottom of your sidebar so you know where to find it if you need to make any changes! After you have this gadget open, paste the code from the Pinterest page into this blank gadget. Press Save and Voila! Seriously, it's as easy as that!


Option Two // Design Your Own Custom Pinterest Hover Button

This option requires a few more minutes and is a tad more difficult just because we're going to be editing your blogger template however its worth it if you would like to add a custom flair to your blog! This option is a little more daunting but I promise, if I could figure it out, you can too!

1. First off you're going to start by creating a custom image. I generally use {PicMonkey} to create my custom graphics. I've found that it is the easiest to use online photo editing software, however Gimp, Piktochart and PhotoShop are all other great options. Some tips to remember when you're creating your custom button - consider the size you'll want your button, colors that will easily show up on any picture, cohesiveness with your overall blog theme and remember to make the background transparent!


2. After you have created your button upload it to an online photo sharing software. I typically use photo bucket but any will do!

3. Here comes a bit of the tricky part, now we're going to do some coding. Open up Blogger, click on Template and now go to Edit HTML. Search (Ctrl F) to find </body>. You're going to be pasting this code right before that line. Remember that before editing any of your template it is always a good idea to back up a copy of your HTML in case any errors occur! Now what you're going to do is copy all of the code below from <script> to </script> and place it right before </body>. 

Here's the code: 

<script>
 //<![CDATA[
 var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
 var bs_pinButtonPos = "center";
 var bs_pinPrefix = "";
 var bs_pinSuffix = "     ";
 //]]>
 </script>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
 <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
 </script>

4. Now that you have pasted this code, {same code also available here} it's time to place your customizations. I've highlighted the three possible places where you'll be making changes. Starting with line three, you'll be specifying the image for your hover button. Simply take the direct link to your image, easily accessible through links on Photobucket, and place this between the "quotation marks" that is highlighted above. Make sure to keep the quotation marks! The next two highlighted sections are your personal choice whether you would like to customize them or not, I just thought I would go ahead and point them out! The first determines where your button will appear on the image, this code currently has it centered. To change this simply insert "topleft", "topright", "bottomleft", or "bottomright". The last possible customization is the text that will appear when your reader clicks on the button and the Pinterest post button appears. I changed the highlighted section by Suffix to say {from Emily and Dot}, simply so when this is pinned, the description will post my blog title! Customize these sections as you like! Leave the few last lines of text beginning with // intact and save the changes you've just made to your template!


When you go back to your blog you should now see your custom image appear over all of your images in your body posts! Go ahead and try out my Pinterest button and pin this article to help out other fellow bloggers or archive it for yourself!


Let me know if you have any questions or if you had any success with my tips! Feel free to post your blog URL in the comments and I'd love to see your customized Pinterest hover buttons!

Emily


Monday, August 17, 2015

Move In Playlist


Well, today I'm heading to school for my senior year (which I'm refusing to acknowledge at this point). Besides a minor existential crisis, this means that today also includes a 6 hour drive and a few hours of hauling boxes due to a major case of chronic overpacking. So what's the best way to get through mindless hours on the road and jelly arms? Music obviously. Here's some tunes I've been listening to recently that are prepped to carry me through day 1 of senior year. Click through the image or the link below to follow this Spotify playlist for yourself and listen along with me!


Ahh can you believe school is already starting back up?! Crazy! What are you listening to?
Emily 

Tuesday, August 4, 2015

Get the Cool Girl Look: Silk Scarves

{via}

If there's one trend I've seen in Europe that I can seriously get behind, it's scarves. Silk scarves are back people. And with a vengeance. A simple, chic, and ultra-cool vengeance. Leandra Medine over at Man Repeller has also been rocking silk scarves in creative ways for a while now and everyone has just started to get the bright silky picture. I'm lovin' it. Throw one of these scarves over an otherwise simple outfit and you're ready for NYFW, or even better Milan Fashion Week (shoutout to the temporary hometown)! 

Everyone has a few of these square scarves tucked in the back of their closet, or their mom sure does, but with absolutely no clue how to wear it. Well, here's your guide and it's simple: Any way you can imagine. Around your neck and over a striped shirt, tied on your wrist, wrapped around the strap of a handbag, substituted for a belt, go wild. Think monochrome or mismatching patterns. Seriously everything goes. 

{1, 2, 3, 4}

I'm dying over this trend and if I bring one thing back from Italy I'm determined for it to be a bright silk scarf. Vintage scarves are all over the Milano markets every weekend and not to mention in so many beautiful store windows. So while you might not be in Europe, you're still in luck. I've got link after link here so you can snatch one up yourself! 

If you're looking to spend a splurge on one of these timeless accessories head to sites like {My Theresa}, {Liberty London} or go for the gold {Hermes}! Want something extra fun? I'm practically drooling over this square scarf {here} by Cleo. They have the spunkiest prints and are not completely unreasonably priced! See the site {here}! Otherwise... you can get the same look with a $22 satin scarf from ASOS {here}! Gosh, I love that store. Praise!


Another tip: scout your local vintage stores and summer marketplaces. Look around and you can find one-of-a-kind scarves at prices that should be considered theft! Now, shameless plug for my actual hometown of Lexington's {Street Scene} and Memphis' {Flashback}! 

So what are you thinking of this style? Have the guts to do it? If you've written a post previously showing your styling of one of these ultra-cool silk scarves link it below, I'd love to see! Go scarves!
Emily 


Monday, August 3, 2015

Blogger Postcard Travels Linkup: Ciao from Italy!


Hi guys! And greetings from the Blogger Postcard Travels Linkup! Bloggers have been doing traveling to some amazing places this summer so why not show them off?! I'm actually writing today from Rome, Italy! Actually, I've spent the whole summer living and working abroad in Italy, Milan to be exact! It's been a crazy adventure but so very worth it! Italy is everything I imagined it to be: amazing pasta, fast Vespas, beautiful buildings, slow waiters and gorgeous suits and ragazzi! But it is also so much more: incredible hospitality, views that will take your breath away, gelato that will give you life again and a constant sense of humble yet passionate Italian pride.

I've gotten the chance to do some super cool things and see coastlines that I will be dreaming about for years so today I'm happy to give you a few snapshots from my summer in the most beautiful country on earth!


Verona, Italy: Romeo, oh Romeo! Yes I shamelessly had to take a photo on Juliet's balcony!


Lake Como, Italy: There's a reason this place was just voted the "most beautiful lake in the world"!
  

Lago Maggiore: With Switzerland in the background, this is one of the prettier views I've ever seen


Cinque Terre, Italy: The colors, the coast, the pesto oh my!



Venice, Italy: Can it really be called a trip to Italy without seeing Venice? Wow, this place was as beautiful as I had imagined!


Burano, Italy: This place looks like a fairy tale, a very colorful fairy tale. Now ranked on my top 5 places to visit in the world!


Florence, Italy: I could have spent all day in the Uffizi Gallery. Oh wait, I did..





And just being in the city of Milan I've gotten to do some pretty neat things! I've visited the World Expo, eaten at Wes Anderson's cafe Bar Luce, visited the Missoni exhibit and of course climbed on top of the Duomo!


Anna Akhmatova had it right when she said, "Italy is a dream that keeps returning for the rest of your life". I know this place will be with me long after I leave and I know that it will be waiting for me patiently till I return!

Check out where other bloggers have been traveling to this summer! Click below to find the links to the rest of the posts in the Blogger Postcard Travels Linkup! Also use the hashtag #bloggerpostcardtravels to see all of their photos on Instagram! Ciao ragazze!