[h=#FF5555][img]http://assets.tumblr.com/images/logo.png?alpha&5[/img][/h]
[size=3][font=Century Gothic][color=#FF5555][b]Basic Tumblr Code Compilations[/b][/color][/font][/size]
Hey! Good day ftalkers, here's a version of [i]ftalk's[/i]

compilation of [b]tumblr codes[/b], made especially for you guys. i have sorts of tumblr codes that could help you [i]tweak [/i]your page in no time,

made it easy & comprehensive..
tumblr lets us fully customize our page,

whether its girlie pink & fancy

or rock on hard epic black boyish

theme tumblr we got it all, even made it customize & easy..

hoping to make a boost on tumblr theme industry since there are rare website that offer's free themes.

so you ready? here's a taste of tumblr codes

[b]For Complete Tumblr Codes proceed here:[/b] [url=http://www.tumblr.com/docs/en/custom_themes][b][h=#55E0FF]Click Me[/h][/b][/url]
[b]For blogskin's and HTML Replacements proceed here:[/b] [url=http://theftalk.com/t69724-Blogger-Skins-To-Tumblr-Themes.html][b][h=#55E0FF]Click Me[/h][/b][/url]
[quote][h=#FF5555][b]1st[/b][/h]
[b]•[/b] Click on the "[b]Customize[/b]" button on your [i]Dashboard[/i](Right Navigation Area)
[b]•[/b] Click on "[b]Theme[/b]" tab. after-wards, a "[b]Use custome HTML[/b]" appears, click on it. which brings you to a text-box full of current theme's HTML code[/quote]
[quote][h=#FF5555][b]2nd[/b][/h]
Tumblr has [i]2 types of special operators[/i][/quote]
[quote]• [b]Variables [/b]- [i]are used to insert dynamic data like your blog's title or description:[/i]
[quote]<html>
<head>
<title>[b]{Title}[/b]</title>
</head>
<body>
...
</body>
</html>[/quote]
[/quote]
[quote]• [b]Blocks [/b] - are either used to render a block of HTML for a set of data (like your posts), or to conditionally render a block of HTML (like a "Previous Page" link):
[quote]<html>
<body>
<ol id="posts">
[b]{block:Posts}[/b]
<li> ... </li>
[b] {/block:Posts}[/b]
</ol>
</body>
</html>[/quote]
[/quote]
[quote][i]sample markup for a theme[/i]
[quote]<html>
<head>
<title>[b]{Title}[/b]</title>
<link rel="shortcut icon" href="[b]{Favicon}[/b]">
<link rel="alternate" type="application/rss+xml" href="[b]{RSS}[/b]">
[b]{block:Description}[/b]
<meta name="description" content="[b]{MetaDescription}[/b]" />
[b]{/block:Description}[/b]
</head>
<body>
<h1>[b]{Title}[/b]</h1>
[b]{block:Description}[/b]
<p id="description">[b]{Description}[/b]</p>
{/block:Description}
<ol id="posts">
[b]{block:Posts}[/b]
[b]{block:Text}[/b]
<li class="post text">
{block:Title}
<h3><a href="[b]{Permalink}">{Title}</a></h3>
[b]{/block:Title}
[b]{Body}
</li>
[b] {/block:Text}[/b]
</ol>
<p id="footer">
[b]{block:PreviousPage}[/b]
<a href="[b]{PreviousPage}[/b]">« Previous</a>
[b] {/block:PreviousPage}[/b]
[b]{block:NextPage}[/b]
<a href="[b]{NextPage}[/b]">Next »</a>
[b] {/block:NextPage}[/b]
<a href="/archive">Archive</a>
</p>
</body>
</html>[/quote]
[/quote]
[h=#FF5555][b]Basic Variables[/b][/h]
[quote][b]{Title}[/b]
• The HTML-safe title of your blog.
[b]{Description} [/b]
• The description of your blog. (may include HTML)
[b]{MetaDescription}[/b]
• The HTML-safe description of your blog. (use in META tag)
[b]{RSS}[/b]
• RSS feed URL for your blog.
[b]{Favicon} [/b]
• Favicon URL for your blog.
[b]{CustomCSS} [/b]
• Any custom CSS code added on your "Customize Theme" screen.
[b]{block:PermalinkPage} {/block:PermalinkPage} [/b]
• Rendered on post permalink pages. (Useful for embedding comment widgets)
[b]{block:IndexPage} {/block:IndexPage} [/b]
• Rendered on index (post) pages.
[b]{block:PostTitle}[/b]
[b]{PostTitle}[/b]
[b]{/block:PostTitle}[/b]
• Rendered on permalink pages. (Useful for displaying the current post's title in the page title)
• Example: <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
[b]{block:PostSummary}[/b]
[b]{PostSummary}[/b]
[b]{/block:PostSummary} [/b]
• Identical to {PostTitle}, but will automatically generate a summary if a title doesn't exist.
[b]{PortraitURL-16}[/b] - Portrait photo URL for your blog. 16-pixels by 16-pixels.
[b]{PortraitURL-24}[/b] - Portrait photo URL for your blog. 24-pixels by 24-pixels.
[b]{PortraitURL-30}[/b] - Portrait photo URL for your blog. 30-pixels by 30-pixels.
[b]{PortraitURL-40}[/b] - Portrait photo URL for your blog. 40-pixels by 40-pixels.
[b]{PortraitURL-48}[/b] - Portrait photo URL for your blog. 48-pixels by 48-pixels.
[b]{PortraitURL-64}[/b] - Portrait photo URL for your blog. 64-pixels by 64-pixels.
[b]{PortraitURL-96}[/b] - Portrait photo URL for your blog. 96-pixels by 96-pixels.
[b]{PortraitURL-128}[/b] - Portrait photo URL for your blog. 128-pixels by 128-pixels.[/quote]
[h=#FF5555][b]Navigation[/b][/h]
[quote][b]{block:Pagination} {/block:Pagination} [/b]
• Rendered if there is a "previous" or "next" page.
[b]{block:PreviousPage} {/block:PreviousPage} [/b]
• Rendered if there is a "previous" page (newer posts) to navigate to.
[b]{block:NextPage} {/block:NextPage} [/b]
• Rendered if there is a "next" page (older posts) to navigate to.
[b]{PreviousPage} [/b]
• URL for the "previous" page (newer posts).
[b]{NextPage} [/b]
• URL for the "next" page (older posts).
[b]{CurrentPage} [/b]
• Current page number.
[b]
{TotalPages} [/b]
• Total page count.
[b]
{block:SubmissionsEnabled} {/block:SubmissionsEnabled} [/b]
• Rendered if Submissions are enabled.
[b]
{SubmitLabel} [/b]
• The customizable label for the Submit link. (Example: "Submit")
[b]{block:AskEnabled} {/block:AskEnabled} [/b]
• Rendered if asking questions is enabled.
[b]
{AskLabel} [/b]
• The customizable label for the Ask link. (Example: "Ask me anything")[/quote]
[h=#FF5555][b]Pages[/b][/h]
[quote][b]{block:HasPages} {/block:HasPages} [/b]
• Rendered if you have defined any custom pages.
[b]{block:Pages} {/block:Pages} [/b]
• Rendered for each custom page.
[b]{URL} [/b]
• The URL for this page.
[b]{Label} [/b]
• The label for this page.[/quote]
[h=#FF5555][b]Permalink Navigation[/b][/h]
[quote][b]{block:PermalinkPagination} {/block:PermalinkPagination} [/b]
• Rendered if there is a "previous" or "next" post.
[b]{block:PreviousPost} {/block:PreviousPost} [/b]
• Rendered if there is a "previous" post to navigate to.
[b]{block:NextPost} {/block:NextPost} [/b]
• Rendered if there is a "next" post to navigate to.
[b]{PreviousPost} [/b]
• URL for the "previous" (newer) post.
[b]{NextPost} [/b]
• URL for the "next" (older) post.[/quote]
[b][h=#FF5555]Posts[/h][/b]
[quote][b]{block:Posts} {/block:Posts} [/b]
This block gets rendered for each post in reverse chronological order. The number of posts that appear per-page can be configured the the Customize area for the blog on the
Advanced tab.
[b]{block:Text} {/block:Text} [/b]
Rendered for Text posts.
[b]{block:Photo} {/block:Photo}[/b]
Rendered for Photo posts.
[b]{block:Photoset} {/block:Photoset} [/b]
Rendered for Photoset posts.
[b]{block:Quote} {/block:Quote}[/b]
Rendered for Quote posts.
[b]{block:Link} {/block:Link}[/b]
Rendered for Link posts.
[b]{block:Chat} {/block:Chat} [/b]
Rendered for Conversation posts.
[b]{block:Audio} {/block:Audio} [/b]
Rendered for Audio posts.
[b]{block:Video} {/block:Video} [/b]
Rendered for Video posts.
[b]{block:Answer} {/block:Answer} [/b]
Rendered for Answer posts.
[b]{Permalink} [/b]
The permalink for a post. (Example: "http://sample.tumblr.com/post/123")
[b]{ShortURL} [/b]
A shorter URL that redirects to this post. (Example: "http://tumblr.com/xpv5qtavm")
[b]{PostID} [/b]
The numeric ID for a post. (Example: 1234567)
[b]{TagsAsClasses} [/b]
• An HTML class-attribute friendly list of the post's tags. (Example: "humor office new_york_city")
• By default, an HTML friendly version of the source domain of imported posts will be included. (Example: "twitter_com", "digg_com", etc.) This may not behave as expected with feeds like Del.icio.us that send their content URLs as their permalinks.
• The class-attribute "reblog" will be included automatically if the post was reblogged from another post.
[b]{block:Post[1-15]} {/block:Post[1-15]}[/b]
• Rendered for the post at the specified offset. This makes it possible to insert an advertisement or design element in the middle of your posts.
• Example: [b]{block:Post5}I'm the fifth post!{/block:Post5}[/b] will only be rendered on the fifth post being displayed.
[b]{block:Odd} {/block:Odd} [/b]
• Rendered for every one of the current pages odd-numbered posts.
[b]{block:Even} {/block:Even}[/b]
Rendered for every one of the current pages even-numbered posts.
[b]{block:More} {/block:More} [/b]
Rendered on index pages for posts with Read More breaks.
[b]{PostNotesURL} [/b]
URL to an HTML partial of this post's Notes. Useful for loading Notes via AJAX.[/quote]
[h=#FF5555][b]Enabling Custom CSS[/b][/h]
[quote]By including the [b]{CustomCSS}[/b] tag at the bottom of your theme's CSS style block, users you share your theme with will be able to tweak the appearance of your theme without editing its markup.
[sub]ex[/sub]
[quote]<html>
<head>
<style type="text/css">
#content {
background-color: #fff;
color: #000;
}
[b]{CustomCSS}[/b]
</style>
</head>
<body>
<div id="content">
...
</div>
</body>
</html>[/quote]
[/quote]
[h=#FF5555][b]Twitter[/b][/h]
[quote]If you've enabled Twitter integration in your Tumblr preferences, you can include the /tweets.js Javascript file on your primary blog to display your recent tweets. This file runs the callback function recent_tweets(), sending the Twitter API JSON data as its only parameter.
[quote][b]{block:Twitter} {/block:Twitter} [/b]
• Rendered if you have Twitter integration enabled.
[b]{TwitterUsername} [/b]
• Your Twitter username.[/quote]
[sub]Example[/sub]
[quote]{block:Twitter}
<div id="twitter" style="display:none;">
<h3><a href="http://twitter.com/[b]{TwitterUsername}[/b]">Latest Tweets</a></h3>
<div id="tweets"></div>
</div>
<script type="text/javascript">
function recent_tweets(data) {
for (i=0; i<data.length; i++) {
document.getElementById("tweets").innerHTML =
document.getElementById("tweets").innerHTML +
'<a href="http://twitter.com/[b]{TwitterUsername}[/b]/status/' +
data[i].id + '"><div class="content">' + data[i].text +
'</div></a>';
}
document.getElementById("twitter").style.display = 'block';
}
</script>
[b]{/block:Twitter}[/b]
<!-- Put this at the bottom of the page -->
[b]{block:Twitter}[/b]
<script type="text/javascript" src="/[b]tweets.js[/b]"></script>
[b]{/block:Twitter}[/b][/quote]
[/quote]
Last edited by karuro72002 (2010-07-27 03:48:13)