Monday, February 19, 2018

Tips Dan Trik Mempercepat Loading Blog

Tips dan Trik Mempercepat Loading Blog. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

Tips Mempercepat Loading Blog

      1. Mempersingkat Tampilan awal atau home blog dengan cara menciptakan baca selengkapnya di setiap halaman posting. Dengan begitu loading blog dihalaman awal blog akan terbuka lebih cepat.
      2. Mengurangi atau mendelete widget yang tidak diperlukan, menyerupai widget jam, tanggal dan lain-lain. Jika memang tetap ingin mempertahankan widget2 tersebut, tempatkan widget di bab footer bawah blog. Maka loading blog akan sedikit bertambah cepat, alasannya yaitu bagian-bagian terberat blog akan dibuka belakangan. 
      3. Menampilkan 4 hingga 5 posting saja di halaman beranda/home blog. 
      4. Jangan terlalu banyak memakai gambar di blog.
      5. Kompres gambar yang akan dimasukan di blog, memakai Ms. Office Picture Manager atau software Compress gambar lainnya.
      6. Menghilangkan gambar tang obeng diblog,  yang berada di setiap bab widget yang digunakan.
      7. Compress Template Blog. Caranya, silakan lihat di bawah.
      8. Menghilangkan sidebar widget pada halaman tertentu. Caranya, lihat dibawah.
      9. Mengatur lebar gambar semoga tidak melebihi halaman posting.

      Trik Mempercepat Loading Blog


        Sebelumnya, test dulu kecepatan blog kau di situs ini http://gtmetrix.com. Untuk melihat berapa skor kecepatan dari blog kamu. Selanjutnya, sehabis melaksanakan cara-cara dibawah ini, test kembali kecepatan loading blog kau di situs tersebut, untuk melihat berapa besar perbedaannya.

        Cara Kompres Template Blog


          1. Login ke blog, Dari halaman dasbor pilih pengaturan template.
          2. Edit HTML dan Copy semua arahan yang ada di template kau dari awal hingga akhir.
          3. Selanjutnya kunjungi situs http://htmlcompressor.com/compressor.html
          4. Dan Pastekan semua arahan tadi ke kotak yang ada disitus tersebut.
          5. Setelah itu click COMPRESS dan pilih CHANGE
          6. Mempersingkat Tampilan awal atau home blog dengan cara menciptakan baca selengkapnya di setiap Tips dan Trik Mempercepat Loading Blog
          7. Terahir, Copy semua arahan hasil compress tadi, dan pastekan ke template blog kamu. Save template, Selesai.

          Menghilangkan Sidebar Widget pada halaman tertentu


          1. Ada 2 cara menyembunyikan sidebar widget di halaman terntentu di blog.
          2. Cara Pertama, Login ke blogger > pengaturan template > edit html > cari arahan </head>
          3. Dan tempatkan arahan berikut diatas </head>
          4. <b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/daftar-isi_12.html"'>
            <style type='text/css'>
            .main-inner .columns {
            padding-left: 0px;
            padding-right: 0px;
            }
            .main-inner .column-left-outer {
            display: none;
            }
            .main-inner .column-right-outer {
            display: none;
            }
            </style>
            </b:if>
          5. Ganti ihttp://fandrajuani.blogspot.com/p/daftar-isi_12.html dengan URL halaman yang ingin sidebarnya disembunyikan. Save Template, selesai.
          6. Cara kedua, cari arahan <head>,
          7. Dan tempatkan arahan berikut diatas <head>
          8. <b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/hubungi.html"'>
            <style type='text/css'>
            .sidebar{
            display: none;
            }
            </style>
            </b:if>
          9. Ganti http://fandrajuani.blogspot.com/p/hubungi.html dengan url dari halaman kamu. Save template, Selesai.
          Dan yang terakhir, mengatur lebar gambar di postingan blog semoga tidak melebihi halaman. Jika kita memakai ukuran gambar ekstra besar, biasanya gambar akan melewati batas halaman posting, dapat hingga terkena widget bab sidebar kanan, dan itu akan menciptakan loading blog lebih lambat. Berikut ini yaitu script arahan untuk mengatur lebar gambar, untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

          Mengatur lebar gambar posting blog


          1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
          2. Dan klik edit HTML, selanjutnya cari kode  ]]></b:skin> dan masukan arahan berikut diatasnya.
          3. #header img { max-width: 99%; max-height:90%; margin:1px 1px;padding:0px;}
            .post img { vertical-align:bottom; max-width:90%; max-height:90% }
            #navigation img { vertical-align:bottom; max-width:80%; }
          4. Save Template, selesai.
          Sebenarnya blogger sudah menunjukkan tools untuk mengatur gambar ketika kita menulis artikel, tapi itu tidak cukup untuk mengatur gambar dengan lebar yang sangat besar. Setelah memasukan arahan diatas, maka gambar dengan lebar ekstra besar, tidak akan melewati lebar halaman posting, dan cukup membantu untuk mempercepat loading blog. Silakan baca juga cara mempercepat loading blog lanjutan dari artikel ini. Untuk menambah kecepatan loading blog anda. Semoga Bermanfaat.
            Share:

            Sunday, February 18, 2018

            Belajar Seo Untuk Blogger Pemula

            Belajar Seo untuk blogger pemula. Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di mesin pencari google. Atau cara supaya artikel blog berada di halaman pertama di google, dikala ada orang yang memasukan kata kunci di google search yang sesuai dengan isi dari artikel yang sudah kita buat.

            Bicara perihal seo, ada banyak faktor yang menciptakan artikel dapat berada di halaman pertama google, dari umur blog, content isi dari artikel yang berkualitas, backlink dan banyak lagi yang lain. Disini kita akan mempelajari dasar-dasarnya terlebih dahulu. Dari mengubah title judul blog, menambahkan deskripsi, keywoards, dan tools seo yang sudah disediakan oleh blogger. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

            Merubah Judul Title Blog

            1. Login ke blogger > pengaturan template  > Edit HTML
            2. Dan Cari aba-aba <title><data:blog.pageTitle/></title> ganti menjadi
            3. <b:if cond='data:blog.pageType == &quot;index&quot;'>
              <title><data:blog.pageTitle/> | Desain Blog Tutorial dan Tips Trik Blogspot</title>
              <b:else/>
              <title><data:blog.pageName/> - <data:blog.title/></title>
              </b:if>
            4. Ganti "Desain Blog Tutorial dan Tips Trik Blogspot" dengan judul yang kau inginkan, tidak lebih dari 60 karekter. Dan tanda | dan - itu batas pemisah.
            5. Save template, selesai.

            Menambahkan meta deskripsi di Halaman awal dan setiap posting blog

            1. Login ke blogger, dari halaman dasbor pilih Setelan > Preferensi Penelusuran > Tag Meta Deskripsi.
            2. Pilih Aktifkan deskripsi penelusuran, dan isi deskripsi blog dengan klarifikasi dari judul blog, panjang deskripsi Maksimum 150 karakter.
            3.  Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di  Belajar Seo untuk Blogger Pemula
            4. Simpan Perubahan, Selesai.
            5. Sekarang, menambahkan Deskripsi di setiap posting blog.
            6. Buka Entri Baru atau Edit posting yang ada. 
            7. Dan Lihat bab kanan entri, di bab Deskripsi penelusuran isi dengan klarifikasi dari isi posting blog, disarankan 20-30 kata saja.
            8.  Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di  Belajar Seo untuk Blogger Pemula
            9. Setelah itu klik selesai.

            Menambahkan meta keywords kata kunci Blog

            1. Login ke Blog, pengaturan template, edit HTML dan tempatkan keywoard yang bekerjasama dengan isi blog, dibawah aba-aba judul blog tadi.
            2. <meta content='Fandra Juani,Desain blog,blogger,blogspot,tutorial,cara,belajar,Tips,Trik,edit template,pemula' name='keywords'/>
            3. Ganti kata kunci diatas dengan kata kunci yang kau inginkan. Isi keywords dengan kata kunci yang berbeda satu sama lainnya dan pisahkan setiap kata dengan tanda koma.
            Setelan mengganti Title judul blog, menambahkan deskripsi dan keywords. Sekarang test tingkat seo blog kita, kunjungi http://www.submitshop.com/seo-tools/meta-tag-analyzer untuk melihat berapa skor seo title keseluruhan blog. Setelah selesai, lanjut ke langkah seo berikutnya yaitu menambahkan title dan alt gambar di posting blog.

            Menambahkan Title dan Alt text gambar blog

            1. Klik gambar di entri blog, dan isi title text dengan kata kunci 1 hingga 3 kata saja. Dan isi Alt text dengan klarifikasi kata kunci gambar, jangan terlalu panjang. Contoh:
            2.  Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di  Belajar Seo untuk Blogger Pemula
            3. Isi setiap gambar dengan title dan alt yang sesuai dengan isi dari posting blog.

             Mengatur Tautan Permanen URL Posting Blog

            1. Buka Entri Baru, dan klik bab kanan entri pada Tautan permanen. Contoh:
            2.  Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di  Belajar Seo untuk Blogger Pemula
            3. Gunakan Tautan Permanen Khusus, jikalau judul posting terlalu panjang. Buatlah URL yang masih dapat dimengerti maksudnya, walaupun diperpendek url nya, setidaknya 4 hingga 7 kata saja. Setelah di publikasikan URL posting blog tidak dapat diedit lagi alias permanen, alasannya itu setiap kita menciptakan entri baru, buatlah judul yang benar-benar sesuai dengan isi dari posting artikel.
            Selanjutnya yakni menambahkan Internal link url dari satu posting ke posting yang lain. Masukanlah Link Url dari posting atau artikel yang saling bekerjasama antara satu dengan yang lainnya. Contoh: Jika kita sedang menciptakan artikel dengan judul belajar menciptakan blog, maka masukanlah link url dari posting kita yang lain menyerupai belajar menulis blog yang telah dipublikasikan sebelumnya.

            Cara Menggunakan Internal Link Blog

            1. Klik Link pada bab tools entri, dan masukan url artikel dari dalam blog. contoh:
            2.  Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di  Belajar Seo untuk Blogger Pemula
            3. Masukan url di bab web address, dan ganti goresan pena di bab text to display dengan judul atau isi dari url tersebut.
            4. Jangan gunakan kata Disini atau Klik Disini, Baca Disini pada bab text to display.
            5. Gunakanlah kalimat sesuai judul, maksimal 4 hingga 5 kata saja, jangan panjang-panjang.
            6. Selanjutnya klik Ok. Abaikan saja pengaturan yang lainnya.
            Seperti pola diatas, aku memasukan link url dari posting yang lain berjudul cara mempercepat loading blog dengan 4 kata saja. URL yang dimasukan sesuai dengan isi dari artikel ini, perihal berguru seo, alasannya loading juga menghipnotis seo. Sekarang coba klik goresan pena ini perihal cara menulis artikel di blog , maka akan terbuka halaman gres yang berisi artikel lain yang ada di blog ini.
            Terakhir yakni tentang Eksternal link atau memasukan URL dari situs lain diluar blog kita. Contohnya facebook.com yahoo.com dan lain-lain. Cara memasukannya di posting blog, sama menyerupai memasukan url internal link, yang membedakan yakni kita harus mencentang Add 'rel=nofollow' attribute. Untuk meningkatkan seo blog di google.

            Untuk lebih jelasnya lagi perihal berguru seo blogger, coba cari di google dengan kata kunci seo for blogger, baca dari situs google, jangan situs lain, biasanya dalam format PDF untuk seo starter guide, isinya lebih lengkap dari cara diatas dan yang niscaya sumber terpercaya dari google sendiri. Semoga Bermanfaat.
            Share:

            Breadcrumb Seo Untuk Blogspot

            Breadcrumb Seo untuk Blogspot. Breadcrumb berkhasiat untuk memudahkan google untuk menelusuri isi dari blog kita, dan juga memudahkan pembaca melihat gosip letak artikel yang sedang dibaca. Breadcrumb letaknya berada di bawah sajian header, dan diatas judul artikel yang sedang dibuka. Untuk lebih jelasnya, lihat pola gambar dibawah ini.

            Breadcrumb berkhasiat untuk memudahkan google untuk menelusuri isi dari blog kita Breadcrumb Seo untuk Blogspot
            Cara menciptakan breadcrumb seo untuk blogspot. Ikuti langkah-langkah dibawah ini.
            1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
            2. Selanjutnya klik edit HTML dan cari isyarat <b:include data='top' name='status-message'/> dan masukan isyarat berikut ini diatasnya.
            3. <b:include data='posts' name='breadcrumb'/>
            4. Setelah itu cari isyarat <b:includable id='main' var='top'> dan masukan isyarat berikut ini diatasnya.
            5. <b:includable id='breadcrumb' var='posts'>
              <b:if cond='data:blog.homepageUrl != data:blog.url'>
              <b:if cond='data:blog.pageType == "static_page"'>
              <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
              <b:else/>
              <b:if cond='data:blog.pageType == "item"'>
              <!-- breadcrumb for the post page -->
              <b:loop values='data:posts' var='post'>
              <b:if cond='data:post.labels'>
              <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
              <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
              <b:loop values='data:post.labels' var='label'>
               » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
              </b:loop>
               » <span><data:post.title/></span>
              </div>
              <b:else/>
              <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
              </b:if>
              </b:loop>
              <b:else/>
              <b:if cond='data:blog.pageType == "archive"'>
              <!-- breadcrumb for the label archive page and search pages.. -->
              <div class='breadcrumbs'>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
              </div>
              <b:else/>
              <b:if cond='data:blog.pageType == "index"'>
              <div class='breadcrumbs'>
              <b:if cond='data:blog.pageName == ""'>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
              <b:else/>
              <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
              </b:if>
              </div>
              </b:if>
              </b:if>
              </b:if>
              </b:if>
              </b:if>
              </b:includable>
            6. Save template, selesai.
            7. Jika ingin merubah tampilan breadcrumb, tambahkan isyarat css diatas ]]></b:skin>
            8. .breadcrumbs {
              padding:5px 5px 5px 0px;
              margin: 0px 0px 15px 0px;
              font-size:95%;
              line-height: 1.4em;
              border-bottom:3px double #e6e4e3;}
            9. Silakan ubah sendiri, isyarat css nya sesuai dengan yang kalian inginkan.
            Dari sini, pembuatan breadcrumb sudah selesai. Sekarang mengecek breadcrumb di google. Breadcrumb yang terindeks google, tampilannya akan menyerupai gambar dibawah ini.

            Breadcrumb berkhasiat untuk memudahkan google untuk menelusuri isi dari blog kita Breadcrumb Seo untuk Blogspot

            Cara ceknya:
            1. Kunjungi situs google http://www.google.com/webmasters/tools/richsnippets
            2. Selanjutnya masukan URL dari salah satu artikel di blog kamu.
            3. Klik Pratinjau, Selesai.
            Setelah memasang breadcrumb seo di blog, google akan mengindeksnya dalam beberapa hari di hasil pencarian google. Silakan dibaca juga artikel lainnya perihal seo, ialah perihal Belajar seo untuk blogger pemula Semoga Bermanfaat.
              Share:

              Saturday, February 17, 2018

              Tombol Sosial Share Widget Untuk Blogger

              Tombol sosial share widget untuk blogger. Seperti facebook tombol like, send, subcribe, recommend, Twitter follow, Google +, Google + 1 dan masih banyak lagi. Tombol share akan muncuk dibawah posting disetiap artikel yang ada di blog.

              Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.
              1. Kunjungi situs sharethis.com
              2. Selanjutnya lakukan registrasi pendaftaran disitus tersebut.
              3. Setelah selesai melaksanakan registrasi, silakan masuk Log In.
              4. Dan klik Get Sharing Tools
              5. Selanjutnya Step 1 pilih Platform Blogger
              6. Step 2 Style, pilih bentuk tombol share yang kau inginkan.
              7. Step 3, atur tombol share yang akan dipasang di blog.
              8. Tombol sosial share widget untuk blogger Tombol Sosial Share Widget Untuk Blogger
              9. Setelah selesai, klik Finish Get the Code dan Pilih Multi Post
              10. Selanjutnya klik Go, maka akan terbuka halaman gres Import Elemen Laman.
              11. Tombol sosial share widget untuk blogger Tombol Sosial Share Widget Untuk Blogger
              12. Dan klik Menambah Widget, pindahkan saja widget ke bab footer bawah blog. Selesai.
              Tombol sosial share sudah ada di blog, tapi muncul juga dihalaman awal blog. Cara menyembunyikannya, semoga muncul hanya di bab posting blog saja. Ikuti langkah-langkah dibawah ini.
              1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
              2. Selanjutnya klik Edit HTML dan cari arahan share this yang menyerupai dengan arahan dibawah ini.
              3. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
              4. Semua arahan masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi menyerupai ini.
              5. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                <b:includable id='main'>...<b:includable>
                </b:widget>
              6. Klik lagi tanda >...< maka akan terbuka semua arahan sharethis menyerupai dibawah ini.
              7. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                    <b:includable id='main'>
                  <!-- only display title if it's non-empty -->
                  <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                    <data:content/>
                  </div>

                  <b:include name='quickedit'/>
                </b:includable>
                  </b:widget>
              8. Sekarang, tambahkan arahan <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara arahan lengkap sharethis diatas, contohnya:
              9. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
                    <b:includable id='main'>
                <b:if cond='data:blog.pageType == "item"'>
                  <!-- only display title if it's non-empty -->
                  <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                    <data:content/>
                  </div>
                </b:if>
                  <b:include name='quickedit'/>
                </b:includable>
                </b:widget>
              10. Terakhir, Preview template, jikalau sudah hilang dari halaman awal blog, gres save template, Selesai.
              Sekarang coba buka salah satu artikel di blog, dan lihat tombol sosial share yang sudah kau buat tadi akan muncul dibawah posting, disetiap artikel yang ada. Kaprikornus tidak menggangu tampilan awal halaman blog.

              Silakan dibaca juga artikel lainnya wacana cara menciptakan komentar facebook diblog yang berada dibawah artikel blog, semoga blog dapat dikomentari memakai akun facebook. Atau cara menciptakan facebook like page yang berbentuk kotak dengan tombol Like halaman, serta tampilan foto pengguna facebook yang menyukai halaman blog. Semoga Bermanfaat.
              Share:

              Membuat Sajian Dropdown Di Blogspot

              Cara Membuat Menu Dropdown yang terletak di bawah header Blog.

               Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot

              Ikuti langkah-langkah dibawah ini.
              1. Kunjungi situs http://cssmenumaker.com/
              2. Pilih salah satu sajian dropdown yang kau inginkan.
              3. Sebagai teladan Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik Customize.
              4.  Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot
              5. Dan Atur Isi Menu dropdown dengan nama dan URL yang kau inginkan.
              6.  Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot
              7. Keterangan gambar diatas:
                • Gunakan Add Item untuk menambah isi menu, atau klik tanda silang merah untuk menghapus isi menu.
                • Untuk mengganti nama Judul, Klik sajian structure dan  isi dibagian Title.
                • Untuk mengganti URL,  Isi bab Link dengan URL yang kau inginkan.
                • Dan klik Update Item.
              8. Setelah selesai mengisi menu. Selanjutnya copy semua isyarat HTML dan CSS di website tersebut, kemudian pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
              9. 1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
                2. Klik Tambahkan Gadget, kemudian pilih HTML/Javascript.
                3. Lalu Susun Kode HTML dan CSS menyerupai ini.

                <style>
                Masukan Kode Css
                </style>
                Masukan Kode HTML

                4. Save Gadget, kemudian pindahkan ke bawah header.
              10. Jika sajian dropdown nya tidak turun atau tidak terlihat???
              11. 1. Login ke blogger. Dari halaman dasbor pilih pengaturan Template.
                2. Klik Edit HTML dan cari kode
                <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes
                4. Kodenya jadi menyerupai ini.
                <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
                5. Save template.
                6. Selanjutnya kembali ke pengaturan tata letak.
                7. Dan pindahkan Gadget HTML/Javascript sajian dropdown tadi, sempurna dibawah Header.
                8. Lalu klik Save/Simpan Setelan.

              12. Terakhir, lihat tampilan blog kamu. Selesai.
              Untuk sajian yang lebih mudah, bukan dropdown, tapi sajian dari laman blogger, silakan baca disini cara menciptakan dan mengisi sajian blog. Semoga Bermanfaat
                Share:

                Friday, February 16, 2018

                Cara Mengganti Goresan Pena Beranda,Posting Lama,Posting Lebih Baru

                Cara mengganti goresan pena beranda, posting lama, posting lebih gres di blog dengan kata-kata sendiri atau dengan gambar navigasi halaman.Tulisan tersebut berada di bawah bab tamat pada dikala kita membuka artikel, atau bab bawah dari daftar posting di halaman awal blog. Untuk blog berbahasa inggris biasanya bertuliskan home, next, previous. Untuk lebih jelasnya lihat gambar dibawah ini.

                kata sendiri atau dengan gambar navigasi halaman Cara Mengganti Tulisan Beranda,Posting Lama,Posting Lebih Baru


                Tulisan menyerupai pola gambar diatas itulah yang akan kita ganti. cara mengganti goresan pena beranda, posting lama, posting lebih gres di blog. Ikuti langkah-langkah dibawah ini.
                1. Login ke blog, dan pilih pengaturan template.
                2. Selanjutnya klik Edit HTML dan cari 3 arahan Biru dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.
                3. 1. expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
                  Keterangan: Posting Lebih Baru(Previous)

                  2. expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
                  Keterangan: Posting lama(Next)

                  3. <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
                  Keterangan: Beranda(Home)
                4. Jika hanya ingin mengganti tulisannya saja dengan kata-kata kita sendiri. maka ganti Format arahan diatas menjadi menyerupai ini.
                5. expr:title='data:olderPageTitle'>Selanjutnya</a>
                  expr:title='data:newerPageTitle'>Sebelumnya</a>
                  <a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
                6. Ganti arahan warna merah dengan kata yang kau inginkan. Untuk beranda/home ada 2 arahan yang sama, ganti kedua2nya. Selanjutnya Preview, bila sudah berubah gres save.
                7. Jika ingin mengganti tulisannya dengan gambar, maka tambahkan Url gambar, Contoh:
                8. expr:title='data:newerPageTitle'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></a>

                  expr:title='data:olderPageTitle'><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></a>

                  <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></a>
                9. Kode warna Biru itu URL gambar dengan pemanis formtanya. Beranda/home ada 2 arahan yang sama, ganti kedua2nya. Jika sudah, silakan dipreview dulu, klo sudah berubah gres save.
                10. Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kau inginkan. Format gambar menyerupai dibawah ini.
                11. <img src='URL gambar kamu'/></a>
                12. Coba cari digoogle gambar, dengan kata kunci icon home. Cari gambar yang ada pilihan ukurannya. Pilih gambar ukuran 32 atau sesuai dengan yang kau inginkan. Selanjutnya Copy URLnya(klik kanan sempurna digambar dan pilih copi URL gambar) dan masukan kodenya di format arahan diatas.
                13. Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kau inginkan.
                Silakan dibaca juga cara menghilangkan diberdayakan oleh blogger yang berada dibawah posting blog dan juga fitur-fitur lainnya, menyerupai navbar, langganan entri atom dan masig banyak lagi. Itulah sedikit cara untuk mendesain blog sendiri memakai template orisinil blogger, yaitu dengan mengganti goresan pena beranda, posting usang dan posting lebih gres di blog. Semoga Bermanfaat.
                Share:

                Menambahkan Gambar Disamping Judul Posting

                Cara menambahkan gambar disamping judul posting blog.

                 Cara menambahkan gambar disamping judul posting blog Menambahkan Gambar Disamping Judul Posting

                Gambar diatas dengan bulat merah yaitu teladan gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan aku coba jelaskan secara detail, biar dapat di mengerti. Ikuti langkah-langkah dibawah ini.
                1. Login ke blogger, ke pangaturan template.
                2. Selanjutnya klik edit HTML dan cari instruksi ]]></b:skin> dan pasang instruksi berikut di atas instruksi ]]></b:skin>
                3. h3.post-title {
                  background:url("http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
                4. Save template, Selesai.
                Keterangan instruksi langkah 2:
                  url("gambar.jpg") yaitu instruksi url sumber gambar yang akan digunakan.
                  no-repeat menciptakan gambar tidak berulang.
                  padding:10px 0px 0px 40px; mengatur posisi goresan pena judul posting.
                    Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan instruksi berikut disamping no-repeat; contoh: no-repeat top right;
                    •  right untuk bab kanan.
                    •  center untuk bab tengah
                    Untuk menciptakan icon dengan gambar sendiri, silakan baca di cara menciptakan icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.
                      Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat goresan pena bayangan di blog di judul, deskripsi blog bab tab, sidebar dikiri-kanan blog, hingga judul posting, dapat kita beri goresan pena bayangan. Semoga Bermanfaat.
                        Share:

                        Thursday, February 15, 2018

                        Cara Menciptakan Sajian Blog Dengan Gambar

                        Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman gres sesuai dengan URL halaman yang aku masukan.

                        •  Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar
                          Beranda
                        •  Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar
                          Desain Blog
                        •  Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar
                          Tips dan Trik
                        •  Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar
                          Hubungi

                          Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.

                          1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
                          2. Lalu Add Gadget, sesudah itu Pilih HTML/JavaScript.
                          3. Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.
                          4. <style>
                            KODE CSS
                            </style>
                            KODE HTML
                          5. Sebagai contoh, Copy semua isyarat dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
                          6. <style>
                            #tabs31{margin:0;padding:0;}
                            #tabs31 ul{list-style: none;}
                            #tabs31 ul li{float:left; margin-right:25px;}
                            #tabs31 img {width:50px; height:50px;}
                            figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
                            </style>

                            <div id="tabs31">
                            <ul>
                            <li><a href="http://fandrajuani.blogspot.com/">
                            <img src="https://lh4.googleusercontent.com/-bUpj573Wb-U/Um-q4tDqVrI/AAAAAAAABHQ/eRZQc8iwpos/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
                            <figcaption>Beranda</figcaption></li>

                            <li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
                            <img src="https://lh4.googleusercontent.com/-8eCUh34i-9w/Um-q5t5iIVI/AAAAAAAABHk/749vcX4aIjg/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

                            <li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
                            <img src="https://lh3.googleusercontent.com/-9CqH39Abvgc/Um-q5dzGnCI/AAAAAAAABHg/K7J6NfDKkOg/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
                            <figcaption>Tips dan Trik</figcaption></li>

                            <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
                            <img  src="https://lh4.googleusercontent.com/-C1v5xdd6vIs/Um-q5RYveJI/AAAAAAAABHo/QqJs0t8By-w/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
                            <figcaption>Hubungi</figcaption></li>

                            </ul>
                            </div>
                          7. Save Gadget, selesai.

                          Keterangan Kode Css Langkah 5: 

                          • #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
                          • #tabs31 ul li{float:left; menciptakan gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
                          • #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
                          • figcaption untuk mengatur keterangan dibawah tulisan.

                          Keterangan Kode HTML Langkah 5:

                          • format dari hidangan <li><a href="url halaman menu">
                          • <img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
                          • <figcaption>Keterangan dibawah gambar</figcaption></li>
                           Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.
                          <li><a href="url halaman menu"><img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

                          Gunakanlah gambar dengan ukuran yang sama disetiap gambar, semoga tampilan hidangan terlihat rapi, caranya dapat lihat di cara menciptakan icon blog. Cara mengambil URL gambar, dapat kau baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara menciptakan dan mengisi hidangan blog. URL Label atau kategori juga dapat kita masukan ke menu.
                          Semoga Bermanfaat.
                            Share:

                            Cara Mengganti Judul Blog Dengan Gambar

                            Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk abjad tulisan, dan goresan pena tersebut sanggup kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang sanggup mengganggu Seo blog. 
                             Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar

                            Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan eksklusif gambar di widget header blog pada belahan tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak memiliki H1.

                            Berikut ini yaitu cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.
                            1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
                            2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
                            3. Lalu Pastekan instruksi berikut ini ke dalamnya.
                            4. <h1>
                              <a href="http://fandrajuani.blogspot.com/"><img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" src="http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg" title="Cara Mengganti Judul Blog Dengan Gambar" /></a>
                              </h1>
                            5. Keterangan Kode diatas.
                              • http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
                                Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kau inginkan
                                http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
                                fandrajuani.blogspot.com Ganti Title gambar dengan yang kau inginkan
                                • Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
                                • Tampilan template di Tata Letak menjadi ibarat ini.
                                •  Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar
                                • Sekarang blog memiliki 2 Header yaitu Widget header dan gambar Header.
                                • Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya memiliki 1 Header. Selesai.
                                Jika Widget Header tidak sanggup dihapus, ikuti langkah dibawah ini.
                                1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
                                2. Selanjutnya Klik edit HTML dan cari instruksi ini.
                                3. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                                  <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
                                4. Setelah itu ganti kata true dengan false 
                                5. Terakhir save template, kemudian kembali ke pengaturan tata letak, widget header sudah sanggup dihapus. Selesai.
                                Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

                                 Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar
                                Menghapus Widget Header ibarat referensi diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, sebab judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama ibarat judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.
                                Setelah melaksanakan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, ibarat situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.
                                Untuk cara Upload Gambar dan Ambil URL gambar, sanggup dibaca di artikel perihal cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog ibarat cara menciptakan sajian blog dengan gambar icon disamping kiri judul sajian blog.

                                Jika tidak ingin memakai cara diatas, kau sanggup baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang sanggup anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot memakai template orisinil blogger yaitu dengan mengganti goresan pena judul blog dengan gambar. Semoga Bermanfaat.
                                  Share:

                                  Wednesday, February 14, 2018

                                  Macam Bentuk Numbered List Dan Bullet List

                                  Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger. Cara menggunakannya lihat dibawah ini.
                                  1. Buatlah entri gres atau edit artikel lama
                                  2. Dan Klik Numbered List 
                                  3. Lalu klik bab HTML di sebelah Compose.
                                  4. Terus ganti isyarat <ol> dengan salah satu isyarat dibawah.
                                  5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
                                  6. Untuk Bullet list, klik bullet list, kemudian lihat pada bab HTML 
                                  7. Dan ganti isyarat <ul> dengan salah satu isyarat bentuk bullet list dibawah.
                                  Macam Bentuk Numbered List
                                  1. Bentuk Dasar, <ol> Tanpa Edit HTML
                                  1. Mulai dari angka 8, Ganti isyarat <ol> dengan <ol start="8">
                                  2. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, ibarat goresan pena ini.
                                  1. Dalam Bentuk Huruf Besar, <ol type="A">
                                  1. Dalam Bentuk Huruf Kecil, <ol type="a">
                                  1. Dalam Bentuk abjad atau angka romawi, <ol type="I">
                                  1.  Angka romawi abjad kecil, <ol type="i">
                                  1. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
                                  2. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.
                                  Macam Bentuk Bullet List
                                  • Bentuk dasar bullet list, <ul> tanpa edit html
                                  • Bentuk Bulat sederhana, <ul type="circle">
                                  •  Bentuk Kotak, <ul type="square">
                                  Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti teladan gambar dibawah ini.
                                   Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger Macam Bentuk Numbered List dan Bullet List
                                  Contoh gambar
                                  Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis ibarat menulis biasa diblog, diatur memakai justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.
                                  Berikut sedikit trik cara semoga tampilan numbered list rata dengan goresan pena biasa.
                                  1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
                                  2. Terus edit html, dan cari isyarat ]]></b:skin> kemudian letakan isyarat berikut ini diatasnya.
                                  3. .post ol {
                                    padding:0px 24px 0px;
                                    width:96%;max-width:100%;}
                                  4. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
                                  5. Jika belum rata, Ganti 24px dan 96% semoga rata dengan tampilan posting kamu.
                                  6. Save template, selesai.
                                  Pada dikala menulis, tampilan numbered list tetap ibarat biasa, tetapi jikalau sudah dipublikasikan, maka tampilannya akan berubah, rata dengan goresan pena biasa. Preview dulu goresan pena untuk melihat hasilnya.
                                  Itulah sedikit tips trik menulis artikel memakai numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog memakai numbered list yang disisipkan gambar, atau isyarat script ditengah-tengahnya. Semoga Bermanfaat.
                                  Share:

                                  Cara Menciptakan Video Point Blank

                                  Cara menciptakan video point blank. Point Blank merupakan game online, yang menyajikan permainan perang. Terdiri dari 2 team yaitu Ct-Force dan Free Rebels. Macam permainannya pun cukup beragam, ada bom mission, deatmatch, elimination, destroy mission, dino mode, dan lain-lainnya.

                                  Game ini juga menyediakan banyak kawasan pilihan bermain, serta senjata lengkap yang harus dibeli dengan vocher dari Gemscool, pengembang point blank. Berikut ini yaitu Fitur terbaru yang disediakan oleh point blank ke pada para pemain, yaitu Video Record, atau merekam video. Dengan fitur video record, kita sanggup merekam aktifitas kita pada dikala bermain game point blank.

                                  Cara memakai Video Record di point blank, silakan ikuti langkah-langkah dibawah ini.
                                  1. Login atau Masuklah ke game Point Blank
                                  2. Selanjutnya, buka Option, kemudian pilih bab Control, dan lihat pada bab Mode Video Capture. Seperti gambar dibawah ini.
                                  3.  Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank
                                  4. Dari gambar diatas untuk merekam video point blank kita harus menekan Tombol Scroll Lock di Keyboard. Maka pada dikala merekam video, akan ada goresan pena Rec berwarna merah di atas kanan layar pb. ibarat dibawah ini.
                                  5.  Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank
                                  6. Untuk menghentikan rekaman, maka tekan kembali Scroll Lock di Keyboard. 
                                  7. Sekarang, video point blank yang sudah direkam sudah jadi. 
                                  8. Untuk melihat hasilnya, silakan Exit / keluar terlebih dahulu dari game point blank, Lalu buka My Document, dan buka Folder Point Blank, kemudian buka lagi Folder Movie.
                                  9.  Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank
                                  10. Hasil video rekaman berformat AVI, dengan ukuran yang tidak mengecewakan kecil. Silakan putar hasil rekamanmu di pemutar video. Selesai.
                                  Video dibawah ini yaitu referensi hasil rekaman dengan durasi 1 menit. Silakan dilihat untuk lebih jelasnya cara menciptakan video point blank.

                                  Itulah sedikit klarifikasi sederhana wacana cara menciptakan atau merekam video point blank sendiri, tanpa memakai software. Silakan dicoba dan buatlah rekaman video point blank punya kalian sendiri. Semoga Bermanfaat.

                                  Share:

                                  Tuesday, February 13, 2018

                                  Cara Menciptakan Gambar Posting Berputar

                                  Berikut ini yaitu cara menciptakan gambar yang ada dipostingan setiap artikel berputar dan membesar dikala di sentuh kursor mouse. Salah satu cara semoga gambar sanggup diperbesar dan lebih gampang untuk dilihat dikala disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.


                                  Untuk menciptakan gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.
                                  1. Login ke blogger. 
                                  2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari instruksi ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
                                  3. Setelah ketemu ]]></b:skin>, Copy instruksi dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
                                  4. .post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
                                    .post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
                                    rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
                                    ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
                                  5. Dan save template. Selesai.
                                  6. Atau sanggup juga ditempatkan di Tambahkan CSS pada bab perancang template blogger(desainer template).
                                  7. Lalu save, selesai.
                                  Keterangan instruksi diatas: 0.5s untuk mengatur usang putaran. scale 1.9 untuk mengatur besarnya gambar sesudah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk instruksi lainnya sebaiknya jangan diganti, semoga instruksi tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 
                                  Itulah sedikit tutorial desain blog dan tips trik yang sanggup dipakai di blog,  yang aku sanggup bagikan yaitu perihal cara menciptakan gambar posting berputar dan membesar dikala di sentuh kursor mouse.

                                  Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada hambatan dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara menciptakan sajian blog dengan gambar. Semoga bermanfaat.
                                    Share:

                                    Cara Menciptakan Gambar Berputar Di Blog

                                    Artikel kali ini masih seputar gambar yaitu wacana cara menciptakan gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara menciptakan gambar posting berputar dan juga membesar dikala di sentuh oleh kursor. Bedanya, jikalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.


                                    Dengan cara memasukan gambar kita sendiri, ke tata letak pada bab Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
                                    1. Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
                                    2. Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
                                    3. Setelah itu copi isyarat dibawah ini.
                                    4. <style>
                                      #img{
                                      width: 250px;
                                        height: 200px;

                                        position: relative;
                                      -moz-transition:all .8s ease-in-out;;
                                      -ms-transition:all .8s ease-in-out;;
                                      -o-transition:all .8s ease-in-out;;
                                      -webkit-transition:all .1s ease-in-out;
                                      transition:all .8s ease-in-out;}
                                      #img:hover{
                                      -o-transform: scale(1) rotate(360deg);
                                      -moz-transform: scale(1) rotate(360deg);
                                      -webkit-transform: scale(1) rotate(360deg);
                                      }
                                      </style>
                                      <div id="img">
                                        <img id="img" src="http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg" />
                                      </div>
                                    5. Dan Pastekan di HTML/Javascript Tadi.
                                    6. Setelah itu save, kemudian pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.
                                    Keterangan Kode:
                                    width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
                                    8s ialah usang putaran gambar.
                                    scale(1) ini fungsinya biar gambar tetap pada ukuran semula dikala disentuh mouse, jadi gambar tidak membesar atau mengecil dikala disentuh kursor.
                                    Dan  http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg ialah URL dari gambar yang ingin kalian masukan.
                                      Itulah sedikit pembahasan atau tutorial desain blog yang sanggup aku bagikan, yaitu wacana cara menciptakan gambar berputar di blog, dikala disentuh kursor mouse. Semoga Bermanfaat.
                                        Share:

                                        Monday, February 12, 2018

                                        Cara Menciptakan Entri Terkenal Bergerak

                                        Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

                                         Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis Cara Membuat Entri Populer Bergerak
                                        Ikuti langkah-langkah dibawah ini.
                                        1. Login ke blog, dari halaman dasbor pilih pengaturan Template.
                                        2. Klik Edit HTML, kemudian cari kode  <div class='widget-content popular-posts'>
                                        3. Selanjutnya Copy aba-aba berikut dan tempatkan di Sebelahnya.
                                        4. <marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
                                        5. Langkah selanjutnya, masukan aba-aba </marquee> di final rangkaian kode. Jadinya menyerupai ini.
                                        6. </ul>
                                              <b:include name='quickedit'/></marquee>
                                            </div>
                                          </b:includable>
                                            </b:widget>
                                        7. Susunan Kode lengkapnya.
                                        8. <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
                                              <b:includable id='main'>
                                            <b:if cond='data:title'><h2><data:title/></h2></b:if>
                                            <div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
                                              <ul>
                                                <b:loop values='data:posts' var='post'>
                                                <li>
                                                  <b:if cond='data:showThumbnails == &quot;false&quot;'>
                                                    <b:if cond='data:showSnippets == &quot;false&quot;'>
                                                      <!-- (1) No snippet/thumbnail -->
                                                      <a expr:href='data:post.href'><data:post.title/></a>
                                                    <b:else/>
                                                      <!-- (2) Show only snippets -->
                                                      <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                                                      <div class='item-snippet'><data:post.snippet/></div>
                                                    </b:if>
                                                  <b:else/>
                                                    <b:if cond='data:showSnippets == &quot;false&quot;'>
                                                      <!-- (3) Show only thumbnails -->
                                                      <div class='item-thumbnail-only'>
                                                        <b:if cond='data:post.thumbnail'>
                                                          <div class='item-thumbnail'>
                                                            <a expr:href='data:post.href' target='_blank'>
                                                              <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                                            </a>
                                                          </div>
                                                        </b:if>
                                                        <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                                                      </div>
                                                      <div style='clear: both;'/>
                                                    <b:else/>
                                                      <!-- (4) Show snippets and thumbnails -->
                                                      <div class='item-content'>
                                                        <b:if cond='data:post.thumbnail'>
                                                          <div class='item-thumbnail'>
                                                            <a expr:href='data:post.href' target='_blank'>
                                                              <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                                            </a>
                                                          </div>
                                                        </b:if>
                                                        <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                                                        <div class='item-snippet'><data:post.snippet/></div>
                                                      </div>
                                                      <div style='clear: both;'/>
                                                    </b:if>
                                                  </b:if>
                                                </li>
                                                </b:loop>
                                              </ul>
                                              <!--b:include name='quickedit'/--></marquee>
                                            </div>
                                          </b:includable>
                                            </b:widget>
                                        9. Save Template Selesai.
                                        Keterangan kode:
                                        • marquee direction='down' arah gerakan, dapat diganti dengan up, left, atau right.
                                        • height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
                                        • scrollamount='2' scrolldelay='100' Waktu gerakan.
                                        • Silakan ganti sesuai dengan yang kalian ingnkan.
                                        Silakan baca juga artikel wacana cara menciptakan artikel berjalan di blog. Lanjutan kombinasi dari entri terkenal bergerak ini. Contohnya dapat dilihat DISINI, diblog aku satunya.
                                          Semoga Bermanfaat.
                                            Share:

                                            Fungsi Margin Dan Padding Di Blog

                                            Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi. Perbedaanya yaitu margin dipakai pada bagian luar, dan padding pada bagian dalam. Dengan arahan margin kita sanggup merubah posisi dari widget yang kita inginkan, sedangkan padding, kita sanggup menggunakannya untuk bab dalam, menyerupai spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

                                             Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog

                                            Adapun kode-kode Css Dari Margin dan Padding yang sanggup kita gunakan diblog yaitu sebagai berikut:
                                             Margin
                                            1. margin: 10px;  (10px Spasi atas-kanan-bawah-kiri).
                                            2. margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
                                            3. margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
                                            4. margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
                                            5. Khusus untuk margin dengan arahan 4, sanggup kita tambahkan arahan - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0
                                            Padding
                                            1. padding: 10px;  (10px Spasi atas-kanan-bawah-kiri).
                                            2. padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
                                            3. padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
                                            4. padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
                                            Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

                                            Langsung saja, dibawah ini yaitu teladan penggunaan margin pada bab Header blog. Tampilan awal Header blog pertama.

                                             Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog

                                            1. Susunan elemen dari gambar diatas yaitu menyerupai dibawah ini.
                                            2.  Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog
                                            3. Sekarang ke pengaturan template. Dan klik edit HTML.
                                            4. Lalu cari satu persatu arahan dari susunan elemen dari langkah 1.
                                            5.  Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog
                                            6. Pertama cari arahan Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. menyerupai dibawah ini.
                                            7. Setelah ketemu, copy arahan bertanda merah diatas, kemudian pastekan di notepad, dan lanjutkan mencari arahan Laman Dan HTML/javascipt.
                                            8. Setelah semuanya ketemu, tambahkan arahan margin untuk merubah posisi yang kita inginkan. menyerupai dibawah ini.
                                            9. #Header{float:left}
                                              #HTML1{float:right; margin:-115px -195px 0 0}
                                              #PageList1{float:right; margin:-55px -50px 0 0}
                                            10. Letakan arahan diatas ]]></b:skin>
                                            11. Save template, selesai.
                                            12. Tampillan Blog sehabis diberi arahan margin.
                                             Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog

                                            Sudah terlihat terperinci perbedaan tampilan blog, dari yg awalnya datar kebawah, kini datar kesamping. Karena ditambahkan arahan margin. kenapa aku beri judul fungsi margin dan padding di blog, alasannya yaitu padding dan margin sanggup dipakai pada semua bagian-bagian blog, jadi tidak hanya menyerupai yang aku contohkan. Yang terpenting yaitu kita cari dulu arahan dari bab yang akan kita edit atau kita ubah posisinya.
                                            Keterangan arahan float
                                            float dipakai biar posisi widget menjadi teratur, menyerupai teladan diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bab kanan. 
                                            Silahkan berkreasi, maaf kalau tutorial dari aku ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.
                                            Share:

                                            Sunday, February 11, 2018

                                            Cara Menciptakan Hidangan Yang Melekat Di Dinding Blog

                                            Cara menciptakan sajian yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, sajian masih pada posisi yang sama. Silakan lihat rujukan sajian hijau dibagian bawah.
                                             melayang diatas atau dibawah dinding blog Cara Membuat Menu yang Menempel Di Dinding Blog

                                            Untuk lebih jelasnya perihal cara menciptakan sajian melekat diatas atau dibawah dinding blog. Ikuti langkah2 dibawah ini.

                                            1. Buatlah sajian terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, kemudian tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
                                            2. Selanjutnya copy arahan dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
                                            3. <style>

                                              #cssmenu {
                                                background: transparent;
                                              }
                                              #cssmenu ul {
                                              float: left;
                                              }
                                              #cssmenu ul li {
                                                float: left;  padding:10px;
                                                background: transparent;  list-style: none;
                                              }
                                              #cssmenu ul li a {
                                                float: left;
                                                text-transform: uppercase;
                                                font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
                                                font-size: 12px;
                                                color: #FFFFFF;
                                              font-weight:bold;
                                              }
                                              </style>
                                              <div id='cssmenu'>
                                              <ul>
                                                 <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
                                                 <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
                                                 <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
                                              </ul>
                                              </div>
                                            4. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
                                            5. Setelah itu pengaturan template, klik edit HTML dan cari arahan Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. ibarat dibawah ini.
                                            6.  melayang diatas atau dibawah dinding blog Cara Membuat Menu yang Menempel Di Dinding Blog
                                            7. Sekarang Copy id dari sajian tempel yang bergaris bawah HTML2, ibarat gambar diatas.
                                            8. Lalu Pastekan di Notepad. Selanjutnya tambahkan arahan css dibawah ini.
                                            9. #HTML2 {
                                                width: 100%;
                                                min-width: 960px;
                                                position: fixed;
                                                top: 0px;
                                                left: 0px;
                                                right: 0px;
                                                height: 30px;
                                                font-size: 12px;
                                              z-index: 99;
                                                white-space: nowrap;
                                              margin:0px 0px 0px 0px;
                                              padding:0px 0px 0px 0px;
                                                background-color: #336699;
                                                background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
                                                box-shadow: 0px 2px 0px rgb(14, 90, 140);
                                                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                                              }
                                            10. Copy arahan diatas, dan pastekan diatas ]]></b:skin> .
                                            11. Dan Save Template.
                                            12. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  kemudian hapus judulnya, biarkan gadget tidak berjudul. 
                                            13. Terakhir Save Gadget, Selesai.
                                            Keterangan Kode Langkah 6:
                                            • top:0px ini fungsinya menempatkan sajian dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
                                            • height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
                                            • background-color: #336699; dan #336699 100%); untuk warna background
                                            Keterangan Kode Langkah 2:
                                            • http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
                                            • Dan juga https://twitter.com/fandrajuani yaitu url yang kalau diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.
                                            Itulah sedikit cara menciptakan sajian yang melekat di dinding atas atau bawah blog yang dapat aku bagikan. Semoga Bermanfaat.

                                            Share:

                                            Cara Menciptakan Gambar Tutorial

                                            Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial. Biasanya dipakai sebagai penambah klarifikasi dari artikel yang kita buat. Gambar dapat kita ambil dari halaman web atau dari layar komputer kita sendiri. Untuk lebih jelasnya ihwal cara gampang mengambil serta memotong gambar yang akan dipakai sebagai gambar tutorial. Ikuti langkah2 dibawah ini.
                                            1. Bukalah layar yang akan dijadikan gambar.
                                            2. Selanjutnya tekan Ctrl kemudian tekan Printscreen/PrtscrSysrq yang ada dikeyboard.
                                            3. Lalu buka jadwal Paint yang ada dikomputer kita.
                                            4. Di jadwal Paint kita klik edit di hidangan atas, dan pilih Paste.
                                            5. Setelah itu beri tanda kotak memakai Select pada gambar yang akan diambil, kemudian Cut gambar tersebut.
                                            6. Langkah selanjutnya, buka New di paint, kemudian Pastekan gambar yang di Cut tadi. 
                                            7. Lalu Save gambar dengan Save As Type JPG. Seperti gambar dibawah ini.
                                            8.  Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial
                                            9. Selesai.


                                             Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial
                                            Contoh : Gambar Tutorial.
                                            Jika gambar yang ingin kita gunakan lebih kecil lagi dari gambar diatas. Kita dapat memotong/mengambil gambar memakai jadwal Microsoft Office Windows Manager. Jika dikomputer yang kau gunakan telah terinstal microsoft office, maka jadwal diatas juga niscaya ada. Berikut cara menggunakannya:

                                            1. Klik Kanan pada gambar yang akan dipotong.
                                            2. Lalu pilih Open With > Microsoft Office Windows Manager.
                                            3.  Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial
                                            4. Selanjutnya klik Picture pada hidangan atas. Dan klik Crop.
                                            5. Setelah itu Crop gambar dengan ukuran yang kita inginkan.
                                            6. Terakhir save. Selesai.

                                               Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial
                                              Contoh: Gambar Tutorial yang sudah dipotong.
                                                Itulah sedikit tips dan trik ihwal cara menciptakan gambar tutorial. Silakan baca juga artikel lainnya yang berafiliasi dengan gambar, menyerupai cara menciptakan icon untuk blog. Semoga Bermanfaat.
                                                Share:

                                                Saturday, February 10, 2018

                                                Cara Menciptakan Icon Untuk Website

                                                 Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website
                                                Cara buat Icon web atau juga blogger. Icon biasanya digukan untuk memperjelas judul menu, menyerupai home, profil, sitemap dan lain2. Dan letaknya berada disamping kanan atau kiri dari tulisan. Icon berkhasiat biar pengunjung lebih gampang untuk melihat hidangan yang ada diwebsite kita.
                                                Disini aku akan beri rujukan gampang menciptakan icon web memakai foto kita sendiri diphotoshop.

                                                Untuk lebih jelasnya. Ikuti langkah-langkah dibawah ini.

                                                 Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website

                                                  1. Buka Photoshop.
                                                  2. Buka Foto yang akan dijadikan Icon.
                                                  3. Setelah itu klik tanda Crop yang berada disebelah kiri.



                                                   Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website
                                                  4. Dan isi colom width:128 dan height 128. Ini bertujuan biar ukuran tinggi dan lebar crop gambar sama. Dan memudahkan kita nantinya untuk merubah ukuran image ke ukuran yang lebih kecil, tanpa merubah bentuk gambar.

                                                  5. Selanjutnya Crop gambar, dan ratakan kotak crop untuk gambar yang akan diambil. Seperti gambar dibawah ini. Dan tekan tanda centang hijau diatas bar, untuk menuntaskan crop/pemotongan.


                                                     Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website


                                                      6. Setelah itu klik tanda image yang ada diatas kafe dan klik image size.

                                                      Maka akan terbuka halaman gres pengaturan Pixel Dimensions dan Document Size.



                                                       Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website
                                                        7. Selanjutnya, ganti ukuran Pixel Dimensions menjadi 32 x 32, ukuran standar Icon yang biasa dipakai untuk website.

                                                        Document size tidak perlu diganti, alasannya ialah document size mengikuti perubahan dari ukuran pixel dimensions. Perhatikan juga Constrain Proportions tidak perlu dicentang.

                                                        8. Terakhir Klik Ok, Lalu Save Gambar. Selesai.



                                                         Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk WebsiteContoh icon yang sudah jadi dengan ukuran 32 x 32 Pixels.
                                                        Gambar tetap sama, hanya saja ukurannya yang berbeda. Saran saya, bila ingin memakai icon di website anda, gunakanlah icon dengan ukuran yang sama, biar blog terlihat lebih rapi. Dibawah ini ialah beberapa ukuran Icon yang biasa dipakai diwebsite.

                                                        • 16x16
                                                        • 32x32
                                                        • 48x48
                                                        • 64x64
                                                        • 128x128

                                                        Setelah menciptakan icon, silakan baca artikel cara menciptakan hidangan dengan gambar dan juga mengganti goresan pena beranda, posting usang baru  dengan gambar atau icon, untuk mulai mencoba memasang icon gambar anda ke hidangan blog. Itulah sedikit tips trik yang sanggup aku bagikan kali ini yaitu perihal cara menciptakan icon untuk website, blogger dan juga web lainnya. Semoga Bermanfaat.
                                                        Share:

                                                        Cara Menciptakan Artikel Berjalan Di Blog

                                                        Cara Membuat Artikel Berjalan di Blog. Sebelumnya aku sudah membagikan ihwal cara menciptakan entri terkenal bergerak ke bawah ataupun keatas. Dan kali ini yaitu lanjutannya entri terkenal akan bergerak ke arah kanan ataupun kiri. Jadinya menyerupai artikel berjalan. Ketika di sentuh mouse, maka artikel akan berhenti, dan ketika di klik maka akan terbuka halaman baru, sesuai dengan judul artikel yang dibuka. Dan pada ketika tidak disentuh mouse, maka artikel akan berjalan kembali.

                                                         Sebelumnya aku sudah membagikan ihwal  Cara Membuat Artikel Berjalan di Blog

                                                        Contoh artikel berjalan, dapat dilihat DISINI, di blog aku satunya. Untuk lebih jelasnya ihwal cara menciptakan artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.
                                                        1. Pasanglah widget entri terkenal di blog.
                                                        2. Lalu atur entri terkenal tanpa gambar dan cupilkan, dan save widget.
                                                        3. Selanjutnya memasang aba-aba berjalan, baca di cara menciptakan entri terkenal bergerak.
                                                        4. Setelah simpulan menciptakan entri terkenal bergerak. Ke pengaturan Template > klik Edit HTML dan cari aba-aba ]]></b:skin>
                                                        5. Setelah itu copi aba-aba berikut, dan pastekan diatas ]]></b:skin>
                                                        6. .popular-posts {
                                                            width: 100%;
                                                            min-width: 960px;
                                                            position: fixed;
                                                            top: 0px;
                                                            left: 0px;
                                                            right: 0px;
                                                            height: 30px;
                                                            font-size: 12px;
                                                            z-index: 99;
                                                            white-space: nowrap;
                                                            background-color: #336699;
                                                            background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
                                                            box-shadow: 0px 2px 0px rgb(14, 90, 140);
                                                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                                                          }

                                                          .widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)
                                                          }

                                                          .popular-posts ul li{
                                                           float:left;
                                                          }

                                                          .popular-posts ul li a{
                                                           float:left; 
                                                           width:auto; 
                                                           font-weight:Bold;
                                                           color:#FFFFFF;
                                                           text-align:justify; 
                                                           padding:0px 10px 0px 0px;
                                                          }
                                                        7. Save template, selesai.
                                                        Keterangan aba-aba langkah 5:
                                                        •  .widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)} aba-aba ini gunanya untuk menambahkan gambar disamping goresan pena artikel2 yang berjalan, silakan ganti aba-aba Biru dengan url dari gambar yang kalian inginkan.
                                                        • Jika tidak ingin memakai gambar, ganti aba-aba list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)} dengan aba-aba list-style:none;
                                                        • top: 0px; mengatur letak posisi diatas, kalau ingin ditempatkan dibawah ganti top dengan bottom.
                                                        Update:
                                                        • Jika warna tulisannya hitam, tambahkan aba-aba .widget .popular-posts ul li a:link, .widget .popular-posts ul li a:visited{color:white;} diatas ]]></b:skin>.
                                                        • Untuk menghilangkan judulnya, tambahkan aba-aba #PopularPosts1 h2{display:none} diatas ]]></b:skin>.
                                                        • Jika masih ada background yg tertinggal, tambahkan kode  #PopularPosts1 {background:transparent; box-shadow:none;}
                                                        Ganti aba-aba color:white; dengan warna yang kalian inginkan. Selesai sudah cara menciptakan artikel berjalan di blog, silakan dibaca juga artikel lainnya menyerupai ihwal cara cara menciptakan icon untuk website yang dapat dipakai untuk gambar disamping goresan pena artikel berjalan pada artikel diatas. Semoga bermanfaat. 
                                                          Share: