I am trying to add a single most recent tumblr post to another page.
I found the easiest way is to use the Javascript code provided by tumblr
here is what they offered:
<script type="text/javascript" src="http://occupy837.tumblr.com/js"></script>
adding ?num specifies the number of posts, so I can see that I am almost there
<script type="text/javascript" src="http://occupy837.tumblr.com/js?num=1"></script>
when I go to the page
(www.Occupy837.com) One single post shows up!
my only issue now is that it has a single 1 on the left of the post
tumblr quotes "[use the] code to embed your posts as basic HTML that you can skin with CSS:"
Does anyone have any idea how I can remove that number?! what do I have to do with CSS to make that disappear!
Add this to your css
li.tumbler-post {
list-style: none;
}
Here is the answer!
after doing some research I found this to be the solution:
ol.tumblr_posts{
list-style:none;
}
be careful not to type "tumbler" because it is always without the "e"
My friend ran into this last night and tumblr exactly provides something that is pretty decent but with very few documentation. Every tumblr post has CSS classes. The above answers work. If you need to know more about the classes tumblr provides right click a post and click inspect element.
You can add these classes to the CSS of your website. Adjusting the CSS of tumblr doesn't effect it.
Adding the above CSS will fix this issue.
Related
I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.
you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}
I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.
http://test.cota.org/campaigns/COTAforTimothyA/blog/Images-How-will-they-appear-just-to-rename
I am using ShareThis two ways. The right hand side is using their built in buttons. I write some custom og at the top of the page so that it references this whole site as a whole and not just this individual blog.
In the content of the post i have a Share This Post on Facebook.
<div data-network="facebook" data-url="http://test.cota.org/campaigns/COTAforTimothyA/blog/Images-How-will-they-appear-just-to-rename">Share This Post on Facebook</div>
I am calling JS:
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=MYID&product=custom-share-buttons"></script>
From all I read the data-network="facebook" should trigger the share on the data-url. It is acting like nothing is happening at all. What am I missing in sharing custom buttons?
I figured out that the custom divs also need a class — st-custom-button — to make them work.
It doesn't actually say that anywhere, which is why I didn't do it, but I finally noticed it's in one of the examples on this page, so I thought I'd give it a try. And it works. >.<
I found a code for a Top Commentators Blogger widget online, and it's perfect for my needs. The problem is, it seems the code lacks a </div> tag. This way, it messes up the code of everything below it on my Blogger (following widgets gets nested inside it, for eg.).
The widget's code is written in encrypted js (?), so I can't change it. So I decided to add the missing </div> tag manually, on the widget content. But Blogger magical autocorrection of HTML thinks it's just some extra wrong code and erases it. I've tried writing it with js and innerHTML too, but Blogger still erases it.
Any suggestions on how to add this </div> without it getting removed?
The widget can be seen live (and working wrongly, nesting the Archive inside it) at the bottom of my page: www.comoeurealmente.com
Doesn't seem like the </div> tag is missing to me. It seems that your css is indenting the archive with .footer and .widget having a padding of 25px. change that padding to 0px and the page displays correctly.
I have been trying to figure out how to change the size of the Linkedin Company Profile width which we can create here. They will give you two script tag which will create the widget for you in your site. Nothing else. So you have no control over your css.
I had been struggling for days and finally figured it out. I tried to add inline styling on the site even with the !important tag but it still took the styles from the linkedin.css. I tried styling it every possible way but didn't work.
Since SO allows to share knowledge as Q&A format I thought of sharing this. Please see the answer below.
Here's an example of how to provide the width to a plugin:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/xxx" data-format="inline" data-width="400"></script>
You can add a data-width="400" attribute to the script tag. That's all.