12 years ago
PalmaHutabarat | Setelah selesai mengobrak abrik template saya akan share tentang Cara membuat widget social media + search melayang cara ini saya dapatkan dari template Cargam. Sebelumnya saya juga sudah Share Cara Membuat Widget Social Media Melayang di Blog. Sebenarnya saya juga baru membuatnya di blog sayaKU SHARE tapi karna teman Kampus saya yang seorang blogger juga terus meminta saya share cara tentang cara membuatnya nah mumpung saya lagi ke habisan ide menulis artikel saya share aja dah mungkin sobat semua juga ada yang pengen membuatnya berikut Contoh nya :Kerenkan sob, masih tertarik ngak membuatnya kalo iyah mari kita praktekan cekidot !!!.
Login akun blogger sobat seperti biasa.
Pilih Template, Klik Edit HTML(Jangan lupa centang Expand Widget Templates).
Cari Kode ]]><b:skin> jika kode tersebut sudah di temukan masukan kode di bawah ini tepat di atas kode tersebut.
#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
* html #outer-wrapper {height:100%;overflow:auto}
.toppica{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwm9bXk06JoFadp3vnS-Pus3HkSsXEcjdFwhEpQdxs8cNcv71y7Ol1FW2ELbm9LthYoeKyUq66DudaKgrnr_4SqchSamquZqB2Dc7YTZZ5kxqAVDm6NQZoMuhaG7B69UfySCUJlG9jExk/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}
.topnav{width: 970px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }
h1{font-size:24px;}
#searcha{float:right;width:180px;height:20px;margin-top:5px;padding-right:5px}
#searcha form{float:left}
#searcha input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqEqJ-G8VHoULYVhSg2_n7UG86vhFOY09I302nkPNiMOe4J8faNKTnJbymtvr037JJhPdhaCHRRAXsKFm0eiFWBZ_FlrYoyZl0t6jZxuyxVqLrAGYBfItVsLe4yd3ZjQ8IqScBcmiqXU/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #ccc;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#searcha input[type="text"]:focus{background:#FFF}
#searcha input[type="submit"]{display:none}
h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', cursive;}
ul.isocial{list-style:none;margin:0;padding:5px 20px 0 0}
ul.isocial li{float:right;margin:0 5px;padding:0}
ul.isocial li a{float:right;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdj_rv6WLSrfS8_Dk8vkpyTS_RWqvAmtQzdXk4cK_Wpte7G5kqcUODbE1VDj627Tu6iAPBLlxYJcpomU0mYaLlFTesnQSGukfkJZQY1LXoDRWedutDy4KZ_r58eNEXKirs9cbs-zKWPvQ/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative}
ul.isocial li a.rss{background-position:0 0}
ul.isocial li a.rss:hover{background-position:0 -25px}
ul.isocial li a.facebook{background-position:-25px 0}
ul.isocial li a.facebook:hover{background-position:-25px -25px}
ul.isocial li a.twitter{background-position:-50px 0}
ul.isocial li a.twitter:hover{background-position:-50px -25px}
ul.isocial li a.google{background-position:-75px 0}
ul.isocial li a.google:hover{background-position:-75px -25px}
ul.isocial li a.youtube{background-position:-100px 0}
ul.isocial li a.youtube:hover{background-position:-100px -25px}
/*Search*/
.menusearch{width:240px;float:right;margin:0 auto;padding:0 auto}
.searchform {margin-top:0px;display: inline-block;zoom: 1;*display: inline;border:1px solid #333;padding:0;background:#fff;width:240px;height:24px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.searchform input {font-size:12px!important;font-weight:normal;font-family:Arial, Helvetica, sans-serif;color:#111;line-height:24px;height:24px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 195px;height:24px;border:0px;outline: none;line-height:24px;}
.searchform .searchbutton {border:none;margin:0;padding:0;font-size:12px;height:22px;width:24px;}
Nah Jika cara diatas sudah dilakukan jangan kemana-mana dulu sob masih ada 1 lagi nich. Silahkan cari kode <div id='header-wrapper'> jika sudah ketemu masukan kode di bawah ini taruh tepat di atas kode <div id='header-wrapper'>.
<div id='fixed'>
<div id='fixedinner'>
<div class='toppica'>
<div class='topnav'>
<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>
Terima Kasih Telah Berkunjung Dan Mampir Diblog Saya</div>
<div id='searcha'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
<div style='float:right;padding:0px 0px 5px 0px;'>
<ul class='isocial'>
<li><a class='rss' href='http://feedburner.google.com/fb/a/mailverify?uri=ID FEED BURNER SOBAT' target='_blank' title='Berlangganan via Email'/></li>
<li><a class='facebook' href='http://www.facebook.com/ID FACEBOOK SOBAT' target='_blank' title='NAMA FACEBOOK SOBAT'/></li>
<li><a class='twitter' href='https://twitter.com/ID TWITTER SOBAT' target='_blank' title='NAMA TWITTER SOBAT'/></li>
<li><a class='google' href='https://plus.google.com/u/0/ID GOOGLE+ SOBAT' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='URL YOUTUBE SOBAT' target='_blank' title='Video '/></li>
</ul>
</div>
</div>
</div></div>
</div>
Note :
Silahkan sobat ganti kode yang bewarna di atas itu dengan ID SOBAT SEMUA.Sendangkan kode yang berwarna ungu itu silahkan ganti dengan kata-kata sesuai keinginan anda.
Cukup segitulah artikel tentang Cara Membuat Widget Social Media + Search Melayang di Atas Headersemoga artikel yang saya tulis sanggat bermanfaat bagi sobat semua. Jika ada salah-salah kata mohon di maafkan. Sob jika anda memang menyukai artikel saya dan inign membomark artikel saya di blog anda mohon sanggat untuk meletakan link sumber karna sudah banyak sekali artikel saya yang saya temukan di COPAS tanpa meletakn link sumber. Memang saya juga dulu seperti itu COPAS dari blog orang untuk melengkapi artikel untuk blog saya tapi waktu saya masih sanggat basic dalam dunia blogger. Tapi andakan sudah lumayan dan juga mengerti bila anda memang blogger sejati mohonlah untuk meletakan linknya. Jika tidak saya akan bertindak tegas terhadap blog anda.
![ResEdit v1.6.3 32bit[x86] And 64bit[x64] Free Download](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRS1UXSD3DxzwGKHwVhDuEhsMmxG0rW1CpHEgwZpcQr1TC9C3vUIwywuHrw-dE8K2S35VUqNWqI0cXptRVnXPl2VB9EuBxCiYvJ2m31xqIzRKyiLrHh69R3XyDo_QUDwYtPjndmuIU6Qw/s415/PH+-+Res+Edit+1.6.3+-+PalmaHutabarat.jpg)
waaahhhh
BalasHapusbelom nyoba
hehehe