Membuat Toolbar Untuk Demo Pada Blog

Pernah melihat website penyedia template untuk blogger ? pernah melihat demonya? nah pasti di demo itu ada toolbar diatasnya ya kan? nah tutorial kami ini saya akan memberikan cara yang sangat dicari cari orang udah lama gak update soalnya saya abis ngeberesin nih blog jasa pembuatan blog silahkan disimak

Langkah Pertama

Buatlah Laman pada blog anda. Silakan beri nama dengan keinginan anda sendiri. Pada tutorial kali ini Kang Onk mau memberikan contoh laman yang akan dibuat dengan URL adalah http://warungtutorial.com/p/demo.html
Langkah Kedua

Pilihlah Rancangan pada dasbor blogger untuk mengeditHTML Template yang anda terapkan dalam blog anda, lalu cari kode </head>

Jika ketemu, silakan Copy Paste kode berikut sebelum kode</head>

<b:if cond='data:blog.url == "URL LAMAN ANDAl"'>
<script src='http://kodtemplate.googlecode.com/files/jquery_toolbar.js' type='text/javascript'/>
<script src='http://kodtemplate.googlecode.com/files/toolbar_iframe.js' type='text/javascript'/>
<style type='text/css'>
body{background:transparant;color:#333;font-family:arial;font-size:12px}a{outline-style:none;color:#0696cb;font-size:11px;text-decoration:none}#navbar-iframe{display:none}html,#iframe{overflow:hidden}#iframe,iframe{width:100%;height:100%;border:none}#iframe{margin-top:31px}.likefb,.google_plus,.twitter{float:left;margin:0 3px 0 0 !important;padding:4px 0 0 1px}.likefb{width:90px !important}.google_plus{width:63px !important}.twitter{width:95px !important}#toolbar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;width:100%;height:0px;border-bottom:0px solid #CDCDCD;margin:0;padding:0}#nav-menu-label{float:right;margin:0px;padding:0px}.text-style{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rSSv5TJW1uMGWigKQxT2tw6nVKYk8lhCnsGMkD5UzWQIbPT8rCEnMlEsZReahYEo5RZc4ROX_2nEjkVEmGNepMkQeC1YILgAPtZqbdaAXqZxVrxqLQJE0IL9-0oxDdRa6o8482RFOko/s200/bc_separator.png) no-repeat;color:#333;display:block;font-size:12px;font-family:arial,verdana,georgia;font-weight:normal;text-transform:normal;margin:0;border-left:0px solid #CDCDCD;padding:8px 4px 8px 14px;height:14px}.text-style:hover{color:#F60;cursor:pointer;height:14px}#nav-menu-label{float:right;margin:0px;padding:0px}#nav-menu-label ul{float:left;list-style:none;margin:0px;padding:0px}#nav-menu-label li{list-style:none;margin:0px;padding:0px}#nav-menu-label li a,#nav-menu-label li a:link,#nav-menu-label li a:visited{color:#333;display:block;font-size:12px;font-family:arial,verdana,georgia;font-weight:normal;text-transform:normal;margin:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rSSv5TJW1uMGWigKQxT2tw6nVKYk8lhCnsGMkD5UzWQIbPT8rCEnMlEsZReahYEo5RZc4ROX_2nEjkVEmGNepMkQeC1YILgAPtZqbdaAXqZxVrxqLQJE0IL9-0oxDdRa6o8482RFOko/s200/bc_separator.png) no-repeat;padding:8px 3px 6px 14px}#nav-menu-label li a:hover,#nav-menu-label li a:active{color:#F60;margin:0px;padding:8px 3px 6px 14px;text-decoration:none}#nav-menu-label li li a,#nav-menu-label li li a:link,#nav-menu-label li li a:visited{background:#f5f5f5;width:90px;color:#333;font-size:11px;font-family:arial,Times New Roman;font-weight:normal;text-transform:normal;float:none;margin:0px;padding:4px 10px 4px 10px;border-top:1px solid #fff;border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD}#nav-menu-label li li a:hover,#nav-menu-label li li a:active{background:#fff;color:#F60;padding:4px 10px 4px 10px}#nav-menu-label li{float:left;padding:0px}#nav-menu-label li ul{z-index:999;position:absolute;left:-999em;height:auto;width:100px;margin:0px;padding:0px}#nav-menu-label li li{}#nav-menu-label li ul a{width:100px}#nav-menu-label li ul a:hover,#nav-menu-label li ul a:active{}#nav-menu-label li ul ul{margin:-31px 0 0 100px}#nav-menu-label li:hover ul ul,#nav-menu-label li:hover ul ul ul,#nav-menu-label li.sfhover ul ul,#nav-menu-label li.sfhover ul ul ul{left:-999em}#nav-menu-label li:hover ul,#nav-menu-label li li:hover ul,#nav-menu-label li li li:hover ul,#nav-menu-label li.sfhover ul,#nav-menu-label li li.sfhover ul,#nav-menu-label li li li.sfhover ul{left:auto}#nav-menu-label li:hover,#nav-menu-label li.sfhover{position:static}#src-bar{border:1px solid #C9D7F1; height:18px;width:130px;padding:0; background:#f6f4f4}#src-bar input{border:0; background:none; color:#575757}#s-bar{font-size:11px;width:120px;padding-left:4px; margin:0; background:none}#tsrc-bar #src-bar{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFF;border:1px solid #CDCDCD}#tsrc-bar #s-bar{width:105px}#mta_bar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x; overflow:hidden;padding-top:0px;width:100%;height:30px;display:block;border-bottom:1px solid #cdcdcd}#mta_bar .bar_logo{float:left; padding-left:8px;text-align:left;font-family:Arial;font-size:17px;font-weight:bold;font-style:normal;color:#333;width:120px;padding-top:2px}#mta_bar .bar_logo a{background:url(https://dev.twitter.com/sites/all/themes/twitter_commons/favicon.ico) 0px no-repeat;text-decoration:none;color:#333;padding-left:21px}#mta_bar .bar_logo a:hover{text-decoration:underline;color:#F60}#mta_bar .bar_search{float:left; padding-top:5px;margin:0px;text-align:left;font-family:tahoma;font-weight:bold;font-style:normal;color:#333;width:140px}#mta_bar .bar_search a{text-decoration:none;color:#333;padding-left:10px;padding:0}#mta_bar .bar_search a:hover{text-decoration:underline;color:#F60}#mta_bar .bar-menu-label{float:right;text-align:left;font-family:tahoma;font-size:13px;font-weight:normal;font-style:normal;color:#333;width:520px;padding:0px}#mta_bar .bar-menu-label a{text-decoration:none}#mta_bar .bar-download{float:left; text-align:left;font-family:arial;font-size:13px;font-weight:normal;font-style:normal;color:#333;padding:6px 3px;width:65px}#mta_bar .bar-download a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCRFQMYFOC1dgtGYGJ5PlelrXHwjC8pcG6uB36kMhk6fnVXmRJ6DHUlwoinO-IwmdvtdxZBgU6JhMEkSNPM4OJlg20-gnl7DPISOKnnFORzJdLvp4Ugcypgk6AcFgFshfQDTDtFKmWlM/s200/submit-c.png) 0px no-repeat;text-decoration:none;color:#333;padding-left:17px}#mta_bar .bar-download a:hover{text-decoration:underline;color:#F60}#mta_bar .bar_hide{float:right; text-align:left;font-family:arial;font-size:13px;font-weight:bold;font-style:normal;color:#333;padding:7px 0 0 5px;width:20px}#mta_bar .bar_hide a{background:url(http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png) no-repeat;text-decoration:none;color:#333;padding-left:20px}#mta_bar .bar_hide a:hover{text-decoration:underline;color:#F60}#mta_bar .bar_fb{float:left;width:70px;padding-top:6px;padding-left:2px;margin:0px}
</style>
</b:if>

Cari kode <body>, letakkan kod berikut dibawahnya

<b:if cond='data:blog.url != "URL LAMAN ANDA"'>

Pada akhir template anda, ganti kode </body> dengan kode dibawah ini

<b:if cond='data:blog.url == "URL LAMAN ANDA"'>
<div id='toolbar'>
<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div class='mta_bar bar_search'>
<div id='tsrc-bar'>
<div id='src-bar'>
<form action='http://klik-template.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-bar' name='s' onblur='if (this.value == "") {this.value = "Search Template..";}' onfocus='if (this.value == "Search Template..") {this.value = ""}' type='text' value='Search Template..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyt4qIUVIfyUDJkh_N8Pia5UR3L9jKM7xSGM-gorqJ3Hi5nWsNfC3fNjfkZU6YTcnYyVqoSSUBjD8dmv2hD4j0qOe7-oQB1-FXb_mOQu28dlc7qeNf8hGrr9ILisMJItMe3BSKOVSqwA/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
<div class='mta_bar bar-download'>
<a href='http://klik-template.blogspot.com/p/submit-template.html' rel='nofollow' title='Submit Your Templates For Free'>Submit</a>
</div>
<div class='mta_bar bar_fb'>
<span style='float:left;width:60px;padding-right:4px'>

<g:plusone href='http://klik-template.blogspot.com/' size='medium'/>
</span>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like colorscheme='light' font='arial' height='25' href='http://www.facebook.com/zona.kangfathur' layout='button_count' width='70'/>
</div>
<div class='mta_bar bar_hide'>
<a href='javascript:void(0);' id='close'/>
</div>
<div class='mta_bar bar-menu-label'>
<div id='NavbarMenuleft'>
<ul id='nav-menu-label'>
<li>
<div class='text-style'>Coloums ▼</div>
<ul><li>
<a href='/search/label/1%20Column?&max-results=9'>1 Column</a></li>
<li><a href='/search/label/2%20Column?&max-results=9'>2 Column</a></li>
<li><a href='/search/label/3%20Column?&max-results=9'>3 Column</a></li>
<li><a href='/search/label/4%20Column?&max-results=9'>4 Column</a></li>
<li><a href='/search/label/Multi%20Column?&max-results=9'>Multi Column</a></li>
</ul></li><li>
<div class='text-style'>Sidebars ▼</div>
<ul>
<li>
<a href='/search/label/1%20Left%20Sidebar?&max-results=9'>1 Left Sidebar</a></li>
<li><a href='/search/label/2%20Left%20Sidebar?&max-results=9'>2 Left Sidebar</a></li>
<li><a href='/search/label/1%20Right%20Sidebar?&max-results=9'>1 Right Sidebar</a></li>
<li><a href='/search/label/2%20Right%20Sidebar?&max-results=9'>2 Right Sidebar</a></li>
<li><a href='/search/label/Left%20and%20Right?&max-results=9'>Left and Right</a></li>
</ul></li><li>
<div class='text-style'>Colors ▼</div>
<ul>
<li><a href='/search/label/Black?&max-results=9'>Black</a></li>
<li><a href='/search/label/Blue?&max-results=9'>Blue</a></li>
<li><a href='/search/label/Brown?&max-results=9'>Brown</a></li>
<li><a href='/search/label/Green?&max-results=9'>Green</a></li>
<li><a href='/search/label/Gray?&max-results=9'>Gray</a></li>
<li><a href='/search/label/Orange?&max-results=9'>Orange</a></li>
<li><a href='/search/label/Pink?&max-results=9'>Pink</a></li>
<li><a href='/search/label/Red?&max-results=9'>Red</a></li>
<li><a href='/search/label/Violet?&max-results=9'>Violet</a></li>
<li><a href='/search/label/White?&max-results=9'>White</a></li>
<li><a href='/search/label/Yellow?&max-results=9'>Yellow</a></li>
</ul>
</li>
<li>
<div class='text-style'>Styles ▼</div>
<ul>
<li><a href='/search/label/Elegant?&max-results=9'>Elegant</a></li>
<li><a href='/search/label/Facebook?&max-results=9'>Facebook</a></li>
<li><a href='/search/label/Free%20Premium?&max-results=9'>Free Premium</a></li>
<li><a href='/search/label/Floral?&max-results=9'>Floral</a></li>
<li><a href='/search/label/Gallery?&max-results=9'>Gallery</a></li>
<li><a href='/search/label/Joomla%20Look?&max-results=9'>Joomla Look </a></li>
<li><a href='/search/label/Magazine?&max-results=9'>Magazine</a></li>
<li><a href='/search/label/Simple?&max-results=9'>Simple</a></li>
<li><a href='/search/label/Unique?&max-results=9'>Unique</a></li>
<li><a href='/search/label/Twitter?&max-results=9'>Twitter</a></li>
<li><a href='/search/label/Web%202.0?&max-results=9'>Web 2.0</a>
</li></ul></li><li>
<div class='text-style'>Topics ▼</div>
<ul>
<li><a href='/search/label/Animals?&max-results=9'>Animals</a></li>
<li><a href='/search/label/Books?&max-results=9'>Books</a></li>
<li><a href='/search/label/Cartoon?&max-results=9'>Cartoon</a></li>
<li><a href='/search/label/City?&max-results=9'>City</a></li>
<li><a href='/search/label/Culture?&max-results=9'>Culture</a></li>
<li><a href='/search/label/Fantasy?&max-results=9'>Fantasy</a></li>
<li><a href='/search/label/Fashion?&max-results=9'>Fashion</a></li>
<li><a href='/search/label/Game?&max-results=9'>Game</a></li>
<li><a href='/search/label/Girly?&max-results=9'>Girly</a></li>
<li><a href='/search/label/Health?&max-results=9'>Health</a></li>
<li><a href='/search/label/Movie?&max-results=9'>Movie</a></li>
<li><a href='/search/label/Music?&max-results=9'>Music</a></li>
<li><a href='/search/label/Natural?&max-results=9'>Natural</a></li>
<li><a href='/search/label/News?&max-results=9'>News</a></li>
<li><a href='/search/label/Online%20Store?&max-results=9'>Online Store</a></li>
<li><a href='/search/label/Personal?&max-results=9'>Personal</a></li>
<li><a href='/search/label/Space?&max-results=9'>Space</a></li>
<li><a href='/search/label/Sport?&max-results=9'>Sport</a></li>
<li><a href='/search/label/Vector?&max-results=9'>Vector</a></li>
<li><a href='/search/label/Video?&max-results=9'>Video</a>
</li></ul></li><li>
<div class='text-style'>Features ▼</div>
<ul>
<li><a href='/search/label/Ads%20Ready?&max-results=9'>Ads Ready</a></li>
<li><a href='/search/label/Bookmark%20Ready?&max-results=9'>Bookmark Ready</a></li>
<li><a href='/search/label/Custom%20Navbar?&max-results=9'>Custom Navbar</a></li>
<li><a href='/search/label/SEO%20Ready?&max-results=9'>SEO Ready</a></li>
<li><a href='/search/label/Slideshow?&max-results=9'>Slideshow</a></li>
</ul></li><li>
<div class='text-style'>Width ▼</div>
<ul>
<li><a href='/search/label/Fixed?&max-results=9'>Fixed</a></li>
<li><a href='/search/label/Fluid?&max-results=9'>Fluid</a></li>
</ul></li></ul>
</div>
</div>
</div>
</div>
<div style='clear: both;'/>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>

Simpan Template anda dan lihat hasilnya

Catatan :

Ganti URL LAMAN ANDA dengan laman yang anda buat
cara menulisan untuk demonya adalah http://namablogkamu.blogspot.com/p/demo.html?iframe=livedemoblog.blogspot.com/

Portal Berita Pendidikan

Membuat Toolbar Untuk Demo Pada Blog

Posting Komentar

Sponsor

Popular Post