PurpleMoggy's Blog
Loading...Recommedations Thru Social Bookmarking
Alright, WikiFray asked me about adding a [+]RECOMMENDED drop-down link for socially bookmarking your blogger posts. Instead of creating it from scratch I figured DynamicDrive would have a script I could start with to easily create this.
I started out by using the AnyLink CSS Menu (click the link for a demo & tutorial)
The first thing you'll wanna do is add some CSS something like the following between your <head></head> tags:
.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}
.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}Then you're gonna want to add a link to an external javascript file (again, in your page's header section)
<script type="text/javascript" src="http://yggomelprup.googlepages.com/anylink.js">
/***********************************************
* AnyLink CSS Menu 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
***********************************************/
</script>
The external javascript file is located here. You can leave it as is or upload to someplace else of your choosing.
Finally, you're gonna want to add the following somewhere in the body of your template:
<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:void(0);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">[+] Recommend</a>
<div id="anylinkmenu1" class="anylinkcss">
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' class='snap_nopreview' target='_blank'>Digg</a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' class='snap_nopreview' target='_blank'>Reddit</a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' class='snap_nopreview' target='_blank'>del.icio.us</a>
<a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' class='snap_nopreview' target='_blank'>Furl</a>
<a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' class='snap_nopreview' target='_blank'>Ma.gnolia.com</a>
<a expr:href='"http://www.sphere.com/search?q=" + data:post.url' class='snap_nopreview'>Sphere</a>
<a expr:href='"http://www.ifeedreaders.com/bookmark.php?theurl=" + data:post.url + "&thetitle=" + data:post.title' class='snap_nopreview' target='_blank'>More...</a>
</div>
</b:if>
Note: this will only show up on the permalink pages. Personally, I added it to the post-footer-line-1 section of my template.
11 comments:
Kool application. I was missing your work since you took days off for Christmas. Keep up the good work.
PurpleMoggy: That’s perfect. I installed it on my test blog and it works great. I’ll need to customize it, etc., but it is better than how I’d imagined it. Thank you. You rock!
@Hi buddy, go for long time and now you are back! Thanks for your tutorial,great!
Hi PurpleMoogy: Sorry this hack didn’t prove more popular for you. For what it’s worth, I still love it. Just dropping in though to tell you I’ve updated my More… link per: http://www.techcrunch.com/2007/03/05/addthis-widget-gathering-lots-of-interesting-data/
PurpleMoggy,
I am trying to implement this hack, but when I do the drop-down does not drop down directly below, it is offset a bit (http://seaksu.blogspot.com/2007/03/deuce-gardens-planting-630-wednesday.html). Do you have any idea what is going on with this? I have the same problem with my drop-down menu tabs.
Thanks,
Kevin
@Kevin
Well, since it's happening for both hacks, my first thought is that you have some other javascript on the page that's disrupting it. Not 100% sure right now.
Any ideas about what I should be looking for?
Kevin
I just wanted to let you and others know that this issue was a template problem. Specifically, the template I was using set the outer-wrapper position to "relative". After making it absolute, the dropdowns dropped correctly. As relative, the js was doing something funny that incorporated the window size in the formula. So depending on your window size, it dropped down in a different place. All stuff I don't understand. Anyway, thanks for the hack!
Kevin
great hack... i am trying to apply this on my blog but dont knw whats going wrong...
http://clwolvi.blogspot.com
I recognize the power of social bookmarking and http://www.topseview.com how it makes web pages easy for me to remember and organize.
This is very nice applications. i am using this very nice to me.i am adding to my blog.
--------------
Muthu
Social Bookmarking
Post a Comment