Template offline Generator - Artisteer 4 Full Free

<div dir="ltr" style="text-align: left;" trbidi="on"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0wwUQ7qyq9DQzAJLfWztISWYTWnA6PKVat_5sjeaBt921mOX7SrsdiUzYHm-LqlsfYY6ljRzUXeQrJKxhzmGgu7LP0oKKFHfKbHbW0wjqcJk8Cwdtu5m_vN0noNjiLkvDyd1RQpXp2M/s1600/5913cf2b4bb006f3c30964bc0070fe14.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Template offline Generator - Artisteer 4 Full Free" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0wwUQ7qyq9DQzAJLfWztISWYTWnA6PKVat_5sjeaBt921mOX7SrsdiUzYHm-LqlsfYY6ljRzUXeQrJKxhzmGgu7LP0oKKFHfKbHbW0wjqcJk8Cwdtu5m_vN0noNjiLkvDyd1RQpXp2M/s320/5913cf2b4bb006f3c30964bc0070fe14.jpeg" title="Template offline Generator - Artisteer 4 Full Free" /></a><br /> <div style="text-align: justify;"> Setiap blogger yang benar-benar serius menjalani profesinya sebagai blogger pasti sangat memperhatikan tampilan dari blog atau website yang dia kelola. Permasalahannya adalah jika tidak menguasai bahasa html, CSS dan lain sebagainya, mungkin akan sangat sulit untuk mendapatkan template sesuai keinginan. Bahkan tidak sedikit juga yang mau membayar jasa pembuatan template atau membeli template secara premium.<br /> <br /> <br /> Pada postingan sebelumnya yaitu <a href="http://realfa84.blogspot.com/2012/01/tempat-tempat-untuk-membuat-template.html"><i>Tempat-tempat untuk membuat template blog - Template Generator Online</i></a>, banyak yang bertanya apakah ada software yang bisa digunakan untuk membuat template secara offline. Oleh karena itu di postingan kali ini saya coba share aja buat yang belum tahu tentang software generator template secara offline. Nama software yang paling sering dan gampang digunakan adalah Artisteer. Untuk saat ini, versi terbaru dari Artister 4.1.<br /> <br /> Dengan Artisteer 4.1 ini anda bisa membuat template dengan berbagai flatform meskipun tidak begitu menguasai bahasa pemograman HMTL dan CSS. Software generator template offline ini bukan hanya bisa digunakan untuk flatform blogspot, akan tetapi juga bisa digunakan untuk website, wordpress, drupal, joomla dsb. Hebatnya lagi, software ini sudah menyediakan ratusan template yang siap pakai. Kita juga bisa mengedit sendiri design template yang ada cukup dengan klik sana dan klik sini.<br /> <br /> Hasil dari template anda bisa disimpan dalam berbagai format dan bisa juga diupload langsung keserver blog atau website anda. Sayangnya tentu saja software ini tidak gratis alias berbayar. Untuk mendapatkan versi fullnya kita harus rela membayar sebesar $129 atau hampir setara dengan Rp. 1.250.000,- untuk yang standard edition. Jika ingin sekedar coba-coba anda bisa mengunjungi situs resminya di <i>www.artisteer.com</i>.<br /> <br /> Namun buat yang ingin gratisan tentu saja admin tidak ingin mengecewakan para pecinta Gratisan. Dibawah ini, admin juga sudah menyediakan sofware versi sebelumnya yaitu Artisteer.4.0.0.58475. Untuk installernya anda bisa download <a href="http://files4.artisteer.com/Artisteer.4.0.0.58475.exe" title="Artisteer.4.0.0.58475"><i>disini</i></a>. Sementara Cracknya bisa didownload <i><a href="http://hostingbulk.com/pa5a9b84zj8l.html" rel="nofollow" target="_blank">disini</a></i> atau <i><a href="http://www.4shared.com/get/iB_S7Nkm/Artisteer40058475_Crack.html" rel="nofollow" target="_blank">disana</a></i>. Password zip untuk cracknya : ngalor ngidul<br /> <br /> <br /> Perlu diketahui juga bahwa <b><i><a href="http://realfa84.blogspot.com/2013/03/template-offline-generator-artisteer-4.html">Template offline Generator - Artisteer 4 Full Free</a></i></b>. ini fiturnya sangat terbatas. Selain Template Generator offline, ada juga situs-situs untuk membuat template secara online. Anda bisa membaca dan mengunjungi dan mengetahui situs-situsnya di postingan <b><i>Tempat-tempat untuk membuat template blog - Template Generator Online</i></b><br /> <br /> Buat anda yang mengalami kesulitan untuk mendapatkan template sesuai harapan anda, anda bisa menggunakan jasa kami untuk merealisasikan template impian anda.<br /> Anda bisa menghubungi kami melalui menu <a href="http://realfa84.blogspot.com/2011/01/jasa-design-blogger-template.html" target="_blank">JASA DAN LAYANAN KAMI</a> yang ada di menu atas blog ini.<br /> </div> </div>

designe Generator Template Template offline Generator - Artisteer 4 Full Free

Setiap blogger yang benar-benar serius menjalani profesinya sebagai blogger pasti sangat memperhatikan tampilan dari blog atau website ya...

Baca selengkapnya »

Cara Menambahkan gambar Default pada Popular Post

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"></div><br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aUcDQmVwOb0dmFAKvW-de91rgp3hm9EP5KaE5641IPH9R7g9X4edxsV5PLaSfG0f1BToVGtg3l6sRDhNotAvKSyYia0vS2JuwdEZNQN1S_PgKsLLmKXdNgbLUg6Q3UBB7GkOZMv3fKQ/s1600/no-photo+100.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aUcDQmVwOb0dmFAKvW-de91rgp3hm9EP5KaE5641IPH9R7g9X4edxsV5PLaSfG0f1BToVGtg3l6sRDhNotAvKSyYia0vS2JuwdEZNQN1S_PgKsLLmKXdNgbLUg6Q3UBB7GkOZMv3fKQ/s320/no-photo+100.png" width="270" /></a></div><div style="text-align: justify;">Dalam postingan terdahulu, yaitu Cara membuat Popular Post dengan Thumbnail Horizontal, Admin ngalor ngidul pernah membahas tentang thumbnail default popular post ini. Dimana setiap postingan yang tidak memiliki gambar akan terlihat kosong. Dan tentu saja itu sangat tidak nyaman dilihat. Apalagi jika kita menerapkan fitur popular post ini tanpa deskripsi.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Oleh sebab itu ada baiknya jika kita sedikit memodifikasi kode widget bawaan dari blogger tersebut </div><div style="text-align: justify;">agar ketika suatu postingan yang tidak memiliki gambar menjadi postingan populer, maka secara otomatis akan terlihat tetap memilik gambar.</div><br /> Ok..<br /> Langsung saja ke Cara Menambahkan gambar Default pada Popular Post.<br /> 1. Seperti biasa, login ke dashboard blogger kemudian pilih design => Edit HTML.<br /> 2. Centang Expand Widget Template.<br /> 3. Cari kode:<br /> <blockquote class="tr_bq"><i><b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/></i></blockquote>4. Ganti semua kode kebawahnya sampai kode <i><span style="color: red;"></b:widget></span></i> pertama yang anda temukan dengan kode dibawah ini:<br /> <blockquote class="tr_bq"><span style="background-color: white; color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: -webkit-auto;"> </span><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'></span></span><br /> <div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"><b:includable id='main'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  <b:if cond='data:title'><h2><data:title/></h2></b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  <div class='widget-content popular-posts'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <ul></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      <b:loop values='data:posts' var='post'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      <li></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <b:if cond='data:showThumbnails == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:if cond='data:showSnippets == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <!-- (1) No snippet/thumbnail --></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <a expr:href='data:post.href'><data:post.title/></a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <!-- (2) Show only snippets --></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-snippet'><data:post.snippet/></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          <b:if cond='data:showSnippets == "false"'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <!-- (3) Show only thumbnails --></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-thumbnail-only'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                <div class='item-thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">   <a expr:href='data:post.href' expr:title='data:post.title'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:if cond='data:post.thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/s72-c/default.png' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                  </a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                </div>         </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">             </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <!-- (4) Show snippets and thumbnails --></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div class='item-content'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                <div class='item-thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">   <a expr:href='data:post.href' expr:title='data:post.title'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:if cond='data:post.thumbnail'></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       <b:else/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRZgf5L-yzih9ouuUi7RY8UuHunSbbaOJ3L1Fegu_eI1ZfFWSF6XZAIPYblQnIwBS8MEJ04Ey2rrUdNmEjYfYr1m77eVVUHP9OjY3X_E4_CCs7eYintcg8Ef0IGy197SomEtVEJqhtjU/s72-c/default.png' expr:width='data:thumbnailSize'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">       </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                  </a></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">                </div>       </span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">              <div class='item-snippet'><data:post.snippet/></div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">            <div style='clear: both;'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">          </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">        </b:if></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      </li></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">      </b:loop></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    </ul></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">    <b:include name='quickedit'/></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;">  </div></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"></b:includable></span></span></div><div style="text-align: -webkit-auto;"><span style="color: #2d3037; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="line-height: 18px;"></b:widget></span></span></div></blockquote><br /> *** Ganti kode warna merah tersebut dengan url gambar anda sendiri.<br /> 5. Save Template.<br /> <br /> Untuk menemukan kode tersebut, pastikan widget popular post telah dipasang diblog anda.<br /> Semoga berhasil..!!!</div>

Blogging designe Tips n Trik Cara Menambahkan gambar Default pada Popular Post

Dalam postingan terdahulu, yaitu Cara membuat Popular Post dengan Thumbnail Horizontal, Admin ngalor ngidul pernah membahas tentang thumbna...

Baca selengkapnya »

Cara Menampilkan Page Number di Halaman Kategori Post

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TtILFbck-YIq48voW6ZCMqr6Jl3PPuY0nzMDqor2r_tigxnxusPPJeMpxInplwvsErjVvClzIrjKwI0wBjIKAF6ROSpHOmyk6TKZXOUHp9jq9EGKB1Oqxt5eFAX9HxvFUUsGQu6D73c/s1600/tidak+nongol.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Menampilkan Page Number di Halaman Kategori Post" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TtILFbck-YIq48voW6ZCMqr6Jl3PPuY0nzMDqor2r_tigxnxusPPJeMpxInplwvsErjVvClzIrjKwI0wBjIKAF6ROSpHOmyk6TKZXOUHp9jq9EGKB1Oqxt5eFAX9HxvFUUsGQu6D73c/s320/tidak+nongol.PNG" title="Cara Menampilkan Page Number di Halaman Kategori Post" width="318" /></a></div><div style="text-align: justify;">Assalamualaikum. Wr. Wb.</div><div style="text-align: justify;">Pada postingan kali ini admin ngalor ngidul ingin share satu trik yang mungkin agak langka dan tidak terlalu diperhatikan oleh rekan-rekan blogger semua. Yaitu <strong>Cara Menampilkan Page Number di Halaman Kategori Post</strong>. Diblog ngalor sendiri tidak menyediakan tutorial untuk pemasangan page number ini karena sudah terlalu banyak blog tutorial yang membahasnya.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Jika anda perhatikan, jarang sekali blog yang telah dipasang page number ini juga memunculkan pagenumber di halaman kategori atau label post. Termasuk saya sendiri. Namun hal ini jadi perhatian saya ketika ada salah satu pelanggan design template di ngalor ngidul yang request page number hanya muncul di halaman kategory post. Karena kurangnya ilmu akhirnya admin mengatakan jika hal itu sepertinya "TIDAK MUNGKIN" untuk dilakukan karena sudah coba otak atik script dan lain sebagainya, tetap juga tidak berhasil. Bahkan sampai saat orderan sudah diambil.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Karena tetap merasa penasaran, saya tetap mencari cara agar Page Number tersebut bisa muncul dihalaman kategori atau label post. Dan akhirnya berhasil menemukan sedikit trik yang mungkin bisa membantu.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Seperti diketahui bersama, hampir rata-rata format URL yang mengarah kehalaman label atau kategori post pasti seperti di bawah ini</div><blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b></blockquote>atau<br /> <blockquote class="tr_bq"> http://..../search/label/<b>NAMA-LABEL</b>?max-results=<b><span style="color: blue;">10</span></b></blockquote><div style="text-align: justify;">Hal ini memang sudah menjadi URL standard dari blogger sendiri. Namun ternyata dengan menggunakan URL standard tersebut, bisa dipastikan pagenumber yang telah kita pasang tidak akan langsung muncul di halaman kategory pertama. Page Number baru akan muncul jika pengunjung mengklik halaman selanjutnya atau newer post/older post.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Lalu bagaimana cara agar pagenumber tersebut bisa langsung muncul?</div><div style="text-align: justify;">Jawabannya sangat sederhana. Yaitu dengan dengan sedikit memodifikasi URL tersebut. Kita hanya perlu menambahkan kode <span style="color: #cc0000; font-weight: bold;">?updated</span> dan/atau  <span style="color: red; font-weight: bold;">&amp;</span>.</div><br /> Untuk cara penggunaan dan menambahkannya adalah sebagai berikut.<br /> <br /> <b><u>A. Pada bagian Menu navigasi blog</u></b><br /> <br /> 1. Pada kode URL pertama, format URL adalah seperti ini:<br /> <blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b></blockquote>Rubah kode URL menjadi<br /> <blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL<span style="color: #cc0000;">?</span></b><b><span style="color: #cc0000;">updated</span></b></blockquote><br /> 2. Sedangkan kode URL kedua<br /> <blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b>?max-results=<b><span style="color: blue;">10</span></b></blockquote>Rubah menjadi<br /> <blockquote class="tr_bq">http://..../search/label/<b>NAMA-LABEL</b><b><span style="color: #cc0000;">?</span></b><span style="color: red; font-weight: bold; text-align: justify;">&amp;</span>max-results=<b><span style="color: blue;">10</span></b></blockquote><br /> *** angka 10 adalah jumlah yang akan tampil dihalaman pertama.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ6qo-MtpP-ACBCFtQCxm9be4KUPG1tbwwPGQ6A9Fvd1wwn-EneeCwG_XbkOe5Gsdi03hyphenhyphengR7AzZyk69DCSH6daj3cdvoaPIsrlvaiECenWFBLFyHGN3SH-DXNp0s5XVfXvYifXB8RNM/s1600/nongol.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Cara Menampilkan Page Number di Halaman Kategori Post" border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ6qo-MtpP-ACBCFtQCxm9be4KUPG1tbwwPGQ6A9Fvd1wwn-EneeCwG_XbkOe5Gsdi03hyphenhyphengR7AzZyk69DCSH6daj3cdvoaPIsrlvaiECenWFBLFyHGN3SH-DXNp0s5XVfXvYifXB8RNM/s320/nongol.PNG" title="Cara Menampilkan Page Number di Halaman Kategori Post" width="320" /></a></div><b><u>B. Link Label Standard/Kategori bawaan blogger</u></b><br /> <div style="text-align: justify;">Setelah mengganti URL pada menu utama, masih ada satu lagi yang harus kita lakukan agar semua link yang menuju kehalaman kategori bisa memilik fungsi yang sama.</div><br /> 1. Masuk ke dashboard => Design => Edit html. Centang Expand Widget Templates.<br /> 2. Cari kode <br /> <blockquote class="tr_bq">'data:label.url'</blockquote>3. Ganti semua kode yang ditemukan dengan kode<br /> <blockquote class="tr_bq">'data:label.url + &quot;?<span style="text-align: justify;">&amp;</span>max-results=10&quot;'</blockquote>4. Save template dan lihat Hasilnya.<br /> <br /> Semoga Bermanfaat..!!!</div>

Blogging designe Tips n Trik Cara Menampilkan Page Number di Halaman Kategori Post

Assalamualaikum. Wr. Wb. Pada postingan kali ini admin ngalor ngidul ingin share satu trik yang mungkin agak langka dan tidak terlalu diperh...

Baca selengkapnya »

Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s1600/pop+sc.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s320/pop+sc.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" width="313" /></a></div><div style="text-align: justify;">Setelah sebelumnya pernah membahas <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>, </i>kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Sistem atau <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong> ini sebenarnya sama saja dengan dengan <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>. </i>Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Berikut ini adalah Langkah-langkah untuk <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong>:</div>1. Seperti biasa masuk kedashboard => Design => Edit Html.<br /> 2. Cari kode ]]</b:skin><br /> 3. Letakkan kode CSS dibawah ini di atasnya.<br /> <blockquote class="tr_bq">.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}<br /> .sidebar .popular-posts ul{margin:0;padding:2px;}<br /> .PopularPosts .widget-content ul li {padding: .1em 0;}<br /> .sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}<br /> .sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}<br /> .PopularPosts .item-thumbnail {margin: 0;}<br /> .sidebar .PopularPosts .item-title {display: none;}</blockquote>4. Save template.<br /> 5. Kembali ke Dashboard => Design => Add Element.<br /> 6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" /></a></div><blockquote class="tr_bq">1. Hilangkan ceklist pada snippet.<br /> 2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.</blockquote></div>

CSS Dasar designe Menengah Tips n Trik Tutorial Widget Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal , kali ini kita akan mencoba memodifikasi Popular P...

Baca selengkapnya »

Cara Paling Cepat Memasang Facebook komentar di blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFBxrz6DAf2OAKghbg2Vn5qbCe-OVqt-m9tnS_TwdrWEEeh0-YnfdIAR1HMEpqGIZFQ8K0gPUFNonyEqrKvxXBvtr6K1pESvsAAxOZkC4l6r8nWDIFyLXGcudyrO-vfkYBYlrC7utb4/s1600/facebook+coment.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFBxrz6DAf2OAKghbg2Vn5qbCe-OVqt-m9tnS_TwdrWEEeh0-YnfdIAR1HMEpqGIZFQ8K0gPUFNonyEqrKvxXBvtr6K1pESvsAAxOZkC4l6r8nWDIFyLXGcudyrO-vfkYBYlrC7utb4/s1600/facebook+coment.PNG" /></a></div><br /> <br /> Hari demi hari perkembangan fitur diblogspot semakin mudah untuk di otak-atik. Beraneka ragam fitur tersebut di buat selain untuk mempercantik tampilan blog, sebagian juga memang mempunyai fungsi tertentu agar pengunjung yang hadir tidak hilang begitu saja.<br /> <br /> Salah satu fitur blogger yang semakin hari semakin berkurang adalah komentar-komentar dari pengunjung. Hal ini disebabkan orang lebih suka berkomentar di situs-situs jejaring social seperti facebook. <br /> <br /> Nah, untuk mengatasi hal ini kita bisa menggunakan fitur komentar facebook dengan memasang widgetnya di blog kita. Cara pemasangannya sangatlah gampang. Kita cukup mengikuti langkah-langkahnya seperti dibawah ini.<br /> <br /> 1. Masuk ke DASHBOARD => DESIGN => EDIT HTML. Kemudian centang Expand Widget Templates.<br /> 2. Cari kode <i><span style="color: blue;"><b:includable id='status-message'></span></i><br /> 3. Jika anda perhatikan, tepat diatasnya kita akan menemukan kode <i><span style="color: red;"></b:includable></span></i> tepat di atasnya.<br /> 4. Copas kode dibawah ini dan letakkan di atas kode <i><span style="color: red;"></b:includable></span></i> tadi.<br /> <blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='12' width='610'/> <br /> </b:if></blockquote>5. Simpan Template dan buka salah satu postingan di blog anda.<br /> <br /> Semoga Bermanfaat..!!!</div>

Blogging designe Tips n Trik Widget Cara Paling Cepat Memasang Facebook komentar di blogspot

Hari demi hari perkembangan fitur diblogspot semakin mudah untuk di otak-atik. Beraneka ragam fitur tersebut di buat selain untuk memperca...

Baca selengkapnya »

Sript Random post With thumbnail + Title + Comment + Post Time

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s1600/rdp.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GMNJcLh4bbq3ce0PhgwpVE4MNf4EZ5t_qud-4f7HSNgEbQl0kTpqrq4vEnPhC8NjBupPMQRhTQ40fmdgqGthNyz8exgAoOAJhFS-qVvSeLFimf-YRRC9vCMi0lUah32EwIQNLUHqp0o/s320/rdp.PNG" width="229" /></a><br /> Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ingin share script random post. Tapi script random post kali ini bukan hanya bisa menampilkan gambar saja. Tapi sekaligus bisa menampilkan gambar atau thumbnail, judul artikel, komentar dan juga hari penulisan postingan.<br /> <br /> Seperti yang di ketahui bersama, script ini sangat berguna bagi anda yang tidak ingin memasang banyak fitur di blog anda. Karena dengan memasang satu script ini saja sudah bisa menampilkan beragam postingan terdahulu. Dimana Script ini nantinya akan menampilkan daftar posting yang berbeda setiap kali halaman di refresh.</div><br /> Tanpa banyak basa-basi langsung saja copas scriptnya dibawah ini.<br /> <br /> <pre class="javascript" name="code"><script type="text/javaScript"> var rdp_numposts=7; var rdp_snippet_length=60; var rdp_info='yes'; var rdp_comment='Comment'; var rdp_disable=''; var rdp_current=[]; var rdp_total_posts=0; var rdp_current=new Array(rdp_numposts); function totalposts(json){ rdp_total_posts=json.feed.openSearch$totalResults.$t } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>'); function getvalue(){ for(var i=0;i<rdp_numposts;i++){ var found=false; var rndValue=get_random(); for(var j=0;j<rdp_current.length;j++){ if(rdp_current[j]==rndValue){ found=true;break } }; if(found){i--} else{ rdp_current[i]=rndValue } } }; function get_random(){ var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1)); return ranNum }; </script> <script type="text/javaScript"> function random_posts(json){ a=location.href;y=a.indexOf('?m=0'); for(var i=0;i<rdp_numposts;i++){ var entry=json.feed.entry[i]; var rdp_posttitle=entry.title.$t; if('content'in entry){ var rdp_get_snippet=entry.content.$t } else{ if('summary'in entry){ var rdp_get_snippet=entry.summary.$t } else{ var rdp_get_snippet="";}}; rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,""); if (rdp_get_snippet.length<rdp_snippet_length){ var rdp_snippet=rdp_get_snippet } else{ rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length); var space=rdp_get_snippet.lastIndexOf(" "); rdp_snippet=rdp_get_snippet.substring(0,space)+"…";}; for(var j=0;j<entry.link.length;j++){ if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment } else{ rdp_commentsNum=rdp_disable }; if(entry.link[j].rel=='alternate'){ var rdp_posturl=entry.link[j].href;if(y!=-1){ rdp_posturl=rdp_posturl+'?m=0' } var rdp_postdate=entry.published.$t; if('media$thumbnail'in entry){ var rdp_thumb=entry.media$thumbnail.url } else{ rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVXJKIl3DRjRdDXMaNaInPm18JAn2MM498HfjPkCCn1YbEcpe6dOAkzvmL5pdgLUM9j6fvtZWOpVijmzKPGqxcB52JnZBRZNzcrmqwIuEizatpXdJuBGOXoA_sLfwWMx2_znzjHsVvPq8/" } } }; document.write(' <li>'); document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>'); document.write('<div> <a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>'); if(rdp_info=='yes'){ document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>' } document.write('<div style="clear:both"> </div></li> ') }}; getvalue(); for(var i=0;i<rdp_numposts;i++){ document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>') }; </script> </pre><br /> *** Sebagai tambahan saja agar terlihat lebih cantik, anda bisa menambahkan CSS sesuai selera. Sebagai contoh mungkin bisa menggunakan contohnya dibawah ini.<br /> <br /> <blockquote class="tr_bq"><style><br /> #random-posts-area {width:100%;}<br /> #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}<br /> #random-posts li {list-style:none;background: none;<br /> padding: 0;}<br /> #random-posts ul {padding:0; margin:0;}<br /> #random-posts span {clear:both;}<br /> </style></blockquote><br /> Lalu untuk cara penggunaannya bisa langsung kemenu design =>add gadget =>HTML/javascript.<br /> <blockquote class="tr_bq"><span style="color: #cc0000;">Letakkan kode CSS disini..</span><br /> <div class="random-posts-area"><br /> <ul id="random-posts"><br /> <span style="color: #cc0000;">Letakkan Script Diatas disini... </span><br /> </ul><br /> </div></blockquote><br /> </div>

Blogging designe Javascript Menengah Widget Sript Random post With thumbnail + Title + Comment + Post Time

Beberapa hari yang lalu, saya sudah sharen script random post with thumnail only. Pada kesempatan kali ini, Admin ngalor ngidul kembali ing...

Baca selengkapnya »

Script Random Post Thumbnail Only - By Label

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s1600/random.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVQcCIRiPpzua5mFXClh7WT8e2Ox2pIFzjKoQzkX4XId2Ymf7lm_Y0vcacw4fKWz7zVqqFOeMcwPhu-ZFdVI-rG04E3PSwPJ0WTNSlWq_pgAsfSi69KjQ_4sHie6rKM_73TAleqhVdKY/s320/random.PNG" width="320" /></a></div>Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin tutorial, tapi hampir semua bahasan sudah begitu banyak yang membahas. Mau buat tutotrial juga malu karena sudah banyak yang lebih jago. Bahkan pernah di bilang klo postingan ngalor ngidul itu tidak bermutu. ^_^<br /> <br /> Tapi gak apa-apa deh..!! Namanya juga baru belajar. Dan setahu saya walaupun untuk sebagian orang ilmu yang saya share adalah sampah, tapi saya juga tetap percaya itu bisa jadi sebongkah emas buat sebagian orang yang masih "BODOH" seperti saya.<br /> <br /> Oke..!!<br /> Pada bahasan kali ini, kita kembali akan sedikit membahas tentang script yang berfungsi untuk menampilkan postingan-postingan terdahulu. Script yang ingin saya share kali ini adalah Script Random Post. Script ini pernah saya bahas di postingan sebelumnya yaitu <i><a href="http://realfa84.blogspot.com/2012/02/script-random-post-with-thumbnail.html" target="_blank">Script Random Post with Thumbnail</a>. </i>Sebenarnya script ini lebih cocok diberi nama <strong><i>Script Random Post Thumbnail Only</i></strong>. Karena memang script ini hanya bisa menampilkan gambar atau thumbnail postingan. `<br /> <br /> Namun sebenarnya fungsi dari script ini tidak hanya sebatas menampilkan postingan secara acak berdasarkan URL utama saja. Tapi script ini juga bisa digunakan untuk menampilkan postingan secara acak dan di shortir berdasarkan label-labet tertentu dari suatu blog. Artinya kita juga bisa menampilkan posting-posting dari blog kita yang lain.<br /> Untuk caranya juga sangat gampang.<br /> <br /> 1. Pertama kali seperti biasa masuk ke Dashboard => Design=> Edit HTML.<br /> 2. Cari kode <span style="color: purple;"><i></head></i></span><br /> a. Update:<br /> Kode script internal<br /> <pre class="javascript" name="code"><script type="text/javascript"> //<![CDATA[ var showpostthumbnails_gal = true; var showpostsummary_gal = false; var random_posts = false; function showrecentpostswiththumbs(json) { document.write('<div id="featured" class="clearfix grid_12"> <ul>'); for (var i = 0; i < numposts_gal; i++) { if (random_posts == true){ var random_int = Math.floor(Math.random()*json.feed.entry.length); var entry_gal = json.feed.entry[random_int]; } else{ var entry_gal = json.feed.entry[i]; } var posttitle_gal = entry_gal.title.$t; var posturl_gal;if (i == json.feed.entry.length) break; for (var k = 0; k < entry_gal.link.length;k++){ if (entry_gal.link[k].rel == 'alternate') { posturl_gal = entry_gal.link[k].href;break; } } if("content"in entry_gal){ var postcontent_gal=entry_gal.content.$t; } s = postcontent_gal; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { var thumburl_gal = d; } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif'; document.write('<li> <a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="" title="'+posttitle_gal+'" />'); var re = /<\S[^>]*>/g; postcontent_gal = postcontent_gal.replace(re, ""); if (showpostsummary_gal == true) { if (postcontent_gal.length < numchars_gal) { document.write(postcontent_gal); document.write('</span>');} else { postcontent_gal = postcontent_gal.substring(0, numchars_gal); var quoteEnd_gal = postcontent_gal.lastIndexOf(" "); postcontent_gal = postcontent_gal.substring(0,quoteEnd_gal); document.write(postcontent_gal + '...'); document.write('</span>');} } document.write('</a></li> '); }document.write('</ul></div>'); } //]]> </script> </pre><br /> b. Update :<br /> Kode script eksternal<br /> <pre class="javascript" name="code"><script src="http://sliderpostbylabel.googlecode.com/files/gallerypostswithimgonly.js"> </script> </pre><br /> <br /> 3. Copas salah satu kode di atas kemudian letakkan diatasnya .<br /> 4. Kemudian ke Dashboard => Design=> Add Element => HTML/Javascript.<br /> 5. Masukkan juga kode dibawah ini kedalamnya.<br /> <blockquote class="tr_bq"><script><br /> var numposts_gal = 1;<br /> var random_posts = <b><span style="color: red;">true;</span></b><br /> </script><br /> <script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br /> </script></blockquote>6. Ganti kode warna BIRU dengan URL Blog yang ingin anda tampilkan dan simpan.<br /> <br /> Sekarang adalah cara-cara extra.<br /> 1. Ganti kode warna merah dengan FALSE jika anda hanya ingin menjadikannya Recent Post With Thumbnail only.<br /> 2. Jika ingin menampilkannya sesuai label tertentu ada bisa mengeditnya menjadi seperti ini.<br /> <blockquote class="tr_bq"><script><br /> var numposts_gal = 1;<br /> var random_posts = <b><span style="color: red;">false;</span></b><br /> </script><br /> <script src="<b><i><span style="color: blue;">http://realfa84.blogspot.com</span></i></b>/feeds/posts/default/-/<b><i><span style="color: purple;">LabelPost</span></i></b>?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"><br /> </script></blockquote><div style="text-align: justify;"><br /> Jangan lupa mengganti kode-kode yang saya tandai dengan warna tertentu sesuai kebutuhan. Ganti LabelPost (kode warna ungu) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan <b><span style="color: #3d85c6;">%20.</span></b></div>Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:<br /> <br /> <br /> <div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><script src="<b><span style="color: blue;">http://URL-BLOG-ANDA</span></b>/feeds/posts/default/-/<b><span style="color: #660000;">Belajar</span><u><span style="color: #3d85c6;">%20</span></u><span style="color: #660000;">Blog</span></b>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></div></div></div></div><br /> <b>Update :</b><br /> Jika Cara di atas di anggap terlalu repot, Pemasangan kode script pertama juga bisa dilakukan dengan cara meletakkannya di atas kode script yang ke dua. Yaitu diatas kode no 5.</div>

Blogging designe Javascript Menengah Tingkat Lanjut Script Random Post Thumbnail Only - By Label

Sekian lama gak update postingan di blog ngalor ngidul, kangen juga pengen update lagi. Tapi benar-benar bingung mau posting apa. Mau bikin ...

Baca selengkapnya »

Cara Memasang jQuery Image Preloader

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" /></a></div><div style="text-align: justify;">jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar.<br /> <br /> Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. <br /> <br /> Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana Cara Memasang  jQuery  Image Preloader ini di Blog?<br /> <br /> Sebagai contoh, diblog ini juga menggunakan jQuery Image Preloader. Untuk Cara Memasang jQuery Image Preloader di blogspot, kita cukup menambahkan kode script dan CSS berikut ini kedalam template blog kita.<br /> <br /> Langkah pertama adalah cari kode: <b></head></b><br /> Kemudian letakkan kode script berikut ke atasnya<br /> <div id="CSS-area1"><div id="CSS-area"><br /> <br /> <center><br /> <span style="color: #cc0000;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script></span><br /> <script src='http://bloggeracsessories.googlecode.com/files/jquery.preloader.min.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> $(function(){<br />  $(&quot;body&quot;).preloader();<br /> });<br /> </script></center></div></div><br /> Kemudian cari kode: <b>]]</b:skin></b><br /> <div><br /> </div>dan tambahkan kode CSS berikut di atasnya.<br /> <br /> <pre class="CSS" name="code">.preloader { background:url(http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif) center center no-repeat; } </pre><br /> Simpan template anda dan dan lihat hasilnya.<br /> <br /> Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna merah yang tadi anda letakkan di atas kode <b></head></b></div></div>

Blogging CSS designe Javascript JQuery Tingkat Lanjut Tips n Trik Cara Memasang jQuery Image Preloader

jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situ...

Baca selengkapnya »

Membuat Efect Zoom Dengan CSS | Tanpa Script

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Membuat Efect Zoom Dengan CSS | Tanpa Script" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35RCOcv9Bl2a-yUEWCTre_9kVLwHVjBtTFhcMaZCGU0L0FCtFoHrqBtAxtFtdYwsB_PilWKNkPz2FPCHFlqUGFjWHNhG_-6qTg0mvtxGBmdxpZPNH3_8lNpKWlkSC6eRZNU_VSounnx4/s1600/Zoomy-jQuery-Image-Zoom-Plugin.jpg" width="250" /></div><div style="text-align: justify;">Kembali lagi ke bahasan tentang CSS, Pada posting-posting sebelumnya kita sudah tahu persis beberapa kemudahan yang bisa kita lakukan dengan CSS. Yaitu kita bisa menentukan jarak, posisi dan lebar dari suatu area. Tapi sebenarnya kegunaan CSS ini tidak hanya sampai disitu saja. Dengan CSS ini kita juga bisa membuat suatu efek-efek style tertentu pada suatu konten. Salah satunya adalah yang akan kita bahas di postingan ini. Yaitu Membuat Efect Zoom Dengan CSS.<br /> <br /> <div style="text-align: justify;">Efek zoom atau membuat pembesaran ini biasanya digunakan pada gambar. Dan ternyata kehebatan dari CSS ini kita sudah bisa membuat efek zoom ini menjadi kelihatan keren walaupun Tanpa Script. Salah satu Contoh atau Demonya bisa anda lihat di Gambar widget Popular post dibawah atau bagian footer blog ini. Gambar Thumbnail dari widget tersebut akan sedikit membesar jika diletakkan mouse. Atau dengan kata lain efet tersebut akan terjadi dengan Mouse Hover.</div><br /> Untuk mendapatkan hasil yang seperti itu anda bisa membuatnya dengan cara memberikan CSS seperti ini.<br /> <br /> <pre class="CSS" name="code"><style type="text/css"> .Content-Area { padding: 5px } .Content-Area img { vertical-align: middle; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; z-index: 1 } .Content-Area img:hover { height: 250px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); -webkit-box-shadow: 0 0 5px 2px blue; -moz-box-shadow: 0 0 5px 2px blue; box-shadow: 0 0 5px 2px blue; z-index: 2; border: 5px solid #BBB; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px } </style> </pre><br /> Dari hasil CSS tersebut maka kita akan menghasilkan efek seperti ketika kita meletakkan mouse pada gambar dibawah ini.<br /> <br /> <center><div class="Content-Area" style="height: 250px; text-align: center; width: 250px;"><img alt="Membuat Efect Zoom Dengan CSS | Tanpa Script" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35RCOcv9Bl2a-yUEWCTre_9kVLwHVjBtTFhcMaZCGU0L0FCtFoHrqBtAxtFtdYwsB_PilWKNkPz2FPCHFlqUGFjWHNhG_-6qTg0mvtxGBmdxpZPNH3_8lNpKWlkSC6eRZNU_VSounnx4/s1600/Zoomy-jQuery-Image-Zoom-Plugin.jpg" width="250" /></div></center><br /> <br /> <div style="text-align: center;"><span style="font-size: large;">Selamat Mencoba..!!!!</span></div></div></div>

CSS designe Menengah Tingkat Lanjut Tutorial Membuat Efect Zoom Dengan CSS | Tanpa Script

Kembali lagi ke bahasan tentang CSS, Pada posting-posting sebelumnya kita sudah tahu persis beberapa kemudahan yang bisa kita lakukan dengan...

Baca selengkapnya »

Pengenalan JQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" /></a></div><div style="text-align: justify;">jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.</div><div style="text-align: justify;"><br /> JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.<br /> <br /> Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.<br /> <br /> Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br /> <br /> Apa itu Javascript Framework?<br /> <br /> Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.<br /> <br /> Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.<br /> <br /> Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.<br /> <br /> JQuery dan kemudahannya<br /> <br /> JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.</div><br /> Mari kita tengok bagaimana JQuery mempermudah kita.<br /> <br /> Jika kita punya halaman HTML seperti ini:<br /> <br /> <div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><div id="<span style="color: #990000;">container</span>">This is container</div></b></div></div></div><br /> Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br /> <br /> Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.<br /> <br /> <div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><script src="<span style="color: blue;">jquery.js</span>" type="text/javascript"></b></div><div style="text-align: center;"><b></script></b></div><div style="text-align: center;"><b><script type="text/javascript"></b></div><div style="text-align: center;"><b>$("<span style="color: #cc0000;">#container</span>").append("<strong>Ini hasil tambahan dari JQuery</strong>");</b></div><div style="text-align: center;"><b></script></b></div></div></div><br /> Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya <b><a href="http://jquery.com/">disini</a></b>.</div>

Blogging designe Javascript JQuery Tingkat Lanjut Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada...

Baca selengkapnya »

Black Computer Store Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Setelah sebelumnya share template <b><i><a href="http://realfa84.blogspot.com/2012/02/elegant-white-pigeon-template.html">White ads pigeon blogger Template</a></i></b>, maka dipostingan kali ini admin ngalor ngidul kembali ingin share template gratis. Nama templatenya <strong>Black Computer Store Blogger Template</strong>. Sesuai namanya template ini khusus buat pecinta template berwarna gelap karena template ini warnanya hitam pekat.<br /> <br /> <strong>Black Computer Store Blogger Template</strong> ini bukan murni hasil design dari admin ngalor ngidul. Admin ngalor ngidul hanya melakukan sedikit edit saja. Aslinya template ini adalah blogger store V2 hasil design dari Rifki Aria Gumelar, author dari www.javatemplates.com.<br /> <br /> Berikut ini adalah tampilan dari  <strong>Black Computer Store Blogger Template</strong>.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqND0o4PKiVMwB8LNXPZTOXpZ-UlP-l5_ct9soW6Mz1_-1FWvkrNQigakl6_yQwglA0l_GqJOYjlD9t0URG11SAbjpwkHfYNXfbpCw1bdlskGKb_jiI3Afu8IpD8XqjUvJDkNZ6f6keM/s1600/black+computer+store.png" imageanchor="1" style="margin-left: auto; margin-right: auto;" title="Black Computer Store Blogger Template"><img alt="Black Computer Store Blogger Template" background="#fff" border="0" height="640" padding="8px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqND0o4PKiVMwB8LNXPZTOXpZ-UlP-l5_ct9soW6Mz1_-1FWvkrNQigakl6_yQwglA0l_GqJOYjlD9t0URG11SAbjpwkHfYNXfbpCw1bdlskGKb_jiI3Afu8IpD8XqjUvJDkNZ6f6keM/s640/black+computer+store.png" width="425" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Home page style</td></tr> </tbody></table> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqcVM2mTzmwL1bZQN8K6KAlFhtD3cWfTBGAkwEkA-p9Rh9WeckgIulL-wcGIhMGnyXD5_1M4gBxz5kw31_aQOxw78gURmW5Xrqgv24w4UASj07gQSC3XHwfEQiBkOsB0iEvumqRvH8SdY/s1600/BCS+post.png" imageanchor="1" style="margin-left: auto; margin-right: auto;" title="Black Computer Store Blogger Template"><img alt="Black Computer Store Blogger Template" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqcVM2mTzmwL1bZQN8K6KAlFhtD3cWfTBGAkwEkA-p9Rh9WeckgIulL-wcGIhMGnyXD5_1M4gBxz5kw31_aQOxw78gURmW5Xrqgv24w4UASj07gQSC3XHwfEQiBkOsB0iEvumqRvH8SdY/s400/BCS+post.png" width="425" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Main Post Style</td></tr> </tbody></table> Fitur dari <strong>Black Computer Store Blogger Template</strong> ini sendiri tidak jauh beda dengan blogger store V2. Bahkan bisa dibilang sama. Admin hanya mengedit sedikit dan juga menambahkan share button dan Java script extra agar bisa dipasang image transisi dibagian posting.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Jika belum tau seperti apa fitur yang admin tambahkan anda bisa langsung lihat sendiri di blog demonya. Untuk saat ini, template tersebut hanya bisa didownload melalui <b><a href="http://www.thedoctortemplate.blogspot.com/">the doctor template</a></b>.</div> <br /> <div id="CSS-area1"> <div style="display: inline; float: left; text-align: center; width: 100%;"> <div style="float: left; text-align: center; width: 45%;"> <a href="http://black-computer-store.blogspot.com/">Live Demo</a></div> <div style="float: right; text-align: center; width: 45%;"> <a href="http://www.thedoctortemplate.blogspot.com/2012/02/black-computer-store-blogger-template.html">Download</a></div> </div> </div> <br /> <div style="text-align: justify;"> Jika ada kesulitan, silakan langsung ke tutorial asli dari template ini di <a href="http://www.javatemplates.com/">www.javatemplates.com</a>. </div> <div style="text-align: justify;"> Atau Hubungi kami melalui menu <b>kontak</b> untuk penambahan fitur dan mengkustomisasi lebih lanjut. <br /> <br /> <b>Perhatian:</b><br /> Mohon jika anda menggunakan template ini untuk tidak meremove link yang ada difooter. Hargailah sedikit karya dan usaha kami. Jika ingin template yang memang hanya milik anda, anda bisa anda bisa membuat template dengan design anda sendiri. Atau dengan menggunakan jasa kami (^_^).</div> <br /></div>

Blogging designe Jasa Kami Template Black Computer Store Blogger Template

Setelah sebelumnya share template White ads pigeon blogger Template , maka dipostingan kali ini admin ngalor ngidul kembali ingin share te...

Baca selengkapnya »

Trik Cepat menghilangkan Navbar dan widget bawaan blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinA1lnPYB3G1RzpsAXVaC928rmG6uth7Px6VnqZFg22cI0aPNi3PuFgGj3ObL3g9u3GcNaekV1juQw1YEgWBQTQn9nOyA-Y8K8lVMCDdTc8wZtmmuLi9S7H9HDoFFrTSZAqLKYBEjYTfk/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinA1lnPYB3G1RzpsAXVaC928rmG6uth7Px6VnqZFg22cI0aPNi3PuFgGj3ObL3g9u3GcNaekV1juQw1YEgWBQTQn9nOyA-Y8K8lVMCDdTc8wZtmmuLi9S7H9HDoFFrTSZAqLKYBEjYTfk/s320/Capture.PNG" width="300" /></a></div>Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yang disediakan. Sebuah custom template juga rata-rata telah dilengkapi dengan berbagai widget dan konten-konten favorite dan disukai oleh para blogger.<br /> <br /> Salah satu cirinya lagi adalah telah menghilangnya widget-widget bawaan dari blogger, seperti misalnya navbar bawaan blogger. Tapi tahukah anda jika sebenarnya widget tersebut sebenarnya tidaklah hilang dari template anda. Widget tersebut biasanya hanya disembunyikan oleh designernya.<br /> <br /> Coba saja ada masuk ke menu edit html dari dashboard anda. Kemudian cari kode berikut ini.<br /> <br /> <b style="color: #990000;">#navbar </b>atau<b style="color: #990000;"> .navbar</b><br /> <br /> Biasanya kode CSS yang akan mengikuti dari kode tersebut adalah seperti ini:<br /> <style> #woome{width: 100%; background: white; height: 66px; border: 5px solid white;} #woom{width: 22%; float: left; background: #F3F3F3; border-right: 1px solid white; padding: 9px;} </style><br /> <div id="woome"><div id="woom">#navbar {<br /> <b><span style="color: blue;">visibility:hidden;</span></b><br /> }</div><div id="woom">.navbar {<br /> <span style="color: blue;">visibility:hidden;</span><br /> }</div><div id="woom">#navbar {<br /> <span style="color: red;"><b>display:none</b></span><br /> }</div><div id="woom">.navbar {<br /> <b><span style="color: red;">display:none</span></b><br /> }</div></div><br /> Memang betul jika dengan kode tersebut maka Navbar bawaan blogger tersebut akan menjadi hilang atau tersembunyi. Namun bukan berarti navbar bawaan blogger tersebut benar-benar hilang. Sebagai buktinya adalah jika kita sedikit tahu tentang inspect element atau dilihat dari page sourcenya, sebenarnya widget tersebut masih ada.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN75x5XET2zVgKKpz4P1TY8QfdoDZIxexuhUkZP-1V2upUmVTWSwwbbxKuKZfv4KqYemDbrhHVfxc-lCcPAxBM97a6IjA222Om-x7ws7rgH6mmPjgneHv58kSlpP0thPCoef7iru2ciCQ/s1600/wew.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN75x5XET2zVgKKpz4P1TY8QfdoDZIxexuhUkZP-1V2upUmVTWSwwbbxKuKZfv4KqYemDbrhHVfxc-lCcPAxBM97a6IjA222Om-x7ws7rgH6mmPjgneHv58kSlpP0thPCoef7iru2ciCQ/s1600/wew.PNG" /></a></div><br /> Lalu bagaimana caranya agar Navbar dan widget bawaan blogger tersebut benar-benar hilang??<br /> Caranya cukup gampang.<br /> <br /> 1. Login ke dashboard -> design -> edit html.<br /> 2. Cari kode:<br /> <br />  <b><span style="color: #cc0000;"><body></span></b><br /> 3. Letakkan kode berikut tepat diatasnya.<br /> <pre class="javascript" name="code"><script type="text/javascript"> <![CDATA[ <!--/*<body>*/--> ]]> </script> </pre>4. Save Template.<br /> Maka kita akan ada pemberitahuan seperti ini. Klik saja hapus atau delete widgets.<br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6-EY0l61IYqwNHY2000tNV5l2Hmfnx85HurSnluphqzINLLaHYlTzEY65agGNbXSTjQ3HXU_ll_hPT2ixqxGC9OtbMRYd7eT6_MYaLHFdpcJ4vCdlBMVjTvp94wej3173B2UVP7vIQ/s1600/wew1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6-EY0l61IYqwNHY2000tNV5l2Hmfnx85HurSnluphqzINLLaHYlTzEY65agGNbXSTjQ3HXU_ll_hPT2ixqxGC9OtbMRYd7eT6_MYaLHFdpcJ4vCdlBMVjTvp94wej3173B2UVP7vIQ/s1600/wew1.PNG" /></a></div><br /> Maka widget-widget bawaan dari blogger tersebut akan benar-benar hilang termasuk juga widget bawaan lainnya seperti tanda obeng atau quick edit dan lain sebagainya.<br /> <br /> Tambahan:<br /> Jika kita ingin memunculkan kembali widget tersebut, maka kita tinggal hapus kode tersebut. Gampangkan??<br /> <br /> </div></div>

Blogging CSS designe Javascript Tips n Trik Tutorial Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yan...

Baca selengkapnya »

Elegant White Pigeon Template

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Pada postingan kali ini admin ngalor ngidul coba untuk share hasil coba-coba design template blogspot/blogger. Admin memberi nama template ini <strong>Template Elegant White Pigeon</strong>. Template blogger ini bisa dibilang simple. Cara penggunaannya sangat gampang.<br /> Berikut ini adalah spesifikasi dari Elegant White Pigeon Blogger Template.<br /> <br /> <div id="CSS-area1"> <div id="CSS-area"> 1. 3 kolom di halaman utama.<br /> 2. 2 kolom di halaman posting.<br /> 3. 2 kolom sidebar kanan.<br /> 4. 2 kolom khusus iklan diatas postingan ukuran 250 x 250<br /> 5. 1 kolom khusus untuk iklan link ukuran 640 x 15<br /> 6. 3 kolom footer.<br /> 7. Loading yang sangat cepat karena tidak banyak menggunakan gambar.<br /> 8. SEO friendly.<br /> 9. System Custom navigasi utama.<br /> 10. Di lengkapi dengan Share Button, Sharing sexy, dan Subcriber dll.</div> </div> <br /> Di bawah ini adalah screen shoot dari template yang saya maksud.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5x5vYhB1BOjhujBRvy8rsLlk56vjsx5E2i-muYQnEhe4GIE6ykk7l2mD1OjTMEAdRHmn7lWHFG0TQfNLy2QFXHPmZkzxuYnvooP_NrvTz_RfBJhTzgBNf80ZP_a9YIP5peFozeuArvT4/s1600/el.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5x5vYhB1BOjhujBRvy8rsLlk56vjsx5E2i-muYQnEhe4GIE6ykk7l2mD1OjTMEAdRHmn7lWHFG0TQfNLy2QFXHPmZkzxuYnvooP_NrvTz_RfBJhTzgBNf80ZP_a9YIP5peFozeuArvT4/s1600/el.PNG" width="398" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small;"><b>Home Style</b></span></td></tr> </tbody></table> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGAabu6K_M1SkneZvHbzlRkDkAqM3Rhn-bc9Zht5gKsDJhyyYFRmEzNp15IEemhGnlOKicApHTwkMi_w17tu8wd5MTIilpuP2me-hFa6Jq9-Kj-zMFGjCS4eaNWin3PlTEUfsqtvN7fo/s1600/elpos2.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGAabu6K_M1SkneZvHbzlRkDkAqM3Rhn-bc9Zht5gKsDJhyyYFRmEzNp15IEemhGnlOKicApHTwkMi_w17tu8wd5MTIilpuP2me-hFa6Jq9-Kj-zMFGjCS4eaNWin3PlTEUfsqtvN7fo/s1600/elpos2.PNG" width="398" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><b><span style="font-size: small;">Posting Style</span></b></td></tr> </tbody></table> <br /> Buat yang ingin menggunakan template ini bisa didownload secara gratis. Untuk mendapatkan template ini, sementara ini baru hanya dapat didownload dari thedoctortemplate.com. Jika mengalami sedikit kesulitan dengan pemakaiannya silakan tinggalkan komentar dibawah atau hubungi kami dengan menggunakan menu kontak jika ingin redesign atau custom ulang template ini.<br /> <br /> <div id="CSS-area1"> <div style="display: inline; float: left; text-align: center; width: 100%;"> <div style="float: left; text-align: center; width: 45%;"> <a href="http://elegant-white-pigeon.blogspot.com/">Live Demo</a></div> <div style="float: right; text-align: center; width: 45%;"> <a href="http://www.thedoctortemplate.blogspot.com/2011/12/elegant-white-pigeon-blogger-template.html">Download</a></div> </div> </div> </div> </div> <br /> <b>Perhatian:</b><br /> Mohon jika anda menggunakan template ini untuk tidak meremove link yang ada difooter. Hargailah sedikit karya dan usaha kami. Jika ingin template yang memang hanya milik anda, anda bisa anda bisa membuat template dengan design anda sendiri. Atau dengan menggunakan jasa kami (^_^). Silakan Hubungi kami melalui menu <b>kontak</b> untuk penambahan fitur dan mengkustomisasi lebih lanjut. </div>

designe Jasa Kami Template Elegant White Pigeon Template

Pada postingan kali ini admin ngalor ngidul coba untuk share hasil coba-coba design template blogspot/blogger. Admin memberi nama templat...

Baca selengkapnya »

Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWj9KIEsDZAIJyBslH_2yWXkc2pBqQhT9Xso-H056x0EJjtBbkLbSuCI-VwAAvjdhFRDNEY0pCxcp088tJUjSNbPcIP2peasYFL1pqng3yqKd2WS6vIKp0CpRU8ti1Q-1A_B2nO6GD4U/s1600/menghilang.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog"><img alt="Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWj9KIEsDZAIJyBslH_2yWXkc2pBqQhT9Xso-H056x0EJjtBbkLbSuCI-VwAAvjdhFRDNEY0pCxcp088tJUjSNbPcIP2peasYFL1pqng3yqKd2WS6vIKp0CpRU8ti1Q-1A_B2nO6GD4U/s1600/menghilang.gif" width="330px" /></a></div><div style="text-align: justify;">Dipostingan kali ini kita akan membahas bagaimana <strong>cara menghilangkan dan menampilkan suatu objek diblog</strong>. Dalam mendesign sebuat template, Penggunaan <strong>Trik dan Kode-kode Untuk Menampilkan dan Menghilangkankan</strong> ,atau lebih tepatnya <strong>menyembunyikan Widget Content Blog</strong> ini sangat diperlukan agar hasil template yang kita buat tidak terlihat monoton. Sebagai contoh adalah widget slider dan salah satu sidebar yang ada pada blog ini. Widget tersebut hanya akan muncul dihalaman utama dan kategori blog dan akan menghilang jika kita masuk kehalaman posting.<br /> <br /> <strong>Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog</strong> ini biasanya pasti ada ditemplate-template dengan gaya magazine atau majalah. Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.<br /> <br /> Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.</div><div id="CSS-area1"><div id="CSS-area">1. Hanya pada Halaman Utama Blog<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url == data:blog.homepageUrl"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div>Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika kita mengklik Label Post atau membaca postingan secara keseluruhan.<br /> <br /> 2. Kategori Post dan Single Post<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url != data:blog.homepageUrl"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br /> Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (postingan secara keseluruhan).<br /> <br /> 3. Halama Utama Blog dan Kategori Post<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType != &quot;item&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br /> Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.<br /> <br /> 4. Single Post atau Halaman Postingan<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType == &quot;item&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br /> Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.<br /> <br /> 5. Halama Utama Blog dan Kategori Post<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.pageType == &quot;index&quot;"></span></b></div><div style="text-align: center;"><b>...Kontent...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br /> Fungsi kode ini sama dengan fungsi kode pada nomer 3.<br /> <br /> 6. Menampilan Widget Blog Pada Postingan Tertentu Saja<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond="data:blog.url == &quot;URL_POST_TERTENTU&quot;"></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div>Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu.<br /> <br /> 7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja<br /> <div style="text-align: center;"><b><span style="color: #990000;"><b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'></span></b></div><div style="text-align: center;"><b>...Konten...</b></div><div style="text-align: center;"><b><span style="color: #990000;"></b:if></span></b></div><br /> Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.</div></div><br /> <div style="text-align: justify;">Cara penggunaan kode ini sangatlah gampang. Kita cukup menambahkan kode yang kita inginkan kewidget yang ingin kita tampilkan atau sembunyikan.<br /> <br /> Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok atau dengan memberikan perintah melalui kode CSS-nya. Namun biasanya, penerapan kode-kode ini melalui CSS hanya di gunakan untuk mengatur komposisi dari suatu kolom widget konten. Misalnya lebar dan posisi widget atau objek berbeda dihalaman utama dan postingan. Mungkin hal ini akan kita bahas di postingan berikutnya.<br /> <br /> Mungkin itu saja yang saya tahu tentang Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini. Jika teman-teman punya pendapat atau ilmu yang lain, silakan tinggalkan komentar dan url postingannya dibawah ini. Semoga bermanfaat.</div></div>

Blogging designe Menengah Tingkat Lanjut Tips n Trik Widget Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Dipostingan kali ini kita akan membahas bagaimana cara menghilangkan dan menampilkan suatu objek diblog . Dalam mendesign sebuat template, P...

Baca selengkapnya »

Cara Mengetahui id dan class dari suatu widget atau kolom

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvm9YwJ4Brl7JVWgwExxowPxM2OR3_n4tyNrN9y5eQjCOMUmal455wz9nAmv91XN_40ortb-2TBVMzcBTjCyu_FL3ua0Ip4Z7Ww1XVZ65YRbx_6NvC2qBVYp99wGzcO_CZPajnvlRSdg/s1600/html.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Mengetahui id dan class dari suatu widget atau kolom" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvm9YwJ4Brl7JVWgwExxowPxM2OR3_n4tyNrN9y5eQjCOMUmal455wz9nAmv91XN_40ortb-2TBVMzcBTjCyu_FL3ua0Ip4Z7Ww1XVZ65YRbx_6NvC2qBVYp99wGzcO_CZPajnvlRSdg/s320/html.png" width="320" /></a></div>Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.<br /> <br /> Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.<br /> <br /> Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.<br /> <br /> Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas <b><i>inspect element</i></b>. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element <b><a href="http://realfa84.blogspot.com/2011/12/mempermudah-ujicoba-design-dengan.html"><i>disini</i></a></b>.<br /> <br /> Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.<br /> <br /> 1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini. <br /> 2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.<br /> 3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB81ZVtNDX2NmgvbSoozCpfGfVXmeZu49vPkDD2neM0A9VpFk76xq7Cj9rTiDkzt76p1I6vxnvYCGRDBsLHvJmhyrRYoJZStBIZXJlAXuBMBJNvIU-g_d5JVAAy7ZSd6gVQ3O2LYnz7aE/s1600/inspect+element.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB81ZVtNDX2NmgvbSoozCpfGfVXmeZu49vPkDD2neM0A9VpFk76xq7Cj9rTiDkzt76p1I6vxnvYCGRDBsLHvJmhyrRYoJZStBIZXJlAXuBMBJNvIU-g_d5JVAAy7ZSd6gVQ3O2LYnz7aE/s400/inspect+element.png" width="400" /></a></div><br /> 4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSe5Aq9ecxI6QMt5PwNn8x-3gJ1j6aWrlCCkYtLnF4r7oHA93Jdqop0PNA5oimYvPqXg3mcEO9qg-KtC7YEUiICsUljyNmJRv4-brFL2jVTq4Fn6frGLDOvzdhAgE2VrjZTKlnSqT1MU/s1600/inspect+element1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSe5Aq9ecxI6QMt5PwNn8x-3gJ1j6aWrlCCkYtLnF4r7oHA93Jdqop0PNA5oimYvPqXg3mcEO9qg-KtC7YEUiICsUljyNmJRv4-brFL2jVTq4Fn6frGLDOvzdhAgE2VrjZTKlnSqT1MU/s400/inspect+element1.png" width="400" /></a></div><br /> Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m5L4YiewudRlcXDaaEv6Okpz43AXQEJGTAu3PgTMaVdmNdtvFaxz8zO_aiD4QQzmmetsapupSs0zeoYuyiTZZIr7r5NoeWaintB8aDn684_Tuib2TYFWTqpPpUjEW4O7AJjNpMG3cOU/s1600/inspect+element2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m5L4YiewudRlcXDaaEv6Okpz43AXQEJGTAu3PgTMaVdmNdtvFaxz8zO_aiD4QQzmmetsapupSs0zeoYuyiTZZIr7r5NoeWaintB8aDn684_Tuib2TYFWTqpPpUjEW4O7AJjNpMG3cOU/s400/inspect+element2.png" width="400" /></a></div><br /> Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....</div></div>

Blogging Dasar designe Tips n Trik Tutorial Cara Mengetahui id dan class dari suatu widget atau kolom

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten a...

Baca selengkapnya »

Pengenalan JAVASCRIPT Fungsinya

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pengenalan JAVASCRIPT Fungsinya" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJqohdQXWbT4h4kJgCo59yatQSnorLuvGF1IFIqbFlPYU196sJsj8dqJTcidIJyVpz-y10eULr7MIop6Xud_-xh4ymbYcApM5b0f8u-sDhzNrdlHn9nTH06JgmDax4vm4HqJ7CzgoTWE/s1600/javascript.jpeg" /></a></div><div style="text-align: justify;">Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??<br /> <br /> Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.<br /> <br /> Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.<br /> <br /> Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.</div><br /> <b>Contoh penulisan Internal:</b><br /> <pre class="javascript" name="code"><script type="text/javascript"> document.write(“Test”); </script> </pre><br /> <b>Contoh penulisan External:</b><br /> <pre class="javascript" name="code"><script type="text/javascript" scr='http://.../test.js'> </script> </pre><br /> <b>Contoh penggunaan dalam Blogspot HTML/XML.</b><br /> <pre class="xhtml" name="code"><HTML> <HEAD> <title> <h1>Belajar javascript</h1> </title> <b:skin><![CDATA[ Tempat peletakan Kode CSS ]]</b:skin> <script type="Javascript"> Kode javascript di sini </script> </HEAD> <BODY> Kode HTML di sini </BODY> </HTML> </pre></div>

Dasar designe Javascript Menengah Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya un...

Baca selengkapnya »

Cara membuat sudut melengkung dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="155px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDBDwoWvLF9FHUxsHBJ64dQzjwD_pKhlDzGMl98NjW2yGz3fYEo5KO96YR5xXwP-k5x4klj2HIsvlT8-0WO_pdlD0lOlLGq9X4v0pJ5rih_w1FkjTjFA74WeNrUFryVxnA2SsENUhGwA/s1600/css+border+radius.jpg" width="220px" /></a></div><div style="text-align: justify;">Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.<br /> <br /> Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.<br /> <br /> Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:<br /> Kode HTML<br /> <pre class="xhtml" name="code"><div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div></pre><br /> Kode CSS<br /> <pre class="css" name="code">#areaku{ width:600px; background: #DDD; color: #222; border: 2px solid blue; padding: 10px; } </pre><br /> Hasil:<br /> <style> #areaku{ width:600px; background: #DDD; color: #222; border: 2px solid blue; padding: 10px; text-align:center; </style><br /> <div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div><br /> Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.<br /> <pre class="css" name="code">border-radius: 15px; /*Kode pembuat lengkungan sudut*/ </pre>Sehingga kode CSS-nya menjadi seperti ini.<br /> <pre class="css" name="code">#areaku{ width:600px; background: #DDD; color: #222; border: 2px solid blue; padding: 10px; border-radius: 15px; /*Kode pembuat lengkungan sudut*/ } </pre>Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.<br /> <style> #areaku-tumpul{ width:600px; background: #DDD; color: #222; border: 2px solid blue; padding: 10px; text-align:center; border-radius:15px; </style><br /> <br /> <div id="areaku-tumpul"><h2>Anggap Disini Adalah Content.</h2></div><br /> Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.<br /> <pre class="css" name="code">- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/ - border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/ - border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/ - border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/</pre><br /> Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.<br /> </div><br /> <style> #box-border{ width:98%; } #box1-border{ width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 15px 0px; } #box2-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 0px 15px; margin: 0 0 0 10px; } #box3-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 15px 15px 0px; margin: 10px 0 0 0; } #box4-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 0 15px 15px; margin: 10px 0 0 10px; } #box5-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 15px 0 15px; margin: 10px 0 0 0px; } #box6-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 0 0px 15px; margin: 10px 0 0 10px; } #box7-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 0 15px 15px 0; margin: 10px 0 0 0px; } #box8-border{width: 45%; float: left; border: ridge 3px lime; padding: 10px; background: white; Border-radius: 15px 0 0 15px; margin: 10px 0 0 10px; } </style><br /> <div id="box-border"><div id="box1-border">1. Border-radius: 15px 0px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 15px;<br /> - border-top-right-radius: 0px;<br /> - border-bottom-right-radius: 15px;<br /> - border-bottom-left-radius: 0px;</div><div id="box2-border">2. Border-radius: 0px 15px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 0px;<br /> - border-top-right-radius: 15px;<br /> - border-bottom-right-radius: 0px;<br /> - border-bottom-left-radius: 15px;</div><div id="box3-border">3. Border-radius: 15px 15px 0px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 15px;<br /> - border-top-right-radius: 15px;<br /> - border-bottom-right-radius: 0px;<br /> - border-bottom-left-radius: 15px;</div><div id="box4-border">4. Border-radius: 0 15px 15px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 0px;<br /> - border-top-right-radius: 15px;<br /> - border-bottom-right-radius: 15px;<br /> - border-bottom-left-radius: 15px;</div><div id="box5-border">5. Border-radius: 15px 0 15px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 15px;<br /> - border-top-right-radius: 0px;<br /> - border-bottom-right-radius: 15px;<br /> - border-bottom-left-radius: 0px;</div></div><br /> <div id="box6-border">6. Border-radius: 0px 0 15px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 0px;<br /> - border-top-right-radius: 0px;<br /> - border-bottom-right-radius: 15px;<br /> - border-bottom-left-radius: 0px;</div><br /> <div id="box7-border">7. Border-radius: 15px 0 0 15px;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> - border-top-left-radius: 0px;<br /> - border-top-right-radius: 15px;<br /> - border-bottom-right-radius: 15px;<br /> - border-bottom-left-radius: 0px;</div><br /> <div id="box8-border">8. Border-radius: 0 15px 15px 0;<br /> Dengan perintah tersebut hasilnya sama dengan perintah individu:<br /> <br /> border-top-left-radius: 15px;<br /> border-top-right-radius: 0px;<br /> border-bottom-right-radius: 0;<br /> border-bottom-left-radius: 15px;</div><div style="clear: both;"></div>Dan Lain Sebagainya........</div>

Blogging CSS Dasar designe Menengah Tutorial Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk per...

Baca selengkapnya »

Jenis-jenis border dan cara pembuatannya

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilt4CXhxStfxuiXp-Pcl2Kz2TxiPbriL9WV7shxIVT3icQPS1QnGe4Md-P62A5MoA_p3eXCsniqYV48h5BrzJs2mWtzwJ_mjVihWJXnD2eArbP6WT2g8shgZx-0WIpC0a00wdBc8AAyRU/s1600/535_c.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Jenis-jenis border dan cara pembuatannya" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilt4CXhxStfxuiXp-Pcl2Kz2TxiPbriL9WV7shxIVT3icQPS1QnGe4Md-P62A5MoA_p3eXCsniqYV48h5BrzJs2mWtzwJ_mjVihWJXnD2eArbP6WT2g8shgZx-0WIpC0a00wdBc8AAyRU/s320/535_c.png" width="320" /></a></div><div style="text-align: justify;">Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.</div><br /> <div style="text-align: justify;"></div><div style="text-align: justify;">Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini. </div><br /> <b><u><span style="font-size: large;">Property Border:</span></u></b><br /> <br /> <ol style="margin-left: -25px; text-align: left;"><li><b>Border-color</b> : berfungsi untu menentukan warna.</li> Cara penentuan warna dari border ini bisa langsung dengan menyebutkan nama dari warna tersebut dalam bahasa inggris. Contoh penulisan: <pre class="css" name="code">border-color:red; border-color:blue; dsb.. </pre>Atau juga dengan menggunakan hex-code atau rbg. Contoh : <pre class="css" name="code">border-color:#000; = Hitam pekat, border-color:#FFF; = Putih, dan lain sebagainya. </pre><pre class="css" name="code">border-color:rgb(255, 255, 0); untuk warna kuning, border-color:rgb(0, 0, 255); untuk warna biru. Dsb.. </pre>Contoh: Property Border-color Individu <pre class="css" name="code">border-top-color: red; border-right-color: #FF6600; border-bottom-color: rgb(128, 0, 128); dsb </pre><div style="text-align: justify;">Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting <a href="http://realfa84.blogspot.com/2011/02/color-picker-ngalor-ngidul.html"><b>Cara membuat Color Picker diblog</b>. </a></div><li style="margin-top: 5px;"><b>Border-style</b>  : berfungsi untuk menentukan style atau pola dari border.</li> Value Border-Style antara lain: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpkr5-1Aj2Zq_p7k9HpqZgRbFCCJj9OapiGtsfQB5eT5N5a3b0DNL2EWDX1-V4bsEqx8b2sTSdG3Oha2dKADBkYIYIM1TUEVoQggBTzKmBzAbj4emRw39fBNuaM-uaZlkRfdKxXhRosOU/s1600/borderstyles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpkr5-1Aj2Zq_p7k9HpqZgRbFCCJj9OapiGtsfQB5eT5N5a3b0DNL2EWDX1-V4bsEqx8b2sTSdG3Oha2dKADBkYIYIM1TUEVoQggBTzKmBzAbj4emRw39fBNuaM-uaZlkRfdKxXhRosOU/s320/borderstyles.png" width="520" /></a></div>Contoh penulisan: <pre class="css" name="code">border-style:solid, border-style:double. Dsb.. </pre>Contoh: Property Border-style Individu <pre class="css" name="code">border-top-style:solid; border-right-style: dotted; border-bottom-style: double; border-left-style: dashed; </pre><li style="text-align: justify;"><b>Border-width</b>: berfungsi untuk menentukan ketebalan dari border.</li> <div style="text-align: justify;">Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.</div><pre class="css" name="code">border-width:1px; border-width: 2em; Dsb.. </pre><pre class="css" name="code">border-top-width: 1px border-right-width: 2px; border-bottom-width: 1em; border-left-width: cm; Dsb.. </pre><div style="text-align: justify;">Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.</div><pre class="CSS" name="code">border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-top-style: ridge; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; </pre></ol><style> #contoh-borderku{ border:5px ridge red; background:#333; padding:15px 150px; font-size:24px; color:#FFF; } </style> <br /> <div id="contoh-borderku">Anggap disini adalah content</div><div style="text-align: justify;"><br /> </div><div style="text-align: justify;">Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini: </div><pre class="CSS" name="code" style="text-align: justify;">border: 5px ridge red; </pre><div style="text-align: justify;"><br /> </div>Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.<br /> <b>border:</b> <b><span style="color: #351c75;">5px</span></b> <b><span style="color: blue;">ridge</span></b> <b><span style="color: #cc0000;">red; </span></b>atau,<br /> <b>border:</b> <b><span style="color: blue;">ridge</span></b> <b><span style="color: #351c75;">5px</span></b> <b><span style="color: #cc0000;">red</span></b>; atau<br /> <b>border:</b> <b><span style="color: #cc0000;">red</span></b> <b><span style="color: #351c75;">5px</span></b>  <b><span style="color: blue;">ridge</span></b>;<br /> dsb,,<br /> hasil yang didapatkan adalah sama.</div>

Blogging CSS Dasar designe Jenis-jenis border dan cara pembuatannya

Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini...

Baca selengkapnya »