06 Agustus 2013

Menghapus/Menghilangkan Navbar di template Blogger


Cara menghilangkan atau menghapus Navbar di template blogspot
Menghapus/Menghilangkan Navbar di template Blogger
Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping style nya yang kurang memuaskan bagi para blogger.


Bagaimana cara Menghapus/Menghilangkan Navbar di template Blogger? Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja. 

Berikut salah satu caranya :
Masuk ke akun blogger anda. Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).


Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
Beri tanda centang pada Expand Template Widget.
Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Lalu, klik Simpan Template.
Note: Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.
Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :
Sama seperti cara pertama. Masuk ke akun blogger anda Klik pada Template.
Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
Beri tanda centang pada Expand Template Widget.
Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
<script type='text/javascript'>
<![CDATA[
<!-- /*<body>*/ -->
]]>
</script>
Simpan Template Anda.
Anda akan melihat gambar konformasi seperti di bawah ini.


Note: Klik Delete Widget untuk menghapus Navbar.
Jika Anda melakukan cara ini, Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.
Untuk cara ketiga dalam Menghapus/Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
bla...
bla...
bla...
</b:widget>
</b:section>
Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.
Silakan Anda pilih cara mana yang Sobat gunakan untuk Menghapus/Menghilangkan Navbar BloggerSaya yakin dari ketiga cara tersebut pasti berhasil.

Widget Share Button for blogspot

Tips memasang Widget Share Button di blogspot
Widget Share Button
Widget Share Button Facebook, Twitter, Google keren di Blogspot, merupakan salah satu kelengkapan blog yang cukup penting.

Seiring dengan perkembangan media sosial, Wid

Widget Share Button pada dasarnya bukan hanya memudahkan pengunjung melakukan share pages di situs kita. Lebih dari itu, hal ini sangat berdampak positif pada blog kita. Karena, bisa menjadi media marketing gratis yang dapat menyebar kemana-mana.

Tertarik?

Untuk itu, ada beberapa cara yang dapat dilakukan. Di antaranya adalah mencoba langkah-langkah berikut ini;

Login ke dasbor blog anda

get Share Button seperti Facebook, Twitter, Google sangat dibutuh sebuah blog saat ini.  Widget ini, memungkinkan kita untuk berbagi secara cepat berbagai konten kepada publik.
  • Pilih rancangan
  • Pilih tambah gadget
  • Pilih Html/Java script
  • Copy kode Html di bawah ini
  • Pastekan di Html/ Java Script dibawah ini
  • Simpan
  • Selesai
<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="  http://expo2012online1.blogspot.com/2012/07/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>
Catatan : untuk tulisan warna PINK anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna BIRU bisa anda hapus jika anda ingin tampilan yang simple.

Contoh hasilnya? Click here ;) Liat disamping sebelah kanan..  Klik suka bila perlu.. hehehe....  

Unite Blogger Template

Template blogspot cantik dengan slider
Unite Blogger Template
Template name : Unite
Release date : July 2012
Author : www.soratemplates.com
Designer : para.llel.us

Template features :
Wordpress Look, 2 Columns, Right Sidebar, 3 Columns Footer, Business, Elegant, Featured Content Slider, Fixed Width, Light Background, Top Navigation Menu, Email Subscription Form.

Basic Instructions : How to install a Blogger Template


Configure Post Date:

Log in to Blogger Dashboard --> Settings --> Format and change this:

If you don't do this, it will display "UNDEFINED".

Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<div id='Slide'>
<img alt='Slide 1' height='341' src='/image.jpg' width='948'/>
..........
Now replace "image.jpg" with your slider image.

Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='sfmenu'>
<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Features</a>
<ul>
<li><a href='#'>Home page</a>
..........
Just replace "#" with your menu item URL. 

Project 10 Fashion Blogger template

Project 10 Fashion Blogger template with slider by sora template
Project 10 Fashion Blogger template
Date Released: Sep, 2012
Designer: Sora Templates
Price: FREE

Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

Template features : Wordpress Look, 3 Columns, 4 Columns Footer, Right Sidebar, Fashion, Featured Content Slider, Fixed Width, Gray Background, Social Widget, Page Navigation Widget.

Basic Instructions : How to install a Blogger Template

Note: You must publish at least 5 posts and your blog must be in public mode, if not, you will be redirect to this site, we're really sorry for caused you this trouble.

Configure Featured Content Slider: 

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<div id='layerslider' style='width: 748px; height: 300px;'>
<div class='ls-layer' rel='slidedelay: 5000'>
<img class='ls-bg' src='/image.jpg'/>
..........
Replace"image.jpg" with your slider image.

Configure Dropdown Menu:


Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='menu' id='menu-top-menu'>
<li><a href='#'><i style='font-family:Ropa Sans;'><span>Homepage</span></i></a></li>
<li><a href='#'><i style='font-family:Ropa Sans;'><span>Blog</span></i></a></li>
     ..........
Just replace "#" with your menu item URL.

Configure Social Widget:


Search for:
<div class='left-social-icons'>
<a class='social-facebook' href='#' target='_blank'><span/></a>
<a class='social-twitter' href='#' target='_blank'><span/></a>
..........
 Just replace "#" with your Social Account URL.

Configure Page Navigation Widget:

search for:
var posts=3, // Number of posts in each page 
       num=2, // Number of buttons will display

Metro Modern Solar Blogger Theme

template Metro Modern Solar Blogger Theme cantik dan SEO Friendly
Metro Modern Solar Blogger Theme

Date Released: Nov, 2012
Designer: Hong Hoa
Price: FREE

Features: SEO Ready
Metro Modern Solar template is optimized for Search engines like Google. This template helps your website to rank higher in search engines. Show a thumbnail image (small image) for every post using this template.
Width of your website adjusts to the user browser resolution. User can enjoy Full page content. Show featured posts in home page using this template. Engage your users by showing your top content in home page. Metro Modern Solar template comes with hierarchical dropdown navigation menu.



Navigation Menu

Open Metro Modern Solar template.xml file in a text editor like notepad for following changes. Find following code in the template. Update the links and text for your navigation menu.
<div id='menu-module'>
<div class='mattblackmenu' id='ddtopmenubar'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='ddsubmenu1'>Freebies</a></li>
<li><a href='#' rel='ddsubmenu2'>Blogging</a> </li>
<li><a href='#' rel='ddsubmenu3'>Blogger</a></li>
<li><a href='#'>Wordpress</a></li>
<li><a href='#' rel='ddsubmenu4'>Marketing Online</a></li>
<li><a href='#'>MMO</a></li>
<li><a href='#' rel='ddsubmenu5'>Others</a> </li>
<li><a href='#' rel='ddsubmenu6'>Tools</a> </li>
</ul>
</div>
<!--Top Drop Down Menu 1 HTML-->
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>Ebooks</a></li>
<li><a href='#'>Wallpapers</a></li>
<li><a href='#'>Web Gallery</a></li>
<li><a href='#'>Others Freebies</a></li>
</ul>
.........
</ul>
Edit the above code and add your navigation links

Featured Posts in Home page

This is going to be little challenging. Follow the steps below carefully.
  • First of all decide which Label (category) you want to use for Featured posts section. In the demo, we used a label called "hothot". All posts from "hothot" label are displayed as Featured post.
  • Go to Layout, Click Edit on Feature Gadget. Make sure ONLY following options are checked in the Show section. Please uncheck if Icons and/or Date of last update is already selected (Title of most recent item and Thumbnail of most recent item)
  • Now, you have to add 5 blog list URLs to display 5 featured posts in the home page. Please add exactly 5 urls. I added following URLs to the blog list
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=1
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=2
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=3
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=4
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=5
Here "hothot" in the url refers to the Label that you want to use. Index number refers to the recent post number to display. Do not forget to change the domain in the above urls. I used http://metro-modern-solar-lovely.blogspot.com to refer to my blog. Use your blog url instead.
  • Now, you are all done. You may have to wait up to 24 hours for this to work. Sometimes it work immediately.

Carousel Slider Widget


This template has a Carousel Slider widget which appears on all post pages. Configuration for this slider is in the template code. Find following code in the template xml file. Update label1 = "hot" with any label you want. We are using "hot" label posts. numposts1 = 15 represents that 15 posts will be loaded in the slider. Change this number as per your wish
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "hot";

Metro Social Widget


In Template code, Find following. Update the social links with your social links
<div class='social'>
<span class='fade'><ul>
<li><a href='http://facebook.com/blogthietke'><img src='http://2.bp.blogspot.com/-QDVCH07Xois/UTPWhsanV8I/AAAAAAAABK4/BhziRxg3KK4/s1600/Facebook+alt+1.png'/></a></li>
<li><a href='#'><img src='http://1.bp.blogspot.com/-bTjkcbUwcMk/UTPWhW3wtuI/AAAAAAAABLE/qsalOcpRG-0/s1600/Google++alt.png'/></a></li>
<li><a href='http://pinterest.com/honghoavi'><img src='http://3.bp.blogspot.com/-aCvgNwCdcTI/UTPWhx3I4qI/AAAAAAAABK8/10x2ZowT8rQ/s1600/Pinterest+alt.png'/></a></li>
<li><a href='http://feeds.feedburner.com/blogthietke'><img src='http://3.bp.blogspot.com/-ZaolXcz404Q/UTPWiKShvzI/AAAAAAAABLA/K5OW3Jcy4ng/s1600/RSS+Feed.png'/></a></li>
<li style='padding:0px'><a href='#'><img src='http://4.bp.blogspot.com/-OHlEUI32044/UTPWihT5wbI/AAAAAAAABLM/VBu99K-pMwI/s1600/YouTube+alt+1.png'/></a></li>
</ul></span><div style='clear: both;'/>
</div>


Pagination


This template comes out of box with pagination. First set how many posts to display per page in Settings -- Posts and comments page. Here you have to update "Show at most" option to the number of posts you want to display per page. Then, go to the template code and find following. Update perPage value to the same value.
var pageNaviConf = {
perPage: 4,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}


Bottom Navigation


You can have Footer navigation links using this template. Go to Layout -- Click Edit on Bottom Navi widget. Paste the following code. Ofcouse, please update the links and text with your navigation links.
<p align = "center" >
<a href = "http://www.lovelytemplates.com/wordpress-themes" > WordPress Themes
<a href = "http://www.lovelytemplates.com/blogger-templates" > Blogger Templates
<a href = "http://www.lovelytemplates.com/wordpress-themes/premium-themes" > Best Premium Themes
<a href = "http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-photography-templates" > Photography WordPress themes
<a href = "http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-business-templates" > Business WP Themes
<a href = "#" > Add your Link
</a></a></a></a></a></a></p>


Meta Description


This template uses Search preferences options for meta description. Go to settings -- Search Preferences and enter a description for your site. This description will come as meta description for your home page. Helpful for Search engines. Also, you can add meta descriptions for every page you create in blogger. This template is completely optimized for SEO.



X7 Blue Black Blogger Template

dark blogspot template, elegant style by Urangkurai
X7 Blue Black Blogger Template
Excellent layout for blogs about business or a diary. Download X7 Blue Black for free in EXPO Theme.

Description:
X7 Blue Black is a free blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, exclusive design for Blogger, social bookmarking icons and posts thumbnails.


Instructions: How to install a Blogger template
Template author: Urangkurai


Sunrise Blogger Template

Sunrise Blogger Template with wordpress look, 3 columns, by sora templateTemplate name : Sunrise
Platform: Blogger / Blogspot
Release date : December 2012
Author : www.soratemplates.com
License : Creative Commons Attribution 3.0
Basic Instructions : How to install a Blogger Template


Template features : 
Wordpress Look, 3 Columns, Right Sidebar, 3 Columns Footer, Music, Featured Content Slider, Fixed Width, Dark Background, Dropdown Menu.


Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<li class='jcarousel-item-1 odd'>
<div class='views-field views-field-field-portfolio-image'>
<div class='field-content'><a href='#'><img src='/image.jpg'/></a></div></div>
<div class='views-field-title'>Aenean sodales dapibus.</div>
<div class='clearfix'>
<div class='button'><a href='#'>more</a></div>
</div>
</div>
</div></span>
</div>
</li>
   ..........
Replace:
  • "#" with your featured post URL.
  • "image.jpg" with your slider image URL.

Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='sf-menu' id='superfish-1'>
<li><a href='#'>Events</a></li>
<li><a href='#'>Artists</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Gallery</a>
<ul>
<li><a href='#'>Gallery 1 col</a></li>
<li><a href='#'>Gallery 2 cols</a></li>
..........
Replace "#" with your menu item URL.

Newline Blogger Template

Newline Blogger Template with slider by Sora Templates
Newline Blogger Template


Template name : Newline
Platform: Blogger / Blogspot
Release date : Jul 2013
Author : www.soratemplates.com


 Template features :
Blogging, Youtube, Corporate, Featured Content Slider, Fixed Width, Dropdown Menu, Social Widget, Gray Background, Page Navigation.

License : Creative Commons Attribution 3.0

Basic Instructions : How to install a Blogger Template



Configure Featured Content Slider: 

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul id='slider'>
<li> <a href='#'><img height='326' src='../slider1.jpg' width='890'/></a>
</li>
..........
Replace:
  • "#" with your featured post URL.
  • "slider1.jpg" with your slider image.

Configure Dropdown Menu: 

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below: 
<div id='menuwrap'>
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Nivo Slider</a></li>
<li><a href='#'>Piecemaker 2 3D Slider</a></li>
<li><a href='#'>Anything Slider</a></li>
     ..........
Replace "#" with your menu item URL. 

Configure Social Widget:

search for:
<ul id='headersocial'>
<li><a data-rel='fadeimg' href='#'><img src='../facebook.png' title='Facebook'/></a></li>
<li><a data-rel='fadeimg' href='#'><img src='../twitter.png' title='Twitter'/></a></li>
    ..........
Replace "#" with your Social Account's URL. 

Configure Page Navigation Widget:

search for:
var posts=4, // Number of posts in each page
      num=2, // Number of buttons will display