Erik Shared: Tutorial Blogger

Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Membuat Top Menu dengan Kotak Pencarian di Blog.

Ngasal 4/25/2015 Add Comment

Top Menu Dengan Kotak Pencarian - Top menu adalah hanya sekedar menu tambahan dari menu navigasi, biasanya Top menu ini digunakan untuk Link,About,Sitemap,Contact,Disclaimer,etc.

Top menu ini biasa digunakan diatas header, jika anda bingung cara pemasangan pada top menu anda bisa cari kode seperti ini <header atau 'header-wrapper' pada umumnya header menggunakan kode seperti itu, jika sudah ketemu letakan kode pada tutorial dibawah ini di atas header supaya blognya makin Joss.

Untuk yang ingin tau seperti apa Top Menu dengan Kotak Pencarian itu bisa lihat demo dibawah :

Demo

Langsung ke Tutorialnya oke.

1. Login Blogger tentunya

2. Masuk Dashboard Blogger > Menu Blogger > Template

3. Pada Template blogger Klik Edit HTML

4. Cari <header lalu paste kode dibawah ini tepat diatas kode <header

<div id='nav-wrap'>
<nav class='menu'>

<ul class='nav-menu'>
<li><a href='erikshared.my.id'>About</a></li>
<li><a href='erikshared.my.id'>Contact Us</a></li>
<li><a href='erikshared.my.id'>Privacy Policy</a></li>
<li><a href='erikshared.my.id'>Disclaimer</a></li>
</ul>


<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>

</nav>
<div class='clear'></div>
</div>

5. Lalu tinggal kita buat CSS nya. Letakan CSS dibawah dengan mencari kode ]]></b:skin> pada template.

/* ERIKSHARED TOP MENU */
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:block;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}

6. Tinggal Simpan Top menu tadi.

Ohiya jika tidak tampil font awesome nya. Kalian harus memasang dulu font awesome. Simpan kode ini diatas </head> atau juga bisa di bawah <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Nahh segitu dulu tutorial dari saya gan. Semoga blog Kamu kalau pake Top Menu ini bisa menjadi lebih Enak diliat :v #GueNgomongApaSih

Cara Memasang Alexa Rank di Blog 2015

Tutorial Blogger

Ngasal 4/13/2015 2 Comments

Ngasal

Cara Memasang Alexa Rank di Blog 2015 - Hai sobat ? Apa kabar ?. Udah agak lama tidak update artikel lagi, dan akhirnya saya menulis artikel tentang "Cara Memasang Alexa Rank di Blog 2015". Kemarin juga sempat menulis artikel tentang "Cara Membuat Icon Post/Post Info di Blog". Nah langsung saja ikuti tutorial dibawah ini.

Sedikit penjelasan tentang Widget Alexa Rank. Widget ini berfungsi untuk agar kita mengetahui seberapa besar Backlink yang kita peroleh selama menjadi Blogger, dan tentunya juga berfungsi untuk melihat visitor Blog Anda dengan Alexa Rank. Lihat dibawah untuk Tutorialnya.

Script yang digunakan beserta contohnya :

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=erikshared.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=erikshared.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/erikshared.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/b?url=erikshared.blogspot.com" type="text/javascript"></script></a>
KETERANGAN :
√ Ganti url yang berwarna merah dengan url blog Anda/Website Anda.

Cara Memasang Widget Alexa Rank di Blog :

Masuk ke dashboard Blog Anda

Pilih menu "Tata Letak"

Klik "Tambahkan Gadget"

Pilih widget "HTML/Javascript"

Lalu masukan kode/script widget alexa rank yang sudah Anda pilih.

Terakhir klik "Simpan"

Nah segitu ulasan saya kali ini tentang "Cara Memasang Alexa Rank di Blog 2015". Semoga artikel ini dapat bermanfaat bagi Anda. Terima Kasih.

Cara Membuat Icon Info/Post Info di Blog

Tutorial Blogger

Ngasal 4/03/2015 9 Comments

Ngasal

Hai sobat Erik Shared ? Apa kabar ? Sekian lama admin gak update artikel lagi , sekarang admin mau update lagi nih. Tentang "Cara Membuat Icon Info di Blog". Gambar/Demo bisa dilihat diatas.
Sedikit penjelasan, Icon Info/Post Info itu apa sih min ? Post info itu untuk memberi tahu kepada pengunjung bahwa : Penulis , Tanggal postingan , dan Komentar yang telah di publikasikan. Oke langsung ke tutorialnya aja.

1. Login ke blog kalian.
2. Pada Dashboard kalian pilih template. Lalu Edit Html.
3. Pertama simpan CSS dulu . Simpan dibawah ]]></b:skin> atau bisa di </style>

.post-info {
background:transparent;
margin:0 0 12px;
color:#666666;
font-size:11px;
margin-top:10px;
}
.post-info a {
display:inline-block;
color:#666666;
}
.author-info, .time-info, .comment-info, .review-info {
margin-right:12px;
display:inline;
}

4. Selanjutnya HTML taro aja nih HTML di tempat yang agan mau pasang Post-info, biasanya sih
ditaro di tempat <div class='post-outer'>.

<div class='post-info'>
                <b:if cond='data:top.showAuthor'>
                    <b:if cond='data:post.authorProfileUrl'>
                    <span class='author-info'>
                    <i class='fa fa-user'/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                        <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                        </a>
                    </span>
                    </span>
                    <b:else/>
                    <span class='author-info'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <span itemprop='name'><data:post.author/></span>
                    </span>
                    </span>
                    </b:if>
                </b:if>
                <b:if cond='data:top.showTimestamp'>
                <b:if cond='data:post.url'>
                <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                <span class='time-info'>
                <i class='fa fa-calendar'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                </span>
                </b:if>
                </b:if>
                <b:if cond='data:blog.pageType != "item"'>
                <b:if cond='data:blog.pageType != "static_page"'>
                    <b:if cond='data:post.allowComments'>
                    <span class='comment-info'>
                    <i class='fa fa-comments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
                    </a>
                    </span>
                    </b:if>
                </b:if>
                </b:if>
            </div>

5. Simpan Template.
Dan segitulah ulasan saya kali ini. Semoga Bermanfaat.

Cara Agar gambar tidak Melebihi Postingan Blog

Tutorial Blogger

Ngasal 3/27/2015 8 Comments

Ngasal

Cara agar gambar posting tidak melebihi halaman blog. Memasukan gambar didalam posting blog, merupakan salah satu cara agar isi artikel lebih mudah untuk dimengerti oleh pembaca. Namun, jika ukuran gambar melebihi lebar halaman posting, maka tampilan artikel terlihat menjadi tidak rapi. Apalagi sampai menyentuh widget-widget yang berada di samping kanan blog.

Screenshot By : Faji Awesome

Sebenarnya, blogger sudah menyediakan tool untuk mengatur ukuran gambar, gambar bisa dikecilkan atau dibesarkan. Caranya klik gambar maka akan ada tool dengan pilihan small, medium, large, x-large atau ukuran gambar yang sebenarnya. Tapi pada postingan tertentu, mungkin kita ingin menambahkan gambar yang lebar dengan title gambar yang terlihat jelas.

Menggunakan tool dari blogger tidak cukup untuk mengatur lebar gambar, terkadang gambar masih melebihi lebar halaman posting blog. Berikut ini adalah cara agar gambar dipostingan blog tidak melebihi lebar halaman blog.

Ikuti langkah-langkah dibawah ini.

Login ke blogger. Ke pengaturan template.
Klik edit html, dan cara kode ]]></b:skin> , gunakan Ctrl f untuk memudahkan pencarian.
Letakan kode berikut di atas ]]></b:skin>

.post img { vertical-align:bottom; max-width:90%; max-height:90% }

4.Selanjutnya save template, selesai.

Gambar dengan ukurang yang besar, otomatis tidak melebihi lebar posting blog. Dengan begitu, tampilan posting blog akan terlihat rapi, dan juga bisa menambah kecepatan loading blog. Untuk mengoptimalkan lagi lebar gambar, agar tidak melebihi halaman blog. Ada baiknya, sebelum gambar di upload ke blog. Gambar di kompress terlebih dahulu.

Terkadang, gambar dengan ukuran extra besar, masih bisa melewati batas halaman blog. Walaupun sudah ditambah pengaturan seperti diatas. Tapi pada umumnya, blog yang sudah diberikan pengaturan gambar seperti diatas. Gambarnya tidak akan melewati batas halaman. Mengatur ukuran gambar bisa dibilang sebagai salah satu cara untuk meningkatkan search engine optimazation atau yang biasa disingkat seo dalam dunia website.

Semoga Bermanfaat.

Cara Membuat Tooltip Link Otomatis di Blogspot

Tutorial Blogger

Ngasal 3/26/2015 3 Comments

Ngasal

Erik Shared - Sobat? Apa kabar nih? Admin baru update lagi karena sibuk sekali saya belajar Coding/Edit Code. Nah sekarang ada kesempatan nih , mau share sesuatu lagi . Yaitu "Cara Membuat Tooltip Link Otomatis di Blogspot". Simak Demo & Tutorialnya.

Berikut adalah tutorialnya :
1. Login Pada Blogger.
2. Pada Dashboard»Template.
3. Pastekan CSS ini tepat diatas ]]><b:skin>

#tooltip { background-color: #000; border: 1px solid #333; border-radius: 5px; color: #fff;display: none; font-size: 13px; position: absolute; padding: 4px 8px; box-shadow : 0 3px 4px black;}

Setelah mempaste CSS tersebut. Tinggal memasang tooltip nya.
4. Pastekan lagi kode berikut diatas </body>

<script src='http://yourjavascript.com/41216612533/tooltip.js' type='text/javascript'></script>

<script type='text/javascript'>

$().ready(function() {

$('[title]').style_my_tooltips( {

tip_follows_cursor: 'on',

tip_delay_time: 100

})

});

</script>

5. Simpan deh.
*Note : Kalau tidak ketemu antara ]]></b:skin> dan </body> . CTRL+F pas template itu, Lihat gambar
. Untuk mencari </body> juga seperti itu.

Berikut adalah tutorial bagaimana Cara Membuat Tooltip Link Otomatis di Blogspot . Semoga artikel ini membantu Anda. Terima Kasih.....

Cara Membuat Garis Tepi/Border pada Bagian Posting Blog

Tutorial Blogger

Ngasal 3/24/2015 4 Comments

Ngasal

Seperti gambar diatas, kali ini saya akan membagikan sebuah "Cara Membuat Garis Tepi/Border pada Bagian Posting Blog".
Mungkin ini tidak asing bagi blogger master. Namun ini bisa juga berguna untuk membatasi sebuah gambar postingan, dimana jika gambar postingan terlalu besar maka akan ketauan.
Dalam tutorial ini akan ada sebuah cara. Membuat garis tepi. Garis tepi/border bisa dilihat pada screen shoot diatas.

Langsung pada tahap tutorial.
1.Login ke blogger.
2.Pada Dashboard > Template.
3.Tekan CTRL+F pada keyboard lalu cari ]]><b:skin> atau juga </style>
Jika sudah pastekan kode ini diatas ]]><b:skin> atau </style>

.post {border:1px solid #ddd;padding:15px;}

4.Simpan Template.

Sedikit penjelasan
border:1px = Berguna untuk mengatur besar/kecilnya garis tersebut.
#ddd = Untuk mengganti warna garis tersebut.
padding:15px = Untuk mengukur ukuran dan panjang garis tepi/border tersebut.

Pada warna #ddd Kalian bisa ubah dengan warna kesukaan seperti #FFFFF. Untuk melihat kode warna bisa langsung KESINI....
Nah bagaimana? Mudah bukan Tutorial Cara Membuat Garis Tepi/Border pada Bagian Posting Blog? Sekian dari tutorial saya. Terima Kasih.