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...

Alright. Maybe you're just starting out with redesigning your blog. Maybe you want to get into CSS, but don't know where to start. Or perhaps you like figuring things out on your own, but you're stuck and need a resource. That's why I crafted this super awesome (and easy to use) A to Z CSS cheat sheet. Even if you're not a "designer", and your "just a blogger", you will greatly benefit from knowing basic CSS like what's been included below. Please have fun with this and share with me what you create with the help of these cheat sheets! :) Click here to check out and download the A to Z CSS Cheat Sheet! Keep buzzin'. <3 xx Nicole Rose

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...

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...