Kako da dodate Google CSE na Blogger sa rezultatima u istom prozoru
|
|
Blogger standardno u ponudi ima svoju pretragu koja veoma lepo radi, ali ako koristite Google Custom Search imate mogućnost da povećate svoju zaradu ako Google Custom Search povežete sa vašim Google AdSense nalogom.
Istina da rezultati pretrage neće izgledati kao kada koristite običnu blogerovu pretragu koja praktično fitrira rezutate prikazujući ih kao što je standardno za listanje postova u temi. Kod Google Custom Search standardno prikazivanje je zamišljeno da bude u novom prozoru čije estetsko podešavanje možete izvršiti na vašem Google Custom Search nalogu, ali ako budete pratili uputstvo rezultati pretage prikazivaće vam se u okviru vašeg bloga u skladu sa izgledom teme.
Demo možete videti upravo na ovom sajtu.
Dakle na samom početku napravite prilagođenu pretragu ako to već niste uradili, na Google Custom Search. Evo kako to da uradite sasvim jednostavno.
KORAK 1
Prijavite se na http://www.google.com/cse/
KORAK 2
Kliknite na Create a Custom Search Engine
KORAK 3
Jednostavno popunite formular sa vašim informacijama. Pod Define your search engine stavite adrese koje želite da Google pretražuje, dakle ako odaberete samo jednu adresu rezultati će biti samo sa tog sajta. Na kraju izaberite Standard Edition i kliknite na Next kako bi nastavilji.
KORAK 4
Ovaj korak prosto preskočite, namenjen je za podešavanje izgleda stranice u okviru koje će se prikazivazi rezultat, ali pošto vi to nećete koristiti jednostavno nastavite klikom na Next taster.
KORAK 5
Pribeležite kod koji vam je Google dao na ovom koraku, ali praktično potreban vam je samo unikatni Google Custom Search ID broj koji se prikazuje u sledećoj formi:
google.search.CustomSearchControl(‘057066059189359041684:ytdgrbp7q_0‘);
Nakon što ste pribeležili kobijeni kod, kliknite na opciju ispod Sing up to make money with Google AdSense.
KORAK 6
Otvorila vam se stranica sa malim formularom u koji treba da unesete podatke koje koristite i za Google AdSense nalog. Dakle morate uneti tačan email, poštanski broj i 5 poslednjih brojeva vašeg broja mobilnog telefona koji vam je prijavljen na Google AdSense nalogu. Nakon što ste popunili podatke kliknite Submit.
KORAK 7
Ako je sve prošlo uredu sa identifikacijom dobićete obaveštenje kao što to možete videti i na slici. Možete sada da zatvorite ovu stranicu i proverite email poštu jer treba da vam stigne verifikacijoni link na vašu Google AdSense email adresu. Kada vam stigne email kliknite na link ka Google AdSense nalogu za verifikaciju. Link se u email poruci nalazi u sledećoj formi “То можете да урадите кликом на ову везу: https://www.google.com/adsense/a?u=xxxxxxxxx:”.
KORAK 8
Nemam tačan podataka kako je formulisana opcija za potvrdu povezivanja Google AdSense i Google Custom Search ali verovatno će biti jedina ponuđena ili će čak možda sve biti odrađeno automatski nakon otvaranja linka iz emaila. Uglavom kada dobijete potvrdnu informaciju da su vaši AdSense i Custom Search spojeni možete napustiti sajt.
Dodavanje potrebnih elemnata na Blogger.
KORAK 1
Logujte se na Blogger kontrolnu tablu i otvorite Dizajn opciju bloga na koji želite (ako ih imate više) da dodate Google Custom Search. Na stranici dizajn otvorite Edit HTML. Pre nego što bilo šta izmenite sačuvajte kopiju kompletne teme klikom na opciju Download Full Template.
KORAK 2
Kada ste sačuvali temu, štiklirajte Expand Widget Templates opciju i pronađite u kodu oznaku <body> i negde iznad nje dodajte sledeću JavaScriptu:
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('057066059189359041684:ytdgrbp7q_0');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.setSearchFormRoot('cse-search-form');
customSearchControl.draw('cse', options);
}, true);
</script>
VAŽNO: Vaš unikatni ID koji ste dobili u kodu na Google Custom Search treba da zamenite sa 057066059189359041684:ytdgrbp7q_0 koji je dat kao primer.
KORAK 3
Sada je potrebno da odredite gde želite da vam se nalati form za pretragu, ako se ne razumete mnogo u HTML strukturu, možete jednostavno da odete na Design > Page Element > Add a Gadget > HTML / Java Script i u videt dodate kod. Uglavnom kada ste odredili gde želite da vam bude form za pretragu ili ste pak odabrali da dodate kod u vidžet, dodajte sledeći kod:
<div id='cse-search-form'> </div>
SAVET: Možete da uzmete Firebug dodatak za Firefox borwser ili koristite ugrađeni element inspektor koji sadrže i Google Chrome i Opera, i preko njega jednostavnije razumete HTML strukturu vašeg sajta i lako dodate element koji želite na mesto na koje želite.
KORAK 4
Sada je potrebno da dodate gde želite da vam se prikazuju reklame, u većini slučajeva to najbolje izgleda u delu tela u kom vam se prikazuju postovi, tako da će ovo uputstvo biti pisano za takav primer. Da bi videli u praksi kako to izgleda, možete na ovom sajtu uneti neki termin u form za pretragu i videti kako se rezultati prikazuju.
Evo kako da napravite da vam rezultati budu prikazani na taj način. U većini bloger tema deo sajta za postove naziva se main-wrapper ali naravno neki dizajner mogao mu je dati i drugo ime tako da u tom slučaju morate koristiti elemnt inspektor kako bi utvrdili tačno kako se zove telo gde se prikazuju postovi. Držaćemo se toga da se zove kao u većini slučajeva tako da potražite kod: <div id=’main-wrapper’>
Odmah ispod toga dodajte sledeći kod:
<div id='cse' style='width:100%;'> </div>
KORAK 5
Preostaje jedino da dodate CSS deo koji će formulisati sam izgled forma za pretragu i prikaze rezultata. Kod koji ću dati je primer i možete ga prepravljati kako bi prilagodili izgled svom sajtu.
AKo koristite eksterni CSS fajl jednostavno dodajte naredni kod u njega, a ukoliko vam je CSS stacioniran u okviru koda na Bloggeru onda potražite oznaku <style> i odmah nakon nje dodajte sledeći kod:
/*** Google Search***/
div#cse-search-form {
display: block !important;
position: relative !important;
}
.gsc-control-cse {
font-family: Verdana, Arial, sans-serif;
border-color: transparent;
background-color: transparent !important;
}
div.gsc-clear-button {background-image: none !important; cursor: auto!important;}
.gsc-results .gsc-cursor-box .gsc-cursor-page {color: #999999; !important;}
.gsc-control-cse div{
font-family: Verdana, Arial, sans-serif;
border-color: transparent;
background-color: transparent !important;
}
td.gsc-clear-button {display:none !important;}
table.gsc-search-box td.gsc-input {padding-top:5px !important;}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #E9E9E9;
background-color: #E9E9E9;
}
.gsc-tabHeader.gsc-tabhActive {
border-top-color: #FF9900;
border-left-color: #E9E9E9;
border-right-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-tabsArea {
border-color: #E9E9E9;
}
.gsc-webResult.gsc-result {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
table.gsc-search-box {width:200px !important; margin-bottom:0 !important; float:right !important; padding-right:10px !important;}
.gsc-webResult.gsc-result:hover {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b {
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 16px !important;
font-weight: bold;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b {
color: gray;
font-family: Verdana, Arial, sans-serif;
font-size: 16px !important;
font-weight: bold;
}
.gsc-results .gsc-cursor-box {text-align: center; margin: 10px auto;}
.gsc-result .gs-title {color: gray !important;}
.gsc-resultsHeader {border:0px !important;}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b {
color: #000000 !important;
font-family: Verdana, Arial, sans-serif;
font-size: 16px !important;
font-weight: bold;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b {
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 16px !important;
font-weight: bold;
}
.gsc-cursor-page {
color: #000000;
}
a.gsc-trailing-more-results:link {
color: #000000;
}
.gs-webResult.gs-result .gs-snippet {
color: #000000;
}
.gs-webResult.gs-result .gs-visibleUrl {
color: #000000;
}
.gs-webResult.gs-result .gs-visibleUrl-short {
color: transparent;
display:none;
}
.gsc-cursor-box {
border-color: #FFFFFF;
}
.gsc-results .gsc-cursor-page {
border-color: #E9E9E9;
background-color: #FFFFFF;
}
.gsc-results .gsc-cursor-page.gsc-cursor-current-page {
border-color: #FF9900;
background-color: #FFFFFF;
}
.gs-promotion.gs-result {
border-color: ##000000;
background-color: #FFFFFF;
}
.gs-promotion.gs-result a.gs-title:link {
color: #000000;
}
.gs-promotion.gs-result a.gs-title:visited {
color: #000000;
}
.gs-promotion.gs-result a.gs-title:hover {
color: #000000;
}
.gs-promotion.gs-result a.gs-title:active {
color: #000000;
}
.gs-promotion.gs-result .gs-snippet {
color: #000000;
}
.gs-promotion.gs-result .gs-visibleUrl,.gs-promotion.gs-result .gs-visibleUrl-short {color: #999999;}
#searchform label.screen-reader-text {display: none;}
input.gsc-input {background-image: background; border: 2px solid white;font-family: calibri;font-size: 11pt;padding: 3px 5px 3px 8px ;padding-bottom:0 !important;padding-left: 8px;padding-right: 7px;text-shadow: white 0px 1px 1px; width:145px !important; float:right; }
input.gsc-input:focus {;outline: none;}
input.gsc-search-button{background: transparent url(http://lh6.ggpht.com/_2ZZRJ0rGbuU/TH2fKlTmlaI/AAAAAAAAATk/SGv0xG19xo8/s800/search_icon.gif);border: none;color: white;cursor: pointer;font-weight: bold;height: 22px;padding-top: 1px; margin-top: 5px !important; text-indent: -9999em;width: 22px;}
.gsc-branding-text, .gsc-branding-img-noclear,.gsc-branding-img , .gsc-branding {display:none;}
form.gsc-search-box { font-size: 13px;margin-top: 0px;margin-right: 0px;margin-left: 0px;width: 180px;margin-bottom: 0px !important;}
#searchform {float: right;height: 25px;margin-top:2px;width: 300px;}
KORAK 6
To je to, sačuvajte izmene na temi i pogledajte kako vam blog izgleda.
![[Blogger] Dodajte navojne komentare na svoj blog](http://www.baguje.com/wp-content/themes/bagujev3/inc/timthumb.php?src=http://slk.baguje.com/2012/01/threaded-comments.jpg&h=112&w=240&zc=1 "[Blogger] Dodajte navojne komentare na svoj blog")
