Can someone give me the code for a bookmark?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have the bookamrk code and also the star button but cant seem to put the 2 together to get people to press the button and it adds my site the their favourites page!!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Hi Craig,

I'll help you get it done.

Add this to a html widget at the top of the page.
--------------------------------------------------------------------

<script type="text/javascript">

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* Modified to support Opera */
function bookmarksite(title,url){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>

----------------------------------------------------------
-->
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Thanks Duke, I was going to point him to another of your buttons you used - this one seems great though. Thanks again!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
No problem Jeremy - always happy to help.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@Craig - This is part 1 of 2 - Look down for the rest of the code you need.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Then add this code to your page.(either in a html widget or using the html function of the text editor)

<a title="Bookmark this site" href="javascript:bookmarksite('Hexham Information',
'http://hexham.info')">&lt;img style="margin: 0px; padding: 0px;" src="resources/bookmark.jpg" alt=" bookmark star" border="0"></a>

Then....

1. change 'Hexham Information' into whatever text you like to describe your site.
2. change http:// hexham.info to your site address (be carefull not to delete the ' ' around the URL
3. add a image to your filemanager and change the src="resources/bookmark.jpg" to your own image name.

-->

Let me know if that works out - If not post your URL and the name of your bookmark image and i'll write you out a new peice of code,
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
ok Duke cheers I will try this out!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
cheers that worked a treat UKDuke
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
UK duke would you mind sharig how you done your own tabs??
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Craig, The tabs ar done with CSS, In my opinion the easiest way to add tabs to Yola. Mine are supposed to be rounded but they looked better square so i didnt upload the 2 images which make them round.

There are some good ones here - you can log in and take the code http://yolacodes.yolasite.com - (read the rules first)
or there are some here also http://www.cssplay.co.uk/menus/ - with this site you need to copy the code form the source of the page.

If you need any more help just ask on this thread.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi there Duke, I will have a look at this and see if I can make sense of it! Did you just put this at the top of your page and hide the original tabs?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Craig,

Yes, first remove all the pages from the menu - click 'edit menu' to achieve this - then you add the CSS in a html widget at the top of the page and later add the menu wherever you like it.

Have a look at yolacodes site - if you read the rules then log in you can see how the code works in real time. Then copy it to your site in full and edit it later to fit the needs of your site.

Let me know if you get stuck.

Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
PS. dont be scared of CSS - its basicaly a peice of code which tells another peice of code on the same page how to look - thats all.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yes I see what you mean by removing the codes in the edit menu thats good and add the code to the top of the page using the html widget which is fine too but not sure by what you say when you mention "later add the menu", can you clarify what you mean by adding the menu?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I hope you don't mind that I'm stepping in here. I think Duke is offline now. If you go to the Yola Code site, and you've selected a particular menu that you want to implement on your site, you will see some HTML codes. There may be up to 4 boxes of HTML codes you have to implement onto your site. The particular code that makes your CSS menu show up you can place where ever you'd like on your site. Obviously, if you want your menu to show up at the top, then you would insert this above all your other content on your page. If you want it at the bottom, then you would add that particular piece of code to the bottom of your site after all your content.

I hope that makes sense. Please do ask if you need further clarification.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
i seem to insert the code but all that appearing is text underlined im not getting the boxes aaargggghhh. God im hopless with coding
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Which nav menu are you using? Be sure to copy each HTML box you see in the Yola Test site. Also, make sure the line breaks are the same and that the code is not all one big run on sentence.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
I think I will just have to give up! The test site doesnt seem to be working either, story of my life.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
DD Tab Menu (5 styles), im trying to use these on Dynamic Drive but think im getting lost somewhere!! Can get it coming up with the text underlined and linked but when it comes to the css part I have no idea where to place anything!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm sorry that you're having trouble implementing this code. I have put instructions on the Yola Test site. Were you able to check that out at all?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!-- HI Craig,

So its a new day... and today is the day the menus getting done :)

This is a very simple example of how CSS works.

This code would go in a html widget at the very top of the page:

<style type="text/css">

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 12px Arial;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 0 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs a{
float: left;
color: white;
background: #3b5998 url(resources/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 5px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(resources/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}

.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #ff0000; /*background color of tabs onMouseover*/
color: #ffffff;
}

.ubercolortabs a:hover span{
background-color: transparent;
}

</style>

----------------------------------------------------------------------------
Notice the word 'ubercolortabs' - this CSS is telling the peice of code below how to look and act on the page. Notice the code below is calling (class=)'ubercolortabs' to find out how it should look.

Put this in another html widget where you want the menu to appear.

<div style="padding-top: 2px" class="ubercolortabs">
<ul>
<li class="selected"><a style="text-decoration: none;" href="http://hexham.info">&lt;span>Home&lt;...>
<li><a style="text-decoration: none;" href="http://hexham.info/business">&lt;span...>
<li><a style="text-decoration: none;" href="http://hexham.info/forum">&lt;span>Fo...>
<li><a style="text-decoration: none;" href="http://hexham.info/news">&lt;span>New...>
<li><a style="text-decoration: none;" href="http://hexham.info/contact">&lt;span>...>
</ul> </div>

----------------------------------------------------------------
-->
Now there is a few other things you can do. To change the apperance of the menu you go back to the CSS and change things. Like i said before the code that displays the menu (the 2nd part) does not have any control over how it looks... the CSS does.

You can change this
background: #3b5998 - to whatever colour you like.

You can change this
background-color: #ff0000; /*background color of tabs onMouseover*/

You can add these images to make them round (right clcik 'save as')

1. 2.

-----------------------------------

Let me know if you get this to work.

Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
UK Duke you are a genius!! Got it working finally thanks very much for all your help.

Craig
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
I mean Lee
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Your welcome - anytime.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Awesome work guys! Thanks Lee for your stellar support on this one :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
:)