Um schnell mit der Entwicklersuchmaschine The Development Searchengine zu suchen, habe ich diese rechts oben bei mir im Blog in ein komfortables Ajax IFrame eingebunden.
Mit einen Klick auf den Button “DevSearch” öffnet sich dieses zentriert:
Wenn auch Du DevSearch bei dir einbinden willst gehst du wie folgt vor:
Als erstes lädst Du dir das jQuery ImagingTool FancyBox runter. Im Header deiner Seite/Blog referenzierst du dann auf die Javascript und Style Dateien:
1 2 3 4 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> |
weiter wird im Header noch folgendes Script für das IFrame definiert. #header_devSearch ist die Id für das CSS Element.
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> $(document).ready(function() { $("#header_devSearch").fancybox({ 'width' : '80%', 'height' : '80%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script> |
Die CSS dafür müsstest du aber an dein Design anpassen, für einen einfachen Link ohne Formatierung lässt Du den CSS Teil einfach weg, die Id im Script und am Link aber muss als Referenz bleiben.
1 2 | #header_devSearch { float:left; background:url(img/devsearch_button.gif) no-repeat left top; padding:0 0 0 52px; height:44px; line-height:46px; font-size:11px; display:inline; margin:0 0 0 20px; } #header_devSearch:hover { background-position:left bottom; } |
Und zu guter Letzt, setzt Du den Link an den Platz Deiner Wahl um direkt und schnell DevSearch zu benutzen : )
1 | <a href="http://www.google.com/cse/home?cx=006784701409667617897:xb8varhpf9i" id="header_devSearch" title="The Development Searchengine">DevSearch</a> |
btw FancyBox macht auch ganz nette Effekte mit deinen Bilder, also wenn du hier etwas nachhelfen willst, hat das alles natürlich noch einen netten Nebeneffekt : )
