Discover Top Posts Tagged with #reblog hover

How to insert a Reblog Hover Link on your photo posts

First thing you should know as that this is a semi-complicated code and i would not recommend trying it if you don't know anything about tumblr theme coding. With saying that IF YOU TRY IT AND IT MESSES UP YOUR BLOG, DO NOT BLAME ME. A big reason why this would mess up your blog is not ending with the </div> about {/block:Photo} (more on this later in the tutorial). If you can not fix this go here to recover your old coding.

First thing, paste this code under your <style> or <style type="text/css"> tag

.catchme{ background: #fff; padding:10px; position:absolute; top:0; z-index:999; opacity:0; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; text-align:center; text-transform:uppercase; margin-top: -20px; {block:IndexPage} width: 500px; font-size: 15px; {/block:IndexPage} {block:PermalinkPage}display:none;{block:PermalinkPage} } .canyou:hover .catchme{ margin-top: 0px; opacity:0.85; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; }

Okay so now you press ctrl+f (cmd+f on a mac) and search for THIS SPECIFICALLY {block:Photo}

Now this code shown below will not be exactly what your code will look like, this is just an example. But it should follow it some way

Now take this code and paste it DIRECTLY BELOW {block:Photo}

Now take this code and paste it DIRECTLY ABOVE {/block:Photo} (If you do not do this step it will mess up your whole theme, and make sure you are pasting it ABOVE {/block:Photo}. the one WITH the / )

</div>

It's very simple, it's only </div> nothing else, but it is NECESSARY.

Now the last step is to take the code below and paste it ABOVE your {/block:IndexPage} tag

<div class="catchme"><a href="{reblogurl}">Reblog</a> &middot <a href="{permalink}">{notecount} Notes</a><div>

And that's it, you should be done!

Now again this is a complicated code, and if you have any questions feel free to ask me but I WILL NOT RESPOND TO QUESTIONS LIKE "You fucked up my blog!!!" "Your code doesn't work!!!" or "Install it for me!" Be polite with your questions

#post code #post codes #reblog code #reblog #reblog hover #reblog hover code #notes #notes hover #hover codes #hover code

Fade Out Instant Reblog

Live View

Paste this code under your <style type="text/css"> tag

Note: If code is not working, you need to find the div name that your posts are under (i.e. .posts .entry .posts #post ect.) to find this, search for {block:posts} find the div id= or div class= right under it

.post .dunno{ postion: fixed; opacity: 0; background: white; text-align: center; margin-top: -5%; margin-left: -5%; padding: 30%; width: 48%; height: 48%; font-size: 24px; position: absolute; -webkit-transition: opacity 1s linear; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; } .d_con{ } .post:hover .dunno{ width: 110px: padding-left: 0px; backgound: #fc9; opacity: 1; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; } .dunno{ font-family: 'Crafty Girls', cursive; background: #ffffff; width: 50px; position:absolute; top:0; z-index:3; opacity:0; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; text-align:center; text-transform:uppercase; {block:IndexPage} width:450px; {/block:IndexPage} {block:PermalinkPage}display:none;{block:PermalinkPage} }

Now paste this code under your {block:photo}

<div class="dunno"><div class="d_con"><a href="{Permalink}"> {Timeago}</a> <a href="{ReblogURL}">Reblog</a></div></div>

#reblog codes #reblog hover #reblog

How to make a reblog, notes, time ago, ect hover

First add this under your <style type="text/css" tag

.post:hover .reblogthis{ backgound: #fffff; padding-left: 10px; padding-top: 40px; width: 275 px; opacity: .85; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; }

Note: Change with width to the width of your posts, and the padding, and background to your linking

Then put this code under the first

.photo:hover .reblogthis{ width:300px; opacity:0.85; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s;

Again change the width to that of your posts

Lastly, find your {block:photo} section. and right before the {/block:indexpage} section add this code

<div class="dunno"> <div class="d_con"><a href="{Permalink}">{Timeago}</div>

For different kinds of permalinks&stuff, replace {timeago} with any of these

{ReblogParentName} - User your reblogged from

{ReblogParentPortraitURL-16} - icon of the person you reblogged from

{ReblogRootURL}- Username of the post creator

{NoteCount} - Number of notes

If you want to add a reblog button, add this

#reblog hover #reblog button