▲
LINKS

fukuo:

Social Media Button by Fukuo

As you probably know, the social media button is the most popluar and trend for the website in the world! I’ve used this button in my previous layout. I’ve been asked for couple times from followers if I could create a tutorial for this, finally, I have a time to do it! It’s fun to write this tutorial and share my knowledge to you all! Because, to share knowledge are things I like. Let’s get started!

Live Preview

Put this code in above of the</style> tag:

#position-social {
    position:fixed;
    right:-120px;
    top:120px;
    width:500px;
    height:200px;
}


.facebook-button {
    position:fixed;
    margin-left:330px;
    margin-top:0px;
    width:250px;
    height:35px;
    padding:9px;
    background-color:#FFFFFF;
    font:italic 20px Georgia;
    -webkit-font-smoothing:antialiased;
    color:#555555;
    z-index:99999;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.facebook-button:hover {
     margin-left:190px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.twitter-button {
    position:fixed;
    margin-left:330px;
    margin-top:60px;
    width:250px;
    height:35px;
    padding:9px;
    background-color:#FFFFFF;
    font:italic 20px Georgia;
    -webkit-font-smoothing:antialiased;
    color:#555555;
    z-index:99999;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.twitter-button:hover {
     margin-left:190px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.rss-button {
    position:fixed;
    margin-left:330px;
    margin-top:120px;
    width:250px;
    height:35px;
    padding:9px;
    background-color:#FFFFFF;
    font:italic 20px Georgia;
    -webkit-font-smoothing:antialiased;
    color:#555555;
    z-index:99999;
    -moz-border-radius:7px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.rss-button:hover {
     margin-left:190px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.pos-fb {
    position:relative;
    margin-left:50px;
    margin-top:-29px;
}

.pos-tw {
    position:relative;
    margin-left:50px;
    margin-top:-29px;
}

.pos-rss {
    position:relative;
    margin-left:50px;
    margin-top:-29px;
}

After that, put this code in below of the <body> tag! As usual, you have to re-type the quotation mark (“) or of course, it will not  work!

<div id=”position-social”>

<div class=”facebook-button”><a href=”YOUR URL HERE”“><img src=”http://static.tumblr.com/5ojoydj/vEjmkqehk/facebook.png” /></a>

<div class=”pos-fb”>Facebook</div>

</div>

<div class=”twitter-button”><a href=”YOUR URL HERE”><img src=”http://static.tumblr.com/5ojoydj/f0Zmkqek7/twitter.png” /></a>

<div class=”pos-tw”>Twitter</div>

</div>

<div class=”rss-button”><a href=”/rss”><img src=”http://static.tumblr.com/5ojoydj/ASHmkqeol/rss.png” /></a>

<div class=”pos-rss”>RSS</div>

</div>

</div>

NOTE: The bolded one, you have to change it with your own URL!  That’s all to it! I hope you enjoy! And thank you for Social Icons for the button!


lmthemes:

How to Make a Tumblr Theme Series: VOL I - Basic Structure

In this part of the tutorial series you will learn basic structure terms and the planning process. This tutorial is meant more for those who may not know CSS, HTML, or Tumblr elements at all. If you find you are more familiar with those things feel free to skip to VOL II: Sidebars.

» VOL I - Basic Structure Tutorial
» Tutorial Series Notes & FAQ

Please like/reblog this post if you found the tutorial helpful! ♥


This is a list of all the theme makers I have seen during 2012, the ones in bold are the ones who I strongly recommend 


themesbyhelveticas:

Hi everyone’s been asking me how I got the snowflakes on my blog so I’m just going to make a post about it. Go to your theme and add this code below the body tag (<body>) which you can find using ctrl + f or F3. You can change the colors of the snowflakes to your liking and then save it and you’re set. Happy holidays xoxo


minervasforge:

tBundles is a simple chrome extension built to help Tumblr users manage their growing list of tags. Instead of manually typing in the same tags again and again for similar posts, tBundles allows you to save sets of tags in bundles. Then, in the posting process, when you select the bundle name, it automatically adds the entire set of associated tags for you.

Download
Help/FAQ
Feature Requests


sarahcaths:

THEME 6 BY SARAHCATHS | BASE CODE #1 | [LIVE PREVIEW / CODE ]
If you use or enjoy this theme, please like or reblog this post, and follow me!

FEATURES:
500px width posts
one custom sidebar image (recommended 400x270px)
title, description, and portrait picture shown
base code, which means no credit required!

NOTES:
Feel free to edit, steal, take — it’s a base code!
Contact me if you have any questions or concerns,
and visit sarahcaths for more themes and other resources! Thanks!
Sidebar image in preview © edarry, does not come with theme.


benizora:

For those of you that are interested in learning about cool CSS transitions, make sure you check out this “Animatable” created by Lea Verou!

As quoted from her blog:

“It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them (warning: might induce nausea, headache and seizures :-P ).

You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.”

This is definitely an awesome resource, and I know that it’s helped to inspire me as well as give me some new ideas for themes and pages! I hope it inspires you too! :3


excolo:

Hi Everyone! I was feeling bored the other day and made a simple(ish) base code for a Tumblr theme. This is a two-column base-code theme with one 200px sidebar for your description, title and links as well as a 500px posts column. THIS THEME IS NOT DESIGNED TO BE USED STRAIGHT AWAY, IT IS FOR MODIFYING AND STYLING OR FOR THOSE WHO ARE STARTING OUT WITH CODING AND WANT TO STUDY AN EXAMPLE CODE!! 

Download: Indented Version | Non-indented version

DIV information:

  • #container is the ‘wrapper’ around all the blocks
  • #sidebar is the sidebar block 
  • #content is the posts block
  • .post is the div for each induvidual post
  • .meta is for the post information
  • #sidebar h1 is for the title
  • .description is for the description
  • .links is for the navigation
  • .pagnition is for the pagnition
  • .caption is for the post caption
  • #postnotes is for the post notes on the permalink page
Colour Information:
  • #585858 for the text
  • #32c582 for links
  • #329ac5 for links when you hover
  • #eeed7d is the sidebar background
  • #f3c3ff is the post background

RULES: Do not remove the credit in the source code! You can use this base code for personal themes only, do not use this base code for themes which you will release/sell!


Just in case you forget this exists. It exists.


» Anon request favorite navigation icons 01