Cara Membuat Menu Navigasi Slide Horizontal Blogspot

Ketika anda membuat blog di blogspot, anda tidak akan menemukan fitur menu navigasi seperti blog pada umumnya. Navigasi menu pada blospot biasanya berupa link list vertikal kebawah dan tidak berupa menu horizontal. Namun anda tidak perlu berkecil hati, karena kita masih bisa membuat menu di blogpsot secara horizontal. Menu ini berfungsi sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu di blogspot.

Sebelum anda mencoba membuat menu navigasi slide horizontal blogspot ini sebaiknya anda backup terlebih dahulu template anda, supaya jka terjadi error anda bisa melakukan restore kembali template blogspot untuk mengganti template blogspot anda.

Ikuti langkah-langkah berikut ini untuk membuat menu navigasi slide horizontal blogspot :

1. Login ke Blogger, masuk ke bagian design, lalu edit html dan berikan tanda centang pada expand widget template

2. Cari kode <div id='content-wrapper'> dan tambahkan kode berikut ini diatasnya. Jika anda tidak menemukan kode ini, usahakan anda taruh kode berikut ini diatas blogpost anda. Ini karena template tiap blog berbeda, dan tergantung template yang dipakai.

<div id='Menumainwrap-agan'>

<b:section id='NavbarMenu-agan'>

<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>

</b:widget>

</b:section>

</div> <!-- End Menumainwrap-agan -->

<div class='clear'/>

3. Lalu tambahkan juga kode berikut di atas kode ]]></b:skin>

#Menumainwrap-agan {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYcTdYb-N3qMuqpnQsQjS0GA6BV2j465XfUsMgQML9fLlfh-mgLB05zJSVj-UsvsrQw8ESSfhOs0IOeCR6wi-Pi8IraaElRb9PfoGTFSmX4EtOmdKM6iP0r7bl_Z1QYml9Q5qQpq4icdH/s1600/nav-menu.jpg) repeat-x scroll 0 0 #222222;

border-bottom:1px solid #CCCCCC;

height:42px;

margin:0;

padding:0;

}

#NavbarMenu-agan {

width: 950px;

height: 41px;

font-size: 13px;

color:#333333;

margin: 0px;

padding: 0;

font-weight:bold;

font-family:arial;

margin: 0 auto;

}

#NavbarMenuleft-agan {

width: 950px;

margin: 0;float:left;

}

#nav-agan {

margin: 0;

padding: 0;

}

#nav-agan ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav-agan li {

list-style: none;

margin: 0px;

padding: 0;

}

#nav-agan li a,

#nav-agan li a:link,

#nav-agan li a:visited {

height: 22px;

color: #333333;

display: block;

font-size: 13px;

text-decoration: none;

margin: 0;

padding:10px 13px 9px 13px;

border-right: 1px solid #CFCFCF;

}

#nav-agan li a:hover,

#nav-agan li a:active {

color: #333;

margin: 0;

text-decoration: none;

background:#F0F0F0;

}

#nav-agan li li a, #nav-agan li li a:link,

#nav-agan li li a:visited {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXHvC9jO-QQ-ELTBN65p1sE0kWcFgKH5fgZZwXi5gOd2c7PPoi2n-5y9AR_wGmxp_TjNnHURVVgP8ELRQnP17kkkXIWGv98ro1tRD3RRNBIlP7MgLadP8vyqCgLSXHneHTwOwBa8c9iE89/s1600/nav-menu-1.jpg) repeat-x scroll 0 0 #f5f5f5;

min-width: 150px;

color: #333333;

font-size: 14px;

font-weight: normal;

float: none; margin: 0;

padding: 5px 10px;

font-weight:bold;

font-family:arial;

box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

text-align:left;

}

#nav-agan li li a:hover,

#nav-agan li li a:active {

background: #F5F5F5;

color: #333;

}

#nav-agan li {

float: left;

padding: 0;

}

#nav-agan li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin:0;

padding: 0;

border-top:1px solid #242424;

}

#nav-agan li ul a {

width: 140px;

}

#nav-agan li ul ul {

margin: -41.5px 0 0 176px;

border:none;

}

#nav-agan li:hover ul ul,

#nav-agan li:hover ul ul ul, #nav-agan li.sfhover ul ul,

#nav-agan li.sfhover ul ul ul {

left: -999em;

}

#nav-agan li:hover ul,

#nav-agan li li:hover ul,

#nav-agan li li li:hover ul,

#nav-agan li.sfhover ul,

#nav-agan li li.sfhover ul,

#nav-agan li li li.sfhover ul {

left: auto;

}

#nav-agan li:hover,

#nav-agan li.sfhover {

position: static;

}

Simpan template anda dahulu.

4. Buka page element cari gadget dengan nama ‘MembuatMenu’ yang berada di atas gadget posting blog, lalu klik edit dan masukkan kode berikut pada kotak content.

<div id='navbarmenuleft-agan'>

<ul id='nav-agan'>

<li><a href='/'>Home</a></li>

<li><a href ='#link-agan'>Menu 1</a>

<ul>

<li><a href='#link-agan'>Menu 1.1</a>

<ul>

<li><a href ='#link-agan'>Menu 1.1.1</a></li>

<li><ahref ='#link-agan'>Menu 1.1.2</a></li>

<li><ahref ='#link-agan'>Menu 1.1.3</a></li>

<li><ahref ='#link-agan'>Menu 1.1.4</a></li>

</ul>

</li>

<li><ahref ='#link-agan'>Menu 1.2</a>

<ul>

<li><ahref ='#link-agan'>Menu 1.2.1</a></li>

<li><ahref ='#link-agan'>Menu 1.2.2</a></li>

<li><ahref ='#link-agan'>Menu 1.2.3</a></li>

<li><ahref ='#link-agan'>Menu 1.2.4</a></li>

</ul>

</li>

<li><ahref ='#link-agan'>Menu 1.3</a>

<ul>

<li><ahref ='#link-agan'>Menu 1.3.1</a></li>

<li><ahref ='#link-agan'>Menu 1.3.2</a></li>

<li><ahref ='#link-agan'>Menu 1.3.3</a></li>

<li><ahref ='#link-agan'>Menu 1.3.4</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Sesuaikan dengan link dan menu yang akan anda buat dengan mengedit tulisan yang berwarna merah diatas. Misal

#link-agan, bisa anda ganti dengan http://namablogmu.blogspot.com/search/label/NamaLabelBlogmu

Menu, anda ganti dengan judul tampilan yang muncul

Simpan dan anda lihat hasilnya. Anda sekarang berhasil membuat menu navigasi slide horizontal blogspot. Selamat mencoba.

Membuat judul posting artikel berjalan

Kemarin pada saat saya nongkrong di blognya KR, ada salah seorang pengunjung blog yang bertanya bagaimana cara membuat judul posting berjalan. Pada awalnya saya berpikir mustahil bisa dilakukan hanya dengan menggunakan kode marquee, saya pikir mungkin itu hanya dapat dilakukan dengan menggunakan Java script. Tetapi setelah berusaha keras mengutak-atik kode HTML blog saya, akhirnya saya menemukan cara sederhana untuk membuat judul pada posting atau artikel blog berjalan. Hasil yang di dapat seperti anda membuat teks berjalan dengan kode marquee atau seperti judul blog berjalan yang menggunakan Java script.

Baiklah tanpa perlu panjang lebar saya akan memberikan triknya. Seperti biasa pertama login ke Dashboard Blogger anda kemudian klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3> </marquee>
</b:if>

Teks yang berwarna hijau adalah kode yang harus anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika anda sudah cukup puas silahkan di simpan pekerjaan anda.

Contoh hasil seperti ini :

JUDUL POSTING BLOG ANDA

Bagaimana, mudah bukan? Selamat mencoba..

Cara Membuat Related Posts Di Sidebar

Related posts widget atau artikel terkait adalah widget yang memunculkan artikel yang berkaitan dengan postingan yang sedang di baca. Cara ini sudah banyak yang menjelaskan di postingan para sahabat Blogger, namun saya juga ingin berbagi pengalaman yang sudah saya kerjakan.

Related posts sangat bermanfaat bagi blog kita terutama untuk SEO dan juga bermanfaat bagi pengunjung. Dengan related posts widget ini, pengunjung suatu blog akan mudah untuk membaca atau menelusuri setiap postingan yang ada di blog kita.

Nah tentunya hal ini akan meningkatkan page view blog kita. Related posts widget ini di buat dengan berbagai bentuk yang menarik agar pengunjung tertarik untuk menelusuri blog kita. Tertarik untuk mencobanya di blog anda? Silahkan ikuti totorial Cara Membuat Related Posts Di Sidebar berikut ini.

1. Log in ke blogger dengan akun yang anda miliki.
2. Pergi menuju ke rancangan » edit HTML » centang kotak expand template widget. Atau bagi yang menggunakan tampilan blogger yang baru, anda tinggal klik template » edit HTML » centang kotak expand template widget.
3. Hampir aja lupa, sebelum melakukan pengeditan, sebaiknya anda memback-up template anda dulu buat jaga-jaga bila terjadi kesalahan dalam melakukan pengeditan.
4. Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>.

<script src='http://contents-ente.googlecode.com/files/sidebar-ente.js' type='text/javascript'></script>

5. Cari kode yang kira-kira mirip seperti ini.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop>

</b:if>

6. Kalau sudah ketemu, tambahkan kode di bawah ini di dalam kode di atas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

Sehingga kodenya menjadi seperti ini.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

Keterangan : kode yang bercetak tebal berwarna merah adalah jumlah artikel terkait atau related posts yang akan di munculkan, sedangkan kode yang berwarna hijau adalah kode yang di tambahkan.

7. Save template anda.

8. Sekarang anda menuju ke tata letak » tambah gadget » HTML/Java script. Masukkan kode di bawah ini pada kolom yang sudah di sediakan.

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

9. Save gadget anda, dan lihat hasilnya.

Sekian dulu tutorial dari saya kali ini tentang Cara Membuat Related Posts Di Sidebar, bagi yang masih bingung silahkan untuk bertanya ya.

Mengenal Twitter

Kita sekarang akan mengenal yang namanya twitter, walau sudah usang beritanya namun bagi saya pun anda yang belum tahu akan berkenalan dengan yang namanya jejaring sosial yang bergambar khusus ini, memiliki logo berupa seekor burung berwarna biru yang bernama "Larry the "Bird".

Twitter adalah sebuah situs web yang dimiliki dan dioperasikan oleh Twitter Inc., yang menawarkan jejaring sosial berupa mikroblog sehingga memungkinkan penggunanya untuk mengirim dan membaca pesan yang disebut kicauan (tweets). Kicauan adalah teks tulisan hingga 140 karakter yang ditampilkan pada halaman profil pengguna. Kicauan bisa dilihat secara luar, namun pengirim dapat membatasi pengiriman pesan ke daftar teman-teman mereka saja. Pengguna dapat melihat kicauan penulis lain yang dikenal dengan sebutan pengikut ("follower").

Di Indonesia, Twitter sangat populer. Terlebih lagi, kemudahan yang disediakan oleh telepon seluler yang ada serta aplikasi yang mendukung. hal ini membuat Indonesia menduduki peringkat ke enam sebagai negara dengan pengguna Twitter terbanyak, meski Amerika masih menjadi negara nomor satu untuk urusan Twitter. Daftar akunnya mudah sekali tinggal signup saja.

Oke selamat bertwitter ria.