Membuat Link Membesar Saat disentuh Kursor

<div dir="ltr" style="text-align: left;" trbidi="on"><h1>Membuat Link Membesar Saat disentuh Kursor | Tutorial Blog</h1><div style="text-align: justify;">Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.</div><a href="http://www.blogger.com/null" name="more"></a><div style="text-align: justify;">Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.</div><br /><div style="text-align: left;">Cara Membuat Link Membesar Saat disentuh Kursor :</div><ul><li>Masuk ke akun blogger sobat.</li><li>Pilih <span style="color: blue;"><b>Template</b></span> > <span style="color: blue;"><b>Edit HTML</b></span>.</li><li>Ceklis / Centang <span style="color: red;"><i>Expand Widget Template</i></span>.</li><li>Cari kode a:hover { </li><li>Ganti kode font-size dengan ukuran yang lebih besar.<br />Contoh :<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">a:hover {<br />color:#d2691e;<br />font-size:10px;<br />font-style:italic;<br />cursor:wait;<br />}</div>ganti dengan<br /><div style="border-color: blue; border-style: inset; border-width: 2pt; padding: 10px; text-align: left; width: 400px;">a:hover {<br />color:#d2691e;<br />font-size:<b><span style="color: blue;">19px</span></b>;<br />font-style:italic;<br />cursor:wait;<br />}</div></li><li>Terakhir klik <span style="color: blue;"><b>Simpan Template</b></span>. </li></ul><div style="text-align: left;">Selamat Mencoba dan Semoga Berhasil...</div></div>

widget blogspot Membuat Link Membesar Saat disentuh Kursor

Membuat Link Membesar Saat disentuh Kursor | Tutorial Blog Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menari...

Read more »

Cara Membuat Kolom Widget di Bawah Header Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFQ6OoUPn1KLWrnZn94K_N1FEnNb3_KQPZCJOJ6uBKGQ1pZCZ-dfupIUOpd5G4ofKEha3hDJECobLkET2OpYNGrJElbZfwtGfpc2-6rYQqvm0diABXRlJauwySpmeRum6O_H7Cnu9v9k/s1600/Untitled.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Kolom Widget di Bawah Header" border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFQ6OoUPn1KLWrnZn94K_N1FEnNb3_KQPZCJOJ6uBKGQ1pZCZ-dfupIUOpd5G4ofKEha3hDJECobLkET2OpYNGrJElbZfwtGfpc2-6rYQqvm0diABXRlJauwySpmeRum6O_H7Cnu9v9k/s200/Untitled.png" title="Cara Membuat Kolom Widget di Bawah Header" width="200" /></a></div>Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hanya tersedia satu kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, bisa sobat buat dengan cara ini.<br /><a href="http://www.blogger.com/null" name="more"></a><br />Kolom widget di bawah header ini bisa dibuat dengan mudah. Jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan sobat, atau mau pasang ketiga-tiganya juga tidak apa-apa. Untuk ukuran juga bisa diatur dengan mudah jika sobat ingin mengganti ukuran yang saya tetapkan.<br />Oke, tak usah panjang lebar. Mari sobat simak langkah-langkahnya.<br /><br />Cara Membuat Kolom Widget di Bawah Header pada Blog:<br />1. Login ke akun Blogger sobat.<br />2. Masuk pada bagian Template.<br />3. Cari kode <b>]]></b:skin></b>. Gunakan Tombol ctrl+F<br />4. Masukan kode berikut diatas kode <b>]]></b:skin></b>.<br /><br /><div style="background: #f2f2f2; border: 2px solid #0000FF; height: 40px; overflow: auto; padding: 15px;">#underheader { clear:both; } .underheader-widget { <br />padding:0px 10px 10px 10px; }</div></div><br />5. Kemudian cari kode <b><div id='main-wrapper'> </b>atau <b><div id='main-wpr'> </b>atau<b> </b>sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <b><div id='main-wrapper'>. </b>Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda  dengan kode elemen yang saya contohkan.<br />6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <b><div id='main-wrapper'></b> atau <b><div id='main-wpr'></b>.<br /><br /><ul style="text-align: left;"><li>Satu Kolom Widget.</li></ul><br /><div style="background: #f2f2f2; border: 2px solid #0000FF; height: 120px; overflow: auto; padding: 15px;"><div id='underheader'><br /><div id='box1' style='width: 100%; float: left; <br />margin:0; text-align: left;'><br /><b:section class='header' id='col1' preferred='yes' <br />style='float:left;'/><br /></div><br /></div></div></div><ul style="text-align: left;"><li>Dua Kolom Widget.</li></ul></div><div dir="ltr" style="text-align: left;"></div><div style="background: #f2f2f2; border: 2px solid #0000FF; height: 120px; overflow: auto; padding: 15px;"><div id='underheader'><br /><div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'><br /><b:section class='header' id='col1' preferred='yes' style='float:left;'/><br /></div><br /><div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'><br /><b:section class='header' id='col2' preferred='yes' style='float:left;'/><br /></div><br /></div></div><div dir="ltr" style="text-align: left;"></div><div dir="ltr" style="text-align: left;"> </div><ul style="text-align: left;"><li>Tiga Kolom Widget.</li></ul></div><div dir="ltr" style="text-align: left;"></div><div style="background: #f2f2f2; border: 2px solid #0000FF; height: 120px; overflow: auto; padding: 15px;"><div id='underheader'><br /><div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'><br /><b:section class='header' id='col1' preferred='yes' style='float:left;'/><br /></div><br /><div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'><br /><b:section class='header' id='col2' preferred='yes' style='float:left;'/><br /></div><br /><div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'><br /><b:section class='header' id='col3' preferred='yes' style='float:left;'/><br /></div><br /></div></div><div dir="ltr" style="text-align: left;"></div><div dir="ltr" style="text-align: left;"> </div><br />#Keterangan, untuk ukuran sobat bisa ubah pada nilai "width".<br /><br />7. Klik simpan, selesai dan sobat lihat hasilnya.<br />Contoh hasil pemasangan dua kolom widget.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia19EhmYrcvXqwt6Q2cI7OO8ZO7Lg_0s9I7jRaq0U0Q2Sp4zB-aKP2mzizIkPJ_CKxbRXwXk8Ihps8YdB_mrYH1OOFdeK-0PBhepE8BYeOgaPwpEdV4uRmx2sDF9HPHGBLOq5SyhtyDtI/s1600/Untitled1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Kolom Widget di Bawah Header" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia19EhmYrcvXqwt6Q2cI7OO8ZO7Lg_0s9I7jRaq0U0Q2Sp4zB-aKP2mzizIkPJ_CKxbRXwXk8Ihps8YdB_mrYH1OOFdeK-0PBhepE8BYeOgaPwpEdV4uRmx2sDF9HPHGBLOq5SyhtyDtI/s400/Untitled1.png" title="Cara Membuat Kolom Widget di Bawah Header" width="400" /></a></div></div>

edit template Cara Membuat Kolom Widget di Bawah Header Blog

Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hany...

Read more »

Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzodvqPvQ2E_WTYntoutwkeE1jalRdySaSzee-0y2NVQkeqXL77KiyWB61QtJC0t5-Uet7LkYYjYbrk-p_pFXa-trsSw-7hwp1EfX5YOJjXr4BSgts8WqaTqOB6ucHUeKVGm0zeiqGFs/s1600/Untitled.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzodvqPvQ2E_WTYntoutwkeE1jalRdySaSzee-0y2NVQkeqXL77KiyWB61QtJC0t5-Uet7LkYYjYbrk-p_pFXa-trsSw-7hwp1EfX5YOJjXr4BSgts8WqaTqOB6ucHUeKVGm0zeiqGFs/s200/Untitled.png" title="Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu" width="200" /></a></div>Rasanya saya sudah jarang membuat posting baru pada blog tercinta ini. Hari ini saya mengunjungi Blog teman dan melihat kolom widget yang berubah tampilan ketika beralih dari satu halaman ke halaman lain. Saya pun tertarik untuk mengetahui cara membuatnya, coba diterapkan pada Blog saya, dan membuat posting tentang hal tersebut.<br /><a href="http://www.blogger.com/null" name="more"></a>Ternyata agak sulit dalam membuat perubahan kolom widget yang memuat sederetan widget ini, tidak semudah pada satu buah widget. Namun akhirnya akan mengerti dan mudah menerapkanya jika sobat teliti dalam menyimak tutorialnya. Perubahan widget yang saya maksud ini sering disebut <i>tampilan template dinamis</i>, bisa dikatakan perubahan tampilan dan jumlah kolom widget. Namun pengertian tadi tentunya sebagian sobat Blogger masih belum memahaminya dengan jelas.<br />OK, saya contohkan sebuah kasus.<br />Mungkin sobat pernah melihat sebuah Blog, pada homepage blog tersebut menampilkan 3 kolom widget yaitu kolom posts, sidebar kanan, dan sidebar kiri. Namun ketika sobat beralih pada salah satu halaman posting, sidebar kiri menghilang. Sehingga hanya terdapat kolom posts dan sidebar kanan. Bagusnya lagi kolom posts bertambah lebar hingga tidak ada ruang kosong di sebelah kiri.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCNeJotbHKullOYoDnHbRX2q2QOsQI_4-NIjVDB0qhiw637F_vZdzEMeTLkhTNQ5e66RRfvPxul4MVzyI3W7gWwufiBDHh-PufPdcFG6tMI5Q5NkWm8g64-qxvmVff_mw1gIpEUrvbeo/s1600/Untitled1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCNeJotbHKullOYoDnHbRX2q2QOsQI_4-NIjVDB0qhiw637F_vZdzEMeTLkhTNQ5e66RRfvPxul4MVzyI3W7gWwufiBDHh-PufPdcFG6tMI5Q5NkWm8g64-qxvmVff_mw1gIpEUrvbeo/s400/Untitled1.png" title="Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu" width="400" /></a></div><br />OK, sangat berguna ya jika ada sederetan widget yang tidak perlu ditampilkan ketika pengunjung membaca artikel di Blog sobat. Sebenarnya mudah untuk menerapkan hal ini, sobat hanya perlu menambahkan kode yang tidak terlalu banyak pada template blog yang bisa dikatakan berfungsi sebagai sebuah perintah.<br /><br />Langsung saja kita menuju ke langkah-langkah penerapnya:<br />1. Login ke akun Blogger sobat.<br />2. Masuk ke bagian Template dan klik Edit Template.<br />3. Dengan tombol ctrl+F, cari kode <b>]]></b:skin></b> dan perhatikan kode-kode diatasnya yang cukup banyak. Default-nya (sebelum sobat menambah kode CC tambahan) tepat diatas kode <b>]]></b:skin></b><i><b> </b></i>terdapat kode-kode CSS kolom widget, kurang lebih seperti berikut. <br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 160px; overflow: auto; padding: 15px;">/* -- Main -- */<br /><span style="color: red;"><b>#main-wrapper</b></span>{float:left;width:650px;margin:0;padding:0}<br />/* -- End Main -- */<br /><br />/* -- Sidebar -- */<br /><span style="color: red;"><b>#sidebar-kiri</b></span> {float:left;width:230px;display:inline;margin:0;}<br /><span style="color: red;"><b>#sidebar-wrapper</b></span>{float:right;width:320px;display:inline;margin:0;}<br />/* -- End Sidebar -- */</div>Sobat harus memahami elemen-elemen kolom widget seperti yang saya beri tanda berwarna merah diatas, dan mengetahui elemen-elemen kolom widget pada template Blog sobat. Karena kode-kode elemen pada setiap template biasanya memiliki  penulisan yang berbeda-beda.<br /><br />Sekarang kita belajar membuat sebuah kode untuk perintah membuat kolom widget berbeda.<br /><ul style="text-align: left;"><li>Perintah letak perubahan. </li></ul>Perintah untuk merubah halaman homepage saja. <br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><b:if cond='data:blog.url == data:blog.homepageUrl'></div><br />Perintah untuk merubah semua halaman kecuali homepage. <br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><b:if cond='data:blog.url != data:blog.homepageUrl'></div><br />Perintah untuk merubah halaman posting saja<br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><span style="font-family: Times, Times New Roman, serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></div><br />Perintah untuk merubah semua halaman kecuali halaman posting.<br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><span style="font-family: Times, Times New Roman, serif;"><b:if cond='data:blog.pageType != &quot;item&quot;'></span></div><br />Perintah untuk merubah sebuah halaman tertentu saja<br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><span style="font-family: Times, Times New Roman, serif;"><b:if cond='data:blog.pageType == &quot;<span style="color: red;"><b>url-halaman</b></span>&quot;'></span></div><br />Perintah untuk merubah semua halaman kecuali sebuah halaman tertentu.<br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 10px; overflow: auto; padding: 15px;"><span style="font-family: Times, Times New Roman, serif;"><b:if cond='data:blog.pageType != &quot;<span style="color: red;"><b>url-halaman</b></span>&quot;'></span><span style="font-family: Times, Times New Roman, serif;"></span></div><br />#Pilihlah perintah mana yang sobat perlukan.<br /><br />Selanjtnya sobat membuat kode dengan urutan: <i>keterangan penambahan CSS</i>, <i>perintah letak perubahan</i>,  <span style="color: red;"><i>elemen yang akan diedit dan </i><i>kode perubahan tampilan</i></span>, akhiri dengan <b></b:if> </b>dan<b> </b><b></style>. </b><br />Untuk <span style="color: red;"><i>elemen yang akan diedit dan </i><i>kode perubahan tampilan </i><span style="color: black;">khususnya jika sobat akan merubah tampilan kolom posts</span></span><span style="color: red;"></span>, agar lebih kompleks copy paste dahulu dari kode tampilan elemen asalnya. Karena kolom tidak hanya memuat posting saja, juga memuat comments dan lain-lain. Jika ini tidak dilakukan, maka kemungkinan sobat hanya merubah tampilan posting sedangkan tampilan comments tidak, sehingga hasilnya akan berantakan. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUERkWqPcXXjBDlsl9YZfuoPi0rr4A0rlY2D05AIvDrmttk4cAzBUqJCqIi2iKdz3ofFCjI1Ut40QyuBXEsGeefxu4RWvFmq0ELXsP_jMWy8DoabQriF0Us0l0ei08zY_pZPM5_flp1k/s1600/Untitled2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUERkWqPcXXjBDlsl9YZfuoPi0rr4A0rlY2D05AIvDrmttk4cAzBUqJCqIi2iKdz3ofFCjI1Ut40QyuBXEsGeefxu4RWvFmq0ELXsP_jMWy8DoabQriF0Us0l0ei08zY_pZPM5_flp1k/s400/Untitled2.png" width="400" /></a></div><br />Perhatikan contoh pembuatan kode-nya. <br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 550px; overflow: auto; padding: 15px;"><span style="color: blue;"><b><style type='text/css'> </b></span><br /><b><b:if cond='data:blog.pageType != &quot;item&quot;'></b> <br /><span style="color: red;">a img{border-width:0}</span><br /><span style="color: red;">.post-body img{border:1px solid #ccc;margin:5px}</span><br /><span style="color: red;">#main-wrapper a:hover{color:#c13a10;text-decoration:underline}</span><br /><span style="color: red;">a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}</span><br /><span style="color: red;">a:hover,#main .post-body a:hover{color:#999;}</span><br /><span style="color: red;">#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}</span><br /><span style="color: red;">#main-wrapper{float:left;width:420px;margin:0;padding:0}</span><br /><span style="color: red;">.post h3 a:hover{color:#A91B33;text-decoration:none}</span><br /><span style="color: red;">.post-body{line-height:1.6em;margin:0;text-align: justify;}</span><br /><span style="color: red;">.post img{padding:5px}</span><br /><span style="color: red;">.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}</span><br /><span style="color: red;">.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}</span><br /><span style="color: red;">.post blockquote p{margin:0;padding:0 0 15px}</span><br /><span style="color: red;">.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 400px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border: 1px solid #ccc;}</span><br /><span style="color: red;">.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}</span><br /><b></b:if></b> <br /><b><b:if cond='data:blog.pageType == &quot;item&quot;'> </b> <br /><span style="color: red;">#Sidebar-kiri { display:none;} </span><br /><b></b:if></b> <br /><span style="color: blue;"><b></style></b></span></div>Keterangan:<br />warna biru, <i>keterangan penambahan CSS</i><br />warna hitam,<i> <i>perintah letak perubahan</i></i><br />warna merah,<i> <i>elemen yang akan diedit dan </i><i>kode perubahan tampilan</i></i><br /><br />Kode diatas jika diartikan sederhananya seperti ini.<br /><br /><b><style type='text/css'></b> <span style="color: blue;"><i>--- Saya menambahkan perintah baru</i></span><br /><b><b:if cond='data:blog.url == data:blog.homepageUrl'></b> <i><span style="color: blue;">--- Pada halaman homepage</span></i><br />a img{border-width:0}<br />.post-body img{border:1px solid #ccc;margin:5px}<br />#main-wrapper a:hover{color:#c13a10;text-decoration:underline}<br />a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}<br />a:hover,#main .post-body a:hover{color:#999;}<br />#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}<br /><b>#main-wrapper{float:left;<span style="color: red;">width:420px</span>;margin:0;padding:0}</b> <span style="color: blue;"><i>--- Lebar konten menjadi 420px</i></span><br />.post h3 a:hover{color:#A91B33;text-decoration:none}<br />.post-body{line-height:1.6em;margin:0;text-align: justify;}<br />.post img{padding:5px}<br />.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}<br />.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}<br />.post blockquote p{margin:0;padding:0 0 15px}<br /><b>.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;<span style="color: red;">width: 400px</span>;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border: 1px solid #ccc;}<span style="color: blue;"> </span></b><i><span style="color: blue;">--- Lebar comments menjadi 400px</span></i><br />.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}<br /><b></b:if></b><br /><b><b:if cond='data:blog.url != data:blog.homepageUrl'></b> <span style="color: blue;"><i>--- pada semua halaman kecuali homepage</i></span><br /><b>#sidebar-kiri {<span style="color: red;">display:none;</span>}</b><span style="color: blue;"><i> --- sidebari-kiri jangan ditampilkan</i></span><br /><b></b:if><br /></style> <span style="color: blue;"><i>--- </i></span></b><span style="color: blue;"><i>selesai</i></span><br /><br /><span style="color: blue;"><span style="color: black;">OK, silakan sobat memulai pembuatan kode perintah perubahan tampilan kolom widget sesuai dengan yang sobat butuhkan, tentunya dengan cara yang telah saya jelaskan diatas.</span></span><br /><span style="color: blue;"><span style="color: black;">Untuk </span></span><span style="color: blue;"><span style="color: black;"><span style="color: red;"><i>kode perubahan tampilan</i></span>, saya hanya bisa mencontohkan sedikit saja. Sobat bisa membuat perubahan tampilan yang lebih bagus lagi. Selain menghilangkan dan merubah ukuran widget, juga bisa merubah warna-warna, jenis font, gaya border dan lain-lain. Silakan sobat cari tau lagi lebih banyak tentang kode tersebut.</span></span><br /><span style="color: blue;"><span style="color: black;"><br /></span></span><span style="color: blue;"><span style="color: black;">4. Selanjutnya, letakan kode yang baru sobat buat tepat di bawah kode <b>]]></b:skin>.</b></span></span><br /><span style="color: blue;"><span style="color: black;">5. Jika kode telah dibuat dan diletakan pada template sobat, silakan klik Simpan Template.</span></span><br /><span style="color: blue;"><span style="color: black;"><b> </b></span></span><br /><br /><span style="color: blue;"><span style="color: black;">Selesai, pembahasan saya kali ini mungkin agak berbelit-belit. Saya hanya berdoa semoga sobat mengerti dan sukses diterapkan pada Blog sobat.</span></span><br /><span style="color: blue;"><span style="color: black;"><br /></span></span><span style="color: blue;"><span style="color: black;">Contoh/screenshot hasil dari Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu dengan cara diatas.</span></span><br /><br /><span style="color: blue;"><span style="color: black;">Homepage, terdapat tiga kolom widget termasuk sidebar kiri.</span></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjriX64af4-qV82YSq8wroL_UeNV5LEgrdUi1VYJZC-3Gf7veaXkBeKhDgoPH8XVL5C4EAj7cglP5WQAxiDvQgvvSZrn5yxX7rtyKfYW45kMNl-y0t_TQgVAm6TwLy3di-dkzSXPTDyTRg/s1600/Untitled3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjriX64af4-qV82YSq8wroL_UeNV5LEgrdUi1VYJZC-3Gf7veaXkBeKhDgoPH8XVL5C4EAj7cglP5WQAxiDvQgvvSZrn5yxX7rtyKfYW45kMNl-y0t_TQgVAm6TwLy3di-dkzSXPTDyTRg/s320/Untitled3.png" width="320" /></a></div><br /><span style="color: blue;"><span style="color: black;">Namun pada halaman posting, sidebar kiri menghilang dan kolom posts bertambah lebar.</span></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TT2rivpeE8rg7J5vJaCpcMUJEkPfLbUZKu78SQFVD79Ax2CGx9rVS3QllD04rRGwQPuo4QOEKnWtyrtlrEuCn9bY5HTcJQ-ABSgOAPHC-dh5enxTSSteAHqWcqIi-Xhp7rIyEWJQZew/s1600/Untitled4.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TT2rivpeE8rg7J5vJaCpcMUJEkPfLbUZKu78SQFVD79Ax2CGx9rVS3QllD04rRGwQPuo4QOEKnWtyrtlrEuCn9bY5HTcJQ-ABSgOAPHC-dh5enxTSSteAHqWcqIi-Xhp7rIyEWJQZew/s320/Untitled4.png" width="320" /></a></div></div></div>

edit template Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu

Rasanya saya sudah jarang membuat posting baru pada blog tercinta ini. Hari ini saya mengunjungi Blog teman dan melihat kolom widget yang ...

Read more »

Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOg1CE2NIA9HRmFpm207F_hiMX9gjHmCKUHxDaeLHkXXRXVKaRaqgSxOB6NlWVvd6gBPfSujW0kPrTwX1BM6ThyphenhyphenfqFFHtodUAIgMtX4CyR98XliKFBH90x15yvx5eimDZ7w_2e9uZkT1c/s1600/Untitled.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOg1CE2NIA9HRmFpm207F_hiMX9gjHmCKUHxDaeLHkXXRXVKaRaqgSxOB6NlWVvd6gBPfSujW0kPrTwX1BM6ThyphenhyphenfqFFHtodUAIgMtX4CyR98XliKFBH90x15yvx5eimDZ7w_2e9uZkT1c/s200/Untitled.png" title="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" width="200" /></a></div>Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu ini memiliki alasan tertentu. Seperti ketika sebuah widget sekiranya tidak perlu ditampilkan di halaman konten, agar pengunjung fokus dalam membaca artikel blog sobat. Atau karena memang widget perlu ditampilkan pada halaman tertentu untuk kebutuhan pengunjung blog, dan dihilangkan karena pada halama lain terlalu banyak memuat widget. Atau apalah alasanya masih banyak lagi.<br /><a href="http://www.blogger.com/null" name="more"></a>Tidak seperti artikel kemarin yang bisa dibilang memiliki fungsi menampilkan kolom widget atau sederetan widget hanya tampil pada halaman tertentu. Untuk yang akan saya bahas kali ini hanya melibatkan satu buah widget saja.<br />OK, kita mulai pada langkah-langkahnya.<br />1. Login ke akun Blogger sobat.<br />2. Pastikan sobat telah memasang widget yang akan sobat tampilkan pada halaman tertentu saja.<br />3. Ketahuilah widget id-nya, dengan cara masuk Tata Letak>> Sentuhkan cursor di tulisan Edit pada widget terkait>> perhatikan tulisan di sudut kiri bawah layar monitor, terdapat nama widget id.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyYkrkA9auM8xX0280bpJss2yEn7f4hGFDcK1baUO-7AFpHL8P2tdAiok2SgGfEnLvre1tX1qNqsv9v9FUNYx3xXgEh-VVbS55rU-FFtD5GpUVQUs7No-2vHYt2Azpd4Pdjq1mopQvG4/s1600/Untitled1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyYkrkA9auM8xX0280bpJss2yEn7f4hGFDcK1baUO-7AFpHL8P2tdAiok2SgGfEnLvre1tX1qNqsv9v9FUNYx3xXgEh-VVbS55rU-FFtD5GpUVQUs7No-2vHYt2Azpd4Pdjq1mopQvG4/s400/Untitled1.png" title="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" width="400" /></a></div><br />Disini saya mencontohkan pada widget terjemahan. Perhatikan gambar diatas, telah diketahui nama widget id-nya adalah <i><b>Translate1</b></i>.<br />4. Setelah widget id diketahui, selanjutnya sobat masuk ke bagian Template>> Edit HTML.<br />5. Template perlu di-expand. Karena telah tidak ada opsi "expand template widget", maka beginilah cara meng-expand-nya. Cari widget-id terkait dengan tombol ctrl+F, lalu perhatikan terdapat kode <i><b><widget>...</widget></b></i>. Klik pada bagian "titik-titik" diantar kode tersebut. Lalu akan terdapat kode <i><b><b:includable>...</b:includable>, </b></i>klik juga pada bagian "titik-titik" diantar kode tersebut.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU57rpyi38PMMG8Z7KfBIOjjDyEOiHzW9AN0K4KcWxRhIe1xDMMsY6ysd_bifBxpDVMU0f5mc9u7cHZKkbTokzQ8ZwCGiRRiKaRse5FvMrVDXexFiMXoDepqmkte6wwvrjii_Bo7U3e4w/s1600/Untitled2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU57rpyi38PMMG8Z7KfBIOjjDyEOiHzW9AN0K4KcWxRhIe1xDMMsY6ysd_bifBxpDVMU0f5mc9u7cHZKkbTokzQ8ZwCGiRRiKaRse5FvMrVDXexFiMXoDepqmkte6wwvrjii_Bo7U3e4w/s400/Untitled2.png" title="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" width="400" /></a></div><br />6. Pilihlah letak halaman yang sobat inginkan, simak kode-kode berikut.<br /><br />Menampilkan widget hanya pada HomePage.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'><br />...</span></b><span style="color: red;"><b>................................................................................</b></span><b><span style="color: red;">.............................................................</b:if></span></b></div><br />Menampilkan widget di semua halaman kecuali homepage.</div></div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span></b><br /><b><span style="color: red;">.</span><span style="color: red;"><span style="color: red;">...............................................................................................................................................</b:if></span> </span></b></div><br />Menampilkan widget hanya pada halaman Archive.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType == &quot;archive&quot;'><span style="color: red;"><span style="color: red;"> <br />................................................................................................................................................</b:if></span></span></span></b></div><br />Menampilkan widget di semua halaman kecuali halaman archive. </div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType != &quot;archive&quot;'></span></b><span style="color: red;"><b><span style="color: red;"><span style="color: red;"><span style="color: red;"> </span></span></span></b></span><br /><span style="color: red;"><b><span style="color: red;"><span style="color: red;"><span style="color: red;">................................................................................................................................................</b:if></span></span></span></b> </span></div><br />Menampilkan widget hanya di halaman posting.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br /><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;">................................................................................................................................................</b:if></span></span></span></span></b></div><br />Menampilkan widget di semua halaman, kecuali halaman posting.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType != &quot;item&quot;'></span></b><span style="color: red;"><b><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"> </span></span></span></span></b></span><br /><span style="color: red;"><b><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;">................................................................................................................................................</b:if></span></span></span></span></b> </span></div><br />Menampilkan widget hanya di halaman tertentu.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType == &quot;<span style="color: blue;">urlhalamantertentu</span>&quot;'></span><br /><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;">................................................................................................................................................</b:if></span></span></span></span></span></b></div><i>kode berwarna biru ubah dengan url halaman</i><br /><br />Menampilkan widget di semua halaman kecuali halaman tertentu.</div><div style="background: #f2f2f2; border: 2px solid #708090; height: 50px; overflow: auto; padding: 15px;"><b><span style="color: red;"><b:if cond='data:blog.pageType != &quot;</span></b><b><span style="color: red;"><span style="color: blue;"><b><span style="color: red;"><span style="color: blue;">urlhalamantertentu</span></span></b></span>&quot;'></span><br /><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;">................................................................................................................................................</b:if></span></span></span></span></span></b></div><i>kode berwarna biru ubah dengan url halaman</i><br /><br />7. Terapkan salah satu kode diatas sesuai dengan letak halaman yang sobat inginkan.<br />Saya akan mencontohkan penerapan kode yang pertama, pada widget terjemahan yang sebelumnya telah diketahui widget id-nya dan di-expand template widget-nya.<br />Letakan kode <b><span style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'> </span></b><span style="color: red;"><span style="color: black;">di bawah kode <b><i><span style="color: blue;"><b:includable id='main'></span>, </i></b>dan kode <b><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"></b:if> </span></span></span></span></span></b></span></span><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: black;">di atas kode <span style="color: blue;"><i><b></b:includable></b></i></span></span></span></span></span></span></span><span style="color: red;">. <span style="color: black;">Sehingga kurang lebih hasilnya akan seperti berikut.</span></span></div><br /><div style="background: #f2f2f2; border: 2px solid #708090; height: 420px; overflow: auto; padding: 15px;">          <b:widget id='<b><i>Translate1</i></b>' locked='false' title='Translate' type='Translate'><br />            <span style="color: blue;"><b><b:includable id='main'></b></span><br /><span style="color: blue;"><b><b><span style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span></b> </b></span><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div id='google_translate_element'/><br />  <script><br />    function googleTranslateElementInit() {<br />      new google.translate.TranslateElement({<br />        pageLanguage: &#39;<data:pageLanguage/>&#39;,<br />        autoDisplay: &#39;true&#39;,<br />        layout: google.translate.TranslateElement.InlineLayout.<data:layout/><br />      }, &#39;google_translate_element&#39;);<br />    }<br />  </script><br />  <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/><br />  <b:include name='quickedit'/><br /><span style="color: red;"><span style="color: black;"><b><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"><span style="color: red;"></b:if></span></span></span></span></span></b></span></span> <br /><span style="color: blue;"><b></b:includable></b></span><br />          </b:widget></div><br />8. Jika telah selesai menerapkan kode-kodenya, silakan klik Simpan Template.<br /><br />Maka hasilnya akan seperti berikut.<br />Pada HomePage widget terjemahan ditampilkan.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi956l8Ja6dk2hl6fSCjWFqcSOeGqxVDZAfE1-EOMDMXeTN7vYbEboAIPLarODz9tMFbmVpDP9hmLVVDHe5qwt0bEakWpSJST4z606qt0tWa-_6cCwk63zJLeGstq9Dx-QVoS78J_vfrfM/s1600/Untitled3.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi956l8Ja6dk2hl6fSCjWFqcSOeGqxVDZAfE1-EOMDMXeTN7vYbEboAIPLarODz9tMFbmVpDP9hmLVVDHe5qwt0bEakWpSJST4z606qt0tWa-_6cCwk63zJLeGstq9Dx-QVoS78J_vfrfM/s400/Untitled3.png" title="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" width="400" /></a></div><br />Sedangakan pada halaman lain widget terjemahan tidak ditampilkan.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf0TNQ711XRM2ZxGSzrtebDWLdgcWCBIk_Hws_hHnpvzWYDC6JQODTyDavMwq8vztqbQEXlo1y1_R6b16Kx_6VvWmndsrfmAWLaAwebfxD9lQYg1aHDE-VANMYYM5C7zPwumREfNoUxQ/s1600/Untitled4.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf0TNQ711XRM2ZxGSzrtebDWLdgcWCBIk_Hws_hHnpvzWYDC6JQODTyDavMwq8vztqbQEXlo1y1_R6b16Kx_6VvWmndsrfmAWLaAwebfxD9lQYg1aHDE-VANMYYM5C7zPwumREfNoUxQ/s400/Untitled4.png" title="Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu" width="400" /></a></div></div></div>

edit template Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu

Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu ini memiliki alasan tertentu. Seperti ketika sebuah widget sekiranya tidak perlu di...

Read more »