tag:blogger.com,1999:blog-12115234753556066272024-11-05T18:57:25.652-08:00Cara-BloggerRidwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-1211523475355606627.post-39925977992407537012016-12-06T20:47:00.000-08:002016-12-06T20:47:13.533-08:00Penggunaan Tag List Atau Daftar Dalam HTML<div class="separator" style="clear: both; text-align: center;"> <a 1="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pGOm8Oc8fEi13hF9U7978gEy7kJ9dKY4hmmCYZzzTIUS1aStiIPNs6O0pJu1WEKm9qWOSKiPfLlb-_nB3MQhNnr6m0UbRaXdqM_b5Cu-bFK1DBs2NFGRQQbHV_UFkwviKca5ysLVy707/s1600/tag.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tag.jpg" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pGOm8Oc8fEi13hF9U7978gEy7kJ9dKY4hmmCYZzzTIUS1aStiIPNs6O0pJu1WEKm9qWOSKiPfLlb-_nB3MQhNnr6m0UbRaXdqM_b5Cu-bFK1DBs2NFGRQQbHV_UFkwviKca5ysLVy707/s1600/tag.png" title="Tag.jpg" width="200" /></a></div> Dalam posting kali ini saya akan menjelaskan salah satu dari tag HTML yaitu tag untuk membuat list atau daftar, dalam html ada beberapa tag list yaitu <b>&lt;li&gt;</b>, <b>&lt;ul&gt;</b>, <b>&lt;ol&gt;</b>.<br /> <br /> Dalam tag list ada 2 jenis yaitu ordered list &lt;ul&gt; dan unodered list &lt;ul&gt;, jika ordered list akan menampilkan list dengan angka atau huruf, sedangkan unordered list akan menampilkan list dengan bulatan atau kotak, sedangkan tag &lt;li&gt; untuk list itu sendiri atau agar list bisa terlihat bejajar.<br /> <br /> Berikut adalah contoh penggunaan tag list dalam html<br /> <br /> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;!DOCTYPE html&gt;</blockquote> <blockquote class="tr_bq"> &lt;html&gt;</blockquote> <blockquote class="tr_bq"> &lt;head&gt;</blockquote> <blockquote class="tr_bq"> &lt;title&gt;Penggunaan Tag List&lt;/title&gt;</blockquote> <blockquote class="tr_bq"> &lt;/head&gt;</blockquote> <blockquote class="tr_bq"> &lt;body&gt;</blockquote> <blockquote class="tr_bq"> &lt;h1&gt;Penggunaan Tag List&lt;/h1&gt;</blockquote> <blockquote class="tr_bq"> &lt;h2&gt;Penggunaan Tag Ordered List&lt;/h2&gt;</blockquote> <blockquote class="tr_bq"> &lt;ol&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 1&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 2&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 3&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 4&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 5&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;/ol&gt;</blockquote> <blockquote class="tr_bq"> &lt;h2&gt;Penggunaan Tag Unordered List&lt;/h2&gt;</blockquote> <blockquote class="tr_bq"> &lt;ul&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 1&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 2&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 3&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 4&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;li&gt;List 5&lt;/li&gt;</blockquote> <blockquote class="tr_bq"> &lt;/ul&gt;</blockquote> <blockquote class="tr_bq"> &lt;/body&gt;</blockquote> <blockquote class="tr_bq"> &lt;/html&gt;</blockquote> </blockquote> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMzaRXnv1nVIQJAGPXOlZ1VDSFJCDhAAFuExu9T5EssHBKREb17_M4cxO6mGZl-TDwRV9s1AUwKAJ73G27vIReKRPcN7AleQoD24A86lE7Dhpk7LBBn6D30uMTk5KnZzK0shwZvxt-ltX/s1600/tagli.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tagli.jpg" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMzaRXnv1nVIQJAGPXOlZ1VDSFJCDhAAFuExu9T5EssHBKREb17_M4cxO6mGZl-TDwRV9s1AUwKAJ73G27vIReKRPcN7AleQoD24A86lE7Dhpk7LBBn6D30uMTk5KnZzK0shwZvxt-ltX/s320/tagli.jpg" title="Tagli.jpg" width="255" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Penggunaan tag list tidak hanya digunakan untuk membuat daftar saja, tapi dengan menggunakan CSS kita juga bisa membuat menu navigasi seperti menu home, contact, us, about dan masih banyak lagi. Tag list juga bisa digunakan untuk list bersarang artinya list yang berada di list lainnya.</div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Happy Blogging............(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com2tag:blogger.com,1999:blog-1211523475355606627.post-65135953123803043022016-12-01T00:37:00.000-08:002017-01-29T22:52:25.261-08:00Tips Cara Meningkatkan Keberadaan Blog di Search Engine<div class="separator" style="clear: both; text-align: center;"> <a 1="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oyX0RBzSPLP077RunOwtNyUdLFb5FYf4CYPQDiUaLvndw2hO1ChzVA9rZ4HPHk3PU8IKghKRje3aiJJM0e-Js1EkRk1xcisyr3A0cpqWoLO4xp-MQrYrVAQGY0hndVjJgFJ3QLxnHt8_/s1600/search+engines.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="SearchEngine.png" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oyX0RBzSPLP077RunOwtNyUdLFb5FYf4CYPQDiUaLvndw2hO1ChzVA9rZ4HPHk3PU8IKghKRje3aiJJM0e-Js1EkRk1xcisyr3A0cpqWoLO4xp-MQrYrVAQGY0hndVjJgFJ3QLxnHt8_/s1600/search+engines.png" title="SearchEngine.png" width="200" /></a></div> <b>Search Engine</b>&nbsp;atau yang sering kita sebut mesin pencari adalah suatu software untuk mencari berbagai informasi di internet, hanya dengan mengetikan kata kunci yang kita cari, kita akan menemukan apa yang sedang kita cari.<br /> <br /> Ada banyak berbagai search engine diantaranya adalah <b>Google</b>, <b>Ask</b>, <b>Bing</b>, dan juga<b>&nbsp;Yahoo</b>. Pada saat kita mencari informasi kita akan menemukan apa yang kita cari dalam bentuk blog atau web. tugas kita sebagai blogger untuk menyampaikan informasi kepada visitor. Tapi dalam search engine sudah banyak blog yang menyediakan sebuah artikel dan mungkin blog kita tidak akan terlihat oleh search engine dan blog kita akan kekurangan visitor.<br /> <br /> Agar blog kalian bisa terlihat oleh search engine kalian bisa mengikuti beberapa tips saya dibawah ini:<br /> <h2> Webmaster</h2> <div> Webmaster adalah aplikasi yang dibuat oleh google agar blog kalian lebih mudah terindex oleh search engine terutama google, untuk cara mendaftarkannya cukup mudah kalian hanya harus menuliskan alamat url blog kalian di <b>https://www.google.com/webmasters/ </b>dan mengikuti langkah yang diberikan oleh google.</div> <div> <h2> Posting</h2> </div> <div> Posting ini adalah bagian yang terpenting bagi blog karena posting isi dari sebuah blog, saya sarankan untuk membuat posting original jangan sampai melakukan copas karena itu akan memperburuk reputasi blog, buatlah posting yang pasti dicari oleh para visitor dengan begitu blog akan lebih mudah unutk terindex oleh search engine, dan buatlah banyak posting agar search engine lebih percaya dengan blogmu.</div> <h2> Template Blog</h2> <div> Template blog juga menjadi salah satu bagian yang penting, pakailah template blog yang <b>SEO Friendly</b>&nbsp;agar blog lebih mudah terindex oleh search engine, dan gunakan juga template yang fast loading, responsive, dan tentunya user friendly jangan pakai template blog yang ribet.</div> <h2> Mempromosikan Blog </h2> <div> Salah satu cara agar blog mudah terindex oleh search engine adalah mempromosikannya, contoh yang baik adalah mempromosikan blog kita di media sosial jika blog kita terkenal di media sosial maka otomatis search engine akan lebih mudah mengenal blog kita.</div> <div> <h2> Domain Blog</h2> </div> <div> Domain blog juga bisa menjadi cara untuk meningkatkan visitor dari search engine, saya sarankan memakai nama domain yang mudah diingat oleh visitor atau menggunakan domain yang biasanya dipakai untuk kata kunci.</div> <div> <br /></div> <div> Diatas beberapa dari banyak cara untuk meningkatkan keberadaan blog di search engine, cara di atas memang bisa dikatakan sulit karena sudah banyak blog di dunia yang mempublikasikan berbagai posting mereka sendiri, tapi jangan menyerah dan carilah posting originalmu sendiri.</div> <div> <br /></div> <div> Happy Blogging................(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-90676945818808470632016-11-28T01:33:00.000-08:002016-11-28T01:33:03.835-08:00Mengenal Fungsi Tab H1 Dalam HTML<div class="separator" style="clear: both; text-align: center;"> <a 1="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOHsC63Xt7KB9yjfWNqObkWZCq5WnMgu7-pQcTStXeMAFqUux8R_OlV8dDJJ_mNS1Sne_fb3en2wcSihodOiOBWfWKc1TZWnhxCanmsTKF66pcmHnFbUNfXvu4TGKoVQWKDjqlKrQrPxg/h120/H1.png%20imageanchor=" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="H1" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOHsC63Xt7KB9yjfWNqObkWZCq5WnMgu7-pQcTStXeMAFqUux8R_OlV8dDJJ_mNS1Sne_fb3en2wcSihodOiOBWfWKc1TZWnhxCanmsTKF66pcmHnFbUNfXvu4TGKoVQWKDjqlKrQrPxg/h120/H1.png" title="H1" width="200" /></a></div> Pada posting yang sebelumnya kita telah membahas tentang beberapa tag dan fungsinya, tapi dalam HTML masih banyak tag yang wajib di pakai contohnya pada posting kali ini saya akan membahas tentang salah satu tag dalam HTML yaitu tag &lt;h1&gt;.<br /> <br /> Dalam HTML terdapat tag khusus untuk membuat sebuah judul, tag ini adalah tag &lt;h1&gt; , tag ini berasal dari kata heading, dan juga dirancang agar terpisah dengan paragraf, tag heading ini biasanya digunakan untuk judul dari sebuah paragraf.<br /> <br /> Dalam tag heading ini memiliki 6 jenis yaitu, <b>&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;,&lt;h4&gt;, &lt;h5&gt;, </b>dan <b>&lt;h6&gt;</b>. dalam tingkatan ini semakin besar nomor yang digunakan maka semakin kecil ukuran huruf yang ditampilkan, secara default tag ini akan menggunakan huruf tebal atau <b>Bold</b>.<br /> <br /> Berikut akan saya berikan contoh menggunakan tag heading:<br /> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;!DOCTYPE html&gt;</blockquote> <blockquote class="tr_bq"> &lt;html&gt;</blockquote> <blockquote class="tr_bq"> &lt;head&gt;</blockquote> <blockquote class="tr_bq"> &lt;title&gt;Penggunaan tag Heading&lt;/title&gt;</blockquote> <blockquote class="tr_bq"> &lt;/head&gt;</blockquote> <blockquote class="tr_bq"> &lt;body&gt;</blockquote> <blockquote class="tr_bq"> &lt;p&gt;Berbagai jenis tag heading&lt;/p&gt;</blockquote> <blockquote class="tr_bq"> &lt;h1&gt;Tag H1&lt;/h1&gt;</blockquote> <blockquote class="tr_bq"> &lt;h2&gt;Tag H2&lt;/h2&gt;</blockquote> <blockquote class="tr_bq"> &lt;h3&gt;Tag H3&lt;/h3&gt;</blockquote> <blockquote class="tr_bq"> &lt;h4&gt;Tag H4&lt;/h4&gt;</blockquote> <blockquote class="tr_bq"> &lt;h5&gt;Tag H5&lt;/h5&gt;</blockquote> <blockquote class="tr_bq"> &lt;H6&gt;Tag H6&lt;/h6&gt;</blockquote> <blockquote class="tr_bq"> &lt;/body&gt;</blockquote> <blockquote class="tr_bq"> &lt;/html&gt;</blockquote> </blockquote> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyvCrgQd9GhqyoUrSJ1-SOb1l_TOFLukqMF1bvaWRyM9C7SwVCz035cu8pzAVwGUZRZY9QMMBqcA2hSmLKSTO5puhI5tib-UXBzFuxx5S4Egbwve11NUgBrxLQrkmE4MTo93wSdlAIwGP/s1600/CT.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CT.jpg" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyvCrgQd9GhqyoUrSJ1-SOb1l_TOFLukqMF1bvaWRyM9C7SwVCz035cu8pzAVwGUZRZY9QMMBqcA2hSmLKSTO5puhI5tib-UXBzFuxx5S4Egbwve11NUgBrxLQrkmE4MTo93wSdlAIwGP/s320/CT.jpg" title="CT.jpg" width="164" /></a></div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Dan hasilnya akan seperti di atas, tapi dalam pembuatan artikel terkadang kita juga menggunakan tag heading ini, berikut adalah contoh struktur penggunaan tag heading dalam artikel:</div> <blockquote class="tr_bq" style="clear: both; text-align: left;"> <blockquote class="tr_bq" style="clear: both;"> &lt;!DOCTYPE html&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;html&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;head&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;title&gt;Penggunaan Tag Heading&lt;/title&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;/head&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;body&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;h1&gt;Judul Artikel&lt;/h1&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;p&gt;.....Isi Artikel........&lt;/p&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;h2&gt;Sub Judul Artikel&lt;/h2&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;p&gt;.....Isi Sub Judul Artikel........&lt;/p&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;h2&gt;Sub Judul Artikel 2&lt;/h2&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;p&gt;.....Isi Sub Judul Artikel 2........&lt;/p&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;h3&gt;.....Sub Judul Artikel 2.1......&lt;/h3&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;p&gt;.......Isi Sub Judul Artikel 2.1............&lt;/p&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;/body&gt;</blockquote> <blockquote class="tr_bq" style="clear: both;"> &lt;/html&gt;</blockquote> </blockquote> Dengan menggunakan tag heading dengan benar kita bisa membuat sebuah konten sederhana hanya menggunakan HTML.<br /> <br /> Dalam Search Engine mereka akan memberikan nilai lebih pada tag heading. Tag <b>&lt;h1&gt;</b>&nbsp;juga dianggap lebih bernilai dari pada &nbsp;tag <b>&lt;h2&gt;</b>, ataupun <b>&lt;h3&gt;</b>, karena tag heading dianggap mewakili semua isi konten atau artikel.<br /> <br /> Happy Blogging....................(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-80864653183698701872016-11-25T20:36:00.000-08:002016-11-25T20:40:36.996-08:00Cara Membuat Popular Post Warna-Warni<div class="separator" style="clear: both; text-align: center;"> </div> <b>Popular Post</b>&nbsp;adalah sebuah widget blog yang berfungsi untuk menampilkan daftar posting yang paling sering dikunjungi oleh visitor, widget ini sudah disediakan oleh blogger di menu tata letak. Selain itu widget ini juga dapat memperbanyak visitor yang berkunjung ke blog kita, dengan memasang widget ini dan memperindah tampilan widget ini.<br /> <br /> Dengan memasang widget ini dengan menarik akan membuat pengunjung mengklik posting kita dan akan membuat pengunjung lebih betah berada di blog kita. dengan begitu blog kita akan lebih mudah untuk terlihat di Search Engine.<br /> <br /> Tapi, widget popular post bawaan dari blogger tampilannya kurang menarik, dengan pengaturan yang rumit jadi para blogger akan ragu saat mengganti pengaturannya, jadi saya akan membahas tentang cara merubah tampilan widget popular post, tanpa harus berurusan dengan HTML.<br /> <br /> Berikut ini adalah contoh popular post yang akan kita buat<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN11FkMQqYBolK6zfl1TaLPbFdPaoJRS5jaq_FkF3iQjeXtTldfLAaX-HpWedKv4DfXTAPpK-LJs-PQPHU7Db1C24ZzBKutTaXR-SVWgoBe3DaFOnhmNdz1oy3Lh_Qlznur6QwHNyeLl8j/s1600/Post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Post.jpg" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN11FkMQqYBolK6zfl1TaLPbFdPaoJRS5jaq_FkF3iQjeXtTldfLAaX-HpWedKv4DfXTAPpK-LJs-PQPHU7Db1C24ZzBKutTaXR-SVWgoBe3DaFOnhmNdz1oy3Lh_Qlznur6QwHNyeLl8j/s320/Post.jpg" title="Post.jpg" width="154" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Tapi sebelum membuatnya anda harus mengaktifkan widget popular post di dasbor blogger terlebih dahulu, berikut caranya:</div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul> <li>Pertama masuk ke menu tata letak, lalu pili tambahkan gadget dan cari entri populer</li> <li>Jangan lupa untuk mencentang Thumbnail gambar.</li> </ul> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_GI49L02vMjrZ2ZM3vZq9LML-ZtA9HALDUBefcFmuZCgt4T0jOkRF26s8zj0t_R6KrGW8Kff1tn064iqdM-kDjwJNJM3sD6InNK10UD3KwH-pN6fs1-GYJTlIEtFIy8uFuGOdq68jPXH5/s1600/popular.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Popular.jpg" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_GI49L02vMjrZ2ZM3vZq9LML-ZtA9HALDUBefcFmuZCgt4T0jOkRF26s8zj0t_R6KrGW8Kff1tn064iqdM-kDjwJNJM3sD6InNK10UD3KwH-pN6fs1-GYJTlIEtFIy8uFuGOdq68jPXH5/s320/popular.jpg" title="Popular.jpg" width="308" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Jika widget telah diaktifkan sekarang tinggal memasukan CSS agar popular post terlihat lebih menarik, berikut caranya:</div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul> <li>Copykan code CSS berikut</li> </ul> <blockquote class="tr_bq"> <blockquote class="tr_bq"> /* Popular Post */</blockquote> <blockquote class="tr_bq"> .PopularPosts ul,</blockquote> <blockquote class="tr_bq"> .PopularPosts li,</blockquote> <blockquote class="tr_bq"> .PopularPosts li img,</blockquote> <blockquote class="tr_bq"> .PopularPosts li a,</blockquote> <blockquote class="tr_bq"> .PopularPosts li a img {</blockquote> <blockquote class="tr_bq"> margin:0 0;</blockquote> <blockquote class="tr_bq"> padding:0 0;</blockquote> <blockquote class="tr_bq"> list-style:none;</blockquote> <blockquote class="tr_bq"> border:none;</blockquote> <blockquote class="tr_bq"> background:none;</blockquote> <blockquote class="tr_bq"> outline:none;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .PopularPosts ul {</blockquote> <blockquote class="tr_bq"> margin:.5em 0;</blockquote> <blockquote class="tr_bq"> list-style:none;</blockquote> <blockquote class="tr_bq"> color:black;</blockquote> <blockquote class="tr_bq"> counter-reset:num;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .PopularPosts ul li img {</blockquote> <blockquote class="tr_bq"> display:block;</blockquote> <blockquote class="tr_bq"> margin:0 .5em 0 0;</blockquote> <blockquote class="tr_bq"> width:50px;</blockquote> <blockquote class="tr_bq"> height:50px;</blockquote> <blockquote class="tr_bq"> float:left;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .PopularPosts ul li {</blockquote> <blockquote class="tr_bq"> background-color:#eee;</blockquote> <blockquote class="tr_bq"> margin:0 10% .4em 0 !important;</blockquote> <blockquote class="tr_bq"> padding:.5em 1.5em .5em .5em !important;</blockquote> <blockquote class="tr_bq"> counter-increment:num;</blockquote> <blockquote class="tr_bq"> position:relative;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .PopularPosts ul li:before,</blockquote> <blockquote class="tr_bq"> .PopularPosts ul li .item-title a, .PopularPosts ul li a {</blockquote> <blockquote class="tr_bq"> font-weight:normal;</blockquote> <blockquote class="tr_bq"> color:#000 !important;</blockquote> <blockquote class="tr_bq"> text-decoration:none;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> .PopularPosts ul li:before {</blockquote> <blockquote class="tr_bq"> content:counter(num) !important;</blockquote> <blockquote class="tr_bq"> display:block;</blockquote> <blockquote class="tr_bq"> position:absolute;</blockquote> <blockquote class="tr_bq"> background-color:#333;</blockquote> <blockquote class="tr_bq"> color:#fff !important;</blockquote> <blockquote class="tr_bq"> width:22px;</blockquote> <blockquote class="tr_bq"> height:22px;</blockquote> <blockquote class="tr_bq"> line-height:22px;</blockquote> <blockquote class="tr_bq"> text-align:center;</blockquote> <blockquote class="tr_bq"> top:0px;</blockquote> <blockquote class="tr_bq"> right:0px;</blockquote> <blockquote class="tr_bq"> padding-right:0px !important;</blockquote> <blockquote class="tr_bq"> }</blockquote> </blockquote> <br /> <ul> <li>Pastekan code di atas tepat di bawah tag &lt;style&gt;</li> <li>Lalu simpan dan lihat hasilnya.</li> </ul> &nbsp;Sekarang popular post anda akan berwarna-warni dan lebih menarik untuk dilihat, jika kalian memiliki pertanyaan silahkan untuk menanyakannya di kotak komentar.<br /> <br /> Happy Blogging..........(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-6061692858401456492016-11-23T00:36:00.000-08:002016-11-23T00:36:48.315-08:00Penggunaan Tag dan Atribut Pada HTML<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pGOm8Oc8fEi13hF9U7978gEy7kJ9dKY4hmmCYZzzTIUS1aStiIPNs6O0pJu1WEKm9qWOSKiPfLlb-_nB3MQhNnr6m0UbRaXdqM_b5Cu-bFK1DBs2NFGRQQbHV_UFkwviKca5ysLVy707/s1600/tag.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pGOm8Oc8fEi13hF9U7978gEy7kJ9dKY4hmmCYZzzTIUS1aStiIPNs6O0pJu1WEKm9qWOSKiPfLlb-_nB3MQhNnr6m0UbRaXdqM_b5Cu-bFK1DBs2NFGRQQbHV_UFkwviKca5ysLVy707/s200/tag.png" width="200" /></a></div> Pada posting sebelumnya kita sudah membahas tetang pengertian dari dasar <b>HTML</b>&nbsp;dan saya juga sudah memberikan sebuah contoh sebuah kerangka website simple yang hanya berisi html saja.<br /> <br /> Pada posting kali saya akan menjelaskan tentang penggunaan tag dan atribut pada HTML, tag adalah suatu code yang digunakan untuk memberi tahu untuk apa code tersebut, contoh penggunaan tag adalah &lt;Tag&gt;objek tag&lt;/Tag&gt; seperti yang kita bahas di posting sebelumnya sebuah tag akan diakhiri oleh tanda /(garis miring), tag juga selalu berada di tengah tanda kurung siku-siku (&lt; dan &gt;), Itulah ciri-ciri dari sebuah tag HTML.<br /> <h2> Pengertian Tag Dalam HTML</h2> <div> Sekarang saya akan memberikan sebuah contoh penulisan tag dalam sebuah HTML.</div> <blockquote class="tr_bq"> &lt;p&gt;Contoh dalam penggunaan tag&lt;/p&gt;</blockquote> Dalam contoh di atas saya menggunakan contoh tag <i style="font-weight: bold;">p</i>, tag ini berfungsi untuk pengaturan paragraf, diakhir penulisan tag saya menggunakan /(<i>Garis Miring</i>) sebagai tag penutup, tapi di beberapa browsing jika kita lupa menggunakan tag penutup ini yang akan dihasilkan adalah tag yang seolah-olah sudah tertutup, namun ada juga browsing yang tetap kita harus menggunakan tag penutup ini.<br /> <br /> Berikut ini adalah contoh lain dalam sebuah penulisan tag dengan sebuah paragraf yang ditulis dengan tebal dan miring.<br /> <blockquote class="tr_bq"> &lt;p&gt;Saya Belajar tentang &lt;b&gt;Tag &lt;/b&gt;di&lt;i&gt;Cara-Blogger&lt;/i&gt;&lt;/p&gt;</blockquote> &nbsp;Menurut tag di atas tag <i style="font-weight: bold;">b</i>&nbsp;atau bold digunakan untuk tulisan dengan tebal, sedangkan tag <i style="font-weight: bold;">i</i>&nbsp;atau italic digunakan untuk tulisan miring, sebenarnya untuk penulisan &lt;b&gt; dan &lt;i&gt; ada tag yang hampir sama fungsinya yaitu tag &lt;strong&gt; dan &lt;em&gt; tag <b>strong</b>&nbsp;adalah tag yang sama fungsinya dengan tag <i style="font-weight: bold;">b</i>&nbsp;karena menebalkan tulisan, sedangkan tag &lt;em&gt; dan tag &lt;i&gt; keduanya akan ditampilkan sebagai teks miring. Tag &lt;em&gt; singkatan dari emphasis, pada zaman XHTML tag &lt;em&gt; dianggap lebih baik daripada tag &lt;i&gt;, namun dalam HTML5 keduanya tetap bisa digunakan, namun tag &lt;i&gt; diubah fungsinya untuk menandai bagian teks dengan alternative voice.<br /> <h2> Pengertian Atribut Dalam HTML</h2> <div> Atribut adalah informasi tambahan yang diberikan kepada tag. Misalkan informasi intruksi untuk merubah warna teks, atau besar kecilnya sebuah teks dan masih banyak lagi. Dalam atribut harus memiliki pasangan yaitu <b>Nama</b>&nbsp;dan <b>Nilai </b>(Value). Value harus diapit dengan tanda kutip seperti <b>Nama='Value'</b>, boleh menggunakan kutip 2 (") atau kutip satu (').<br /> <br /> Berikut ini adalah contoh penggunaan atribut dalam HTML<br /> <blockquote class="tr_bq"> &lt;a href='http://www.cara-blogger.ga'&gt;Cara-Blogger&lt;/a&gt;</blockquote> Di atas adalah contoh atribut dengan perintah untuk memasukan sebuah link, &nbsp;<b>href </b>sebagai nama dari sebuah atribut, dan <b>http://www.cara-blogger.ga </b>adalah nilai atau value dari sebuah atribut&nbsp;.<br /> <br /> Tapi tidak semua tag membutuhkan atribut, namun dalam pembuatan HTML kalian akan bertemu dengan banyak sekali atribut yang kemungkinan akan sering ditemui adalah <b>class</b>&nbsp;dan <b>id </b>yang digunakan untuk menghubungkan <b>CSS </b>dan <b>JavaScript</b>.<br /> <br /> Pada posting kali ini kita sudah belajar tentang penggunaan Tag dan Atribut, dalam penulisan HTML tag dan atribut sangat berperan penting. Jadi kita harus banyak mempelajari dan mencari berbagai macam tag, jika kalian ingin handal dalam masalah pemprograman jangan kalian hafalkan bahasa pemprograman, tapi seringlah menulis bahasa pemprograman tersebut.<br /> <br /> Happy Blogging.......................(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-20640750310597429062016-11-14T03:23:00.003-08:002016-11-22T16:47:30.457-08:00Dasar Dalam Mengenal HTML<div class="separator" style="clear: both; text-align: center;"> </div> <img alt="html.png" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCAzIRVQ8ML1M4v-sjGgRAEDRTbf7DKF2-N1p-8YCp-q3NAGXnHiWTWnE6iavyug7mxw47MngRk5evLXWFNKAA_mP75VNuhVjmxtLzskWfLKpyjOiR9U_F_Up8MIthBfIOS7rSXjsqnzE/s320/html.png" style="float: left;" title="html.png" width="200" /><b>Hypertext Markup Language</b>&nbsp;atau yang sering disebut <b>HTML</b>&nbsp;merupakan salah satu dari bahasa pemprograman, html ini sangat berperan penting dalam masalah pemprograman, karena dalam pembuatan website, blog, software, maupun game biasanya html ini akan sangat akan sangat digunakan, karena itulah pembelajaran html akan sangat penting.<br /> <br /> Dalam html pasti kita akan berkenalan dengan sebuah tag dan beberapa atribut html, contoh tag seperti &lt;a&gt;, &lt;img&gt;, &lt;form&gt;, &lt;table&gt;, dan masih banyak lagi tag penting html.<br /> <br /> Dalam pembuatan html pasti kita harus membuat juga sebuah desain agar lebih nyaman untuk dilihat, untuk merancang desain kita harus memahami <b>CSS</b>, namun CSS akan dibahas di lain posting karena kita hanya akan mempelajari html saja.<br /> <br /> Jika kalian masih bingun seperti apa itu html saya akan memberikan sebuah contoh kerangka web yang sangat simple hanya dengan sebuah html, berikut adalah contohnya:<br /> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;!DOCTYPE html&gt;</blockquote> <blockquote class="tr_bq"> &lt;html&gt;</blockquote> <blockquote class="tr_bq"> &lt;head&gt;</blockquote> <blockquote class="tr_bq"> &lt;title&gt;Belajar html Cara-Blogger&lt;/title&gt;</blockquote> <blockquote class="tr_bq"> &lt;/head&gt;</blockquote> <blockquote class="tr_bq"> &lt;body&gt;</blockquote> <blockquote class="tr_bq"> HTML adalah singkatan dari Hypertext Markup Language</blockquote> <blockquote class="tr_bq"> &lt;/body&gt;</blockquote> <blockquote class="tr_bq"> &lt;/html&gt;</blockquote> </blockquote> Jika Kalian menyalin code tersebut ke dalam Notepad coba save dengan format atau ekstensi .html dan bukalah dengan aplikasi browsing kalian, dan kalian akan melihat hasil seperti berikut:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2c_T5Ngl8hHIR-5l5hr_tEkl9efTfg8_BszoRjFtmSOZmThaJm2Fur8Kwc9_NTeWhABNNV8SNWD9-BIy2FgU-UoqhuSefqHjuiGnJEd5STweh2gcjsbpUkZxHprLfEMYwls_EvgGOzsew/s1600/htmlch.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="htmlch.jpg" border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2c_T5Ngl8hHIR-5l5hr_tEkl9efTfg8_BszoRjFtmSOZmThaJm2Fur8Kwc9_NTeWhABNNV8SNWD9-BIy2FgU-UoqhuSefqHjuiGnJEd5STweh2gcjsbpUkZxHprLfEMYwls_EvgGOzsew/s640/htmlch.jpg" title="htmlch.jpg" width="640" /></a></div> <div style="text-align: center;"> <br /> <div style="text-align: left;"> <b><span style="font-size: large;">Penjelasan:</span></b></div> <div style="text-align: left;"> </div> <ol> <li style="text-align: left;">Dalam pembuatan html biasa di awali dengan &lt;!DOCTYPE html&gt; jika kalian ingin membuat xml kalian harus menulis &lt;? xml version="1.0" encoding="UTF-8" ?&gt; sebelum menuliskan Doctype,</li> <li style="text-align: left;">Dalam penulisan html kita juga harus membuka dengan tag &lt;html&gt; untuk menandai bahwa kita akan membuat html,</li> <li style="text-align: left;">Tag &lt;head&gt; berfungsi untuk pengaturan web, dalam contoh di atas saya hanya memasukan tag &lt;title&gt; sebenarnya masih ada tag lain seperti meta tag,</li> <li style="text-align: left;">Di bawah tag &lt;head&gt; terdapat tag &lt;title&gt;, tag ini digunakan untuk title atau nama web yang akan kita buat, dalam contoh di atas tertulis &lt;title&gt;Belajar html Cara-Blogger&lt;/title&gt;, di sana terdapat tag yang memakai tanda / (garis miring) kebanyakan tag diakhiri oleh tanda garis miring,</li> <li style="text-align: left;">Lalu ada tag &lt;body&gt; tag ini berisikan tentang konten atau halaman utama sebuah blog atau website.</li> </ol> <div style="text-align: left;"> <span style="font-size: large;"><b>Penutup:</b></span></div> <div style="text-align: left;"> Dari pembelajaran di atas kalian telah mempelajari tentang salah satu penggunaan tag penting dalam sebuah html web atau blog, dalam penggunaan tag pada html harus cukup teliti karena sedikit kesalahan bisa berakibat fatal, jadi sebelum kalian memodifikasi sebuah html lebih baik kalian belajar terlebih dahulu.</div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> Happy Blogging............!(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> </div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-69538666314988716712016-11-13T00:45:00.001-08:002016-11-13T00:45:34.280-08:00Cara Membuat Widget Recent Post di Blogger<img alt="Recent.png" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUoDPyMdZ50qrn9Y3WEmCLvQIG8Q5_xDA6LbxW98xkMKoR3SU27MGgRDPliJa9u8ZojS20i5mQIKO3rKkBbykrtD1ElZlJEq2p-vLQfE6WPzZRe03FP3q9rem86VzWE58Yoa-HJNoddzB/s1600/Blogger.svg.png" style="float: left;" title="Recent.png" width="200" /><b>Recent Post </b>adalah widget yang isinya daftar posting yang baru dipubalikasikan, dengan memasang widget ini pengunjung blog lebih mudah mencari posting yang baru kita publikasikan tanpa perlu mencari di menu navigasi lainnya.<br /> <br /> Recent post biasanya terletak di halaman utama, atau di sidebar blog agar terlihat oleh para pengunjung, namun beberapa orang tidak tahu cara membuat sebuah widget recent post karena recent post ini sebenarnya ada di tab <b>Tata Letak</b>&nbsp;bawaan blogger, tapi dengan menggunakan widget bawaan blogger akan terasa kurang bervariasi, dibawah ini adalah macam-macam cara membuat recent post:<br /> <br /> <span style="font-size: large;"><b>Recent Post Simple Tanpa Thumbnail</b></span><br /> Recent post ini sangat simple karena hanya berisi link posting saja tanpa ada thumbnail atau gambar posting berikut adalah cara membuatnya:<br /> <ul> <li>Login terlebih dahulu ke dasboard blogger, lalu pilih <b>Tata Letak</b>,</li> <li>Di bagian sidebar klik tambahkan gadget,</li> <li>Lalu akan ada beberapa pilihan gadget pilih <b>HTML/JavaScript</b>,</li> <li>Beri judul Recent post atau sebagainya, di dalam kolom yang kosong salin code dibawah ini:</li> </ul> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;script&gt;</blockquote> <blockquote class="tr_bq"> //&lt;![CDATA[</blockquote> <blockquote class="tr_bq"> function showlatestposts(json){document.write('&lt;ul id="recent-posts"&gt;');for(var i=0;i&lt;5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}</blockquote> <blockquote class="tr_bq"> document.write('&lt;li class="recent-posts"&gt;');document.write('&lt;a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'"&gt;'+ posttitle+'&lt;/a&gt;');document.write('&lt;/li&gt;');}</blockquote> <blockquote class="tr_bq"> document.write('&lt;/ul&gt;');};</blockquote> <blockquote class="tr_bq"> document.write("&lt;scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=showlatestposts\"&gt;&lt;/scr" + "ipt&gt;");</blockquote> <blockquote class="tr_bq"> //]]&gt;</blockquote> <blockquote class="tr_bq"> &lt;/script&gt;</blockquote> </blockquote> <br /> <ul> <li>Lalu tekan <b>Simpan</b>,</li> <li>dengan cara di atas kalian sudah selesai membuat sebauh recent post, jika recent post tersebut ingin dikotaki ikuti cara dibawah ini:</li> <li>Pergi ke menu <b>Template </b>lalu klik <b>Edit HTML</b></li> <li>Lalu salin code dibawah ini:</li> </ul> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;style type='text/css'&gt;</blockquote> <blockquote class="tr_bq"> #recent-posts{</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; width:auto;</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; padding:0 10px;</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; margin:0 auto;</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; border:1px solid #ddd;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> #recent-posts ul,#recent-posts li {</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; list-style:none;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> #recent-posts a{</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; text-decoration:none;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> #recent-posts li{</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; border-top:1px solid #ddd;</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; padding:6px 0</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> #recent-posts li:first-child{</blockquote> <blockquote class="tr_bq"> &nbsp; &nbsp; border-top:none;</blockquote> <blockquote class="tr_bq"> }</blockquote> <blockquote class="tr_bq"> &lt;/style&gt;</blockquote> </blockquote> <br /> <ul> <li>Tempatkan code tersebut tepat diatas <b>&lt;/head&gt;</b>,</li> <li>Lalu klik simpan.</li> </ul> <div> Dengan melakukan cara diatas kalian telah membuat recent post simple dengan hanya teks link saja untuk membuat recent post dengan thumbnail caranya ada dibawah.</div> <div> <br /></div> <div> <span style="font-size: large;"><b>Recent Post Dengan Thumbnail</b></span></div> <div> Recent post ini berisi dengan thumnail atau gambar yang tersedia di posting yang sudah anda buat, untuk membuatnya ikuti langkah dibawah ini:</div> <div> <ul> <li>Pertama login terlebih dahulu ke dasboard blogger,</li> <li>Di bagian sidebar klik tambahkan gadget,</li> <li>Lalu akan ada beberapa pilihan gadget, pilih HTML/JavaScript,</li> <li>Berilah judul recent post atau sebagainya,</li> <li>Di dalam kolom yang kosong masukan code di bawah ini:</li> </ul> <blockquote class="tr_bq"> <blockquote class="tr_bq"> &lt;div class="eggTray"&gt;</blockquote> <blockquote class="tr_bq"> &lt;script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js"&gt;{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",</blockquote> <blockquote class="tr_bq"> "pipe_params":{"URL":"<span style="color: red;">Alamat Blog</span>/feeds/posts/default"},</blockquote> <blockquote class="tr_bq"> "hideHeader":"false","height":"<span style="color: red;">500</span>","count": <span style="color: red;">8</span> }&lt;/script&gt;</blockquote> <blockquote class="tr_bq"> &lt;noscript&gt;Your browser does not support JavaScript!&lt;/noscript&gt;&lt;/div&gt;</blockquote> <blockquote class="tr_bq"> &lt;style type=text/css&gt;</blockquote> <blockquote class="tr_bq"> .eggTray {margin:10px 0px;padding:0px;}</blockquote> <blockquote class="tr_bq"> .ybr li &nbsp;{border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}</blockquote> <blockquote class="tr_bq"> .pipesTitle {<span style="color: red;">padding-top:0px</span>;}</blockquote> <blockquote class="tr_bq"> .pipesDescription {display:<span style="color: red;">true</span>;}</blockquote> <blockquote class="tr_bq"> .ycdr, .ycdr a {color:#999999;}</blockquote> <blockquote class="tr_bq"> .widget .popular-posts ul {padding-left:0;}</blockquote> <blockquote class="tr_bq"> &lt;/style&gt;</blockquote> </blockquote> <b>Keterangan:</b><br /> <br /> <ol> <li>Ubahlah <span style="color: red;">Alamat Blog</span>&nbsp;jadi alamat blog kamu,</li> <li>Untuk menonaftifkan scroll bar &nbsp;hapus nomor <span style="color: red;">500</span>,</li> <li>Untuk mengubah banyak posting yang diperlihatkan ubah <span style="color: red;">8 </span>menjadi banyak posting yang diinginkan,</li> <li>Jika hanya ingin judul postingan saja yang tampil, ganti <span style="color: red;">true</span> dengan <span style="color: red;">none</span> dan ganti <span style="color: red;">0</span> dari <span style="color: red;">padding-top:0px;</span> dengan <span style="color: red;">10</span>.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfB7-rU3mdD5gFg-72t1j-dyrghBVl2dtUMWrgjCTEslvcLkMcFZZQwnKvpvEsAiDe8tHN2nM9wYBZ3z0PHoG3dRnC7167PFaU1aJjykzeYC2ytpu1JN4li_bbCQnG3yvWnzeUEVBynrc/s1600/bandicam+2016-11-13+15-41-21-945.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML.jpg" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfB7-rU3mdD5gFg-72t1j-dyrghBVl2dtUMWrgjCTEslvcLkMcFZZQwnKvpvEsAiDe8tHN2nM9wYBZ3z0PHoG3dRnC7167PFaU1aJjykzeYC2ytpu1JN4li_bbCQnG3yvWnzeUEVBynrc/s400/bandicam+2016-11-13+15-41-21-945.jpg" title="HTML.jpg" width="352" /></a></div> <div class="separator" style="clear: both; text-align: left;"> </div> <ul> <li>Terakhir simpan dan lihat hasilnya.</li> </ul> <div> Dengan melakukan cara diatas kalian telah membuat sebuah widget recent post, tapi masih banyak lagi cara membuat recent post selain cara di atas.</div> <div> <br /></div> <div> Happy Blogging.............(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> </div> <ol> </ol> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-57826287007923186052016-11-12T00:44:00.001-08:002016-11-12T00:44:15.149-08:00Cara Membuat Blog Lengkap<img alt="Blog.png" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KmsOETmFe7zN1BGIhLGutbHVgJkz3qT02knIlrT77hHrnX9wgz8XINNos681uj14viLwC-GfpVtWkdrH1eYkREpg7VEfI_4imnVUsEqh46sZKH1nTzHIZE3XTy_DEuCt9z84Am8XTEly/s1600/Blogger.svg.png" style="float: left;" title="Blog.png" width="200" /><b>Blog </b>merupakan suatu aplikasi yang berupa tulisan-tulisan yang ada pada situs web, tulisan-tulisan ini disebut posting. Posting ini adalah bagian terpentinng karena posting juga bisa menjadi tema sebuah blog, contoh blog ini memposting tentang <b>Tutorial Seputar Blog</b>, dengan adanya posting blog kita akan terlihat bermanfaat tergantung dengan topik posting yang kita publikasikan.<br /> <br /> Dengan menggunakan blog sebagai hobi juga bisa menghasilkan uang dengan cara menaruh iklan didalam halaman blog kita, Contoh iklan yang membayar besar adalah <b>Google Adsense</b>, iklan ini bisa membayar hingga 100$/bulan atau lebih, selain itu masih banyak lagi manfaat membuat sebuah blog.<br /> <br /> <span style="font-size: large;"><b>Cara Membuat Blog</b></span><br /> Menurut penjelasan diatas blog memiliki cukup banyak manfaat, bagi yang tertarik untuk membuat blog kalian bisa mengikuti cara dibawah ini:<br /> <br /> <ol> <li>Login terlebih dahulu ke halaman blogger dengan ketik <b>www.blogger.com</b>, login dengan menggunakan <b>Gmail</b>&nbsp;bagi belum punya Gmail bisa tekan<b>&nbsp;Sign Up </b>untuk mendaftar Gmail.</li> <li>Nanti akan ada halaman baru terbuka, disana klik <b>Create Blog</b>.</li> <li>Lalu kalian akan diminta untuk memasukan <b>Judul&nbsp;Blog</b>, <b>Alamat Blog</b>, dan <b>Template </b>bawaan yang berasal dari blogger.</li> <li>Jika kalian sudah memasukan data tersebut klik <b>Create Blog</b>.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOwdLPsFnXE7UBba-9dXFshxQWrjHSpwFT3yDdaU3JsDHT_ZSbvWUC875Fp2ySUp8MgD474PXBqgUqQAv0OSHcy0qd-YIOhaowT1NMlFjUL0rvSUhALQxNEBrg0URPAZfITZFJQopm2Cdc/s1600/bandicam+2016-11-12+08-01-21-407.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Creating.jpg" border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOwdLPsFnXE7UBba-9dXFshxQWrjHSpwFT3yDdaU3JsDHT_ZSbvWUC875Fp2ySUp8MgD474PXBqgUqQAv0OSHcy0qd-YIOhaowT1NMlFjUL0rvSUhALQxNEBrg0URPAZfITZFJQopm2Cdc/s400/bandicam+2016-11-12+08-01-21-407.jpg" title="Creating.jpg" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Dengan melakukan cara diatas blog kalian telah dibuat sekarang kita tinggal memberikan posting pada blog kalian.</div> <div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <span style="font-size: large;"><b>Cara Membuat Posting di Blog</b></span></div> <div class="separator" style="clear: both; text-align: left;"> Jika blog telah dibuat pasti kalian harus membuat isi blog berupa sebuah posting agar blog kita memiliki visitor, tapi sebelum membuat posting kalian pikirkan baik-baik topik posting apa yang akan kalian tulis, karena itu menentukan kualitas blog dan banyaknya visitor yang akan berkunjung ke blog kalian, jika bisa diusahakan untuk mengambil topik yang sering dicari agar mudah terindex oleh <b>Search Engine</b>. Untuk membuat posting blog kalian bisa mengikuti cara dibawah ini:</div> <div class="separator" style="clear: both; text-align: left;"> </div> <ol> <li>Login terlebiih dahulu ke dasboard blogger,</li> <li>Dihalaman dasboard klik tanda warna orange yang bergambar pensil,</li> <li>Lalu akan terbuka halaman untuk membuka posting.</li> <li>Dihalaman kosong itu kalian tinggal menulis sebuah posting yang akan kalian publikasikan.</li> <li>Jika kalian sudah menulis posting kalian klik <b>Publish</b>&nbsp;yang berada tepat disebalah kolom judul posting.</li> </ol> <div> Dengan melakukan cara diatas kalian telah bisa membuat sebuah posting untuk blog kalian, tapi kalian pasti masih bingun dengan menu yang ada pada halaman posting.</div> <div> <br /></div> <div> <span style="font-size: large;"><b>Menu Posting</b></span></div> <div> Menu posting adalah menu yang digunakan untuk mempermudah dalam menulis sebuah posting tanpa menulis kode <b>HTML</b>&nbsp;atau bahasa pemprograman lainnya. Berikut ini adalah fungsi pada menu posting:</div> <div> <ol> <li>Pertama kita mulai dari yang paling atas yaitu kolom <b>Entri</b>, kolom ini adalah kolom untuk memasukan judul posting yang akan dipublikasikan,</li> <li>Di sebelah kolom posting ada tombol berwarna orange yang bertulisan <b>Publikasikan</b>, tombol ini berfungsi untuk mempublikasikan posting yang telah kita buat,</li> <li>Lalu disebelahnya ada tombol <b>Simpan</b>, tombol ini berfungsi untuk menyimpan posting yang kita buat, tapi belum jadi atau belum akan dipublikasikan.</li> <li>Setelah itu ada tombol <b>Pratinjau</b>, tombol ini berfungsi untuk melihat posting kita jika dipublikasikan di dalam blog tanpa perlu dipublikasikan terlebih dahulu,</li> <li>Tombol <b>Tutup</b>, tombol ini berfungsi untuk kembali ke halaman utama blog,</li> <li>Tepat di bawah judul blog kita ada tab <b>Compose </b>dan <b>HTML</b>, fungsinya untuk mengubah mode dalam penulisan posting kita, jika mode compose adalah mode dimana kita tinggal menulis posting dengan bantuan menu yang tersedia, sedangkan mode html adalah mode dimana kita menulis posting dengan html, dengan menggunakan mode html kita tidak perlu menggunakan menu pada posting melainkan kita membuat code sendiri, dengan menggunakan mode ini kita bisa memakai sesuatu yang tidak ada dimenu posting, namun jika menggunakan menu ini kalian harus mempelajari html dan bahasa pemprograman lainnya terlebih dahulu,</li> <li>disebelah tab compese dan html ada menu yang bergambar seperti tanda panah ke kiri dan ke kanan, menu ini berfungsi untuk <b>Undo </b>dan <b>Redo</b>, tanda panah ke kiri untuk melakukan undo, dan tanda panah ke kanan untuk melakukan redo,</li> <li>setelah itu ada menu yang berlambang <i>F</i>, menu ini berfungsi untuk mengganti <b>Font</b>&nbsp;pada saat menulis posting,</li> <li>Lalu disebelahnya ada menu yang berlambang <i>T</i>, menu ini berfungsi untuk mengatur ukaran <b>Font</b>&nbsp;pada saat menulis posting,</li> <li>Di sebelahnya ada tab yang bertulisan <b>Normal</b>, tab ini berfunsi untuk mengatur ukuran Font untuk judul,</li> <li>Ada menu yang berlambang <i>B</i>, menu ini digunakan untuk mengubah ketebalan Font,</li> <li>Menu yang berlambang <i>I</i>, menu ini berfungsi untuk mengubah font menjadi miring,</li> <li>Menu yang berlambang <i>U</i>, menu ini berfungsi untuk menambah garis bawah pada tulisan,</li> <li>Menu yang berlambang <i>ABC </i>dicoret, menu ini berfungsi untuk menambah coretan pada tulisan posting,</li> <li>Menu yang berlambang <i>A</i>, menu ini berfungsi untuk mengubah warna Font,</li> <li>Menu yang bergambar tuas, menu ini berfunsi untuk mengubah backgroud font, menu ini biasanya digunakan tergantung template yang dipakai, jika template berwarna hitam maka backgroud font pun diubah menjadi hitam agar posting lebih menerap dengan template blog,</li> <li>Menu yang bertulisan <b>Link</b>, menu ini digunakan untuk memasukan link ke dalam posting,</li> <li>Menu yang berlogo <b>Gambar</b>, menu ini berfungsi untuk memasukan gambar ke dalam posting,</li> <li>Menu yang berlogo <b>Video</b>, menu ini digunakan untuk memasukan video kedalam posting,</li> <li>Menu yang berlogo kertas yang sobek, menu ini berfungsi untuk melompati baris pada posting,</li> <li>Menu yang berlogo paragraf, menu ini digunakan untuk mengatur letak menulis posting seperti <b>Align Left</b>, <b>Center</b>, dan <b>Align Right</b>,</li> <li>Menu yang berlogo paragraf bernomor, menu ini berfungsi untuk menambahkan list dalam bentuk nomor,</li> <li>Menu yang berlogo paragraf bertitik, menu ini berfungsi untuk menambahkan list dalam bentuk titik ditengah,</li> <li>Disebelahnya ada menu <b>Quote</b>, menu ini berfungsi untuk memasukan sesuatu seperti code dan akan &nbsp;dikotaki pada saat dipublikasikan,</li> <li>Menu <b>Remove Formatting</b>, menu ini berfungsi untuk menghilangkan format,</li> <li>Menu <b>Check Spelling, </b>menu ini berfungsi untuk mengecek penggunaan bahasa pada posting.</li> </ol> <div> Penjelasan diatas adalah penjelasan tentang fungsi menu pada halaman posting di blogger, dengan menggunakan menu itu anda tidak perlu menggunakan banyak bahasa pemprograman. selain menu ada juga <b>Setelan Entri </b>pada halaman posting blogger.</div> <div> <br /></div> <div> <span style="font-size: large;"><b>Setelan Entri</b></span></div> <div> Setelan entri merupakan pengaturan untuk mengatur postingan kita yang akan di publikasikan, seperti label, jadwal, tautan permanen, lokasi, deskripsi penelusuran, dan pilihan, berikut ini macam-macam fungsi setelan entri:</div> <div> <ol> <li><b>Label</b>&nbsp;merupakan kumpulan posting yang berkategori sama, label berfungsi untuk memisahkan setiap kategori posting agar lebih mudah dicari,</li> <li><b>Jadwal</b>&nbsp;merupakan waktu pada saat kita mempublikasikan postingan kita, dengan setelan ini anda bisa memalsukan waktu saat anda mempublikasikannya,</li> <li><b>Tautan Permanen</b>&nbsp;merupakan alamat atau url postingan kita yang akan dipublikasikan, dengan setelan ini anda bisa mengubah alamat postingan tapi ingat hanya bisa tautannya saja bukan domainnya,</li> <li><b>Lokasi </b>merupakan tempat dimana kita mempublikasikan postingan itu,</li> <li><b>Deskripsi Penelusuran </b>meruapakan ringkasan isi dari sebuah artikel yang anda buat,</li> <li><b>Pilihan </b>merupakan pengaturan dari sebuah postingan salah satunya adalah agar bisa posting tidak bisa dikomentari oleh visitor.</li> </ol> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFKboiq_vhn03SZkjcYX1csF3dZD-YbBW5I6Pwn6aoViwaWuT_QcXAUBN-bN-YX5a5J3GB_ZaPCGxRQb1_RRCl0Z6G4wMLEDw8fg-BWNXUtAvjMSi-uW_6xDfPDWrElr6XbH6THc1xgLV5/s1600/bandicam+2016-11-12+15-38-39-028.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu.jpg" border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFKboiq_vhn03SZkjcYX1csF3dZD-YbBW5I6Pwn6aoViwaWuT_QcXAUBN-bN-YX5a5J3GB_ZaPCGxRQb1_RRCl0Z6G4wMLEDw8fg-BWNXUtAvjMSi-uW_6xDfPDWrElr6XbH6THc1xgLV5/s640/bandicam+2016-11-12+15-38-39-028.jpg" title="Menu.jpg" width="640" /></a></div> <br /> <div style="text-align: left;"> Dengan cara diatas kalian sudah bisa membuat blog sendiri, tinggkatkanlah blog kalian dan jangan lupa tambahkan template agar blog kalian terlihat lebih indah dan vistor lebih betah berada di blog kalian, cara diatas adalah salah satu cara termudah untuk membuat blog, karena menggunakan jasa blogger berbeda jika kalian membuat blog sendiri dengan membuat php dan database sendiri.</div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> Happy Blogging............(<a href="http://www.cara-blogger.ga/" target="_blank">Cara-Blogger</a>)</div> </div> </div> <h2> </h2> <h3> </h3> <h4> </h4> </div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-22757847696693106692016-11-04T22:06:00.000-07:002016-11-04T22:06:17.524-07:00Cara Mengganti Template Blog<img alt="Template.jpg" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi67h5LOWCQrOGSxbx66-bhlvDTgRa_fRiBVojLozUCjMWCixi8OyI5Ioh6Bcry5eYuahTCQtL9KX3PWN8M5I262bTs4lq76OjPYBpl9t5G1B0NMD3jxNQXQ038Jkdcsb2kB0AqwkuRJyRt/h120/Responsive-Design-Blogger%25281%2529.png" style="float: left;" title="Template.jpg" width="200" /><b>Template </b>merupakan tema dari sebuah blog. Dengan menggunakan template blog akan terlihat lebih professional.<br /> <br /> Pada saat kalian akan mengganti Template blog diusahakan ketika blog sedang sepi oleh pengunjung, karena jika kita mengganti template blog kita memiliki banyak visitor, visitor akan kebingungan akan perubahan yang terjadi di blog kita.<br /> <br /> Saat kita akan memasangkan Template kita harus mencari template yang <b>SEO Friendly</b>&nbsp;dan <b>User Friendly</b>, Jika kalian menggunakan template SEO Friendly blog kalian akan mudah terindex oleh mesin search engine dan blog kalian akan memiliki banyak pengunjung, dan agar pengunjung lebih betah berada diblog kalian template harus User Friendly dengan sistem navigasi yang mudah digunakan tidak ribet, Fast Loading, dan tentu saja memiliki artikel yang menarik dan bermanfaat. Tapi bagi pemula pasti sedikit kebingungan ketika ingin mengganti template, Berikut adalah cara mengganti template blog:<br /> <br /> <h2> Cara Mengganti Template Dengan Cepat</h2> <div> Jika kalian ingin dengan cepat mengganti template blog dengan cepat kalian bisa mengikuti langkah dibawah ini:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RADtY-aLGU7Bir8lDOBmKYe-bmdA0Rk1rfkj7Dj57m-cWFPrHl2godghVJfLX9TfrDtam2osNRtmwnURbC5reYY-pS_Zs_nY2xk-uOTvsUe0BD-XuEQHD5nLNvsjnoDZaO20xQOxQ5PK/s1600/bandicam+2016-11-05+07-45-42-954.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Change.jpg" border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RADtY-aLGU7Bir8lDOBmKYe-bmdA0Rk1rfkj7Dj57m-cWFPrHl2godghVJfLX9TfrDtam2osNRtmwnURbC5reYY-pS_Zs_nY2xk-uOTvsUe0BD-XuEQHD5nLNvsjnoDZaO20xQOxQ5PK/s640/bandicam+2016-11-05+07-45-42-954.jpg" title="Change.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Jika gambar diatas kurang jelas silahkan untuk mengklik gambar atau bisa mengikuti langkah dibawah:</div> <div class="separator" style="clear: both; text-align: left;"> </div> <ol> <li>Klik "Template",</li> <li>Klik "Cadangkan/Pulihkan" ada di pojoh kanan atas,</li> <li>Klik "Choose File" untuk memilih file template (harus berekstensi .xml)</li> <li>Klik "Unggah"</li> <li>Tunggu sampai unggah selesai dan lihat hasil templatenya.</li> </ol> <div> Jika kalian tidak memiliki file template berekstensi .xml, kalian bisa mendownloadnya di situs-situs penyedia template.</div> </div> <h2> Editing Template</h2> <div> Dengan melakukan cara diatas kalian hanya akan mengubah tampilan template saja, tapi kalian harus mengubah beberapa hal lain seperti Favicon, Logo Blog, atau Menu Navigasi, dibawah ini adalah hal yang harus diganti dan cara menggantinya:</div> <div> <br /></div> <div> <b>1. Favicon</b><br /> Favicon (Favorite Icon) merupakan suatu logo yang muncul pada tab browser atau bookmark. Untuk mengubah Favicon kalian bisa mengubahnya dengan cara dibawah ini:</div> <div> <ol> <li>Login terlebih dahulu ke dashboard blogger,</li> <li>Klik Tata Letak, disitu kalian akan melihat "Favicon" lalu klik edit,</li> <li>Lalu akan terbuka Window baru, lalu klik "Choose File",</li> <li>Disini kalian akan disuruh untuk mengupload gambar untuk dijadikan Favicon, siapkan gambar yang berukuran 100x100 pixel,</li> <li>Lalu klik simpan, tunggu sampai proses upload selesai.</li> </ol> <div> <b>2. Logo</b></div> </div> <div> Logo merupakan suatu gambar yang biasanya tersimpan di header blog/web. Untuk mengubah Logo kalian bisa mengubahnya dengan cara dibawah ini:</div> <div> <ol> <li>Login terlebih dahulu ke dashboard blogger,</li> <li>Klik Tata Letak, disitu kalian akan melihat "Header" lalu klik edit,</li> <li>Lalu akan terbuka Window baru, lalu klik "Choose File",</li> <li>Disini kalian akan disuruh untuk mengupload gambar untuk dijadikan Logo,</li> <li>Setelah selesai diupload centang "Selain judul dan keterangan" lalu simpan.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ02m4_cAZhrbL79N153cVj5JfdsvAGVrv7HHNUejA3sJPgupBJUXgMgD_mWtWQ96CJXzVn3x_FiewydariurnxSEpumrR9J3KRjLQvsOII5uiSNpAylGbldBFk0ljfcZcntp9GD-z5foI/s1600/bandicam+2016-11-05+11-31-49-001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Edit.jpg" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ02m4_cAZhrbL79N153cVj5JfdsvAGVrv7HHNUejA3sJPgupBJUXgMgD_mWtWQ96CJXzVn3x_FiewydariurnxSEpumrR9J3KRjLQvsOII5uiSNpAylGbldBFk0ljfcZcntp9GD-z5foI/s400/bandicam+2016-11-05+11-31-49-001.jpg" title="Edit.jpg" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> <b>3.Menu Navigasi</b></div> <div class="separator" style="clear: both; text-align: left;"> Menu Navigasi sangat penting bagi sebuah blog/web, karena menu navigasi bisa membawa visitor keseluruh halaman blog/web yang kita buat, pada saat kita memasangkan template ke blog kita, maka kita harus menggatinya dengan link dan nama yang kita inginkan secara manual, untuk mengganti menu navigasi kalian bisa mengubahkanya dengan cara dibawah ini:</div> <div class="separator" style="clear: both; text-align: left;"> </div> <ol> <li>Login terlebih dahulu ke dasboard blogger,</li> <li>Klik <b>Template &gt; Edit HTML</b>,</li> <li>Karena kebanyakan menu navigasi dari sebuah template berada di bawah <b>Home </b>maka tekan <b>CTRL+F</b>&nbsp;lalu cari home,</li> <li>Editlah menu navigasi seperti <b>&lt;a href="masukan-link"&gt;Nama Link&lt;/a&gt;</b></li> <li>Jika sudah diedit klik simpan.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJJtmqFffpeSf60xcZ4HD3_8pJFUzl4EKo90GwzfmjwOpEh5V3A03u8dyUaVyPM8hBrdcBucaQJqcyHi1o_PHk5bOU-YJxLFSubgP88ClH59NKkT0jAJuBy6_N2v_GnuaB2Gsw33Qr5ny/s1600/bandicam+2016-11-05+11-48-52-774.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="href.jpg" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJJtmqFffpeSf60xcZ4HD3_8pJFUzl4EKo90GwzfmjwOpEh5V3A03u8dyUaVyPM8hBrdcBucaQJqcyHi1o_PHk5bOU-YJxLFSubgP88ClH59NKkT0jAJuBy6_N2v_GnuaB2Gsw33Qr5ny/s1600/bandicam+2016-11-05+11-48-52-774.jpg" title="href.jpg" /></a></div> <div style="text-align: center;"> <br /></div> <div style="text-align: left;"> <b>4.Setting Meta Tags</b></div> <div style="text-align: left;"> Pastikan meta tags blog anda diisi agar blog anda akan lebih mudah terindex oleh search engine, berikut adalah cara setting meta tags:</div> <div style="text-align: left;"> <ol> <li>Login terlebih dahulu ke dasboard blogger,</li> <li>Klik <b>Setelan &gt; Preferensi Penelusuran</b>,</li> <li>Ditag meta dibagian deskripsi tekan edit,</li> <li>Masukan deskripsi blog kalian, lalu simpan.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm58jdipBNLEoUun8XFqLWRjUP58QHu3HtRebj-Evha1RdIljwHOc_UxZpex9fbM5IygUGPKe8G4MUMh0dehO2RGj7g2g96YfBAF1VzhPps2sJ0IhJ7QU1CF2SECBLsi8nZUOce8Ee0BCQ/s1600/Meta+Tags+Setting1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta.jpg" border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm58jdipBNLEoUun8XFqLWRjUP58QHu3HtRebj-Evha1RdIljwHOc_UxZpex9fbM5IygUGPKe8G4MUMh0dehO2RGj7g2g96YfBAF1VzhPps2sJ0IhJ7QU1CF2SECBLsi8nZUOce8Ee0BCQ/s320/Meta+Tags+Setting1.png" title="Meta.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_JxJmllNdCeGE2wE6YNEnyLgEs3KHoeWRUJkWuIDoG-9hqKS3P0yZaAqC7TAxAwkJ6Fhne5MJ0gicdhsCNCDT5zT9ThIjv0Dp0aChoeqHY9LDy19iYmKXh_y4oCyXiSLg58K3nL8_EsH/s1600/Meta+Tags+Setting2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tag.jpg" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_JxJmllNdCeGE2wE6YNEnyLgEs3KHoeWRUJkWuIDoG-9hqKS3P0yZaAqC7TAxAwkJ6Fhne5MJ0gicdhsCNCDT5zT9ThIjv0Dp0aChoeqHY9LDy19iYmKXh_y4oCyXiSLg58K3nL8_EsH/s400/Meta+Tags+Setting2.png" title="Tag.jpg" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> </div> </div> <h2> Penutup</h2> <div> Masih banyak cara lain untuk mengubah template blog salah satunya langsung mengubah htmlnya, tapi itu akan sangat rumit dan kalian harus belajar bahasa pemprograman terlebih dahulu, jika kalian pikir cara diatas sangat "Rumit" kalian bisa menggunakan jasa untuk membuat blog, dan tentu saja itu bersifat Premium.</div> <div> <br /></div> <div> Happy Blogging.........!(<a href="http://cara-tambahblog.blogspot.co.id/">Cara-Blogger</a>)</div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0tag:blogger.com,1999:blog-1211523475355606627.post-44640879249229921382016-11-04T02:39:00.003-07:002016-11-04T17:12:05.875-07:00Code Warna Dalam HTML<img alt="Warna.jpg" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tpSDujuOJ8Cgx_-NIpmOB_kOs28sFvxyKYa4X7AH_c1QVz8Zrk8-LRTtH5MHYmi-2WFKcKXDruh-43Ck-_lZEQCUigJg_szOvxeTLby81rI5y0UoyPqbnhNkVtWdtfNp-pWvdJFl9GlU/s200/3a438-kodewarnahtml.gif" style="float: left;" title="Warna.jpg" width="200" /><b>Code Warna HTML</b>&nbsp;adalah sebuah kode yang digunakan untuk menentukan warna pada saat menulis code script html code warna ini sangat penting untuk sebuah web/blog karena warna inilah yang membuat sebuah web tampak lebih hidup dan lebih nyaman untuk dipandang dan bisa membuat visitor lebih nyaman untuk membaca artikel yang kita buat.<br /> <br /> <b>Code Warna HTML</b>&nbsp;biasanya digunakan untuk background warna tulisan, warna kotak, warna garis dan sebagainya.<br /> <br /> Tapi saya sarankan untuk tidak terlalu menggunakan warna yang terlalu terang seperti merah atau orange, kecuali untuk hal-hal kecil seperti button atau tulisan, karena jika kita memakai warna yang terlalu terang akan sangat mencolok dan visitor mungkin akan lebih memperhatikan warna mencolok tersebut daripada posting yang kita sebarkan.<br /> <br /> Berikut ini adalah macam-macam code warna html:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNCx7DW2lNZRMcNTpHSU0HOJzlxofe5qnmXGGt0Nmu7XZwEKjk7xl45I565OYYrnNEd0GLHkX6dGzR26lkGUz9NF8C2ZdUmzlCujCI9CKBFVb5dFDbz_iTJuE_T01gdhC4F8Uemmg4tvnW/s1600/bandicam+2016-11-04+16-27-53-355.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Code.jpg" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNCx7DW2lNZRMcNTpHSU0HOJzlxofe5qnmXGGt0Nmu7XZwEKjk7xl45I565OYYrnNEd0GLHkX6dGzR26lkGUz9NF8C2ZdUmzlCujCI9CKBFVb5dFDbz_iTJuE_T01gdhC4F8Uemmg4tvnW/s640/bandicam+2016-11-04+16-27-53-355.jpg" title="Code.jpg" width="564" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Jika kalian masih bingung dengan code warna diatas kalian bisa menggunakan Tool dibawah ini:</div> <br /> <div style="text-align: center;"> <div style="text-align: left;"> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess"><param value="https://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="https://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"> </object></div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> Setelah kalian mendapatkan code warna yang kalian cari silahkan untuk copy code warna tersebut dan tempelkan diblog/web kalian.</div> <br /></div> Ridwan Chaniagohttp://www.blogger.com/profile/15264363670032417349noreply@blogger.com0