Menu Horisontal dengan CSS

Navigasi merupakan bagian yang sangat penting didalam sebuah web, berikut salah satu contoh untuk membuat sebuah menu horisontal sederhana:

Gradient Background dengan css

Dengan css3 kita dapat membuat perubahan yang lebih halus antara 2 warna atau lebih. Saya akan terapkan trik tersebut untuk membuat background gradien, yak kita akan membuat linear gradien dengan 3 warna trik ini juga bisa diterapkan ke dalam blog kita,

baiklah langsung saja kita mulai....

Artikel Terkait di bawah postingan

Artikel terkait merupakan postingan yang terkait dengan artikel yang sedang dibaca, ada banyak sekali bentuk artikel terkait mulai dari link artikel terkait hanya berbentuk text biasa sampai dengan link  artikel terkait disertai dengan gambar. Berikut ini saya akan berbagi bagai mana cara membuat artikel terkait dengan link text saja dan saya posisikan dibawah postingan. Bentuknya seperti contoh dibawah ini:

Langkah-langkah sbb:

1. Login ke akun Blooger anda,
2. Pilih menu template ==> Edit HTML
3. Cari tag <data:post.body/>, gunakan ctrl+F agar pencarian lebih cepat.
4. MAsukkan Kode dibawah ini tepat di bawah tag <data:post.body/>, Jika anda memiliki tag <data:post.body/> lebih dari satu pilih tag yang kedua atau yang ketiga.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>


5. Untuk Perintah yang dicetak Merah, anda bisa mengganti sesuai dengan keinginan dan kebutuhan anda,
6. Langkah terakhir Klik Simpan Template dan anda bisa melihat hasilnya.

Terima kasih semoga bermanfaat.

Belajar Blogging: Cara Mengganti Template Blog

Blogger cukup memudahkan kita untuk mengubah template blog, baik template yang telah disediakan oleh blogger sendiri maupun template yang disediakan oleh pihak lain. berikut Cara mengganti template blog dari template dari pihak lain. Sebelumnya sediakan dulu template yang akan anda gunakan, bisa dari download maupun anda buat sendiri:

1. Sediakan template baru anda, biasanya berekstensi .xml
2. Masuk ke akun Blog anda, pilih blog yang akan di ganti dengan template baru
3. Pada navigasi sebelah kiri pilih template, pada bagian atas anda pilih tombol "cadangkan/pulihkan".
   
4. Kemudian akan muncul kotak dialog untuk meng-Upload template baru seperti gambar dibawah ini:
   
5. Pilih Tombol "pilih file" kemudian pilih file template anda setelah itu pilih tombol "unggah" tunggu sebentar sampai proses selesai. anda bisa melihat hasil nya dengan memilih tombol "Lihat Blog".

cukup sekian posting kali ini, semoga bermanfaat...