Kali ini saya akan membuat tutorial cara membuat navbar mirip google yang saya buat Cukup keren tampilannya dan responsive.. silahkan ikutin tutorialnya dengan teliti..
ScreenSHot
Tahap 1 Taro Css di bawah ini di atas </head> :
<style>
@-webkit-keyframes gb__a {
0%{opacity:0}
50%{opacity:1}
}
@keyframes gb__a {
0%{opacity:0}
50%{opacity:1}
}
.gb_Kb{display:none!important}
.gb_Cc{left:0;min-width:1182px;position:absolute;top:0;-webkit-user-select:none;width:100%}
.gb_Jb{font:13px/27px Arial,sans-serif;position:relative;height:60px;width:100%}
#gba{height:60px}
#gba.gb_Dc{height:90px}
.gb_Jb>.gb_e{height:60px;line-height:58px;vertical-align:middle}
.gb_Jb::before{background:#e5e5e5;bottom:0;content:'';display:none;height:1px;left:0;position:absolute;right:0}
.gb_Jb{background:#f1f1f1}
.gb_Ec .gb_Jb{background:#fff}
.gb_Ec .gb_Jb::before{display:none}
.gb_j .gb_Jb,.gb_k .gb_Jb{background:transparent}
.gb_j .gb_Jb::before{background:#e1e1e1;background:rgba(0,0,0,.12)}
.gb_k .gb_Jb::before{background:#333;background:rgba(255,255,255,.2)}
.gb_e{display:inline-block;-webkit-flex:0 0 auto;flex:0 0 auto}
.gb_e.gb_Fc{float:right;-webkit-order:1;order:1}
.gb_Hc{white-space:nowrap;display:-webkit-flex;display:flex;margin-left:0!important;margin-right:0!important}
.gb_e{margin-left:0!important;margin-right:0!important}
.gb_Ea{background-image:url(//ssl.gstatic.com/gb/images/v1_2e543709.png);background-size:112px 1828px}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gb_Ea{background-image:url(//ssl.gstatic.com/gb/images/v2_e41a714c.png)}
}
.gb_5a{display:inline-block;padding:0 0 0 15px;vertical-align:middle}
.gb_5a:first-child,#gbsfw:first-child+.gb_5a{padding-left:0}
.gb_Va{position:relative}
.gb_z{display:inline-block;outline:none;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;height:30px;width:30px}
#gb#gb a.gb_z{color:#404040;cursor:default;text-decoration:none}
#gb#gb a.gb_z:hover,#gb#gb a.gb_z:focus{color:#000}
.gb_8{border-color:transparent;border-bottom-color:#fff;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;top:37px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s}
.gb_9{border-color:transparent;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;display:none;position:absolute;left:6.5px;z-index:1;height:0;width:0;-webkit-animation:gb__a .2s;animation:gb__a .2s;border-bottom-color:#ccc;border-bottom-color:rgba(0,0,0,.2);top:36px}
x:-o-prefocus,div.gb_9{border-bottom-color:#ccc}
.gb_A{background:#fff;border:1px solid #ccc;border-color:rgba(0,0,0,.2);box-shadow:0 2px 10px rgba(0,0,0,.2);display:none;overflow:hidden;position:absolute;right:0;top:44px;-webkit-animation:gb__a .2s;animation:gb__a .2s;-webkit-border-radius:2px;border-radius:2px;-webkit-user-select:text}
.gb_5a.gb_ya .gb_8,.gb_5a.gb_ya .gb_9,.gb_5a.gb_ya .gb_A{display:block}
.gb_4b{position:absolute;right:0;top:44px;z-index:-1}
.gb_Jb ::-webkit-scrollbar{height:15px;width:15px}
.gb_Jb ::-webkit-scrollbar-button{height:0;width:0}
.gb_Jb ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.3);border:5px solid transparent;border-radius:10px;min-height:20px;min-width:20px;height:5px;width:5px}
.gb_Jb ::-webkit-scrollbar-thumb:hover,.gb_Jb ::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.4)}
#gb#gb a.gb_b,#gb#gb a.gb_c{color:#404040;text-decoration:none}
#gb#gb a.gb_c:hover,#gb#gb a.gb_c:focus{color:#000;text-decoration:underline}
.gb_d.gb_e{display:none;padding-left:15px;vertical-align:middle}
.gb_d.gb_e:first-child{padding-left:0}
.gb_f.gb_e{display:inline-block;-webkit-flex:0 1 auto;flex:0 1 auto;display:-webkit-flex;display:flex}
.gb_g .gb_f{display:none}
.gb_d .gb_c{display:inline-block;line-height:24px;outline:none;vertical-align:middle}
.gb_f .gb_c{min-width:60px;overflow:hidden;-webkit-flex:0 1 auto;flex:0 1 auto;text-overflow:ellipsis}
.gb_h .gb_f .gb_c{min-width:0}
.gb_i .gb_f .gb_c{width:0!important}
.gb_j .gb_c{font-weight:700;text-shadow:0 1px 1px rgba(255,255,255,.9)}
.gb_k .gb_c{font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.6)}
#gb#gb.gb_k a.gb_c{color:#fff}
.gb_y .gb_z{background-position:-51px -452px;opacity:.55}
.gb_j .gb_y .gb_z{background-position:0 -499px;opacity:.7}
.gb_k .gb_y .gb_z{background-position:-69px -1086px;opacity:1}
.gb_r .gb_y .gb_z::before{left:-51px;top:-452px}
.gb_r.gb_j .gb_y .gb_z::before{left:0;top:-499px}
.gb_r.gb_k .gb_y .gb_z::before{left:-69px;top:-1086px}
.gb_a.gb_a{background-size:64px 64px}
#gb2 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/3a1e625196.png)}
#gb22 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/45e593839c.png)}
#gb45 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/f420d06f66.png)}
#gb72 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/86c8ced049.png)}
#gb117 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/142da27578.png)}
#gb136 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/cdd18852d7.png)}
#gb166 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/f4aea5a8b1.png)}
#gb171 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/c80a7322a3.png)}
#gb177 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/4653513b7d.png)}
#gb206 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/a031540067.png)}
#gb207 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/e57927daa5.png)}
#gb211 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/c03dda0b34.png)}
#gb217 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/71060be5b3.png)}
#gb228 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/3ce1d245b2.png)}
#gb249 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/afa40f6e42.png)}
#gb260 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/29adc12d690.png)}
#gb261 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/0b26f6f8e4.png)}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
#gb2 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/438087d3df.png)}
#gb22 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/95b1579b0a.png)}
#gb45 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/9c561d4392.png)}
#gb72 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/80beb1dc89.png)}
#gb117 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/e3cbb9b858.png)}
#gb136 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/3a44871813.png)}
#gb166 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/a19cb6b9a2.png)}
#gb171 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/fe7edf2498.png)}
#gb177 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/188f0d697b.png)}
#gb206 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/dfd7906be0.png)}
#gb207 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/25c96bb17c.png)}
#gb211 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/2d7fffa981.png)}
#gb217 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/e2c0b463b4.png)}
#gb228 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/82532ae36e.png)}
#gb249 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/d54db42004.png)}
#gb260 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/0d21a180fe0.png)}
#gb261 .gb_a{background-image:url(//ssl.gstatic.com/gb/images/a/9001dae971.png)}
}
.gb_l{border:1px solid #fff;border-radius:2px;display:inline-block;vertical-align:top;height:100px;width:83px}
.gb_l[aria-grabbed=true]{visibility:hidden}
.gb_l:hover:not(.gb_m){border:1px solid #e5e5e5}
.gb_l.gb_n:not(.gb_m){border:1px solid #e5e5e5;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.gb_l.gb_n{background:#fff;cursor:-moz-grabbing;cursor:-webkit-grabbing;margin:-1px;visibility:visible;z-index:1001}
.gb_o{opacity:.5}
.gb_l.gb_n a{color:#404040!important;cursor:-moz-grabbing;cursor:-webkit-grabbing;font:13px/27px Arial,sans-serif;text-decoration:none!important}
.gb_b{display:inline-block;font-size:13px;margin:8px 2px;text-align:center;outline:none}
.gb_b .gb_p,.gb_b .gb_a{display:inline-block;vertical-align:top;height:64px;width:64px}
.gb_q{display:block;line-height:20px;overflow:hidden;white-space:nowrap;width:84px;text-overflow:ellipsis}
.gb_l:hover .gb_b{z-index:1}
.gb_l:hover .gb_q{background:rgba(255,255,255,.9);white-space:normal;overflow-wrap:break-word;word-wrap:break-word}
.gb_b.gb_m{cursor:default;filter:url("data:image/svg+xml;utf8,\00003csvg xmlns=\000027http://www.w3.org/2000/svg\000027\00003e\00003cfilter id=\000027g\000027\00003e\00003cfeColorMatrix values=\0000270.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\000027/\00003e\00003c/filter\00003e\00003c/svg\00003e#g");-webkit-filter:grayscale(1);opacity:.4}
.gb_b .gb_p{background-image:url(//ssl.gstatic.com/gb/images/v1_2e543709.png);background-size:112px 1828px}
.gb_r .gb_b .gb_p{background-image:none;overflow:hidden;position:relative}
.gb_r .gb_b .gb_p::before{content:url('//ssl.gstatic.com/gb/images/v1_2e543709.png');position:absolute}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gb_b .gb_p{background-image:url(//ssl.gstatic.com/gb/images/v2_e41a714c.png)}
.gb_r .gb_b .gb_p::before{content:url('//ssl.gstatic.com/gb/images/v2_e41a714c.png')}
}
#gb#gb .gb_s a.gb_b:focus{text-decoration:underline}
.gb_l[aria-grabbed=true].gb_t{visibility:visible}
.gb_u,.gb_v{position:relative;top:27px;visibility:hidden}
.gb_u{float:left;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #4273db}
.gb_v{float:right;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #4273db}
ul.gb_w li.gb_t:not(:first-child) .gb_u,ul.gb_w li.gb_t .gb_v,ul.gb_x li.gb_t .gb_u,ul.gb_x li.gb_t:not(:last-child) .gb_v{visibility:visible}
.gb_y .gb_z:hover,.gb_y .gb_z:focus{opacity:.85}
.gb_y .gb_A{min-height:196px;overflow-y:auto;width:320px}
.gb_B{-webkit-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
.gb_C{background:#fff;margin:0;min-height:100px;padding:28px;padding-right:27px;text-align:left;white-space:normal;width:275px}
.gb_D{background:#f5f5f5;cursor:pointer;height:40px;overflow:hidden}
.gb_E{position:relative}
.gb_D{display:block;line-height:40px;text-align:center;width:320px}
.gb_E{display:block;line-height:40px;text-align:center}
.gb_E.gb_F{line-height:0}
#gb a.gb_D,#gb a.gb_D:visited,#gb a.gb_D:active,#gb a.gb_E,#gb a.gb_E:visited{color:#737373;text-decoration:none}
#gb a.gb_E:active{color:#737373}
.gb_E,.gb_C{display:none}
.gb_w,.gb_w+.gb_E,.gb_H .gb_E,.gb_H .gb_C{display:block}
#gb a.gb_E:hover,#gb a.gb_E:active{text-decoration:underline}
.gb_E{border-bottom:1px solid #ebebeb;left:28px;width:264px}
.gb_H .gb_D{display:none}
.gb_E:last-child{border-bottom-width:0}
.gb_I.gb_J{height:100px;text-align:center}
.gb_I.gb_J img{padding:34px 0;height:32px;width:32px}
.gb_I .gb_p{background-image:url(//ssl.gstatic.com/gb/images/v1_2e543709.png);background-size:112px 1828px;background-position:0 -1518px}
.gb_I .gb_p+img{border:0;margin:8px;height:48px;width:48px}
.gb_I div.gb_K{background:#ffa;border-radius:5px;padding:5px;text-align:center}
.gb_L .gb_D{margin-top:0;position:static}
.gb_M{display:inline-block}
.gb_N{margin:-12px 28px 28px;position:relative;width:264px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.1)}
.gb_O{background-image:url(//ssl.gstatic.com/gb/images/v1_2e543709.png);background-size:112px 1828px;display:inline-block;margin:8px;vertical-align:middle;height:64px;width:64px}
.gb_P{color:#262626;display:inline-block;font:13px/18px Arial,sans-serif;margin-right:80px;padding:10px 10px 10px 0;vertical-align:middle;white-space:normal}
.gb_Q{font:16px/24px Arial,sans-serif}
#gb#gb .gb_R{color:#427fed;text-decoration:none}
#gb#gb .gb_R:hover{text-decoration:underline}
.gb_S .gb_C{position:relative}
.gb_S .gb_b{position:absolute;top:28px;left:28px}
.gb_D.gb_T{display:none;height:0}
.gb_k .gb_y .gb_z:hover,.gb_k .gb_y .gb_z:focus{opacity:1}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gb_I .gb_p{background-image:url(//ssl.gstatic.com/gb/images/v2_e41a714c.png)}
}
.gb_U{background:#f8f8f8;border:1px solid #c6c6c6;display:inline-block;line-height:28px;padding:0 12px;-webkit-border-radius:2px;border-radius:2px}
#gb a.gb_U.gb_U{color:#666;cursor:default;text-decoration:none}
.gb_V{border:1px solid #4285f4;font-weight:700;outline:none;background:#4285f4;background:-webkit-linear-gradient(top,#4387fd,#4683ea);background:linear-gradient(top,#4387fd,#4683ea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=0)}
#gb a.gb_V.gb_V{color:#fff}
.gb_V:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.gb_V:active{-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 0 rgba(0,0,0,.15);background:#3c78dc;background:-webkit-linear-gradient(top,#3c7ae4,#3f76d3);background:linear-gradient(top,#3c7ae4,#3f76d3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c7ae4,endColorstr=#3f76d3,GradientType=0)}
.gb_W{display:inline-block;line-height:normal;position:relative;z-index:987}
.gb_X{background-size:32px 32px;border-radius:50%;display:block;margin:-1px;height:32px;width:32px}
.gb_X:hover,.gb_X:focus{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.gb_X:active{-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 0 rgba(0,0,0,.15)}
.gb_X:active::after{background:rgba(0,0,0,.1);border-radius:50%;content:'';display:block;height:100%}
.gb_Z:not(.gb_r) .gb_X::before,.gb_Z:not(.gb_r) .gb_0::before{content:none}
.gb_1{cursor:pointer;line-height:30px;min-width:30px;overflow:hidden;vertical-align:middle;width:auto;text-overflow:ellipsis}
.gb_2{border-top:4px solid #404040;border-left:4px dashed transparent;border-right:4px dashed transparent;display:inline-block;margin-left:6px;vertical-align:middle}
.gb_j .gb_1{font-weight:700;text-shadow:0 1px 1px rgba(255,255,255,.9)}
.gb_k .gb_1{font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.6)}
#gb#gb.gb_k a.gb_1{color:#fff}
.gb_j .gb_X,.gb_k .gb_X{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.gb_j .gb_X:hover,.gb_k .gb_X:hover,.gb_j .gb_X:focus,.gb_k .gb_X:focus{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2)}
.gb_3 .gb_4,.gb_5 .gb_4{position:absolute;right:1px}
.gb_4.gb_e,.gb_6.gb_e,.gb_7.gb_e{-webkit-flex:0 1 auto;flex:0 1 auto}
.gb_Z.gb_i .gb_1{width:30px!important}
.gb_1~.gb_8,.gb_1~.gb_9{left:auto;right:6.5px}
.gb_aa{outline:none}
.gb_7:hover .gb_2{border-top-color:#000}
#gb a.gb_ba.gb_ba,#gb .gb_ca.gb_ca a{color:#36c;text-decoration:none}
#gb a.gb_ba:active,#gb a.gb_ba:hover,#gb .gb_ca a:active,#gb .gb_ca a:hover{text-decoration:underline}
.gb_da{margin:20px}
.gb_ea,.gb_fa{display:inline-block;vertical-align:top}
.gb_ea{margin-right:20px;position:relative}
.gb_0{background-size:96px 96px;border:none;vertical-align:top;height:96px;width:96px}
.gb_ga{background:rgba(78,144,254,.7);bottom:0;color:#fff;font-size:9px;font-weight:700;left:0;line-height:9px;position:absolute;padding:7px 0;text-align:center;width:96px}
.gb_ha{font-weight:700;margin:-4px 0 1px}
.gb_ia{color:#666}
.gb_ca{color:#ccc;margin:6px 0}
.gb_ca a{margin:0 10px}
.gb_ca a:first-child{margin-left:0}
.gb_ca a:last-child{margin-right:0}
.gb_fa .gb_U{background:#4d90fe;border-color:#3079ed;font-weight:700;margin:10px 0 0}
#gb .gb_fa a.gb_U.gb_U{color:#fff}
.gb_fa .gb_U:hover{background:#357ae8;border-color:#2f5bb7}
.gb_ja{background:#f5f5f5;border-top:1px solid #ccc;border-color:rgba(0,0,0,.2);padding:10px 0;width:100%;display:table}
.gb_ja .gb_U{margin:0 20px}
.gb_ja>div{display:table-cell;text-align:right}
.gb_ja>div:first-child{text-align:left}
.gb_ja .gb_ka{display:block;text-align:center}
.gb_la .gb_8{border-bottom-color:#fef9db}
.gb_ma{background:#fef9db;font-size:11px;padding:10px 20px;white-space:normal}
.gb_ma b,.gb_ba{white-space:nowrap}
.gb_na{background:#f5f5f5;border-top:1px solid #ccc;border-top-color:rgba(0,0,0,.2);max-height:230px;overflow:auto}
.gb_oa{border-top:1px solid #ccc;border-top-color:rgba(0,0,0,.2);display:block;padding:10px 20px}
.gb_oa:hover{background:#eee}
.gb_oa:first-child,.gb_pa:first-child+.gb_oa{border-top:0}
.gb_pa{display:none}
.gb_qa{cursor:default}
.gb_qa:hover{background:transparent}
.gb_ra{border:none;vertical-align:top;height:48px;width:48px}
.gb_sa{display:inline-block;margin:6px 0 0 10px}
.gb_qa .gb_ra,.gb_qa .gb_sa{opacity:.4}
.gb_ta{color:#000}
.gb_qa .gb_ta{color:#666}
.gb_ua{color:#666}
.gb_va{background:#f5f5f5;border-top:1px solid #ccc;border-top-color:rgba(0,0,0,.2);display:block}
.gb_wa{background-position:0 -280px;display:inline-block;margin:11px 10px 11px 20px;vertical-align:middle;height:25px;width:25px}
.gb_r .gb_wa::before{left:0;top:-280px}
#gbsfw{min-width:400px;overflow:visible}
.gb_xa,#gbsfw.gb_ya{display:block;outline:none}
.gb_za{min-width:127px;overflow:hidden;position:relative;z-index:987}
.gb_Aa{position:absolute;padding:0 20px 0 15px}
.gb_Ba .gb_Aa{right:100%;margin-right:-127px}
.gb_Ca{display:inline-block;outline:none;vertical-align:middle}
.gb_Da .gb_Ca{position:relative;top:2px}
.gb_Ca .gb_Ea,.gb_Fa{display:block}
.gb_Ha{border:none;display:block;visibility:hidden}
.gb_Ca .gb_Ea{background-position:0 -138px;height:33px;width:92px}
.gb_Fa{background-repeat:no-repeat}
.gb_k .gb_Ca .gb_Ea{background-position:0 -1569px;margin:-3px 0 0 -10px;height:52px;width:112px}
.gb_j .gb_Ca .gb_Ea{margin:-3px 0 0 -10px;height:52px;width:112px;background-position:0 -706px}
.gb_r .gb_Ca .gb_Ea::before{left:0;top:-138px}
.gb_r.gb_k .gb_Ca .gb_Ea::before{left:0;top:-1569px}
.gb_r.gb_j .gb_Ca .gb_Ea::before{left:0;top:-706px}
@-webkit-keyframes gb__nb {
0%{-webkit-transform:scale(0,0);transform:scale(0,0)}
20%{-webkit-transform:scale(1.4,1.4);transform:scale(1.4,1.4)}
50%{-webkit-transform:scale(.8,.8);transform:scale(.8,.8)}
85%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}
to{-webkit-transform:scale(1.0,1.0);transform:scale(1.0,1.0)}
}
@keyframes gb__nb {
0%{-webkit-transform:scale(0,0);transform:scale(0,0)}
20%{-webkit-transform:scale(1.4,1.4);transform:scale(1.4,1.4)}
50%{-webkit-transform:scale(.8,.8);transform:scale(.8,.8)}
85%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}
to{-webkit-transform:scale(1.0,1.0);transform:scale(1.0,1.0)}
}
.gb_Ua .gb_Va{font-size:14px;font-weight:700;top:0;right:0}
.gb_Ua .gb_z{display:inline-block;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;height:30px;width:30px}
.gb_Wa{background-position:0 -69px;opacity:.55;height:100%;width:100%}
.gb_z:hover .gb_Wa,.gb_z:focus .gb_Wa{opacity:.85}
.gb_Na .gb_Wa{background-position:0 -1039px}
.gb_Oa{background-color:#cb4437;border-radius:8px;font:bold 11px Arial;color:#fff;line-height:16px;min-width:14px;padding:0 1px;position:absolute;right:0;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.1);top:0;visibility:hidden;z-index:990}
.gb_Pa .gb_Oa,.gb_Pa .gb_Qa,.gb_Pa .gb_Qa.gb_Ra{visibility:visible}
.gb_Qa{padding:0 2px;visibility:hidden}
.gb_Ua .gb_9{left:3px}
.gb_Ua .gb_8{left:3px;border-bottom-color:#e5e5e5}
.gb_Oa.gb_Ta{-webkit-animation:gb__nb .6s 1s both ease-in-out;animation:gb__nb .6s 1s both ease-in-out;-webkit-perspective-origin:top right;perspective-origin:top right;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transform-origin:top right;transform-origin:top right}
.gb_Ta .gb_Qa{visibility:visible}
.gb_j .gb_z .gb_Wa{background-position:-69px -1172px;opacity:.7}
.gb_j .gb_Na .gb_Wa{background-position:-69px -1695px}
.gb_j .gb_z:hover .gb_Wa,.gb_j .gb_z:focus .gb_Wa{opacity:.85}
.gb_k .gb_z .gb_Wa{background-position:-69px -1224px;opacity:1}
.gb_k .gb_Na .gb_Wa{background-position:-69px -1626px}
.gb_j .gb_Oa,.gb_k .gb_Oa{border:none;-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);box-shadow:-1px 1px 1px rgba(0,0,0,.2)}
.gb_r .gb_Wa::before{left:0;top:-69px}
.gb_r .gb_Na .gb_Wa::before{left:0;top:-1039px}
.gb_r.gb_j .gb_z .gb_Wa::before{left:-69px;top:-1172px}
.gb_r.gb_j .gb_Na .gb_Wa::before{left:-69px;top:-1695px}
.gb_r.gb_k .gb_z .gb_Wa::before{left:-69px;top:-1224px}
.gb_r.gb_k .gb_Na .gb_Wa::before{left:-69px;top:-1626px}
.gb_Xa{display:none;margin:28px;margin-bottom:-12px;position:relative;width:264px;z-index:1;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.1)}
.gb_Xa.gb_ya{display:block}
.gb_0a{background-size:64px 64px;display:inline-block;margin:12px;vertical-align:top;height:64px;width:64px}
.gb_1a{display:inline-block;padding:16px 16px 16px 0;vertical-align:top;white-space:normal}
.gb_0a~.gb_1a{margin-right:88px}
.gb_1a:first-child{padding-left:16px}
.gb_2a{color:#262626;font:16px/24px Arial,sans-serif}
.gb_3a{color:#737373;font:13px/18px Arial,sans-serif}
#gb#gb .gb_Xa .gb_4a{color:#427fed;text-decoration:none}
#gb#gb .gb_Xa .gb_4a:hover{text-decoration:underline}
.gb_Xa .gb_Za{background-position:-69px -1155px;cursor:pointer;opacity:.27;position:absolute;right:4px;top:4px;height:12px;width:12px}
.gb_Xa .gb_Za:hover{opacity:.55}
.gb_5a.gb_6a{padding:0}
.gb_6a .gb_A{padding:26px 26px 22px;background:#fff}
.gb_7a.gb_6a .gb_A{background:#4d90fe}
a.gb_8a{color:#666!important;font-size:22px;height:9px;opacity:.8;position:absolute;right:14px;top:4px;text-decoration:none!important;width:9px}
.gb_7a a.gb_8a{color:#c1d1f4!important}
a.gb_8a:hover,a.gb_8a:active{opacity:1}
.gb_9a{padding:0;width:258px;white-space:normal}
.gb_7a .gb_9a{width:200px}
.gb_ab{color:#333;font-size:16px;line-height:20px;margin:0;margin-bottom:16px}
.gb_7a .gb_ab{color:#fff}
.gb_bb{color:#666;line-height:17px;margin:0;margin-bottom:5px}
.gb_7a .gb_bb{color:#fff}
.gb_cb{position:absolute;background:transparent;top:-999px;z-index:-1;visibility:hidden;margin-top:1px;margin-left:1px}
#gb .gb_6a{margin:0}
.gb_6a .gb_U{background:#4d90fe;border-color:#3079ed;margin-top:15px}
#gb .gb_6a a.gb_U.gb_U{color:#fff}
.gb_6a .gb_U:hover{background:#357ae8;border-color:#2f5bb7}
.gb_db .gb_Va .gb_8{border-bottom-color:#fff;display:block}
.gb_eb .gb_Va .gb_8{border-bottom-color:#4d90fe;display:block}
.gb_db .gb_Va .gb_9,.gb_eb .gb_Va .gb_9{display:block}
.gb_fb{margin-bottom:32px;font-size:small}
.gb_fb .gb_gb{margin-right:5px}
.gb_fb .gb_hb{color:red}
.gb_ib{color:#fff;font-size:13px;font-weight:700;height:25px;line-height:19px;padding-top:5px;padding-left:12px;position:relative;background-color:#4d90fe}
.gb_ib .gb_Za{color:#fff;cursor:default;font-size:22px;font-weight:400;position:absolute;right:12px;top:5px}
.gb_ib .gb_4a,.gb_ib .gb_jb{color:#fff;display:inline-block;font-size:11px;margin-left:16px;padding:0 8px;white-space:nowrap}
.gb_kb{background:none;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.16)),to(rgba(0,0,0,0.2)));background-image:linear-gradient(top,rgba(0,0,0,0.16),rgba(0,0,0,0.2));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.16),rgba(0,0,0,0.2));border-radius:2px;border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,0.1);cursor:default!important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000ff,endColorstr=#220000ff);text-decoration:none!important;-webkit-border-radius:2px}
.gb_kb:hover{background:none;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.14)),to(rgba(0,0,0,0.2)));background-image:linear-gradient(top,rgba(0,0,0,0.14),rgba(0,0,0,0.2));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.14),rgba(0,0,0,0.2));border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000,endColorstr=#22000000)}
.gb_kb:active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)}
.gb_lb{display:none}
.gb_lb.gb_ya{display:block}
.gb_r .gb_Xa .gb_Za::before{left:-69px;top:-1155px}
.gbqfb,.gbqfba,.gbqfbb{cursor:default!important;display:inline-block;font-weight:700;height:29px;line-height:29px;min-width:54px;padding:0 8px;text-align:center;text-decoration:none!important;-webkit-border-radius:2px;border-radius:2px;-webkit-user-select:none}
.gbqfba:focus{border:1px solid #4d90fe;outline:none;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff}
.gbqfba:hover{border-color:#c6c6c6;color:#222!important;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15);background:#f8f8f8;background:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);background:linear-gradient(top,#f8f8f8,#f1f1f1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1,GradientType=1)}
.gbqfba:hover:focus{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15),inset 0 0 0 1px #fff;box-shadow:0 1px 0 rgba(0,0,0,.15),inset 0 0 0 1px #fff}
.gbqfb::-moz-focus-inner{border:0}
.gbqfba::-moz-focus-inner{border:0}
.gbqfba{border:1px solid #dcdcdc;border-color:rgba(0,0,0,0.1);color:#444!important;font-size:11px;background:#f5f5f5;background:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background:linear-gradient(top,#f5f5f5,#f1f1f1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5,endColorstr=#f1f1f1,GradientType=1)}
.gbqfba:active{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
.gb_pb{position:relative;width:650px;z-index:986}
#gbq2{padding-top:15px}
.gb_qb .gb_pb{min-width:200px;-webkit-flex:0 2 auto;flex:0 2 auto}
.gb_h~.gb_pb{min-width:0}
.gb_qb #gbqf{margin-right:0;display:-webkit-flex;display:flex}
.gb_qb .gbqff{min-width:0;-webkit-flex:1 1 auto;flex:1 1 auto}
.gb_r .gbqfi::before{left:-69px;top:-349px}
#gbq2{display:block}
#gbqf{display:block;margin:0;margin-right:60px;white-space:nowrap}
.gbqff{border:none;display:inline-block;margin:0;padding:0;vertical-align:top;width:100%}
.gbqfqw,#gbqfb,.gbqfwa{vertical-align:top}
#gbqfaa,#gbqfab,#gbqfqwb{position:absolute}
#gbqfaa{left:0}
#gbqfab{right:0}
.gbqfqwb,.gbqfqwc{right:0;left:0;height:100%}
.gbqfqwb{padding:0 8px}
#gbqfbw{display:inline-block;vertical-align:top}
#gbqfb{border:1px solid transparent;border-bottom-left-radius:0;border-top-left-radius:0;height:30px;margin:0;outline:none;padding:0;width:60px;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:#4285f4;background:-webkit-linear-gradient(top,#4387fd,#4683ea);background:linear-gradient(top,#4387fd,#4683ea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=1)}
#gbqfb:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15)}
#gbqfb:focus{-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff}
#gbqfb:hover:focus{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15),inset 0 0 0 1px #fff;box-shadow:0 1px 0 rgba(0,0,0,.15),inset 0 0 0 1px #fff}
#gbqfb:active:active{border:1px solid transparent;-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15);box-shadow:inset 0 2px 0 rgba(0,0,0,.15);background:#3c78dc;background:-webkit-linear-gradient(top,#3c7ae4,#3f76d3);background:linear-gradient(top,#3c7ae4,#3f76d3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3c7ae4,endColorstr=#3f76d3,GradientType=1)}
.gbqfi{background-position:-69px -349px;display:inline-block;margin:-1px;height:30px;width:30px}
.gbqfqw{background:#fff;background-clip:padding-box;border:1px solid #cdcdcd;border-color:rgba(0,0,0,.15);border-right-width:0;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box}
#gbfwc .gbqfqw{border-right-width:1px}
#gbqfqw{position:relative}
.gbqfqw.gbqfqw:hover{border-color:#a9a9a9;border-color:rgba(0,0,0,.3)}
.gbqfwa{display:inline-block;width:100%}
.gbqfwb{width:40%}
.gbqfwc{width:60%}
.gbqfwb .gbqfqw{margin-left:10px}
.gbqfqw.gbqfqw:active,.gbqfqw.gbqfqwf.gbqfqwf{border-color:#4285f4}
#gbqfq,#gbqfqb,#gbqfqc{background:transparent;border:none;height:20px;margin-top:4px;padding:0;vertical-align:top;width:100%}
#gbqfq:focus,#gbqfqb:focus,#gbqfqc:focus{outline:none}
.gbqfif,.gbqfsf{color:#222;font:16px arial,sans-serif}
#gbqfbwa{display:none;text-align:center;height:0}
#gbqfbwa .gbqfba{margin:16px 8px}
#gbqfsa,#gbqfsb{font:bold 11px/27px Arial,sans-serif!important;vertical-align:top}
.gb_j .gbqfqw.gbqfqw,.gb_k .gbqfqw.gbqfqw{border-color:rgba(255,255,255,1);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.gb_j #gbqfb,.gb_k #gbqfb{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.gb_j #gbqfb:hover,.gb_k #gbqfb:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2)}
.gb_j #gbqfb:active,.gb_k #gbqfb:active{-webkit-box-shadow:inset 0 2px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);box-shadow:inset 0 2px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2)}
.gb_Cb .gb_z{background:#e7e7e7;background:rgba(0,0,0,.04);border-bottom-right-radius:0;line-height:30px;position:relative;text-align:center;width:60px}
.gb_Cb .gb_z:hover,.gb_Cb .gb_z:focus{background:#dbdbdb;background:rgba(0,0,0,.08)}
.gb_Cb .gb_z::after{border-left:4px solid #e7e7e7;border-left:4px solid rgba(0,0,0,.04);border-top:4px solid transparent;bottom:0;content:'';position:absolute;right:-4px;height:0;width:0}
.gb_Cb .gb_z:hover::after,.gb_Cb .gb_z:focus::after{border-left-color:#dbdbdb;border-left-color:rgba(0,0,0,.08)}
.gb_Db,.gb_Eb{overflow:hidden;position:relative;width:100%}
.gb_Db{display:none;visibility:hidden}
.gb_Fb{background-position:0 -970px;opacity:.55;visibility:visible;height:30px;width:30px}
.gb_Cb.gb_Hb .gb_z{height:30px;width:30px}
.gb_Hb .gb_Eb{display:none}
.gb_Hb .gb_Db{display:block}
.gb_Cb .gb_8{border-bottom-color:#f5f5f5}
.gb_j .gb_Db{padding:5px 10px 7px 6px;top:-5px;left:-6px}
.gb_j .gb_Eb{background-position:-35px -1039px;padding:5px 10px 7px 6px;top:-5px;left:-6px}
.gb_k .gb_Db{padding:5px 10px 7px 6px;top:-5px;left:-6px}
.gb_k .gb_Eb{background-position:-35px -1039px;padding:5px 10px 7px 6px;top:-5px;left:-6px}
.gb_j .gb_Db,.gb_k .gb_Db{background-position:0 -452px;visibility:visible}
.gb_Z:not(.gb_j):not(.gb_k) .gb_Eb{background-image:none}
.gb_j .gb_Cb .gb_z::after,.gb_k .gb_Cb .gb_z::after{display:none}
.gb_r .gb_Fb::before{left:0;top:-970px}
.gb_r .gb_Ib{position:relative}
.gb_r.gb_j .gb_Eb::before,.gb_r.gb_k .gb_Eb::before{left:-35px;top:-1039px}
.gb_r.gb_j .gb_Db::before,.gb_r.gb_k .gb_Db::before{left:0;top:-452px}
.gb_Z.gb_r:not(.gb_j):not(.gb_k) .gb_Eb::before{content:none}
.gb_5b{width:480px}
.gb_6b{background:#e7e7e7;background:rgba(0,0,0,.04);border-bottom-right-radius:0;line-height:30px;position:relative;text-align:center;width:100%}
.gb_6b:hover{background:#dbdbdb;background:rgba(0,0,0,.08)}
.gb_6b .gb_7b{margin:0 10px}
.gb_8b{position:relative;z-index:1}
.gb_9b{background:#eee;border-bottom:1px solid #e3e3e3;border-left:1px solid #e3e3e3;display:inline-block;line-height:32px;text-align:center;width:160px}
.gb_8b .gb_9b:first-child{border-left:none}
.gb_8b .gb_ya{background:#fff;border-bottom:none}
.gb_ac{display:none;text-align:center}
.gb_ac.gb_ya{display:block}
.gb_bc{color:inherit;display:inline-block;padding:15px;text-decoration:none}
.gb_cc{background-clip:content-box;background-origin:content-box;display:inherit;height:64px;width:64px}
.gb_dc{display:block;text-align:center}
.gb_ec{border-top:none;top:78px;z-index:1;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px}
.gb_fc{display:inline-block;vertical-align:middle}
.gb_gc{display:inline-block;vertical-align:middle;background-size:100%;height:20px;width:20px}
.gb_hc{background-image:url(//ssl.gstatic.com/gb/images/a/5a1c013d3d.png)}
.gb_ic{background-image:url(//ssl.gstatic.com/gb/images/a/de580e5330.png)}
.gb_jc{background-image:url(//ssl.gstatic.com/gb/images/a/451603daf6.png)}
.gb_fc{margin-left:4px}
.gb_kc{margin:5px;width:470px}
.gb_lc{border:none;display:block;margin:0 5px;outline:none;padding:0 5px;height:30px;width:450px}
.gb_mc{border:none;display:block;margin:0 5px;outline:none;padding:0 5px;height:30px;width:450px;border-top:1px solid #e3e3e3}
.gb_nc{border-color:#e3e3e3;display:block;font:inherit;margin:0 5px;outline:none;padding:5px;text-align:left;height:320px;width:450px}
.gb_oc,.gb_pc{border:1px solid #e3e3e3;border-radius:2px;cursor:pointer;line-height:27px;margin:5px;padding:0 8px;width:54px}
.gb_oc{float:left}
.gb_pc{float:right}
.gb_Z{min-width:345px;padding-left:30px;padding-right:30px;position:relative;text-align:right;z-index:986;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end}
.gb_Z.gb_e{-webkit-flex:1 1 auto;flex:1 1 auto}
.gb_qc{line-height:normal;position:relative;text-align:left}
.gb_qc.gb_e,.gb_rc.gb_e,.gb_sc.gb_e{-webkit-flex:0 1 auto;flex:0 1 auto}
.gb_tc,.gb_uc{display:inline-block;padding:0 0 0 15px;position:relative;vertical-align:middle}
.gb_rc{line-height:normal;padding-right:15px}
.gb_Z .gb_rc.gb_g{padding-right:0}
.gb_sc{color:#404040;line-height:30px;min-width:30px;overflow:hidden;vertical-align:middle;text-overflow:ellipsis}
.gb_Z.gb_h{padding-left:0;padding-right:29px}
.gb_Z.gb_vc{max-width:400px}
.gb_wc{background-clip:content-box;background-origin:content-box;opacity:.27;padding:22px;height:16px;width:16px}
.gb_wc.gb_e{display:none}
.gb_wc:hover,.gb_wc:focus{opacity:.55}
.gb_xc{background-position:-69px -1730px}
.gb_yc{background-position:-69px 0;padding-left:30px;padding-right:14px;position:absolute;right:0;top:0;z-index:990}
.gb_3:not(.gb_5) .gb_yc,.gb_h .gb_xc{display:inline-block}
.gb_3 .gb_xc{padding-left:30px;padding-right:0;width:0}
.gb_3:not(.gb_5) .gb_zc{display:none}
.gb_Z.gb_e.gb_h,.gb_h:not(.gb_5) .gb_qc{-webkit-flex:0 0 auto;flex:0 0 auto}
.gb_wc,.gb_h .gb_rc,.gb_5 .gb_qc{overflow:hidden}
.gb_3 .gb_rc{padding-right:0}
.gb_h .gb_qc{padding:1px 1px 1px 0}
.gb_3 .gb_qc{width:75px}
.gb_Z.gb_Ac,.gb_Z.gb_Ac .gb_xc,.gb_Z.gb_Ac .gb_xc::before,.gb_Z.gb_Ac .gb_rc,.gb_Z.gb_Ac .gb_qc{-webkit-transition:width .5s ease-in-out,min-width .5s ease-in-out,max-width .5s ease-in-out,padding .5s ease-in-out,left .5s ease-in-out;transition:width .5s ease-in-out,min-width .5s ease-in-out,max-width .5s ease-in-out,padding .5s ease-in-out,left .5s ease-in-out}
.gb_qb .gb_Z{min-width:0}
.gb_Z.gb_i,.gb_Z.gb_i .gb_qc,.gb_Z.gb_Bc,.gb_Z.gb_Bc .gb_qc{min-width:0!important}
.gb_Z.gb_i,.gb_Z.gb_i .gb_e{-webkit-flex:0 0 auto!important;flex:0 0 auto!important}
.gb_Z.gb_i .gb_sc{width:30px!important}
.gb_r .gb_xc::before{clip:rect(1730px 85px 1746px 69px);left:-47px;top:-1708px}
.gb_r .gb_Ea.gb_yc{position:absolute}
.gb_r .gb_yc::before{clip:rect(-0 85px 16px 69px);left:-39px;top:22px}
.gb_r .gb_3 .gb_xc::before{left:-39px}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gb_r .gb_xc::before{clip:rect(3460px 170px 3492px 138px)}
.gb_r .gb_yc::before{clip:rect(-0 170px 32px 138px)}
}
.gb_r .gb_Ea,.gb_r .gbii,.gb_r .gbip{background-image:none;overflow:hidden;position:relative}
.gb_r .gb_Ea::before{content:url('//ssl.gstatic.com/gb/images/v1_2e543709.png');position:absolute}
@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gb_r .gb_Ea::before{content:url('//ssl.gstatic.com/gb/images/v2_e41a714c.png');-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0}
}
#gb.gb_Kc{min-width:980px}
#gb.gb_Kc .gb_pb{min-width:0;position:static;width:0}
.gb_Kc .gb_Jb{background:transparent;border-bottom-color:transparent}
.gb_Kc .gb_Jb::before{display:none}
.gb_Kc .gb_d{display:inline-block}
.gb_Kc.gb_Z .gb_rc.gb_g{padding-right:15px}
.gb_Kc .gb_f.gb_Hc{display:-webkit-flex;display:flex}
.gb_Kc.gb_qb #gbqf{display:block}
.gb_Kc #gbq{height:0;position:absolute}
.gb_Kc.gb_Z{z-index:987}
.gb_Aa.gb_Lc{padding-left:30px}
.gb_Ba .gb_Lc{margin-right:-142px}
.gbii{background-image:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s32-c/photo.jpg)}
.gbip{background-image:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s96-c/photo.jpg)}
.gbii::before{content:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s32-c/photo.jpg);position:absolute}
.gbip::before{content:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s96-c/photo.jpg);position:absolute}
@media (min-resolution:1.25dppx),(-o-min-device-pixel-ratio:54),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25) {
.gbii{background-image:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s64-c/photo.jpg)}
.gbii::before{content:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s64-c/photo.jpg)}
.gbip{background-image:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s192-c/photo.jpg)}
.gbip::before{content:url(//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s192-c/photo.jpg)}
.gbii::before,.gbip::before{-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
}
#gbq .gbgt-hvr,#gbq .gbgt:focus{background-color:transparent;background-image:none}
.gbqfh#gbq1{display:none}
.gbxx{display:none!important}
#gbq{line-height:normal;position:relative;top:0;white-space:nowrap;left:0;width:100%}
#gbq2{top:0;z-index:986}
#gbq4{display:inline-block;max-height:29px;overflow:hidden;position:relative}
.gbqfh#gbq2{z-index:985;margin:0;margin-left:0!important;padding-top:0;position:relative;top:310px}
.gbqfh #gbqf{margin:auto;min-width:534px;padding:0!important}
.gbqfh #gbqfbw{display:none}
.gbqfh #gbqfbwa{display:block}
.gbqfh #gbqf{max-width:572px;min-width:572px}
.gbqfh .gbqfqw{border-right-width:1px}
.gsfe_a.gsfe_a{border-right-width:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
.gsfe_b.gsfe_b{border-right-width:0;border-color:#4285f4;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
.gbqfh .gsfe_a,.gbqfh .gsfe_b{border-width:1px}
.gbm{background:#fff;border:1px solid #bebebe;box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);position:absolute;top:-999px;visibility:hidden;z-index:999}
.xQb{display:inline-block;line-height:40px;margin-left:40px;text-align:center;width:334px;vertical-align:top;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#notifikasi{background:#e5e5e5;border:1px solid #ccc;border-color:rgba(0,0,0,.2);box-shadow:0 2px 10px rgba(0,0,0,.2);right:1px;overflow:hidden;height:372px;-webkit-border-radius:2px;min-width:400px;top:44px;width:121px;-webkit-user-select:text}
.Pac{color:#404040;font:13px Roboto,arial,sans-serif}
#infoment{z-index:10}
#follow-me{z-index:1000}
#notifikasi{z-index:0;position:absolute;display:none}
#informasi{overflow-y:scroll;position:absolute;background:#fff;width:98%;top:28px;height:196px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);padding:5px}
#infoment{position:absolute;content:"";right:5px;top:11px;border-top:8px solid rgba(192,192,192,0.76);border-right:8px solid rgba(255,0,0,0);border-left:8px solid rgba(255,0,0,0);border-bottom:8px solid rgba(255,0,0,0);border-bottom-style:solid}
#follow-me{position:absolute;background:#e5e5e5;border:1px solid #ccc;border-color:rgba(0,0,0,.2);box-shadow:0 2px 10px rgba(0,0,0,.2);right:1px;overflow:hidden;height:auto;-webkit-border-radius:2px;min-width:400px;top:44px;width:121px;-webkit-user-select:text}
#gs_id0{width:100%}
.infoment{position:absolute;content:"right:5px;top:11px;border-top:5px solid rgba(192,192,192,0.76);border-right:5px solid rgba(255,0,0,0);border-left:5px solid rgba(255,0,0,0);border-bottom:5px solid rgba(255,0,0,0);border-bottom-style:solid}
#informasi{display:none}
#tanda-silang:before{content:"";right:10px;position:absolute;font-family:sans-serif;color:#b9b1b1;text-shadow:0 0 1px}
#follow-me{display:none}
#gb119 .gb_p::before{left:0px;top:-1500px}
</style>
Tahap2 Taroh Url Javascript/Javascript ini di Atas </head>:
<script>function toggle3() {var ele = document.getElementById("notifikasi");if(ele.style.display == "block"){ele.style.display = "none";}else {ele.style.display = "block";}}</script>
<script src='http://blog-harris-munahar.googlecode.com/svn/my-navbar-google.js' type='text/javascript'/>
Tahap3 Taroh Script di bawah ini di bawah <body>:
<div id='mngb'>
<div class='gb_Cc gb_qb' id='gb' style='min-width: 980px;'>
<div class='gb_Jb gb_Hc'>
<div class='gb_Z gb_Hc gb_e gb_Fc' style='min-width: 240px;'>
<div class='gb_rc gb_e gb_Hc gb_zc'>
<div class='gb_d gb_e gb_f gb_Hc'>
<a class='gb_c gb_e' data-pid='119' data-ved='0CAIQwi4oAA' href='https://plus.google.com/u/0/?tab=wX'>
+Harris
</a>
</div>
</div>
<div class='gb_qc gb_Hc gb_e' style='min-width: 165px;'>
<div class='notifikasi' id='notifikasi'><div class='xQb'><a class='ob Pac Cwb' href='notifications/all'>Notifikasi Google+</a>
</div>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<style>#show-total{position:fixed;top:1px;right:280px;z-index:9999;cursor:pointer;float:right}
.total-show { background-color: red; color: #fff; padding: 2px 5px; font-size: 11px; border-radius: 4px; right: -154px; position: relative; font-weight: 700; }
#notif{cursor:pointer}
#notif:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UmcNLGd6ZfLHjyntg4P5_ahwVpluKdOVgJulSMpAKLt1VhyUMgiskCHl5jj18_6UeOaOZRelNLuicLW9BqRIlncJAqX76eixTQ5vSZ3dCnkrKp1NW8Z21_J26Hk0qEDBsqR7xM64ApQ/s1600/lonceng.png');display:block;position:fixed;top:12px;right:300px;opacity:.5;z-index:9997;transition:all .4s ease-out}
#notif:hover:before{opacity:1}
#notif2{cursor:pointer;display:none}
#notif2:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5UmcNLGd6ZfLHjyntg4P5_ahwVpluKdOVgJulSMpAKLt1VhyUMgiskCHl5jj18_6UeOaOZRelNLuicLW9BqRIlncJAqX76eixTQ5vSZ3dCnkrKp1NW8Z21_J26Hk0qEDBsqR7xM64ApQ/s1600/lonceng.png');display:block;position:fixed;top:12px;right:300px;opacity:.5;z-index:9997;transition:all .4s ease-out}
#notif2:hover:before{opacity:1}
#cm-wrapper{width:395px;top:-7px;position:relative;right:-10px;z-index:9999;color:#d35400;font-family:Arial,Sans-serif;transition:.5s ease}
#cm-scroll{width:100%;height:600px;overflow:auto;position:relative}
#comments-container{color:#666;font-family:Arial,Sans-serif}
#comments-container.cm-active{position:fixed;right:0;top:61px}
.scrollgeneric{line-height:1px;font-size:1px;position:absolute;top:0;left:0}
.vscrollerbase{width:5px;background-color:#111;border-radius:2px}
.vscrollerbar{width:5px;background-color:#599b29;border-radius:2px}
.hscrollerbase{height:10px;background-color:#111;border-radius:2px}
.hscrollerbar{height:10px;background-color:#444;border-radius:2px}
.scrollerjogbox{width:10px;height:10px;top:auto;left:auto;bottom:0;right:0;background-color:gray}
.cm-outer{margin:0 auto;padding:0;font-size:11px;text-align:left}
.cm-outer pre{background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li{padding:7px 10px 12px;list-style:none;clear:both;position:relative;border-top:1px solid #333;border-bottom:1px solid #111;margin-right:10px}
.cm-outer code{color:#a6a658;font-size:11px}
.cm-outer li.selected{border-left:4px solid #fffe8c}
.cm-outer li:first-child{border-top:none}
.cm-outer li:last-child{border-bottom:none}
.cm-text{color:#999}
.cm-outer{margin:0 0 5px}
.cm-header{margin:4px 0 8px 60px;font-size:12px;font-weight:400!important}
.cm-header a{color:#d35400;text-decoration:none;font-size:12px;font-weight:700}
.cm-header a:hover{color:#e6e6e6;text-decoration:none}
.cm-outer .cm-content{overflow:hidden}
.cm-content{margin-left:60px}
.cm-outer img{display:block;float:left;background:#8fa2cb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd-v3S-Eo_EplTqWpL0I9slIEmiNJXzsv7QfhAW1FgMAGfcqWiYMOnPDTsOKK5BnslZ-QJp96wyZaCDsFOzYK8QXPO9F6OGggsn75iUvpY84KPhq-8MNwH-H0aauZznGFnThyV1nmr7jk/s1600/anon5.png) no-repeat 50% 50%;overflow:hidden;border-radius:3px;position:absolute;top:10px;left:0;border:3px solid #FFF}
.cm-footer{margin-top:7px}
.cm-footer a{color:#d35400;text-decoration:none}
.cm-footer a:hover{color:#000;text-decoration:none}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6aTmoQsQ0vcLDjS6038Lua_lBxpHis5urLHXf2_mQvBT12omeoiwRRKM6GcyF0dIFdcdbDDwOWiZej9He9m4RutXgReLz9wcPBNdETsZVcqo0SFGfaBAR7fSuk_cWnJCOJrzifyvbjM/s80-c/gravatar.png)}
.bg_hitam{display:none;position:absolute;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:99;opacity:.3}
.sticky{position:fixed;top:42px;z-index:100}
.comments
.thanks-comment{position:relative;margin:10px 0;padding-left:40px;font-style:italic;font-size:16px;}
.comments
.thanks-comment:before{content:open-quote;position:absolute;top:0;left:0;margin-top:15px;font-size:4em;color:#d80556}</style>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://zimibot.blogspot.com",
max_result: 14,
t_w: 50,
t_h: 50,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function(total) {
document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
$('.gb_z').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('gb_z').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document)
.ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
$('.jsfiddle-demo').each(function() {
$(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
});
}, 5000);
//]]>
</script>
<script>//<![CDATA[
var cm_config_defaults = {
home_page: "http://zimibot.blogspot.com",
max_result: 15,
t_w: 50,
t_h: 50,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true,
},
_cookie = {
set: function(g, f, j) {
var i, h;
if (j) {
i = new Date();
i.setTime(i.getTime() + (j * 24 * 60 * 60 * 1000));
h = "; expires=" + i.toGMTString()
} else {
h = ""
}
document.cookie = g + "=" + f + h + "; path=/"
},
get: function(f) {
var e = f + "=",
h = document.cookie.split(";"),
j;
for (var g = 0; g < h.length; g++) {
j = h[g];
while (j.charAt(0) == " ") {
j = j.substring(1, j.length)
}
if (j.indexOf(e) == 0) {
return j.substring(e.length, j.length)
}
}
return null
},
del: function(b) {
this.set(b, "", -1)
}
},
tt_cm = (_cookie.get("tt_cm")) ? _cookie.get("tt_cm") : 0,
doc_title = document.title;
for (var i in cm_config_defaults) {
cm_config_defaults[i] = (typeof(cm_config[i]) == "undefined") ? cm_config_defaults[i] : cm_config[i]
}
function showRecentComments(json) {
var entry = json.feed.entry,
total = parseInt(json.feed.openSearch$totalResults.$t, 10),
skeleton = "",
oldCount = tt_cm,
co = cm_config_defaults;
var totalComments = total - oldCount > 50 ? '50+' : total - oldCount;
if (oldCount < total) {
if (cm_config.alert === true) {
alert((total - oldCount) + cm_config.new_cm)
} else {
if (cm_config.alert === false) {
document.title = "(" + (total - oldCount) + cm_config.new_cm + ") " + document.title
} else {
cm_config.alert((total - oldCount), cm_config.new_cm)
}
}
}
skeleton = '<ul class="cm-outer">';
for (var i = 0; i < entry.length; i++) {
for (var j = 0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
break
}
}
var dash = link.lastIndexOf("/") + 1,
dot = link.lastIndexOf("."),
title = link.split("-").join(" ").substring(dash, dot) + "…";
author = entry[i].author[0], name = author.name.$t, avatar = author.gd$image.src.replace(/\/s[0-9]+(\-c|\/)/, "/s" + co.t_w + "$1").replace(/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i, "").replace(/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i, ".$1"), profile = (author.uri) ? author.uri.$t : "#nope", u = entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/, "http://www.blogger.com/delete-comment.g?blogID=$1&postID=$2"), r = entry[i]["thr$in-reply-to"].source.split("default/")[1], d = entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/, "http://www.blogger.com/comment-iframe.g?blogID=$1&postID=" + r + "&parentID=$2"), date = entry[i].gd$extendedProperty[1].value, content = ("content" in entry[i]) ? entry[i].content.$t.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1</pre>").replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1</code>").replace(/<i rel="linku">(.*?)<\/i>/ig, "<a class='allow' href='$1'>\{link\}</a>").replace(/:D/ig, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmnNw7qwZuKj_njtVWfZ-_A-NDc0W_BgiJGM6Fk4dhHWa0rUO4NGPY9osQs09GyL13dcbv7-bToVMGUDsoA0NGLkokmPypCxfZ-Edv6pb7xFCFjctcnYUrk0Jq3_xMNUsLdTjCeyF5Slk/s1600/icon_smile.gif' alt='' class='cm-smiley'/>").replace(/:\)/ig, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIUNBHmBJXY2Ra6PhyphenhyphenJj9ZxkR2bHpRgtRoAL7UnB9nEZDwWtu_sCtK3Qz9qPe8cp6brFUWIs3jpyogdZBcDXX1RZ3YlsMmF0jGG_Rf8cqcqVAZ_KSpZ7XXVKp3IFui4uaQSxAARaQYRU/s1600/smile1.gif' alt='smile' class='cm-smiley'/>") : "", nt = (co.new_tab_link) ? ' target="_blank"' : "";
content = (content.length > co.summary) ? content.substring(0, co.summary) + "…" : content;
skeleton += "<li>";
skeleton += '<div class="cm-header"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + "px;height:" + co.t_h + 'px;" src="' + avatar + '"></a><span class="author"><a href="' + profile + '" rel="nofollow">' + name + '</a> pada <a href="' + link + '" title="' + title + '"' + nt + " rel=>" + title + "</a></div></span>";
skeleton += '<div class="cm-content">';
skeleton += '<span class="cm-text">' + content + "</span>";
skeleton += '<div class="cm-footer">' + date + ' <a href="' + d + '" onclick="window.open(this.href,'_cf','scrollbars=1,width=470,height=250,left=355,top=135');return false;" title="Balas komentar">Balas</a> | <a href="' + u + '" title="Hapus komentar" target="_blank">Hapus </a></span> </span>';
skeleton += "</div></li>"
}
skeleton += "</ul>";
document.getElementById(co.ct_id).innerHTML = skeleton;
_cookie.set("tt_cm", total, 7000);
tt_cm = total
}(function() {
var head = document.getElementsByTagName("head")[0],
script = document.createElement("script"),
co = cm_config_defaults;
script.type = "text/javascript";
script.id = "cm-feed-script";
script.src = co.home_page + "/feeds/comments/default?alt=json-in-script&redirect=false&max-results=" + co.max_result + "&callback=showRecentComments";
head.appendChild(script);
setInterval(function() {
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.id = "cm-feed-script";
newScript.src = co.home_page + "/feeds/comments/default?alt=json-in-script&redirect=false&max-results=" + co.max_result + "&callback=showRecentComments";
var oldScript = document.getElementById("cm-feed-script");
oldScript.parentNode.removeChild(oldScript);
head.appendChild(newScript)
}, co.interval)
})();
//]]></script>
</div>
<div class='follow-me' id='follow-me'><b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
<h2 class='title'><data:title/></h2>
<b:else/>
<b:if cond='data:totalFollowerCount != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>
</b:if>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<div style='margin-right:2px;'>
<data:codeSnippet/>
</div>
<b:else/>
<b:if cond='data:totalFollowerCount == ""'>
<span class='item-control following-not-admin'>
<b><data:failureSnippet/></b>
</span>
<span class='item-control blog-admin'>
<b><data:adminFailureSnippet/></b>
</span>
<b:else/>
<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>
<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>
<!--
Relies on the js written out in navbar.gxp
-->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>
<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>
</b:if>
</b:if>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='gb_y gb_5a gb_e' id='gbwa'>
<div class='gb_Va'>
<a aria-expanded='false' aria-haspopup='true' class='gb_z gb_Ea' data-ved='0CAMQvSc' href='http://www.google.co.id/intl/id/options/' title='Aplikasi'>
</a>
<div class='gb_9'>
</div>
<div class='gb_8'>
</div>
</div>
<div aria-hidden='true' aria-label='Aplikasi' class='gb_Lb gb_A gb_L gb_S' role='region'>
<ul aria-dropeffect='move' class='gb_C gb_w'>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:0'>
<a class='gb_b' data-pid='119' data-ved='0CAQQwS4oAQ' href='https://plus.google.com/u/0/?tab=wX' id='gb119'>
<span class='gb_p' style='background-position:0 -1500px'>
</span>
<span class='gb_q'>
+Harris
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:1'>
<a class='gb_b' data-pid='1' href='https://www.google.co.id/webhp?tab=ww&ei=FeLYU86AL5Xp8AWQjYLwDA&ved=0CAUQqS4oAg' id='gb1'>
<span class='gb_p' style='background-position:0 -763px'>
</span>
<span class='gb_q'>
Telusuri
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:2'>
<a class='gb_b' data-pid='36' data-ved='0CAYQwS4oAw' href='https://www.youtube.com/?gl=ID' id='gb36'>
<span class='gb_p' style='background-position:0 -1224px'>
</span>
<span class='gb_q'>
YouTube
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:3'>
<a class='gb_b' data-pid='8' data-ved='0CAcQwS4oBA' href='https://maps.google.co.id/maps?hl=id&tab=wl' id='gb8'>
<span class='gb_p' style='background-position:-35px -245px'>
</span>
<span class='gb_q'>
Maps
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:4'>
<a class='gb_b' data-pid='5' href='https://news.google.co.id/nwshp?hl=id&tab=wn&ei=FeLYU86AL5Xp8AWQjYLwDA&ved=0CAgQqS4oBQ' id='gb5'>
<span class='gb_p' style='background-position:0 -1155px'>
</span>
<span class='gb_q'>
Warta
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:5'>
<a class='gb_b' data-pid='23' data-ved='0CAkQwS4oBg' href='https://mail.google.com/mail/?tab=wm' id='gb23'>
<span class='gb_p' style='background-position:0 -832px'>
</span>
<span class='gb_q'>
Gmail
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:6'>
<a class='gb_b' data-pid='25' data-ved='0CAoQwS4oBw' href='https://drive.google.com/?tab=wo&authuser=0' id='gb25'>
<span class='gb_p' style='background-position:0 0'>
</span>
<span class='gb_q'>
Drive
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:7'>
<a class='gb_b' data-pid='24' data-ved='0CAsQwS4oCA' href='https://www.google.com/calendar?tab=wc' id='gb24'>
<span class='gb_p' style='background-position:0 -1086px'>
</span>
<span class='gb_q'>
Kalender
</span>
</a>
</li>
</ul>
<div class='gb_N gb_Kb'>
<div class='gb_O gb_p' style='background-position:0 -763px'>
</div>
<div class='gb_P'>
<div class='gb_Q'>
Telusuri
</div>
<a class='gb_R gb_Tb' href='#'>
Tambahkan pintasan
</a>
</div>
</div>
<a aria-expanded='false' aria-hidden='true' class='gb_D gb_Tb' href='http://www.google.co.id/intl/id/options/'>
Lainnya
</a>
<span class='gb_E'>
</span>
<ul aria-dropeffect='move' aria-hidden='true' class='gb_C gb_x'>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:8'>
<a class='gb_b' data-pid='51' data-ved='0CAwQwS4oCQ' href='https://translate.google.co.id/?hl=id&tab=wT' id='gb51'>
<span class='gb_p' style='background-position:0 -1431px'>
</span>
<span class='gb_q'>
Terjemahan
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:9'>
<a class='gb_b' data-pid='10' href='http://books.google.co.id/bkshp?hl=id&tab=wp&ei=FeLYU86AL5Xp8AWQjYLwDA&ved=0CA0QqS4oCg' id='gb10'>
<span class='gb_p' style='background-position:0 -1293px'>
</span>
<span class='gb_q'>
Buku
</span>
</a>
</li>
<li aria-grabbed='false' class='gb_l' id='ogbkddg:a'>
<a class='gb_b' data-pid='31' data-ved='0CA4QwS4oCw' href='https://plus.google.com/u/0/photos?tab=wq' id='gb31'>
<span class='gb_p' style='background-position:0 -1695px'>
</span>
<span class='gb_q'>
Foto
</span>
</a>
</li>
</ul>
<a aria-hidden='true' class='gb_E gb_Mb' href='http://www.google.co.id/intl/id/options/'>
Masih banyak lagi dari Google
</a>
</div>
</div>
<div class='gb_Ua gb_5a gb_e'>
<div class='gb_Va'>
<div id='show-total'/>
<a aria-expanded='false' aria-haspopup='true' aria-label='0 Pemberitahuan Belum Dibaca' class='gb_z' href='javascript:toggle3()' title='0 Pemberitahuan Belum Dibaca'>
<div class='gb_Wa gb_Ea gb_zc'>
</div>
</a>
<div class='gb_9'>
</div>
<div class='gb_8'>
</div>
</div>
<div aria-hidden='true' aria-live='assertive' class='gb_A'>
</div>
</div>
<div class='gb_Cb gb_5a gb_e gb_zc gb_Hb'>
<div class='gb_Va'>
<a aria-expanded='false' aria-haspopup='true' class='gb_z' href="javascript:toggle5()" title='Bagikan di Google+'>
<div class='gb_Db gb_Ea'>
<div class='gb_Fb gb_Ea'>
</div>
</div>
<div class='gb_Eb gb_Ea'>
<span class='gb_Ib'>
Berbagi
</span>
</div>
</a>
<div class='gb_9'>
</div>
<div class='gb_8'>
</div>
</div>
<div aria-hidden='true' class='gb_A'>
</div>
</div>
<div class='gb_4 gb_5a gb_Hc gb_e'>
<div class='gb_Va gb_6 gb_Hc gb_e'>
<a aria-expanded='false' aria-haspopup='true' class='gb_z gb_7 gb_e' href='https://plus.google.com/u/0/me?tab=wX' title='Account Harris Munahar (harris.munaharr@gmail.com)'>
<span class='gb_X gbii'>
</span>
</a>
<div class='gb_9'>
</div>
<div class='gb_8'>
</div>
</div>
<div aria-hidden='true' aria-label='Account Information' class='gb_aa gb_A' tabindex='0'>
<div class='gb_da'>
<a class='gb_ea gb_Tb' href='https://plus.google.com/u/0/me?tab=wX'>
<div class='gb_0 gbip' title='Ikon Profil Google+'>
</div>
<span class='gb_ga'>
Ubah foto
</span>
</a>
<div class='gb_fa'>
<div class='gb_ha'>
Harris Munahar
</div>
<div class='gb_ia'>
harris.munaharr@gmail.com
</div>
<div class='gb_ca'>
<a href='https://www.google.com/settings?ref=srch'>
Akun
</a>
–
<a href='http://www.google.co.id/intl/id/policies/'>
Privasi
</a>
</div>
<a class='gb_Pb gbp1 gb_U' href='https://plus.google.com/u/0/me?tab=wX'>
Lihat profil
</a>
</div>
</div>
<div aria-hidden='true' class='gb_na gb_Kb'>
<a class='gb_oa gb_pa' href='https://www.google.co.id/webhp?authuser=0'>
<img alt='Ikon Profil Google+' class='gb_ra' data-src='//lh6.googleusercontent.com/-6jlfpXcUzvw/AAAAAAAAAAI/AAAAAAAAAAA/TSMErQib5JU/s48-c/photo.jpg' src='data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA='/>
<div class='gb_sa'>
<div class='gb_ta'>
Harris Munahar
</div>
<div class='gb_ua'>
harris.munaharr@gmail.com (default)
</div>
</div>
</a>
</div>
<a aria-hidden='true' class='gb_va gb_Kb' href='https://plus.google.com/u/0/dashboard'>
<span class='gb_wa gb_Ea'>
</span>
Semua laman Google+ Anda ›
</a>
<div class='gb_ja'>
<div>
<a class='gb_Nb gb_U' href=''>
Tambahkan akun
</a>
</div>
<div>
<a class='gb_Qb gb_Xb gb_U' href='' id='gb_71' target='_top'>
Keluar
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='gb_za gb_e gb_Da' id='gbq1' style='max-width:127px;min-width:127px'>
<div class='gb_Aa'>
<a class='gb_Rb gb_Ca' href='/webhp?tab=ww&ei=FeLYU86AL5Xp8AWQjYLwDA&ved=0CBIQ1S4' title='Ke Beranda Google'>
<span class='gb_Ea'>
</span>
</a>
</div>
</div>
<div class='gb_e gb_pb'>
<div id='gbq'>
<div class='gbt' id='gbq2'>
<div class='gbqfr' id='gbqfw'>
<form action='/search' class='gb_Vb' id='gbqf' method='get'>
<fieldset class='gbqff gb_e' id='gbqff'>
<div class='gbqfwa ' id='gbfwa'>
<div class='gbqfqw' id='gbqfqw'>
<div class='gbqfqwc' id='gbqfqwb'>
<a class='infoment' href='javascript:toggle4()' id='infoment'/>
<div class='informasi' id='informasi'><a href='javascript:toggle4()' id='tanda-silang'/>
<div style='margin-bottom: 15px;'>
<style type='text/css'>
#rp_plus_img {
height: 100%;
overflow: hidden;
border: solid 0px #585858;
margin-top: -2px;
padding: 1px;
}#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a {
color: #FFFFFF;
text-decoration: none;
text-shadow: 0px 0px 2px black;
}#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:-26px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:40px;height:40px;}
.news-title.clearfix {
background: rgba(255, 255, 255, 1);
border-radius: 0px;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id='rp_plus_img'>
<script style='text/javascript'>
var numposts = 20;
var numchars = 85;
</script>
<script>//<![CDATA[
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiqflV1x_-ojfiZohgKV7Kwh4kDSq1QxdsPCbl_HKBO9swj7Q-BumjJveaxFPSvVHklDIivWh2VaNeZps0XIj5jUc7TyPBk_KBhoCWBnIXgVFy2ZafIvR9eSEVipT6CqQ5yoQTIUmzLpd/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://catatan-piper-comex.blogspot.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul.cm-outer li:last').hide().remove();
$('ul.cm-outer').prepend(last);
$('ul.cm-outer li:first').slideDown("slow")
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
//]]></script>
<script src='http://zimibot.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt'/>
</ul>
</div>
</div>
<table cellpadding='0' cellspacing='0' class='gstl_0 lst-t' id='gs_id0' style='height: 27px; padding: 0px;'>
<tbody>
<tr>
<td dir='ltr' id='gs_ttc0' style='white-space: nowrap;'>
</td>
<td class='gsib_a' id='gs_tti0'>
<div id='gs_lc0' style='position: relative;'>
<input class='gbqfif' id='gbqfq' maxlength='255' name='q' style='border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;' type='text'/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</fieldset>
<div class='gb_e gb_Ub' id='gbqfbw'>
<button aria-label='Penelusuran Google' class='gbqfb' id='gbqfb' type='submit'>
<span class='gbqfi gb_Ea'>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id='gbw'>
</div>
</div>
<div id='gba'>
</div>
</div>
Comments