Self Known

Today's tutorial was prompted by a question I received in my advice column contact form. :) It read: I LOVE everything that you did with Ingrid's blog,  http://www.smilingrid.com/ ! When you scroll down, that tabs bar up top pops up is the bomb. Could you please do a tutorial on how to code it?? I have some web designer friends, so don't be afraid to "speak code" as they will explain it to me haha <33 This tutorial is going to be on how to create a floating, fade in gadget (specifically a Blogger pagelist). Let's get started. :) The instructions. Select the blog you want to edit. Make sure you have a pagelist gadget installed on your blog. Install the following codes to your template. Save and view your changes. Javascript: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script> $(document).ready(function(){ // hide #mbz-sidebar-widget first ...

A few weeks back I got an email from the lovely Bryleigh, asking me how to make a homepage - something to welcome her readers and direct them toward the right path, whether it be to her services or blog posts. For an example of a minimal homepage, go to my home url (http://www.selfknownblog.com) and take a look around. That's an example of a home page, and I'm going to show you the basics of creating one. :) Before making any changes, please make sure you've downloaded your template to your computer. This tutorial is for those who have a fair knowledge of CSS. If you would like to create a home page, but don't want to go through the hassle of learning code, please contact me so we can discuss building a home page for your site today. Decide What You Want Before you can design your homepage, you'll need to have an idea of what you want it to look like. Sketching it out or coming up with a clear vision of it in your head will help create an end product tha...

Today's post comes to you from the depths of my blogger archive. Please enjoy this revived tutorial. :) Here's whatcha gotta do: 1. Log into your blogger account and select the blog in which you'd like to customize. 2. Go to Template >> Customize >> Add CSS and paste the below code into the box. 3. Customize, save your changes and  voila ! You're done. img:hover { opacity: .4 ; } To customize the transparency: The number in red (see above) decides how transparent your photo is on hover. The numbers range from .9 to .1 (as you decrease the number, the transparency becomes more, well, transparent). I chose .4 in the example above because I consider it a good medium transparency. ;) Need help? Leave a comment below! I love hearing from my readers. :) xx, Nicole Rose

Hello my little bumble bees! It's tutorial time again and today I'm going to share how to remove those annoying default borders from around your photos. Example: Ugly, right? Here's how to get rid of these pesky borders, once and for all! :) Here's what you need to do: 1. Log into blogger, and select the blog you'd like to remove your photo borders from. 2. Go to Template >>> Customize >> Add CSS . 3. Put the code ( below ) in the box and watch those ugly disappear! 4. Don't forget to save your changes! Now here is the lovely css code (provided by the web): .post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img, .BlogList .item-thumbnail img { padding: none !important; border: none !important; background: none !important; -moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px 0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !impor...

For pretty much my whole blogging journey I've been working on coding designs for my sites. CSS was my favorite and HTML is bearable, but Javascript... Oh, the dreaded Javascript... I could never get Javascript down. I couldn't write my own codes or even make the ones I got off the web work. And I never understood why . So I've created this post today to help those of you who may be struggling as well. What is it? Javascipt is the most popular programming language. Like, ever. It can change HTML content, attributes, CSS styles, and much, much more. It makes web pages interactive and can be used in non-web based environments, such as PDFs and desktop widgets. [ 1 ] If you'd like to learn more about Javascript, like who created it and the many things it can do, head on over here . :) The standard Javascript code: <script type='text/javascript'> //<![CDATA[ Your JavaScript coding here //]]> </script> The code above is very im...

Hello! Today's tutorial is something really awesome I came to discover while I coding my blog. :) Here's the code: <div style= "filter: hue-rotate( 65deg )!important;-webkit-filter: hue-rotate( 65deg );-moz-filter: hue-rotate(65deg);-ms-filter: hue-rotate( 65deg );-o-filter: hue-rotate( 65deg );"> YOUR ORIGINAL BLOGLOVIN' CODE </div> Note: this code was not written by me. I'm just sharing it because I thought it'd be helpful for you guys. :) How it works: This code applies a "hue rotation" on the gadget, changing how it appears. The "angle" defines the number of degrees around the color circle the gadget will be adjusted to. It's just like a regular circle, so 0deg causes no change, while 180deg make the color the opposite of what it was (for example, if 180deg is applied to the code above, it will turn the pink gadget green, because opposite the color pink on the color circle). The highest you can go is...

You can fix this one of two ways. The first way is by installing the Pinterest button onto your browser , so that any photo you see can be pinned. Second way goes like this: Click to view and download Written Instructions 1. Copy the URL of the page where the image you want to pin appears. 2. Go to Pinterest and log in. 3. Click on the giant + in the bottom corner. 4. Choose "pin from website". 5. Paste the URL in then hit next. 6. Find the photo you wanted to pin. 7. Click "Pin It", type up a quick description and then add it to the board of your choice. Did you find this helpful? Comment below. :) xx Nicole Rose

Have you ever wanted to apply a CSS code to something, but you didn't have the identification of the gadget you wanted to style? This tutorial has been created to help you find the ID of the gadget you'd like to style. Note: gadgets, widgets and page elements are essentially the same thing. I like to collectively call them gadgets, so please take heed this works for pretty much everything you apply to your blog's layout. :) Instructions 1. Add the gadget you'd like to style to your blog. Save your layout changes. 2. Click "Edit" of the gadget you just applied, but don't make any changes. 3. Maximize the window that pops up, so you can see the tale end of the address bar in the window, at the top of the screen. Notice how it has a word and a number at the end. That's the gadget ID. (I don't know why PicMonkey keeps doing this to my photos. -.-) 4. Copy and use for your CSS code! Comment below if you have any questions or ...

This is a requested tutorial. :) 1. Create a free account via Shareholic . Once you've done that, head over to your Website Dashboard and add your website. 2. Scroll down the page and click on the drop down button labeled "Add App Location". Click the first option, share buttons . 3. Name your Share button application then proceed to customize it to your liking. You can change the display options of the buttons, which apps you'd like to feature and more, so make sure to spend some time on this step. 4. When done click "Save Settings". Scroll back down the page and click the button that says "code snippet" when you hover over it. Copy and add the code that comes up to your blog's HTML, right under the " <div class='post-header-line-1'/> " (this particular line may show up twice, so place your share button code beneath the second one). 5. Save template and load the page to view your brand new share buttons. ...

Today I am going to share a way of customizing your popular posts gadget. This coding is how my current popular posts gadget is (see the bottom of my blog). :) 1. Select the blog you'd like to add the popular posts gadget to. 2. Head to layout and add the gadget to your blog. 3. Click and drag the gadget so that it is in the footer area (the bottom) of your blog. Make sure to click "Save arrangement". 4. Open up the gadget and make sure the option under "Most Viewed" is on your selected preference. Check the box "image thumbnail" and uncheck "snippet". Then make sure you are displaying up to 4 photos (see photo below). 5. Now go to Template >> Customize >> Add CSS and in the box, add the CSS codes from below. #PopularPosts1 li { display: inline; float: left; } .popular-posts .item-thumbnail img {  webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; } #PopularPosts1 ul li a { ...

This tutorial was  requested hinted by Sophia. ;) 1. Go to your blogger dashboard and select the blog you'd like to customize. 2. Go to  Template >>> Customize >>> Add CSS  and paste this code in the box: ::-webkit-scrollbar { background: #ffffff ; width: 10px ; } ::-webkit-scrollbar-thumb { background: #000000 ; } 3. To customize this code, you can make the following changes: + Change the color code in red to customize the color that the scroll bar "slides" on. + Change the width code in blue to customize the width of the scroll bar as a whole (the larger the number the thicker the scroll bar). + Change the color code in green to customize the color of the scroll bar itself. 4. Save and view your changes. Comment below if you have any questions. :) xx Nicole Rose

Hello. I got a request from Tane to do this tutorial. I hope this is helpful. :) Now before doing this, it may be best if you set up a test blog and tested this out on there so you can tweak the code to fit your needs and then when it's ready, you can put it on your main blog. But you can do whatever works for you. :) 1. Go to your blogger dashboard and select the blog you'd like to the add the drop down menu to. 2. Go to Layout >>> Add Gadget >>> HTML/Javascript and paste the following code into it. <!-- start navmenu --> <div id='NavMenu'> <div id='NavMenuleft'> <ul id='nav'> <li><a href='LINK'>Home</a></li> <li><a href='LINK'>CATEGORY 1</a> <ul> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B...

Hey readers! Long time, no tutorial, eh? ;) Hehe, let's get started. Go to your blogger dashboard and select the blog you'd like to add a border to. Next, go to Template >>> Customize >>> Advanced >>> Add CSS . Paste the code below into the box. .content-outer { border: solid 5px black ; } Look below for how to customize this code. :) Red : Replace this with dotted, dashed, or double to see the different border types. Blue : Insert a larger number to thicken the border. Green : Replace this with any color code. Don't forget to save your changes! If you have any questions, comment below. :) xx Nicole Rose

Hello there. :) As requested, today I am going to help all you lovely bloggers out with making an accordion button. An accordion button is when you have a series of titles or links and when you click one, it opens to reveal hidden content. o.o If you need a better example, just check out the bottom of my sidebar, and click on "Copyright", "Search", or "Sponsors". :) Now to make this lovely little gadget, you'll need to: 1. Log into your blogger account. 2. Select the blog you'd like to add this button to. 3. Go to your blog's Layout, and click "Add a Gadget". 4. Select the "HTML/JavaScript" gadget, and paste the following code into it: <center><style type="text/css"> #wrapper { width: 250px; margin-left: 50; margin-right: 50; border-top: 0; border-bottom: 0; padding: 5px; background: #bbb; } .accordionButton { width: 250px; float: none; curs...

Hello! Today I am going to do a requested tutorial on how to add a custom pin it button on image hover. :) Instructions: 1. Log in to your blogger account and select the blog you'd like to add your pin it button to. 2. Go to Template >> Edit HTML and locate the </body> tag. 3. Copy the code below, and place it directly above the tag. + + + <script> //<![CDATA[ var bs_pinButtonURL = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0cinno2vTHmQRDnUTuDLWVLRDtekhX8uxUVB5InO6q52QvjIzj7MBysqS61OmDCh89IVveoxW7_lYVPVf1G1IoiPWsscxj0Na-mbZkg5kAUtnhPoBMwhAZq7GD0P35I2Rj7aYvbN9fMN/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://gr...

Hello! Today I am going to show you how to add a post divider between your posts in blogger! What you'll need: + A photo + At least a small understanding of codes (and if you have no idea how to work with codes, that's okay! I'll try to make this as simple as possible. :}) 1. Create (or even choose from your photos) a photo you'd like to do use for your post divider. My photo looks like this: 2. Next, upload your photo to Google (or any other photo carrier site). 3. Once your photo is uploaded, open a new tab and log into your Blogger account. 4. Go to Template >> Customize >> Add Css then paste this code into the box: .post { background: url( IMAGE URL ); background-repeat: no-repeat; background-position: bottom center; margin: .5em 0 1.5em; padding-bottom: 5.5em; } 5. Now, go back your photo on Google, right click it, then select "Copy Image URL". 6. Go back to Blogger and paste that code into w...

Hello! Today I am to share with you how to customize colors of your text selection!       Don't know what text selection is? When you click and drag across words on a page, to select text, text selection is that blue and white overlay. Instructions: 1. Log into your blogger account and select the blog in which you'd like to customize. 2. Go to Template >> Customize >> Add CSS and paste the below code into the box. 3. Save your changes and voila ! ::moz-selection { background: #EEEEEE ; color: #999999 ; } ::selection { background: #EEEEEE ; color: #999999 ; } ^^^ See the numbers and letters in bold? Those are colors codes. They're customize-able. :} To change the color of the background of your text selection change BOTH of the "#EEEEEE" in the code to your preferred color choice. And to change the color of the text, change both of the "#999999" in the code. Here's an example of customized text selection:...