I have two left feet in case of coding. I have downloaded a custom blogger template which renders a few social media (Facebook, twitter etc) icons but not all (500px, behance). I have tried to figure it out on my own, but sadly haven't managed to do so yet.
here is the test blog: http://kartik1110.blogspot.in/
Everywhere on the site (Navbar, right sidebar and bottom) icon for 500px doesn't show up. How do I tackle this?
As the code is a big blogger template, I couldn't figure which snippet to paste here. Pardon my shortcomings.
Thanks in Advance.
Edit: I made a mistake in original question. The additional icons dont show up in the Custom widgets that came with the template. The icons show up on blogger pages and other widgets. Any idea which piece of code removes the ability of other icons to show up?
here is the code for right side bar 'follow me' widget, where limited icons are showing up.
<b:widget id='LinkList2' locked='false' title='Follow Me' type='LinkList' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul class='site-social-networks secondary-2-primary style-default show-title'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><i/><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
The template already uses Font Awesome, as you mentioned. All you have to do now is to insert the icon you wish to use.
The easiest way to do this is to add the HTML element as explained here. By going to "icons" inside font awesome, you can search for whatever icon you need and find the necessary HTML code you include.
For the case of 500px you have to include <i class="fa fa-500px" aria-hidden="true"></i> on your HTML and you'll add the correct icon.
You can see the result in this image
Just do the same with any icon you need.
It is possible your version is older, or incomplete. On the FA website they also warn that Adblock Plus removes some icons.
In any case, you can try getting the fontset directly, something I always recommend for loading speed/seo anyway. Just follow the instructions on their website:
http://fontawesome.io/get-started/
Related
Essential Grid has an option to create a link to Share on Facebook, however when i try to put it, on the front end the link appears with javascript: void(0).
What can be the problem?
Also, is it possible to do with custom URL something like:
https://www.facebook.com/sharer/sharer.php?u={{postURL}}
I can do that in Revolution Slider but i dont know how to get the post URL in Essential Grid.
I have found a workaround!
add this link:
<i class="eg-icon-facebook-1"></i>
Here:
Source:https://www.themepunch.com/faq/social-sharing-alternative-2/
I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)
I would like to add a custom service that is just a link to a precise page.
Is it possible?
Here is the sample of the code I use to generate the side bar.
addthis.layers({
'theme': 'transparent',
'share': {
'position': 'left',
'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
}
});
Is it Possible?
Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.
After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.
On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.
Small discussion about the API.
AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:
We encourage you, however, to take advantage of automatic menu and
toolbox personalization. You'll see an increase in overall sharing of
about 20%, particularly from your site's international visitors, who
use many of our other hundreds of sharing services!
I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.
The Workaround
These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".
You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This produces clickable sharing service links for the top 4 most
preferred services as decided by AddThis.
Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
<img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
</img>
</a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
This code produces a clickable stack overflow button alongside the top
buttons as suggested by AddThis!
Although this isn't what you're looking for exactly, I hope that it helps!
The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.
I haven't tried it though but i think it shall work.
$("#at4-share").prepend('<a class="at4-share-btn at-svc-print"
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');
I've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
This Wordpress template I'm working with has a section where it places six icons which display tooltips when hovered over. I need them to become links to different pages but I only really know CSS and basic HTML as I'm primarily a designer.
I've found the appropriate PHP file and managed to insert a link to Google as a placeholder but it makes them all link to there. I'm guessing from the code that it's using PHP to 'ask' for which icon to insert and then getting them from elsewhere, Jquery maybe? I barely even know what Jquery is.
Anyway, here's the code:
You can see where I've added the <a href="http://www.google.com"> for the
<span class="feature-icon feature">
<i class="<?php echo $icon; ?>"></i>
</span>
Any idea how I can get them to link to separate URLs?
Editing this php file is not really good approach.
These six icons are editable on WP admin page as a custom post type. You need to extend this post type with a link option.
If we are talking about external link make this(but before doing anything BACK UP your code and database):
find:
"features" =>
array(
And add this code right above it:
"link" =>
array(
"label"=>__("Link",'Pixelentity Theme/Plugin'),
"type"=>"Text",
"default"=>""
),
But I am still just guessing without whole template, so try it and let me know the result
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.