I have a tumblr blog. I want to put a Google Translate Tool & Button on my tumblr blog. How can I do? Unfortunately, I cant find it in tumblr help pages.
Go here: https://translate.google.com/manager/add
Follow all of the instructions and you'll get two pieces of code, one that looks like this:
<meta name="google-translate-customization" content="272b1f36bdc17cf1-0221013045ec1abb-gfd965ee1275b4499-14"></meta>
You'll want to place the <meta> code before the closing </head> tag, this will be at the top of your theme.
The other piece of code looks like this:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
For this piece of code you'll need to place it where you want the tool to appear on your theme, likely this will be near the top of your page, just after the opening <body> tag. Your blog will likely have some sort of 'wrapping' div, so you maybe want to place it inside of that.
You'll need to fiddle around a little bit to position it how you like.
To put both of these bits of code into your theme, you'll need to go to the 'Customize Theme' page and click on 'Edit HTML'.
Related
Alright, so I set up a website using Github a while ago. I use it as a showcase for programming projects I'm working on, but that's beside the point. For a while now I've been trying to add an icon to my website, and for the life of me I can't figure out how. Help please.
If by icon you mean the image you see on the browser tab 32x32 pixels, that is usually in a format called Favicon.
You just need the image of your icon in favicon format (google how to convert an image to favicon and you will find websites that do this for you easily.), add it to your project and then add a tag on your hmtl head:
<head>
/* some style tags */
/* THE FOLLOWING IS YOUR 'ICON' */
<link rel="icon"
type="image/png"
href="./style/images/logo.favicon">
</head>
But this question should definitely not be under git tags. You did not mention why one should keep in mind that you are using github.
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
I have a blog theme which does not include captions in photo posts. I have been successful with plugging in {block:Caption} {Caption} {/block:Caption} before {/block:Photo}, but the caption seems to be floating on the background and not inside the post box as seen below:
How do I include the caption to be apart of the same box as the date?
Any help is appreciated!
It would be much easier if you posted the relevant code here. I don't know what theme you are using but if you take a look at this site http://www.tumblr.com/docs/en/custom_themes you'll see that dates are rendered by {block:Date} {/block:Date}, {Timestamp}, {DayOfYear} etc. Take a look and see which one suits you theme. When you have found it, simply Ctrl + F in you code and find where in your HTML code the date box is rendered and then put the {block:Caption} {Caption} {/block:Caption} inside.
The example Tumblr gives is
<html>
<head>
<!-- DEFAULTS -->
<meta name="if:Show people I follow" content="1"/>
<meta name="if:Reverse pagination" content="0"/>
</head>
<body>
{block:IfNotReversePagination}
Previous Next
{/block:IfNotReversePagination}
{block:IfReversePagination}
Next Previous
{/block:IfReversePagination}
{block:IfShowPeopleIFollow}
<div id="following">...</div>
{/block:IfShowPeopleIFollow}
</body>
</html>
For these meta-if tags, when I change content="1" to content="0" or content="" nothing seems to happen to the appearance of my tumblr.
I don't understand what these meta-if tags do.
According to Tumblr: By including the special meta-if tags in your theme, users can easily toggle options you define. This is useful for showing or hiding different widgets or design elements.
I understood this as you can show/hide different design elements by changing the content value ie. content="0", content="1", content="". But nothing seems to happen to the design if I do this.
I googled this and I can't find any explanation elaborating on what Tumblr says. Can someone please explain?
Tumblr uses meta tags to save preferences of the theme. Meta if will cause that user gets a new checkbox on the Appearance menu. If its checked than the
<div id="following">...</div>
will be shown on your page.
So there should be new div element in the page source and three dots displayed on the page.
What Bojan Dević said is correct. Although, I would like to address the other half of your question, as well. content="1" automatically sets the element to be shown, or as content="0" makes it hidden.
What is different of having a facebook share button just by having an anchor tag:
<a href="http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>">
<img src="custom.jpg" />
</a>
than having one with the javascript provided by FB follow by the anchor tag?
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
I just want to verify I'm not missing any of the basic functionality of sharing a link by using the anchor tag only because I want to use the anchor tag way to customize my button image.
The end result of the share is the same, as when you click the button it ends up taking you to the same endpoint. The difference is in how the button looks (and the count that shows up if that's the layout you've chosen).