Archive for Desember 2013

The Pinki Boy - Halo Sobat. Kali ini saya akan berbagi trik tentang search engine. Sebut saja nama Trik ini adalah "Cara Membuat Kotak Search Keren di Blog".Wah, Search engine itu saya dapatkan dari template Dark Light Faster Responsive Template by MDF beserta menu navigasinya :D . Triknya cukup Mudah. Hanya Dengan Menaruh CSS dan HTML ke Dalam Template kita. Gimana yah triknya ?? Simak bacaan dibawah ini.

Cara Membuat Kotak Search Keren di Blog

- Login ke Blogger
- Masuk ke Menu edit Template >> Edit HTML
- Lalu Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi

/* css quick search */
#search-form-feed { padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:150px; float:right; margin-top:7px; position:relative; margin-right:7px }
#feed-q-input { display: block;
width: 116%;
height: 28px;
border: 1px solid #2B2B2B;
color: #0A0909;
margin: 0;
font-size: 12px;
padding-left: 10px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
float: left;
background-color: white;
margin-left: -38px;
font-family: offside;}
#feed-q-input:focus { color:#333; outline:none; -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95; -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95; box-shadow:0 0 5px #153E95,0 0 7px #153E95 }
#search-result-container { width:300px; overflow:auto; position:absolute; z-index:9999; padding:10px; right:0; margin:0; top:42px; display:none; font-size:11px; background-color:white; text-transform:none; -moz-box-shadow:inset 0 0 7px #d6d6d6; -webkit-box-shadow:inset 0 0 7px #d6d6d6; box-shadow:inset 0 0 7px #d6d6d6; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; border:1px solid #ccc }
#search-result-container li { margin:0 0 5px; padding:0; list-style:none; word-wrap:break-word; font-size:10px; color:#141414; background-color:white; text-transform:none }
#search-result-container li a { text-decoration:none; font-weight:bold; font-size:11px; display:block; line-height:14px; padding:0; font-weight:bold }
#search-result-container mark { background-color:yellow; color:black }
#search-result-container h4 { margin:0 0 10px; font:normal bold 12px; color:black }
#search-result-container ol { margin:0 0 10px; padding:0 0; overflow:auto; height:300px }
#search-result-container:hover ol { overflow:auto }
#search-result-container li img { display:block; float:left; margin:0 5px 1px 0; padding:2px; border:1px solid #D1D1D1 }
#search-result-loader { top:100%; position:absolute; z-index:999; width:100%; line-height:30px; color:#2E2E2E; padding:0 10px; background-color:white; border:1px solid #DBDBDB; margin:0; overflow:hidden; display:none; text-transform:capitalize }
#search-result-container p { margin:5px 0 }
#search-result-container .close { position:absolute; right:8px; top:8px; font-size:12px; color:white; text-decoration:none; border-radius:9999px; width:13px; height:13px; text-indent:1px; background-color:#1295C9; line-height:12px }
#search-form-feed button { background-repeat:repeat-x; background-position:left -3px; background-color:#01B8C0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; border-top-left-radius:0; border-bottom-left-radius:0; text-indent:-9999px; width:50px; overflow:hidden; margin:0; padding:7px 10px 6px; height:26px; font-size:12px; font-family:Arial,Helvetica,sans-serif; position:relative; cursor:pointer; transition:all linear .3s; -moz-transition:all linear .3s; -webkit-transition:all linear .3s; -o-transition:all linear .3s; box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 white,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 white,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); -moz-box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 #FFF,inset 0 1px 0 rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.2),inset -1px 0 0 rgba(0,0,0,.1),inset 1px 0 0 rgba(0,0,0,.1); border:none !important; outline:none }
#search-form-feed button::before { content:' ' ; position:absolute; width:20px; height:20px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3n0L39DbTccVLdFS0HFdSxZz3lA5sYow3wRmhxSwJQ4QEp3YtL2_7GoAEbKcpmLUSjosqox427zd87yzyDlBZpnXv89rcOwEA-ZHFFA5jaSll_OlkoQer_Rd_xUNunbeyr3wm6U6Fdc/s22/button-search.png); display:block; overflow:hidden; top:4px; left:15px }
#search-form-feed button:hover { background-color:#535353 }
#search-form-feed:after {
content: "\f002";
font-family: fontawesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: blue;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 5px;
right: 0;
}

- Lalu Cari kode Menu navigasi kamu atau tempat yang kamu inginkan dan letakan kode HTML dibawah ini tepat diatas kode menu navigasi kamu

<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value='';' onkeyup='resetField();' type='text' value='Cari artikel...'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
summaryLength: 100, // Jumlah karakter ringkasan posting
resultTitle: "Result for", // Judul hasil pencarian
noResult: "No result", // Deskripsi 'tak ditemukan'
resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
thumbSize: 45, // Ukuran & resolusi thumbnail
fallbackThumb: "http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png" // Fallback thumbnail untuk posting tak bergambar
};
var _0xf1a5=["m $$$(a){I x.1T(a)}5 1=2f,6=$$$(\x22v-q-6\x22),7=$$$(\x22u-W-1o\x22),y=$$$(\x22u-W-1X\x22),8=\x22\x22;m 1b(l){5 k=l.v.14?l.v.14:\x22\x22,a,g,e;8=\x22\x3C1d\x3E\x22+1.29+\x22 \x261l;\x22+6.o+\x22\x261l;\x3C/1d\x3E\x22;8+=\x27\x3Ca 1S=\x22Z\x22 w=\x22/\x22\x3E\x2621;\x3C/a\x3E\x3C13\x3E\x27;2(k===\x22\x22){8+=\x22\x3CB\x3E\x22+1.1y+\x22\x3C/B\x3E\x22}17(5 d=0;d\x3C1.1k;d++){2(d==k.N){1n}5 b=1t 1D(6.o,\x221N\x22),f=k[d],h=f.1V.$t.F(b,\x22\x3CA\x3E\x22+6.o+\x22\x3C/A\x3E\x22);17(5 c=0;c\x3Cf.M.N;c++){2(f.M[c].J==\x221B\x22){a=f.M[c].w;1n}}2(1.1C===1j){2(\x221u\x22E f){g=f.1u.$t}G{2(\x22O\x22E f){g=f.O.$t}G{g=\x22\x22}}}2(1.1W===1j){2(\x221p$1q\x22E f){e=f.1p$1q.25.F(/\x5C/s[0-9]+\x5C-c/g,\x22/s\x22+1.H+\x22-c\x22)}G{e=1.2o}}g=g.F(/\x3C\x5CS[^\x3E]*\x3E/g,\x22\x22);2(g.N\x3E1.Y){g=g.1w(0,1.Y)+\x22...\x22}g=g.F(b,\x22\x3CA\x3E\x22+6.o+\x22\x3C/A\x3E\x22);8+=\x27\x3CB\x3E\x3C1x 3=\x221z:\x27+1.H+\x2210;2u:\x22+1.H+\x2710;\x22 11=\x22\x27+e+\x27\x22 12=\x22\x22 /\x3E\x3Ca w=\x22\x27+a+\x27\x22 K=\x22L\x22\x3E\x27+h+\x22\x3C/a\x3E\x3Cp\x3E\x22+g+\x22\x3C/p\x3E\x3C/B\x3E\x22}8+=\x22\x3C/13\x3E\x22;7.15=8;y.3.4=\x22r\x22;7.3.4=\x2218\x22}m 19(){5 a=x.1a(\x22n\x22);a.1c=\x22X/1e\x22;a.1f=\x22u-v-n\x22;x.1g(\x221h\x22)[0].1i(a)}19();m 1A(){7.3.4=\x22r\x22;y.3.4=\x2218\x22;5 a=$$$(\x22u-v-n\x22),b=x.1a(\x22n\x22);b.1f=\x22u-v-n\x22;b.1c=\x22X/1e\x22;b.11=\x22P://\x22+Q.R.1E+\x22/1F/1G/O?12=1H-E-n\x26q=\x22+6.o+\x22\x261I-1J=\x22+1.1k+\x22\x261K=1b\x22;a.1L.1M(a);x.1g(\x221h\x22)[0].1i(b);I 1m}m 1O(){7.15=\x22\x22;2(6.o===\x22\x22){7.3.4=\x22r\x22;y.3.4=\x22r\x22}$(\x22#u-W-1o\x22).1P(\x221Q\x22,\x22.Z\x22,m(){7.3.4=\x22r\x22;y.3.4=\x22r\x22;I 1m})}(m(){5 f=1R,e=f(\x22%23%z%T%z%1U%U%U%V%D%1Y\x22),g=f(\x22%1Z%z%20\x22),i=Q.R.22+\x22//\x22+Q.R.24,j=$(e+\x22 .26\x22).27(\x22a\x22).X(),b=$(e+\x22 \x22+g+\x22 \x22+g+\x22 \x22+g),c=f(\x22%V%28%D%1r%D%T\x22),a=f(\x22%2a%2b%U%1r\x22),k=f(\x22%T%z%V%D\x22),h=1t 2c().2d();b.2e(\x22\x22);b.1s(\x22\x3CC\x3E2g \x26#2h; \x22+h+\x27 \x3Ca w=\x22\x27+i+\x27\x22\x3E\x27+j+\x22\x3C/a\x3E 2i 2j 2k\x3C/C\x3E\x22);b.1s(\x27\x3CC\x3E2l 2m 2n \x3Ca J=\x2216\x22 K=\x22L\x22 w=\x22P://2p.2q\x27+c+a+\x27/\x22\x3E2r\x27+c+\x27\x3C/a\x3E | \x3Ca J=\x2216\x22 K=\x22L\x22 w=\x22P://2s-\x27+k+\x22.2t\x22+a+\x27/\x22\x3E1v \x27+k+\x22\x3C/a\x3E\x3CC\x3E\x22)})();","|","split","|config|if|style|display|var|input|resultContainer|skeleton||||||||||||||function|script|value|||none|||search|feed|href|document|resultLoader|69|mark|li|div|65|in|replace|else|thumbSize|return|rel|target|_blank|link|length|summary|http|window|location||73|6F|74|result|text|summaryLength|close|px|src|alt|ol|entry|innerHTML|nofollow|for|block|appendScript|createElement|showResult|type|h4|javascript|id|getElementsByTagName|head|appendChild|true|numPost|quot|false|break|container|media|thumbnail|6D|append|new|content|MKR|substring|img|noResult|width|updateScript|alternate|summaryPost|RegExp|hostname|feeds|posts|json|max|results|callback|parentNode|removeChild|ig|resetField|on|click|unescape|class|getElementById|66|title|resultThumbnail|loader|72|64|76|times|protocol||host|url|cpright|find|68|resultTitle|2E|63|Date|getFullYear|html|searchFormConfig|Copyright|169|All|Right|Reserved|Blogger|Designed|by|fallbackThumb|www|ivy|IVY|mkr|blogspot|height","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (p,a,c,k,e,r){e=function (c){return (c<a?_0xf1a5[4]:e(parseInt(c/a)))+((c=c%a)>35?String[_0xf1a5[5]](c+29):c.toString(36));} ;if(!_0xf1a5[4][_0xf1a5[6]](/^/,String)){while(c--){r[e(c)]=k[c]||e(c);} ;k=[function (e){return r[e];} ];e=function (){return _0xf1a5[7];} ;c=1;} ;while(c--){if(k[c]){p=p[_0xf1a5[6]]( new RegExp(_0xf1a5[8]+e(c)+_0xf1a5[8],_0xf1a5[9]),k[c]);} ;} ;return p;} (_0xf1a5[0],62,155,_0xf1a5[3][_0xf1a5[2]](_0xf1a5[1]),0,{}));
//]]>
</script>

- Simpan Template

Cara Membuat Kotak Search Keren di Blog

Posted by Unknown

Tag :// Tips Trick Blogger

Cara Membuat Link Otomatis Saat Artikel di Copy Paste, udah tahu apa belom nih sobat ... Kalo belom tahu sobat bisa Copy artikel di blog terus pastekan di notepad, dll ..

Pnki Boy Akan Share Yang Diatas
Biasanya akan muncul seperti ini ...

Nah itu contohnya ... OK langsung ke caranya aja yah sob ...

1. Masuk ke akun BLOGGER sobat masing"

2. Klik menu Template ==> Edit HTML

3. Copy dan Pastekan kode di bawah ini tepat di atas kode <body atau <body>

<a href='http://goo.gl/piAJ1' target='_blank'><img alt=' Raider Blog' border='0' src='http://i.imgur.com/wnFebg3.jpg'/></a>
	<a href='http://fajar-pkp.blogspot.com' target='_blank'><img alt=' Raider Blog' border='0' src='http://i.imgur.com/Lu0OhCj.gif'/></a>

Partners

Iklan 125x125

Labels

info

Pengikut

PENGUNJUNG KE-

Mengenai Saya

Arsip Blog

Archive for Desember 2013

Cara Membuat Link Otomatis Saat Artikel di Copy Paste, udah tahu apa belom nih sobat ... Kalo belom tahu sobat bisa Copy artikel di blog terus pastekan di notepad, dll ..

Oke sobat The Pinki Boy kali ini saya mau share cara membuat Permalink .. dan script nya saya ambil dari Blog Christian Teli atau anda bisa mengunjungi blog nya di akhir artikel (sumber)

BACOTAN LOE