Membuat Dropdown Menu

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

 <select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

 <select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

 <option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

 <select onChange="document.location.href=this.options[this.selectedIndex].value;">

 ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Membuat Artikel Terkait (Related Post)

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

<p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
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;data2007&#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>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

Membuat Read More Automatis

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>

<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)

· Setelah itu carilah kode : <p><data:post.body/></p>  (Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>. Jika ada 2 kode, pilih kode yang pertama.

· Ganti kode tersebut dengan kode ini:

<!-- Awal Readmore -->
<p>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</p>
<!-- Akhir Readmore -->

Catatan:
Jika ingin mengubah perataan teks ganti right dengan left, atau mengubah style huruf italic dengan normal. Tulisan Readmore... dengan kata lain atau dengan gambar.

· Simpanlah hasilnya.

Membuat Read More Sejajar Dengan Paragrap

Cara membuat Read more sejajar dengan paragraf adalah sbb:

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. 

Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a>
</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>
</b:if> 

Menampilkan Widget Di Halaman Tertentu

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna merah
kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>
Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Membuat Bayangan Pada Tepi Gambar Post Blog

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML", lalu cari kode : .post img {- - -; ---;----;} atau mungkin saja berbeda seperti  : .post-body img {- - -; ---;----;} 


Yang harus diganti adalah isinya yang berwarna hijau, lalu gantilah yang berwarna hijau itu sehingga menjadi serti ini :


.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}


Simpan dan lihat hasilnya.

Cara Buat Blog

Sekilas Tentang Blog.

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama. Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial, curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.


Cara Membuat Blog.

Anda harus memiliki akun Gmail terlebih dahulu, jika belum memiliki silahkan daftar di Google Gmail.
Kemudian kunjungi

Membuat Read More Otomatis

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.


Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisanExpand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode<data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[ Read More.. ]</a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya 

Efek bayangan pada gambar diluar posting yang saya maksudkan disini adalah memberi efek bayang-bayang gelap ditepi gambar yang terpasang bukan di halaman posting melainkan gambar yang dipasang diluar area posting. Misalnya gambar yang dipasang pada widget. Tips ini pada prinsipnya sama dengan postingan saya dulu yang berjudul “Cara membuat Efek bayang pada gambar”

Tapi tips tersebut hanya berlaku untuk gambar yang ada di dalam postingan, efek bayang akan muncul secara otomatis setiap kita mengupload gambar ke dalam posting blog.

Bila ingin memberi efek bayang pada gambar yang dipasang di tempat tertentu atau luar posting, misalnya di dalam widget maka caranya tinggal copy saja kode berikut ini ke dalam widget html.
Ini kodenya :

<style type="text/css">
.redshadow {
-webkit-box-shadow:4px 2px 7px #f46d17;
-moz-box-shadow: 4px 2px 7px #f46d17;
box-shadow : 4px 2px 7px #f46d17;}
</style>
<img  class="redshadow"  src="URLGAMBAR.jpg"  />

Lihat contohnya di halaman demo:
LIHAT DEMO

Membuat Efek Bayangan Pada Gambar Diluar Posting

Efek bayangan pada gambar diluar posting yang saya maksudkan disini adalah memberi efek bayang-bayang gelap ditepi gambar yang terpasang bukan di halaman posting melainkan gambar yang dipasang diluar area posting.  Misalnya gambar yang dipasang pada widget.  Tips ini pada prinsipnya sama dengan postingan saya dulu yang berjudul “Cara membuat Efek bayang pada gambar”

Tapi tips tersebut hanya berlaku untuk gambar yang ada di dalam postingan, efek bayang akan muncul secara otomatis setiap kita mengupload gambar ke dalam posting blog.

Bila ingin memberi efek bayang pada gambar yang dipasang di tempat tertentu atau luar posting, misalnya di dalam widget maka caranya tinggal copy saja kode berikut ini ke dalam widget html.
Ini kodenya :

<style type="text/css">
.redshadow {
-webkit-box-shadow:4px 2px 7px #f46d17;
-moz-box-shadow: 4px 2px 7px #f46d17;
box-shadow : 4px 2px 7px #f46d17;}
</style>
<img  class="redshadow"  src="URLGAMBAR.jpg"  />

Lihat contohnya di halaman demo:
LIHAT DEMO

Cara Membuat Tombol Cetak Halaman Otomatis Di Blog

Biasanya kotak tombol cetak otomatis ditampilkan diatas postingan atau di bawah postingan. Tombol otomatis bisa berupa tautan dalam text dan gambar icon printer. Ketika seorang pengunjung halaman blog ingin langsung mencetak artikel dari layar ke printer, tidak mesti repot buka navigasi browser, tinggal klik langsung cetak. Praktis.

Anda dapat menggunakan JavaScript untuk membuat kotak dialog CETAK sehingga pengguna dapat mencetak halaman secara otomatis. Meskipun sebagian besar pengguna tahu bahwa mereka dapat melakukan sesuatu seperti "File> Print", sebuah "Cetak halaman ini" pilihan bisa menyenangkan, dan bahkan dapat membuat pengguna tertarik untuk mencetak halaman.

Cara Membuat "Print halaman ini" Dengan Javascript.

Kode berikut akan menciptakan tautan dan akan mencetak halaman blog ini secara otomatis jika diklik. Silahkan dicoba untuk demo.

Cetak Halaman Ini!

Kodenya seperti di bawah ini:

<a href="JavaScript:window.print();">Print this page</a>

Bisa dibuat ke dalam tombol gambar seperti di bawah ini:

Cara Agar Otomatis Muncul Kotak Print.

Anda dapat memanggil fungsi cetak JavaScript pada loading Printer pada versi yang mudah. Ini secara otomatis akan membuka kotak dialog cetak untuk pengguna. Cara membuat kotak print seperti di bawah ini:

1. Salin dan sisipkan kode berikut di antara tag versi dicetak:
   
   
   

    <script language="Javascript1.2">
     <!--
     function printpage() {
     window.print();
     }
     //-->
   </script> 
   

2. Tambahkan baris berikut ke tag Anda:
   
   onload = "printpage ()"

Jadi, tag badan Anda akan terlihat seperti ini:
<body onload="printpage()">

Membuat "Versi Cetak"

CSS dapat dirancang untuk membuat versi cetak yang berbeda dari halaman web Anda. Anda dapat menerapkan gaya yang berbeda untuk setiap pemakaian elemen HTML yang berbeda. CSS dapat melengkapi tampilan. Selain itu variasi font akan membuat style kotak cetak seperti yang anda harapkan. Selamat mencoba.