tag:blogger.com,1999:blog-87908704479690209112024-03-13T22:26:19.104-07:00Canela BlogBlog yang membahas segala informasi hobi, inspirasi, kesehatan, hiburan, blogger, tips dan trik yang menarikAnihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.comBlogger102125tag:blogger.com,1999:blog-8790870447969020911.post-47240382123627694292018-02-19T10:48:00.000-08:002018-02-19T10:48:51.317-08:00Tips Dan Trik Mempercepat Loading Blog<div style="text-align: justify;"> Tips dan Trik Mempercepat Loading Blog. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini. </div> <div style="text-align: justify;"> <br /> <h2> Tips Mempercepat Loading Blog</h2> </div> <ol type="A"></ol> <h2> </h2> <ol type="A"></ol> <ol> <li style="text-align: justify;">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.<a href="https://www.blogger.com/null" name="more"></a></li> <li style="text-align: justify;">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. </li> <li style="text-align: justify;">Menampilkan 4 hingga 5 posting saja di halaman beranda/home blog. </li> <li style="text-align: justify;">Jangan terlalu banyak memakai gambar di blog.</li> <li style="text-align: justify;">Kompres gambar yang akan dimasukan di blog, memakai Ms. Office Picture Manager atau software Compress gambar lainnya.</li> <li style="text-align: justify;">Menghilangkan gambar tang obeng diblog, yang berada di setiap bab widget yang digunakan. </li> <li style="text-align: justify;">Compress Template Blog. Caranya, silakan lihat di bawah.</li> <li style="text-align: justify;">Menghilangkan sidebar widget pada halaman tertentu. Caranya, lihat dibawah.</li> <li style="text-align: justify;">Mengatur lebar gambar semoga tidak melebihi halaman posting. </li> </ol> <hr /> <h2> Trik Mempercepat Loading Blog </h2> <hr /> <ol type="A"></ol> <div style="text-align: justify;"> 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.</div> <hr /> <h2> <b>Cara Kompres Template Blog</b></h2> <hr /> <ol type="A"></ol> <ol> <li style="text-align: justify;">Login ke blog, Dari halaman dasbor pilih pengaturan template.</li> <li style="text-align: justify;">Edit <b>HTML</b> dan <b>Copy</b> semua arahan yang ada di template kau dari awal hingga akhir.</li> <li style="text-align: justify;">Selanjutnya kunjungi situs <b>http://htmlcompressor.com/compressor.html</b></li> <li style="text-align: justify;">Dan <b>Pastekan</b> semua arahan tadi ke kotak yang ada disitus tersebut.</li> <li style="text-align: justify;">Setelah itu click <u>COMPRESS</u> dan pilih <i>CHANGE</i></li> <img alt="Mempersingkat Tampilan awal atau home blog dengan cara menciptakan baca selengkapnya di setiap Tips dan Trik Mempercepat Loading Blog" border="0" height="122" src="https://lh4.googleusercontent.com/-C0ioNMqvhic/UZkZZKJGbZI/AAAAAAAAAYg/mE-abMzH5dM/s448/Compress.JPG" title="Tips dan Trik Mempercepat Loading Blog" width="320" /> <li style="text-align: justify;">Terahir, <b>Copy</b> semua arahan <i>hasil compress</i> tadi, dan <u>pastekan</u> ke template blog kamu. Save template, <b>Selesai.</b></li> </ol> <hr /> <h2> Menghilangkan Sidebar Widget pada halaman tertentu</h2> <hr /> <ol> <li style="text-align: justify;">Ada 2 cara menyembunyikan sidebar widget di halaman terntentu di blog.</li> <li style="text-align: justify;"><b>Cara Pertama</b>, Login ke blogger > pengaturan template > edit html > cari arahan </head></li> <li style="text-align: justify;">Dan tempatkan arahan berikut diatas </head></li> <div class="kotak" style="height: 80px; overflow: auto;"> <b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/daftar-isi_12.html"'><br /> <style type='text/css'><br /> .main-inner .columns {<br /> padding-left: 0px;<br /> padding-right: 0px;<br /> }<br /> .main-inner .column-left-outer {<br /> display: none;<br /> }<br /> .main-inner .column-right-outer {<br /> display: none;<br /> }<br /> </style><br /> </b:if></div> <li style="text-align: justify;">Ganti ihttp://fandrajuani.blogspot.com/p/daftar-isi_12.html dengan URL halaman yang ingin sidebarnya disembunyikan. Save Template, <b>selesai.</b></li> <li style="text-align: justify;"><b>Cara kedua, </b>cari arahan <head>,</li> <li style="text-align: justify;">Dan tempatkan arahan berikut diatas <head></li> <div class="kotak" style="height: 80px; overflow: auto;"> <b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/hubungi.html"'><br /> <style type='text/css'><br /> .sidebar{<br /> display: none;<br /> }<br /> </style><br /> </b:if></div> <li style="text-align: justify;">Ganti http://fandrajuani.blogspot.com/p/hubungi.html dengan url dari halaman kamu. Save template, Selesai.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> 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.</div> </blockquote> <hr /> <h2 style="text-align: justify;"> Mengatur lebar gambar posting blog </h2> <hr /> <ol> <li style="text-align: justify;">Login ke blogger, dari halaman dasbor pilih pengaturan template.</li> <li style="text-align: justify;">Dan klik edit HTML, selanjutnya cari kode ]]></b:skin> dan masukan arahan berikut diatasnya.</li> <div class="kotak"> #header img { max-width: 99%; max-height:90%; margin:1px 1px;padding:0px;}<br /> .post img { vertical-align:bottom; max-width:90%; max-height:90% }<br /> #navigation img { vertical-align:bottom; max-width:80%; }</div> <li>Save Template, selesai.</li> </ol> <div style="text-align: justify;"> 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. </div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com2tag:blogger.com,1999:blog-8790870447969020911.post-51121667935919781642018-02-18T22:48:00.000-08:002018-02-18T22:48:12.075-08:00Belajar Seo Untuk Blogger Pemula<div style="text-align: justify;"> <b>Belajar Seo untuk blogger pemula.</b> 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.<br /> <br /> <a href="https://www.blogger.com/null" name="more"></a>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.<br /> <br /> <h2> Merubah Judul Title Blog</h2> </div> <ol> <li style="text-align: justify;">Login ke blogger > pengaturan template > Edit HTML</li> <li style="text-align: justify;">Dan Cari aba-aba <title><data:blog.pageTitle/></title> ganti menjadi</li> <div class="kotak"> <b:if cond='data:blog.pageType == &quot;index&quot;'><br /> <title><data:blog.pageTitle/> | Desain Blog Tutorial dan Tips Trik Blogspot</title><br /> <b:else/><br /> <title><data:blog.pageName/> - <data:blog.title/></title><br /> </b:if></div> <li style="text-align: justify;">Ganti "Desain Blog Tutorial dan Tips Trik Blogspot" dengan judul yang kau inginkan, tidak lebih dari 60 karekter. Dan tanda | dan - itu batas pemisah.</li> <li style="text-align: justify;">Save template, selesai.</li> </ol> <hr /> <h2 style="text-align: justify;"> Menambahkan meta deskripsi di Halaman awal dan setiap posting blog</h2> <ol> <li style="text-align: justify;">Login ke blogger, dari halaman dasbor pilih <b>Setelan > Preferensi Penelusuran > Tag Meta Deskripsi.</b></li> <li style="text-align: justify;">Pilih Aktifkan deskripsi penelusuran, dan isi deskripsi blog dengan klarifikasi dari judul blog, panjang deskripsi Maksimum 150 karakter.</li> <img alt=" Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di Belajar Seo untuk Blogger Pemula" border="0" height="140" src="https://lh4.googleusercontent.com/-O1qHhFecS6w/UZp2MXpY2GI/AAAAAAAAAZo/WJCcp-3lVSY/s448/Deskripsi.JPG" title="Belajar Seo untuk Blogger Pemula" width="320" /> <li>Simpan Perubahan, Selesai.</li> <li>Sekarang, menambahkan Deskripsi di setiap posting blog.</li> <li>Buka Entri Baru atau Edit posting yang ada. </li> <li>Dan Lihat bab kanan entri, di bab Deskripsi penelusuran isi dengan klarifikasi dari isi posting blog, disarankan 20-30 kata saja.</li> <img alt=" Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di Belajar Seo untuk Blogger Pemula" border="0" src="https://lh3.googleusercontent.com/-pHz-fOvLV3U/UZp5IkkilhI/AAAAAAAAAZ4/16YQv2xdb18/s262/Deskripsi%2520blog.JPG" title="Belajar Seo untuk Blogger Pemula" /> <li>Setelah itu klik selesai.</li> </ol> <hr /> <h2> Menambahkan meta keywords kata kunci Blog</h2> <ol> <li style="text-align: justify;">Login ke Blog, pengaturan template, edit HTML dan tempatkan keywoard yang bekerjasama dengan isi blog, dibawah aba-aba judul blog tadi. </li> <div class="kotak"> <meta content='Fandra Juani,Desain blog,blogger,blogspot,tutorial,cara,belajar,Tips,Trik,edit template,pemula' name='keywords'/></div> <li style="text-align: justify;">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.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> Setelan mengganti Title judul blog, menambahkan deskripsi dan keywords. Sekarang <b>test tingkat seo blog</b> 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.</div> </blockquote> <hr /> <h2> Menambahkan Title dan Alt text gambar blog</h2> <ol> <li style="text-align: justify;">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:</li> <img alt=" Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di Belajar Seo untuk Blogger Pemula" border="0" height="114" src="https://lh4.googleusercontent.com/-UYVj8xgq2aA/UZp-XPKtuAI/AAAAAAAAAaI/7cfwMMq18JI/s487/Image%2520Seo.JPG" title="Belajar Seo untuk Blogger Pemula" width="320" /> <li style="text-align: justify;">Isi setiap gambar dengan title dan alt yang sesuai dengan isi dari posting blog.</li> </ol> <hr /> <div style="text-align: justify;"> <h2> Mengatur Tautan Permanen URL Posting Blog</h2> </div> <ol> <li style="text-align: justify;">Buka Entri Baru, dan klik bab kanan entri pada Tautan permanen. Contoh:</li> <img alt=" Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di Belajar Seo untuk Blogger Pemula" border="0" src="https://lh5.googleusercontent.com/-sCo57E3ppsU/UZqAx3Kr9vI/AAAAAAAAAaY/QZaU5PSATgc/s246/Tautan%2520Permanen.JPG" title="Belajar Seo untuk Blogger Pemula" /> <li style="text-align: justify;">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.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> 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 <b>belajar menciptakan blog</b>, maka masukanlah link url dari posting kita yang lain menyerupai <b>belajar menulis blog</b> yang telah dipublikasikan sebelumnya.</div> </blockquote> <hr /> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <h2> Cara Menggunakan Internal Link Blog</h2> </div> <div style="text-align: justify;"> <ol> <li>Klik Link pada bab tools entri, dan masukan url artikel dari dalam blog. contoh:</li> <img alt=" Seo atau search engine optimization berkhasiat untuk meningkatkan peringkat artikel blog di Belajar Seo untuk Blogger Pemula" border="0" height="210" src="https://lh5.googleusercontent.com/-bkJI1Zovf6k/UZqFYWa1D4I/AAAAAAAAAao/nFQ_8t-WzjI/s365/Internal%2520Link.JPG" title="Belajar Seo untuk Blogger Pemula" width="320" /> <li>Masukan url di bab <b>web address</b>, dan ganti goresan pena di bab <b>text to display</b> dengan judul atau isi dari url tersebut.</li> <li><b>Jangan</b> gunakan kata <u>Disini atau Klik Disini, Baca Disini</u> pada bab <i>text to display.</i></li> <li>Gunakanlah kalimat sesuai judul, maksimal 4 hingga 5 kata saja, jangan panjang-panjang.</li> <li>Selanjutnya klik Ok. Abaikan saja pengaturan yang lainnya.</li> </ol> <blockquote class="tr_bq"> 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 <b>cara menulis artikel di blog</b> , maka akan terbuka halaman gres yang berisi artikel lain yang ada di blog ini.</blockquote> Terakhir yakni tentang<b> Eksternal link</b> 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 <b>mencentang Add 'rel=nofollow' attribute</b>. Untuk meningkatkan seo blog di google.<br /> <br /> Untuk lebih jelasnya lagi perihal berguru seo blogger, coba cari di google dengan kata kunci <b>seo for blogger</b>, 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.</div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-22495619088187201832018-02-18T10:48:00.000-08:002018-02-18T10:48:18.758-08:00Breadcrumb Seo Untuk Blogspot<div style="text-align: justify;"> <b>Breadcrumb Seo untuk Blogspot. </b>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.<br /> <a href="https://www.blogger.com/null" name="more"></a><br /></div> <div class="separator" style="clear: both; text-align: center;"> <img alt="Breadcrumb berkhasiat untuk memudahkan google untuk menelusuri isi dari blog kita Breadcrumb Seo untuk Blogspot" border="0" height="147" src="https://lh6.googleusercontent.com/-_l9jfPQ7RMc/UZ0Vb5RBxAI/AAAAAAAAAa4/4659jwY9r4g/s356/Breadcrumb%2520seo.JPG" title="Breadcrumb Seo untuk Blogspot" width="320" /></div> Cara menciptakan breadcrumb seo untuk blogspot. Ikuti langkah-langkah dibawah ini.<br /> <ol> <li style="text-align: justify;">Login ke blogger, dari halaman dasbor pilih pengaturan template.</li> <li style="text-align: justify;">Selanjutnya klik edit HTML dan cari isyarat <b:include data='top' name='status-message'/> dan masukan isyarat berikut ini diatasnya.</li> <div class="kotak"> <b:include data='posts' name='breadcrumb'/></div> <li style="text-align: justify;">Setelah itu cari isyarat <b:includable id='main' var='top'> dan masukan isyarat berikut ini diatasnya.</li> <div class="kotak" style="height: 200px; overflow: auto;"> <b:includable id='breadcrumb' var='posts'><br /> <b:if cond='data:blog.homepageUrl != data:blog.url'><br /> <b:if cond='data:blog.pageType == "static_page"'><br /> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "item"'><br /> <!-- breadcrumb for the post page --><br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.labels'><br /> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"><br /> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span><br /> <b:loop values='data:post.labels' var='label'><br /> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span><br /> </b:loop><br /> » <span><data:post.title/></span><br /> </div><br /> <b:else/><br /> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div><br /> </b:if><br /> </b:loop><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "archive"'><br /> <!-- breadcrumb for the label archive page and search pages.. --><br /> <div class='breadcrumbs'><br /> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span><br /> </div><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "index"'><br /> <div class='breadcrumbs'><br /> <b:if cond='data:blog.pageName == ""'><br /> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span><br /> <b:else/><br /> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span><br /> </b:if><br /> </div><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:includable></div> <li style="text-align: justify;">Save template, selesai.</li> <li style="text-align: justify;">Jika ingin merubah tampilan breadcrumb, tambahkan isyarat css diatas ]]></b:skin></li> <div class="kotak"> .breadcrumbs {<br /> padding:5px 5px 5px 0px;<br /> margin: 0px 0px 15px 0px;<br /> font-size:95%;<br /> line-height: 1.4em;<br /> border-bottom:3px double #e6e4e3;}</div> <li style="text-align: justify;">Silakan ubah sendiri, isyarat css nya sesuai dengan yang kalian inginkan.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> Dari sini, pembuatan breadcrumb sudah selesai. Sekarang mengecek breadcrumb di google. Breadcrumb yang terindeks google, tampilannya akan menyerupai gambar dibawah ini.</div> </blockquote> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="Breadcrumb berkhasiat untuk memudahkan google untuk menelusuri isi dari blog kita Breadcrumb Seo untuk Blogspot" border="0" src="https://lh4.googleusercontent.com/-KpguYfXTXUg/UZ0VpwaD2KI/AAAAAAAAAbA/_sWbVI_Derk/s448/Breadcrumb%2520Blogspot.JPG" title="Breadcrumb Seo untuk Blogspot" /></div> <br /> <span style="color: #0b5394;"><b>Cara ceknya:</b></span><br /> <ol style="text-align: justify;"> <li>Kunjungi situs google http://www.google.com/webmasters/tools/richsnippets</li> <li>Selanjutnya masukan URL dari salah satu artikel di blog kamu. </li> <li>Klik Pratinjau, Selesai.</li> </ol> <div style="text-align: justify;"> 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.</div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-9710105988154910302018-02-17T22:48:00.000-08:002018-02-17T22:48:10.905-08:00Tombol Sosial Share Widget Untuk Blogger<div style="text-align: justify;"> <b>Tombol sosial share widget untuk blogger. </b>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.<br /> <a href="https://www.blogger.com/null" name="more"></a><br /> Untuk lebih jelasnya ikuti langkah-langkah dibawah ini. </div> <ol style="text-align: justify;"> <li>Kunjungi situs sharethis.com</li> <li>Selanjutnya lakukan <i>registrasi</i> pendaftaran disitus tersebut.</li> <li>Setelah selesai melaksanakan registrasi, silakan masuk <u>Log In</u>.</li> <li>Dan klik <b>Get Sharing Tools</b>. </li> <li>Selanjutnya <b>Step 1</b> pilih <b>Platform Blogger</b></li> <li><b>Step 2 Style</b>, pilih bentuk tombol share yang kau inginkan.</li> <li><b>Step 3</b>, atur tombol share yang akan dipasang di blog.</li> <img alt="Tombol sosial share widget untuk blogger Tombol Sosial Share Widget Untuk Blogger" border="0" src="https://lh5.googleusercontent.com/-VejG_Hwv6nQ/UZ0nDPxfdGI/AAAAAAAAAbQ/Hnn-Ycg56gQ/s433/Tombol%2520Share.JPG" title="Tombol Sosial Share Widget Untuk Blogger" /> <li>Setelah selesai, klik <b>Finish Get the Code </b>dan Pilih <b>Multi Post</b></li> <li>Selanjutnya klik <b>Go</b>, maka akan terbuka halaman gres <b>Import Elemen Laman.</b></li> <img alt="Tombol sosial share widget untuk blogger Tombol Sosial Share Widget Untuk Blogger" border="0" height="175" src="https://lh5.googleusercontent.com/-7wA6RvaHCEk/UZ0naKQHFgI/AAAAAAAAAbY/Uu1rCTuXa1E/s438/Widgets%2520share.JPG" title="Tombol Sosial Share Widget Untuk Blogger" width="320" /> <li>Dan klik <b>Menambah Widget</b>, pindahkan saja widget ke bab footer bawah blog. <b>Selesai.</b></li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> 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.</div> </blockquote> <ol> <li style="text-align: justify;">Login ke blogger, dari halaman dasbor pilih pengaturan Template.</li> <li style="text-align: justify;">Selanjutnya klik Edit HTML dan cari arahan <b>share this </b>yang menyerupai dengan arahan dibawah ini.</li> <div style="background-color: white; border: 3px #1780dd solid; height: 30px; padding: 10px; text-align: left;"> <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget></div> <li style="text-align: justify;">Semua arahan masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi menyerupai ini.</li> <div style="background-color: white; border: 3px #1780dd solid; height: 70px; padding: 10px; text-align: left;"> <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'><br /> <b:includable id='main'>...<b:includable><br /> </b:widget></div> <li style="text-align: justify;">Klik lagi tanda >...< maka akan terbuka semua arahan sharethis menyerupai dibawah ini.</li> <div style="background-color: white; border: 3px #1780dd solid; height: 150px; overflow: auto; padding: 10px; text-align: left;"> <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'><br /> <b:includable id='main'><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != &quot;&quot;'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <br /> <b:include name='quickedit'/><br /> </b:includable><br /> </b:widget></div> <li style="text-align: justify;">Sekarang, tambahkan arahan <b><b:if cond='data:blog.pageType == "item"'></b> dan <b></b:if></b> diantara arahan lengkap sharethis diatas, contohnya:</li> <div style="background-color: white; border: 3px #1780dd solid; height: 150px; overflow: auto; padding: 10px; text-align: left;"> <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'><br /> <b:includable id='main'><br /> <b><b:if cond='data:blog.pageType == "item"'></b><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != &quot;&quot;'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b></b:if></b><br /> <b:include name='quickedit'/><br /> </b:includable><br /> </b:widget></div> <li style="text-align: justify;"><b>Terakhir</b>, Preview template, jikalau sudah hilang dari halaman awal blog, gres save template, Selesai.</li> </ol> <div style="text-align: justify;"> 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. <br /> <br /> Silakan dibaca juga artikel lainnya wacana <a href=" ">cara menciptakan komentar facebook diblog</a> yang berada dibawah artikel blog, semoga blog dapat dikomentari memakai akun facebook. Atau <a href=" ">cara menciptakan facebook like page</a> yang berbentuk kotak dengan tombol Like halaman, serta tampilan foto pengguna facebook yang menyukai halaman blog. Semoga Bermanfaat.</div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-89326019993527008792018-02-17T10:48:00.000-08:002018-02-17T10:48:20.361-08:00Membuat Sajian Dropdown Di Blogspot<div style="text-align: justify;"> Cara Membuat Menu Dropdown yang terletak di bawah header Blog.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot" border="0" height="156" src="https://lh5.googleusercontent.com/-NDgxeZtp9Wc/UaEcsjnlqBI/AAAAAAAAAco/1U5o3ovYXbI/s612/Dropdown.JPG" title="Membuat Menu Dropdown di Blogspot" width="400" /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> Ikuti langkah-langkah dibawah ini.<br /> <ol> <li style="text-align: justify;">Kunjungi situs http://cssmenumaker.com/</li> <li style="text-align: justify;">Pilih salah satu sajian dropdown yang kau inginkan.</li> <li style="text-align: justify;">Sebagai teladan Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik <b>Customize.</b></li> <img alt=" Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot" border="0" height="165" src="https://lh4.googleusercontent.com/-xix8y0-acDM/UaEcieqtvwI/AAAAAAAAAcg/d2L0xRet9NM/s683/Dropdown%2520Menu.JPG" title="Membuat Menu Dropdown di Blogspot" width="320" /> <li style="text-align: justify;">Dan Atur Isi Menu dropdown dengan nama dan URL yang kau inginkan.</li> <img alt=" Cara Membuat Menu Dropdown yang terletak di bawah header Blog Membuat Menu Dropdown di Blogspot" border="0" src="https://lh6.googleusercontent.com/-LtdFD2Dz9xY/UaEZWqyeE4I/AAAAAAAAAcU/lfjq8NfouRU/s958/Menu%2520Dropdown.JPG" title="Membuat Menu Dropdown di Blogspot" /> <li>Keterangan gambar diatas:</li> <ul> <li>Gunakan <b>Add Item</b> untuk menambah isi menu, atau klik <b>tanda silang merah</b> untuk menghapus isi menu.</li> <li>Untuk mengganti nama Judul, Klik sajian structure dan isi dibagian <b>Title</b>.</li> <li>Untuk mengganti URL, Isi bab <b>Link</b> dengan URL yang kau inginkan.</li> <li>Dan klik <b>Update Item</b>.</li> </ul> <li style="text-align: justify;">Setelah selesai mengisi menu. Selanjutnya copy semua isyarat HTML dan CSS di website tersebut, kemudian pastekan di gadget HTML/Javascript di blogger. <u>Contoh Pemasangan:</u></li> <div class="kotak"> 1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.<br /> 2. Klik Tambahkan Gadget, kemudian pilih HTML/Javascript.<br /> 3. Lalu Susun Kode HTML dan CSS menyerupai ini.<br /> <br /> <style><br /> Masukan Kode Css<br /> </style><br /> Masukan Kode HTML<br /> <br /> 4. Save Gadget, kemudian pindahkan ke bawah header. </div> <li style="text-align: justify;">Jika sajian dropdown nya tidak turun atau tidak terlihat???</li> <li style="text-align: justify;"><u></u></li> <div class="kotak" style="height: 200px; overflow: auto;"> 1. Login ke blogger. Dari halaman dasbor pilih pengaturan <b>Template</b>.<br /> 2. Klik <b>Edit HTML</b> dan cari kode<br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> 3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes<br /> 4. Kodenya jadi menyerupai ini.<br /> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'><br /> 5. Save template.<br /> 6. Selanjutnya kembali ke pengaturan tata letak.<br /> 7. Dan pindahkan Gadget <b>HTML/Javascript</b> sajian dropdown tadi, sempurna dibawah <b>Header. </b><br /> 8. Lalu klik Save/Simpan Setelan. <br /> <br /></div> <li>Terakhir, lihat tampilan blog kamu. Selesai.</li> </ol> <div style="text-align: justify;"> Untuk sajian yang lebih mudah, bukan dropdown, tapi sajian dari laman blogger, silakan baca disini <a href=" ">cara menciptakan dan mengisi sajian blog</a>. Semoga Bermanfaat</div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-50906262595464645912018-02-16T22:48:00.000-08:002018-02-16T22:48:10.221-08:00Cara Mengganti Goresan Pena Beranda,Posting Lama,Posting Lebih Baru<div style="text-align: justify;"> 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.<br /> <a href="https://www.blogger.com/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <img alt="kata sendiri atau dengan gambar navigasi halaman Cara Mengganti Tulisan Beranda,Posting Lama,Posting Lebih Baru" border="0" height="33" src="https://lh5.googleusercontent.com/-0H64cHgqApA/UaJSDEvC5yI/AAAAAAAAAc0/2MrmAPvErzA/s639/Beranda.JPG" title="Cara Mengganti Tulisan Beranda,Posting Lama,Posting Lebih Baru" width="400" /></div> <br /> <br /> 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.</div> <ol> <li style="text-align: justify;">Login ke blog, dan pilih pengaturan template.</li> <li style="text-align: justify;">Selanjutnya klik Edit HTML dan cari 3 arahan <span style="color: blue;">Biru</span> dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.</li> <div class="kotak"> 1. <span style="color: blue;">expr:title='data:newerPageTitle'><data:newerPageTitle/></a></span><br /> Keterangan: Posting Lebih Baru(Previous)<br /> <br /> 2. <span style="color: blue;">expr:title='data:olderPageTitle'><data:olderPageTitle/></a></span><br /> Keterangan: Posting lama(Next)<br /> <br /> 3. <span style="color: blue;"><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></span><br /> Keterangan: Beranda(Home)</div> <li style="text-align: justify;">Jika hanya ingin <b>mengganti tulisannya saja</b> dengan kata-kata kita sendiri. maka ganti Format arahan diatas menjadi menyerupai ini.</li> <div class="kotak"> expr:title='data:olderPageTitle'><span style="color: red;">Selanjutnya</span></a><br /> expr:title='data:newerPageTitle'><span style="color: red;">Sebelumnya</span></a><br /> <a class='home-link' expr:href='data:blog.homepageUrl'><span style="color: red;">Rumah</span></a></div> <li style="text-align: justify;">Ganti arahan warna <span style="color: red;">merah</span> dengan kata yang kau inginkan. Untuk beranda/home ada 2 arahan yang sama, ganti kedua2nya. Selanjutnya Preview, bila sudah berubah gres save.</li> <li style="text-align: justify;">Jika ingin <b>mengganti tulisannya dengan gambar, </b>maka tambahkan Url gambar, Contoh:</li> <div class="kotak"> expr:title='data:newerPageTitle'><span style="color: blue;"><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></span></a><br /> <br /> expr:title='data:olderPageTitle'><span style="color: blue;"><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></span></a><br /> <br /> <a class='home-link' expr:href='data:blog.homepageUrl'><span style="color: blue;"><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></span></a></div> <li style="text-align: justify;">Kode warna <span style="color: blue;">Biru</span> 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.</li> <li style="text-align: justify;">Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kau inginkan. Format gambar menyerupai dibawah ini.</li> <div class="kotak"> <img src='URL gambar kamu'/></a></div> <li style="text-align: justify;">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.</li> <li style="text-align: justify;">Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kau inginkan.</li> </ol> <div style="text-align: justify;"> Silakan dibaca juga cara <a href=" ">menghilangkan diberdayakan oleh blogger</a> 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.</div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-71745730057110602752018-02-16T10:48:00.000-08:002018-02-16T10:48:10.274-08:00Menambahkan Gambar Disamping Judul Posting<div style="text-align: justify;"> Cara menambahkan gambar disamping judul posting blog.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Cara menambahkan gambar disamping judul posting blog Menambahkan Gambar Disamping Judul Posting" border="0" height="156" src="https://lh4.googleusercontent.com/-bwJL6wGofTQ/UaUqbioYIhI/AAAAAAAAAd4/8hmcYJy_Sg0/s320/GAMBAR.JPG" title="Menambahkan Gambar Disamping Judul Posting" width="200" /></div> <br /> <div style="text-align: justify;"> 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.<br /> <ol> <li>Login ke blogger, ke pangaturan template.</li> <li>Selanjutnya klik edit HTML dan cari instruksi ]]></b:skin> dan pasang instruksi berikut di atas instruksi ]]></b:skin></li> <div class="kotak" style="text-align: left;"> h3.post-title {<br /> background:url("http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}</div> <li>Save template, Selesai.</li> </ol> <blockquote class="tr_bq"> <span style="color: #0b5394;"><b>Keterangan instruksi langkah 2:</b></span><br /> <ul></ul> <span style="color: #0b5394;"><b>url("gambar.jpg")</b></span> yaitu instruksi url sumber gambar yang akan digunakan.<br /> <span style="color: #0b5394;"><b>no-repeat</b></span> menciptakan gambar tidak berulang.<br /> <span style="color: #0b5394;"><b>padding:10px 0px 0px 40px;</b></span> mengatur posisi goresan pena judul posting.</blockquote> <ul></ul> Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan instruksi berikut disamping no-repeat; contoh: no-repeat top right;<br /> <ul> <li><span style="color: #0b5394;"> <b>right</b></span> untuk bab kanan.</li> <li> <span style="color: #0b5394;"><b>center</b></span> untuk bab tengah</li> </ul> </div> <div style="text-align: justify;"> Untuk menciptakan icon dengan gambar sendiri, silakan baca di <a href=" ">cara menciptakan icon website</a>. Dan untuk <b>cara mengambil URL dari gambar sendiri</b>, baca di <a href=" ">cara upload dan ambil url gambar</a>.<br /> <ol></ol> <div style="text-align: justify;"> 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 <a href=" ">membuat goresan pena bayangan di blog</a> di judul, deskripsi blog bab tab, sidebar dikiri-kanan blog, hingga judul posting, dapat kita beri goresan pena bayangan. Semoga Bermanfaat. </div> <ol></ol> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-52505694929218795312018-02-15T22:48:00.000-08:002018-02-15T22:48:22.336-08:00Cara Menciptakan Sajian Blog Dengan Gambar<div style="text-align: justify;"> 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.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <style>#tabs31{margin:0px 0px 0px 100px;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;} </style> <br /> <div id="tabs31"> <ul> <li><img alt=" Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar" height="50" src="https://lh4.googleusercontent.com/-bUpj573Wb-U/Um-q4tDqVrI/AAAAAAAABHQ/eRZQc8iwpos/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" /><figcaption>Beranda</figcaption></li> <li><img alt=" Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar" height="50" src="https://lh4.googleusercontent.com/-8eCUh34i-9w/Um-q5t5iIVI/AAAAAAAABHk/749vcX4aIjg/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" /><figcaption>Desain Blog</figcaption></li> <li><img alt=" Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar" height="50" src="https://lh3.googleusercontent.com/-9CqH39Abvgc/Um-q5dzGnCI/AAAAAAAABHg/K7J6NfDKkOg/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" /><figcaption>Tips dan Trik</figcaption></li> <li><img alt=" Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda Cara Membuat Menu Blog Dengan Gambar" height="50" src="https://lh4.googleusercontent.com/-C1v5xdd6vIs/Um-q5RYveJI/AAAAAAAABHo/QqJs0t8By-w/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" /><figcaption>Hubungi</figcaption></li> </ul> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <ol></ol> <hr /> <div style="text-align: justify;"> Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.</div> <hr /> <ol> <li style="text-align: justify;">Login ke blogger. Dari halaman dasbor pilih pengaturan <b>Tata Letak</b>.</li> <li style="text-align: justify;">Lalu <b>Add Gadget</b>, sesudah itu Pilih <b>HTML/JavaScript</b>.</li> <li style="text-align: justify;">Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.</li> <div class="kotak"> <style><br /> KODE CSS<br /> </style><br /> KODE HTML</div> <li style="text-align: justify;">Sebagai contoh, Copy semua isyarat dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.</li> <div class="kotak" style="height: 200px; overflow: auto;"> <span style="color: #0b5394;"><b><style></b></span><br /> #tabs31{margin:0;padding:0;}<br /> #tabs31 ul{list-style: none;}<br /> #tabs31 ul li{float:left; margin-right:25px;}<br /> #tabs31 img {width:50px; height:50px;}<br /> figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}<br /> <span style="color: #0b5394;"><b></style></b></span><br /> <br /> <div id="tabs31"><br /> <ul><br /> <li><a href="http://fandrajuani.blogspot.com/"><br /> <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><br /> <figcaption>Beranda</figcaption></li><br /> <br /> <li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog"><br /> <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><br /> <br /> <li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik"><br /> <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><br /> <figcaption>Tips dan Trik</figcaption></li><br /> <br /> <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html"><br /> <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><br /> <figcaption>Hubungi</figcaption></li><br /> <br /> </ul><br /> </div></div> <li style="text-align: justify;">Save Gadget, selesai.</li> </ol> <div style="text-align: justify;"> <hr /> <b><span style="color: #0b5394;">Keterangan Kode Css Langkah 5:</span><span style="color: red;"><span style="color: black;"> </span></span></b><br /> <hr /> <ul> <li>#tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.</li> <li style="text-align: left;">#tabs31 ul li{float:left; menciptakan gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.</li> <li style="text-align: left;">#tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.</li> <li style="text-align: left;">figcaption untuk mengatur keterangan dibawah tulisan.</li> </ul> <hr /> <span style="color: #0b5394;"><b>Keterangan Kode HTML Langkah 5:</b></span><br /> <hr /> <ul> <li style="text-align: left;">format dari hidangan <li><a href="<b>url halaman menu</b>"></li> <li style="text-align: left;"><img src="<b>Url gambar</b>" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a></li> <li style="text-align: left;"><figcaption><b>Keterangan dibawah gamba</b>r</figcaption></li></li> </ul> <div style="text-align: left;"> <blockquote class="tr_bq"> Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.<br /> <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></blockquote> </div> </div> <hr /> <div style="text-align: justify;"> <span style="color: red;"><span style="color: black;">Gunakanlah gambar dengan ukuran yang sama disetiap gambar, semoga tampilan hidangan terlihat rapi, caranya dapat lihat di </span></span><span style="color: red;"><span style="color: black;"><span style="color: red;"><span style="color: black;"><a href=" ">cara menciptakan icon blog</a></span></span>.<b> Cara mengambil URL gambar</b>, dapat kau baca di artikel <a href=" ">cara upload dan ambil url gambar</a>.<b> Cara mengisi url halaman menu</b>, baca artikel <a href=" ">cara menciptakan dan mengisi hidangan blog</a>. URL Label atau kategori juga dapat kita masukan ke menu. </span></span></div> <div style="text-align: justify;"> <blockquote class="tr_bq"> <span style="color: red;"><span style="color: black;">Semoga Bermanfaat.</span></span></blockquote> </div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-30897908986000824032018-02-15T10:48:00.000-08:002018-02-15T10:48:05.049-08:00Cara Mengganti Judul Blog Dengan Gambar<div style="text-align: justify;"> 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. </div> <div style="text-align: justify;"> <a href="https://www.blogger.com/null" name="more"></a></div> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" height="63" src="https://lh5.googleusercontent.com/-jBRiyETWyP4/UaueNJwxFHI/AAAAAAAAAic/geVmhctBbiM/s567/Header%2520Blog.JPG" title="Cara Mengganti Judul Blog Dengan Gambar" width="320" /></div> <div style="text-align: justify;"> <br /> 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.<br /> <br /> Berikut ini yaitu cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.</div> <ol> <li>Login ke blogger. Dari halaman Dasbor pilih pengaturan <b>TATA LETAK</b>.</li> <li>Selanjutnya Add Gadget atau <b>Tambahkan Gadget</b> dan pilih <i>HTML/JavaScript</i>.</li> <li>Lalu Pastekan instruksi berikut ini ke dalamnya.</li> <div class="kotak"> <h1><br /> <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><br /> </h1></div> <li><b><span style="color: #0b5394;">Keterangan Kode diatas.</span></b></li> <div class="kotak"> <ul></ul> <span style="color: #0b5394;">http://fandrajuani.blogspot.com/</span> Ganti dengan <b>URL Awal Blog</b> Kamu<br /> <span style="color: #0b5394;">Desain Blog Tutorial dan Tips Trik Blogspot</span> Ganti dengan <b>img Alt</b> yang kau inginkan<br /> <span style="color: #0b5394;">http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg</span> Ganti dengan <b>URL gambar</b> yang akan menjadi HEADER BLOG<br /> <span style="color: #0b5394;">fandrajuani.blogspot.com</span> Ganti <b>Title gambar</b> dengan yang kau inginkan<br /> <ul></ul> </div> <li>Setelah itu Beri Judul Gadget HTML dan <b>Save</b> Gadget dan tempatkan dibawah Header Blog.</li> <li>Tampilan template di <b>Tata Letak</b> menjadi ibarat ini.</li> <img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" height="97" src="https://lh4.googleusercontent.com/-0uoLb7j5GPM/UaucX0y9ToI/AAAAAAAAAiI/tIg0by3AKok/s768/Gambar%2520Header.JPG" title="Cara Mengganti Judul Blog Dengan Gambar" width="400" /> <li>Sekarang blog memiliki <b>2 Header</b> yaitu Widget header dan gambar Header.</li> <li>Hapus <b>widget Header</b>, contoh: Fandra Juani (Header). Sehingga blog hanya memiliki 1 Header. Selesai.</li> </ol> <div style="text-align: justify;"> <blockquote class="tr_bq"> Jika Widget Header tidak sanggup dihapus, ikuti langkah dibawah ini.</blockquote> <ol> <li>Login ke blogger, dari halaman dasbor pilih pengaturan template.</li> <li>Selanjutnya Klik edit HTML dan cari instruksi ini.</li> <div class="kotak" style="text-align: left;"> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='<b>true</b>' title='Nama Blog Kamu (Header)' type='Header'></div> <li>Setelah itu ganti kata <b>true</b> dengan <b>false</b> </li> <li>Terakhir save template, kemudian kembali ke pengaturan tata letak, widget header sudah sanggup dihapus. Selesai.</li> </ol> Untuk <b>mengembalikan</b> Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.</div> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" height="115" src="https://lh4.googleusercontent.com/-0troUKcJ7rc/UaucbSMzbdI/AAAAAAAAAiQ/YyQYy7JthgQ/s553/Judul%2520Gambar.JPG" title="Cara Mengganti Judul Blog Dengan Gambar" width="320" /></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div style="text-align: justify;"> <blockquote class="tr_bq"> <b>Menghapus Widget Header</b> 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.</blockquote> <blockquote class="tr_bq"> 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.</blockquote> </div> <div style="text-align: justify;"> Untuk <b>cara Upload</b> Gambar dan Ambil URL gambar, sanggup dibaca di artikel perihal cara <a href=" ">cara upload dan ambil url gambar</a>. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog ibarat <a href=" ">cara menciptakan sajian blog dengan gambar</a> icon disamping kiri judul sajian blog.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Jika tidak ingin memakai cara diatas, kau sanggup baca artikel <a href=" ">cara merubah tampilan header blog.</a> 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.</div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-52540987352789581372018-02-14T22:48:00.000-08:002018-02-14T22:48:00.332-08:00Macam Bentuk Numbered List Dan Bullet List<div style="text-align: justify;"> Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger. Cara menggunakannya lihat dibawah ini.</div> <ol style="text-align: justify;"> <li>Buatlah entri gres atau edit artikel lama</li> <li>Dan Klik Numbered List </li> <li>Lalu klik bab HTML di sebelah Compose.</li> <li>Terus ganti isyarat <ol> dengan salah satu isyarat dibawah.<a href="https://www.blogger.com/null" name="more"></a></li> <li>Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.</li> <li>Untuk Bullet list, klik bullet list, kemudian lihat pada bab HTML </li> <li>Dan ganti isyarat <ul> dengan salah satu isyarat bentuk bullet list dibawah.</li> </ol> <div style="text-align: left;"> <blockquote class="tr_bq"> <div> <span style="color: #0b5394;"><b>Macam Bentuk Numbered List</b></span></div> </blockquote> </div> <ol style="text-align: justify;"> <li>Bentuk Dasar, <ol> Tanpa Edit HTML</li> </ol> <ol start="8" style="text-align: justify;"> <li>Mulai dari angka 8, Ganti isyarat <ol> dengan <ol start="8"></li> <li>Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, ibarat goresan pena ini. </li> </ol> <ol style="text-align: justify;" type="A"> <li>Dalam Bentuk Huruf <b>Besar</b>, <ol type="A"></li> </ol> <ol style="text-align: justify;" type="a"> <li>Dalam Bentuk Huruf <b>Kecil</b>, <ol type="a"></li> </ol> <ol style="text-align: justify;" type="I"> <li>Dalam Bentuk abjad atau <b>angka romawi</b>, <ol type="I"></li> </ol> <ol style="text-align: justify;" type="i"> <li> Angka romawi abjad <b>kecil</b>, <ol type="i"></li> </ol> <ol start="5" style="text-align: justify;" type="I"> <li>Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5"></li> <li>Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: left;"> <span style="color: #0b5394;"><b>Macam Bentuk Bullet List</b></span></div> </blockquote> <ul style="text-align: justify;"> <li>Bentuk dasar bullet list, <ul> tanpa edit html</li> </ul> <ul style="text-align: justify;" type="circle"> <li>Bentuk Bulat sederhana, <ul type="circle"></li> </ul> <ul type="square"> <li style="text-align: justify;"> Bentuk Kotak, <ul type="square"></li> </ul> <blockquote class="tr_bq"> <div style="text-align: justify;"> Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti teladan gambar dibawah ini.</div> </blockquote> <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=" " style="margin-left: auto; margin-right: auto;"><img alt=" Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger Macam Bentuk Numbered List dan Bullet List" border="0" height="81" src="https://lh3.googleusercontent.com/-vzGKvMcYxUg/UbtfGFqDKEI/AAAAAAAAAlc/JRe2skTCr6o/s683/numbered%2520list.JPG" title="Macam Bentuk Numbered List dan Bullet List" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Contoh gambar</td></tr> </tbody></table> <div style="text-align: justify;"> <blockquote class="tr_bq"> 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.</blockquote> Berikut sedikit trik cara semoga tampilan numbered list rata dengan goresan pena biasa.</div> <ol> <li style="text-align: justify;">Login ke blogger, dari halaman dasbor, pilih pengaturan template.</li> <li style="text-align: justify;">Terus edit html, dan cari isyarat ]]></b:skin> kemudian letakan isyarat berikut ini diatasnya.</li> <div class="kotak"> .post ol {<br /> padding:0px 24px 0px;<br /> width:96%;max-width:100%;}</div> <li style="text-align: justify;">Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.</li> <li style="text-align: justify;">Jika belum rata, Ganti 24px dan 96% semoga rata dengan tampilan posting kamu.</li> <li style="text-align: justify;">Save template, selesai.</li> </ol> <blockquote class="tr_bq"> <div style="text-align: justify;"> 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.</div> </blockquote> <div style="text-align: justify;"> 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.</div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-29789315820369408772018-02-14T10:48:00.000-08:002018-02-14T10:48:24.418-08:00Cara Menciptakan Video Point Blank<div style="text-align: justify;"> 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.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> 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.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Cara memakai Video Record di point blank, silakan ikuti langkah-langkah dibawah ini.</div> <ol style="text-align: justify;"> <li>Login atau Masuklah ke game Point Blank </li> <li>Selanjutnya, buka <b>Option</b>, kemudian pilih bab <b>Control</b>, dan lihat pada bab <b>Mode Video Capture</b>. Seperti gambar dibawah ini.</li> <a href="https://lh4.googleusercontent.com/-jvZnfR-jEms/UghrhnnxvEI/AAAAAAAABVQ/u-6Uh0YEzTA/s424/PB%2520Option.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt=" Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank" border="0" height="320" src="https://lh4.googleusercontent.com/-jvZnfR-jEms/UghrhnnxvEI/AAAAAAAABVQ/u-6Uh0YEzTA/s424/PB%2520Option.JPG" title="Cara Membuat Video Point Blank" width="241" /></a> <li>Dari gambar diatas untuk merekam video point blank kita harus menekan Tombol <b>Scroll Lock di Keyboard.</b> Maka pada dikala merekam video, akan ada goresan pena <span style="color: red;"><b>Rec</b></span> berwarna merah di atas kanan layar pb. ibarat dibawah ini.</li> <a href="https://lh5.googleusercontent.com/-HuP2DR311Vw/UghsYHVQq3I/AAAAAAAABVc/KqKBD4MpkIU/s240/pb4.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt=" Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank" border="0" src="https://lh5.googleusercontent.com/-HuP2DR311Vw/UghsYHVQq3I/AAAAAAAABVc/KqKBD4MpkIU/s240/pb4.JPG" title="Cara Membuat Video Point Blank" /></a> <li>Untuk menghentikan rekaman, maka tekan kembali Scroll Lock di Keyboard. </li> <li>Sekarang, video point blank yang sudah direkam sudah jadi. </li> <li>Untuk melihat hasilnya, silakan <b>Exit</b> / keluar terlebih dahulu dari game point blank, Lalu buka <b>My Document</b>, dan buka Folder <b>Point Blank</b>, kemudian buka lagi Folder <b>Movie</b>.</li> <a href="https://lh5.googleusercontent.com/-mUZniMq6uyo/Ughtb0Ed6mI/AAAAAAAABVs/6QO_nmbZgRI/s448/pb2.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt=" Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank" border="0" height="213" src="https://lh5.googleusercontent.com/-mUZniMq6uyo/Ughtb0Ed6mI/AAAAAAAABVs/6QO_nmbZgRI/s448/pb2.JPG" title="Cara Membuat Video Point Blank" width="320" /></a> <li>Hasil video rekaman berformat AVI, dengan ukuran yang tidak mengecewakan kecil. Silakan putar hasil rekamanmu di pemutar video. Selesai.</li> </ol> <div style="text-align: justify;"> Video dibawah ini yaitu referensi hasil rekaman dengan durasi 1 menit. Silakan dilihat untuk lebih jelasnya cara menciptakan video point blank. </div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dxTN8U3Es23tk2AEAkQ6-xHxNH_gRWr8gLZ4Bm_Y3l0HBxHhFyy8PsKnN6gBxWhxz2vmjoUeYSx2NYj1pUDzg' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: justify;"> 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.</div> <div class="separator" style="clear: both; text-align: justify;"> <br /></div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-30835935675976996812018-02-13T22:48:00.000-08:002018-02-13T22:48:12.821-08:00Cara Menciptakan Gambar Posting Berputar<div style="text-align: justify;"> 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.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <style>#putar img{width:139px;height:200px; -o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease } #putar 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 .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease} </style> <br /> <div id="putar" style="text-align: center;"> <img height="200" id="putar" src="https://lh6.googleusercontent.com/-USqIVCH16bg/UhvvIc7N00I/AAAAAAAAAnY/pzhdpUaWugo/s200/fff.jpg" title="Cara Membuat Gambar Posting Berputar" width="139" /></div> <div style="text-align: justify;"> <br /> Untuk menciptakan gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.</div> <ol> <li>Login ke blogger. </li> <li>Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari instruksi ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). </li> <li>Setelah ketemu ]]></b:skin>, Copy instruksi dibawah ini. Lalu Pastekan di <b>Atas ]]></b:skin></b></li> <div class="kotak"> .post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}<br /> .post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9) <br /> rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s <br /> ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}</div> <li style="text-align: justify;"><b></b> Dan save template. Selesai.</li> <li style="text-align: justify;">Atau sanggup juga ditempatkan di <b>Tambahkan CSS</b> pada bab <u>perancang template blogger(desainer template).</u></li> <li style="text-align: justify;">Lalu save, selesai.</li> </ol> <div style="text-align: justify;"> <blockquote class="tr_bq"> <span style="color: #0b5394;"><b>Keterangan instruksi diatas:</b></span> <span style="color: #0b5394;"><span style="background-color: white;"><b>0.5s</b></span></span> untuk mengatur usang putaran. <span style="color: #0b5394;"><b>scale 1.9</b></span> 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. </blockquote> 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.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> 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 <a href=" ">cara mengganti judul blog dengan gambar</a> atau <a href=" ">cara menciptakan sajian blog dengan gambar</a>. Semoga bermanfaat. </div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-65834201102574125842018-02-13T10:48:00.000-08:002018-02-13T10:48:18.478-08:00Cara Menciptakan Gambar Berputar Di Blog<div style="text-align: justify;"> Artikel kali ini masih seputar gambar yaitu wacana cara menciptakan gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas <a href=" ">cara menciptakan gambar posting berputar</a> 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.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <br /> <div style="text-align: center;"> <style>#gambar1 img{ width:200px;height:150;position: relative; -moz-transition:all .4s ease-in-out;; -ms-transition:all .4s ease-in-out;; -o-transition:all .4s ease-in-out;; -webkit-transition:all .1s ease-in-out; transition:all .4s ease-in-out;} #gambar1 img:hover{ -o-transform: scale(1) rotate(720deg); -moz-transform: scale(1) rotate(720deg); -webkit-transform: scale(1) rotate(720deg); } </style> </div> <div id="gambar1" style="text-align: center;"> <img height="150" id="gambar1" src="https://lh5.googleusercontent.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAmA/qwxujC7peSA/s640/A.jpg" width="200" /></div> <br /> <div style="text-align: justify;"> 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.</div> <ol> <li style="text-align: justify;">Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.</li> <li style="text-align: justify;">Selanjutnya klik Tambahkan Gadget. Dan pilih <b>HTML/Javascript</b>.</li> <li style="text-align: justify;">Setelah itu copi isyarat dibawah ini.</li> <div style="background: url('http://1.bp.blogspot.com/-7QYGU-oKyG4/Uijdm9C_gaI/AAAAAAAAArY/IVW2ZmubLUQ/s1600/panjang.jpg') repeat-y; border: 1px #cccccc solid; height: 390px; overflow: auto; padding: 10px; text-align: left;"> <style><br /> #img{<br /> width: 250px;<br /> height: 200px;<br /> <br /> position: relative;<br /> -moz-transition:all .8s ease-in-out;;<br /> -ms-transition:all .8s ease-in-out;;<br /> -o-transition:all .8s ease-in-out;;<br /> -webkit-transition:all .1s ease-in-out;<br /> transition:all .8s ease-in-out;}<br /> #img:hover{ <br /> -o-transform: scale(1) rotate(360deg); <br /> -moz-transform: scale(1) rotate(360deg);<br /> -webkit-transform: scale(1) rotate(360deg);<br /> }<br /> </style><br /> <div id="img"><br /> <img id="img" src="http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg" /><br /> </div></div> <li style="text-align: justify;">Dan Pastekan di <b>HTML/Javascript</b> Tadi.</li> <li style="text-align: justify;">Setelah itu save, kemudian pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.</li> </ol> <div style="text-align: justify;"> <blockquote class="tr_bq"> <span style="color: #0b5394;"><b>Keterangan Kode: </b></span><br /> <div> <span style="color: #0b5394;"><b>width: 250px; height: 200px;</b></span> Untuk mengatur lebar dan tinggi gambar.<br /> <span style="color: #0b5394;"><b>8s</b></span> ialah usang putaran gambar.<br /> <span style="color: #0b5394;"><b>scale(1)</b></span> ini fungsinya biar gambar tetap pada ukuran semula dikala disentuh mouse, jadi gambar tidak membesar atau mengecil dikala disentuh kursor.</div> </blockquote> </div> <blockquote class="tr_bq"> Dan <span style="color: #0b5394;"><b>http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg</b></span> ialah URL dari gambar yang ingin kalian masukan.</blockquote> <ul style="text-align: justify;"></ul> <div style="text-align: justify;"> 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. </div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-82422875635082500422018-02-12T22:48:00.000-08:002018-02-12T22:48:00.274-08:00Cara Menciptakan Entri Terkenal Bergerak<div style="text-align: justify;"> Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis Cara Membuat Entri Populer Bergerak" border="0" height="172" src="https://lh5.googleusercontent.com/-apsLsivuIQQ/UibBM5hrz6I/AAAAAAAAAno/5MVcFp2Opbc/s200/entri%2520populer.JPG" title="Cara Membuat Entri Populer Bergerak" width="200" /></div> <div style="text-align: justify;"> Ikuti langkah-langkah dibawah ini.</div> <ol> <li style="text-align: justify;">Login ke blog, dari halaman <b>dasbor</b> pilih pengaturan <b>Template</b>.</li> <li style="text-align: justify;">Klik <b>Edit HTML</b>, kemudian cari kode <u><b><div class='widget-content popular-posts'></b></u></li> <li style="text-align: justify;">Selanjutnya Copy aba-aba berikut dan tempatkan di Sebelahnya.</li> <div class="kotak"> <span style="color: blue;"><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'></span></div> <li style="text-align: justify;">Langkah selanjutnya, masukan aba-aba <span style="color: blue;"></marquee></span> di final rangkaian kode. Jadinya menyerupai ini.</li> <div class="kotak"> </ul><br /> <b:include name='quickedit'/><span style="color: blue;"></marquee></span><br /> </div><br /> </b:includable><br /> </b:widget></div> <li>Susunan Kode lengkapnya.</li> <div class="kotak" style="height: 200px; overflow: auto;"> <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'><br /> <b:includable id='main'><br /> <b:if cond='data:title'><h2><data:title/></h2></b:if><br /> <div class='widget-content popular-posts'><span style="color: red;"><b><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'></b></span><br /> <ul><br /> <b:loop values='data:posts' var='post'><br /> <li><br /> <b:if cond='data:showThumbnails == &quot;false&quot;'><br /> <b:if cond='data:showSnippets == &quot;false&quot;'><br /> <!-- (1) No snippet/thumbnail --><br /> <a expr:href='data:post.href'><data:post.title/></a><br /> <b:else/><br /> <!-- (2) Show only snippets --><br /> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br /> <div class='item-snippet'><data:post.snippet/></div><br /> </b:if><br /> <b:else/><br /> <b:if cond='data:showSnippets == &quot;false&quot;'><br /> <!-- (3) Show only thumbnails --><br /> <div class='item-thumbnail-only'><br /> <b:if cond='data:post.thumbnail'><br /> <div class='item-thumbnail'><br /> <a expr:href='data:post.href' target='_blank'><br /> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><br /> </a><br /> </div><br /> </b:if><br /> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br /> </div><br /> <div style='clear: both;'/><br /> <b:else/><br /> <!-- (4) Show snippets and thumbnails --><br /> <div class='item-content'><br /> <b:if cond='data:post.thumbnail'><br /> <div class='item-thumbnail'><br /> <a expr:href='data:post.href' target='_blank'><br /> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><br /> </a><br /> </div><br /> </b:if><br /> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br /> <div class='item-snippet'><data:post.snippet/></div><br /> </div><br /> <div style='clear: both;'/><br /> </b:if><br /> </b:if><br /> </li><br /> </b:loop><br /> </ul><br /> <!--b:include name='quickedit'/--><span style="color: red;"><b></marquee></b></span><br /> </div><br /> </b:includable><br /> </b:widget></div> <li>Save Template Selesai.</li> </ol> <div style="text-align: justify;"> <span style="color: #0b5394;"><b>Keterangan kode:</b></span></div> <ul style="text-align: justify;"> <li><span style="color: #0b5394;">marquee direction='down'</span> arah gerakan, dapat diganti dengan up, left, atau right.</li> <li><span style="color: #0b5394;">height='200'</span> tinggi dan <span style="color: #0b5394;">width='auto'</span> untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.</li> <li><span style="color: #0b5394;">scrollamount='2' scrolldelay='100'</span> Waktu gerakan.</li> <li>Silakan ganti sesuai dengan yang kalian ingnkan.</li> </ul> <div style="text-align: justify;"> Silakan baca juga artikel wacana <a href=" " target="_blank">cara menciptakan artikel berjalan di blog<b>.</b></a> Lanjutan kombinasi dari entri terkenal bergerak ini. Contohnya dapat dilihat <a href="http://pengguna-komputer.blogspot.com/" rel="nofollow" target="_blank"><b>DISINI</b></a>, diblog aku satunya.</div> <ul style="text-align: justify;"></ul> <blockquote class="tr_bq"> <div style="text-align: justify;"> Semoga Bermanfaat. </div> </blockquote> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-60039842509230298862018-02-12T10:48:00.000-08:002018-02-12T10:49:06.171-08:00Fungsi Margin Dan Padding Di Blog<div style="text-align: justify;"> Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi. Perbedaanya yaitu <u>margin</u> dipakai pada <b>bagian luar</b>, dan <u>padding</u> pada <b>bagian dalam</b>. 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.<br /> <a href="https://www.blogger.com/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog" border="0" height="43" src="http://lh5.googleusercontent.com/-59gVv3zcIQs/Uj1m0_yYLRI/AAAAAAAAAvg/xq5UdN6EWh0/s912/D.JPG" title="Fungsi Margin Dan Padding di Blog" width="400" /></div> <br /> <div style="text-align: justify;"> Adapun kode-kode Css Dari Margin dan Padding yang sanggup kita gunakan diblog yaitu sebagai berikut:</div> <blockquote class="tr_bq"> Margin</blockquote> <ol style="text-align: justify;"> <li>margin: 10px; (10px Spasi atas-kanan-bawah-kiri).</li> <li>margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)</li> <li>margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)</li> <li>margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)</li> <li>Khusus untuk margin dengan arahan 4, sanggup kita tambahkan arahan - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0 </li> </ol> <blockquote class="tr_bq"> Padding</blockquote> <ol> <li style="text-align: justify;">padding: 10px; (10px Spasi atas-kanan-bawah-kiri).</li> <li style="text-align: justify;">padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)</li> <li style="text-align: justify;">padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)</li> <li style="text-align: justify;">padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)</li> </ol> <div style="text-align: justify;"> Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah <u>nama awalnya saja </u>sedangkan yang lainnya sama.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Langsung saja, dibawah ini yaitu teladan <b>penggunaan margin pada bab Header blog</b>. Tampilan awal Header blog pertama.</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog" border="0" height="114" src="http://lh4.googleusercontent.com/-9pVm_wf96ms/Uj1wQS8J3ZI/AAAAAAAAAwI/fQa8QZohiZs/s696/kepala.JPG" title="Fungsi Margin Dan Padding di Blog" width="320" /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <ol> <li>Susunan elemen dari gambar diatas yaitu menyerupai dibawah ini.</li> <img alt=" Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog" border="0" src="http://lh3.googleusercontent.com/-GT8hsEauVGY/Uj3Vx_VafZI/AAAAAAAAAwk/VKyCqFZlA0A/s782/t.JPG" title="Fungsi Margin Dan Padding di Blog" /> <li>Sekarang ke pengaturan template. Dan klik edit HTML.</li> <li>Lalu cari satu persatu arahan dari susunan elemen dari langkah 1.</li> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog" border="0" src="http://lh4.googleusercontent.com/-Z_EaYfsh9tE/Uj3XV4Xb5KI/AAAAAAAAAww/tiTFBmsmO-0/s912/Header.JPG" title="Fungsi Margin Dan Padding di Blog" /></div> <li>Pertama cari arahan Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. menyerupai dibawah ini.</li> <li style="text-align: justify;">Setelah ketemu, copy arahan bertanda merah diatas, kemudian pastekan di notepad, dan lanjutkan mencari arahan Laman Dan HTML/javascipt.</li> <li style="text-align: justify;">Setelah semuanya ketemu, tambahkan arahan margin untuk merubah posisi yang kita inginkan. menyerupai dibawah ini.</li> <div class="kotak"> #Header{float:left}<br /> #HTML1{float:right; margin:-115px -195px 0 0}<br /> #PageList1{float:right; margin:-55px -50px 0 0}</div> <li>Letakan arahan diatas ]]></b:skin> </li> <li>Save template, selesai.</li> <li>Tampillan Blog sehabis diberi arahan margin.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi Fungsi Margin Dan Padding di Blog" border="0" height="83" src="http://lh5.googleusercontent.com/-Payh13rZ5Kc/Uj1xeFibVVI/AAAAAAAAAwU/q-vJlXOTiEA/s912/blog.JPG" title="Fungsi Margin Dan Padding di Blog" width="640" /></div> <div style="text-align: justify;"> <br /> 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.</div> <blockquote class="tr_bq"> <div style="text-align: justify;"> <span style="color: #0b5394;"><b>Keterangan arahan float</b></span></div> <div style="text-align: justify;"> 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. </div> </blockquote> <div style="text-align: justify;"> Silahkan berkreasi, maaf kalau tutorial dari aku ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.</div> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-57603835296549449862018-02-11T22:48:00.000-08:002018-02-11T22:48:01.461-08:00Cara Menciptakan Hidangan Yang Melekat Di Dinding Blog<div style="text-align: justify;"> 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.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <div class="separator" style="clear: both; text-align: center;"> <img alt=" melayang diatas atau dibawah dinding blog Cara Membuat Menu yang Menempel Di Dinding Blog" border="0" src="https://lh6.googleusercontent.com/-4SkH8_3BlWo/Uj6N2gNpeAI/AAAAAAAAAxA/tet-J68Db14/s254/menu.JPG" title="Cara Membuat Menu yang Menempel Di Dinding Blog" /></div> <br /> <div style="text-align: justify;"> Untuk lebih jelasnya perihal cara menciptakan sajian melekat diatas atau dibawah dinding blog. Ikuti langkah<sup>2</sup> dibawah ini.</div> <div class="separator" style="clear: both; text-align: justify;"> <br /></div> <ol> <li style="text-align: justify;">Buatlah sajian terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, kemudian tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.</li> <li style="text-align: justify;">Selanjutnya copy arahan dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.</li> <div class="kotak" style="height: 80px; overflow: auto;"> <style><br /> <br /> #cssmenu {<br /> background: transparent;<br /> }<br /> #cssmenu ul {<br /> float: left;<br /> }<br /> #cssmenu ul li {<br /> float: left; padding:10px;<br /> background: transparent; list-style: none;<br /> }<br /> #cssmenu ul li a {<br /> float: left;<br /> text-transform: uppercase;<br /> font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;<br /> font-size: 12px;<br /> color: #FFFFFF;<br /> font-weight:bold;<br /> }<br /> </style><br /> <div id='cssmenu'><br /> <ul><br /> <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li><br /> <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li><br /> <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li><br /> </ul><br /> </div></div> <li style="text-align: justify;">Beri judul HTML/JAVASCRIPT dengan nama <b>Menu Tempel</b>. Lalu Save </li> <li style="text-align: justify;">Setelah itu pengaturan template, klik edit HTML dan cari arahan Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. ibarat dibawah ini.</li> <img alt=" melayang diatas atau dibawah dinding blog Cara Membuat Menu yang Menempel Di Dinding Blog" border="0" src="https://lh6.googleusercontent.com/-VJzRxjJCHDI/Uj6RTT4CsEI/AAAAAAAAAxM/pbFRGFbmqvA/s912/menu%2520tempel.JPG" title="Cara Membuat Menu yang Menempel Di Dinding Blog" /> <li style="text-align: justify;">Sekarang Copy id dari sajian tempel yang bergaris bawah HTML2, ibarat gambar diatas.</li> <li style="text-align: justify;">Lalu Pastekan di Notepad. Selanjutnya tambahkan arahan css dibawah ini.</li> <div class="kotak" style="height: 200px; overflow: auto;"> #HTML2 {<br /> width: 100%;<br /> min-width: 960px;<br /> position: fixed;<br /> top: 0px;<br /> left: 0px;<br /> right: 0px;<br /> height: 30px;<br /> font-size: 12px;<br /> z-index: 99;<br /> white-space: nowrap;<br /> margin:0px 0px 0px 0px; <br /> padding:0px 0px 0px 0px; <br /> background-color: #336699;<br /> background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);<br /> box-shadow: 0px 2px 0px rgb(14, 90, 140);<br /> border-bottom: 1px solid rgba(255, 255, 255, 0.1);<br /> }</div> <li style="text-align: justify;">Copy arahan diatas, dan pastekan diatas ]]></b:skin> .</li> <li style="text-align: justify;">Dan Save Template.</li> <li style="text-align: justify;">Selanjutnya kembali ke tata letak, dan klik Gadget <b>Menu Tempel</b> Tadi, kemudian hapus judulnya, biarkan gadget tidak berjudul. </li> <li style="text-align: justify;">Terakhir Save Gadget, Selesai.</li> </ol> <div style="text-align: justify;"> <span style="color: #0b5394;"><b>Keterangan Kode Langkah 6:</b></span></div> <ul style="text-align: justify;"> <li><span style="color: #0b5394;">top:0px</span> ini fungsinya menempatkan sajian dibagian atas, untuk merubahnya kebagian bawah ganti menjadi <span style="color: #0b5394;">bottom:0px;</span></li> <li><span style="color: #0b5394;">height: 30px;</span> ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.</li> <li> <span style="color: #0b5394;">background-color: #336699;</span> dan <span style="color: #0b5394;">#336699 100%);</span> untuk warna background</li> </ul> <div style="text-align: justify;"> <span style="color: #0b5394;"><b>Keterangan Kode Langkah 2:</b></span></div> <ul style="text-align: justify;"> <li><span style="color: #0b5394;">http://fandrajuani.blogspot.com/</span> dan <span style="color: #0b5394;">https://www.facebook.com/fandra.juani</span></li> <li>Dan juga <span style="color: #0b5394;">https://twitter.com/fandrajuani</span> yaitu <span style="color: #0b5394;">url</span> yang kalau diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.</li> </ul> <div style="text-align: justify;"> Itulah sedikit cara menciptakan sajian yang melekat di dinding atas atau bawah blog yang dapat aku bagikan. Semoga Bermanfaat. </div> <ol><div> </div> </ol> <style> #menempel { background:green;position:fixed; width: 100%; bottom: 0px; left: 0px; z-index: 99; white-space: nowrap;} } #menempel ul { float: left; } #menempel ul li { float: left; padding:10px; background: transparent; list-style: none; } #menempel 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> <br /> <div id="menempel"> <ul> <li><a href="http://pengguna-komputer.blogspot.co.id/">Beranda</a></li> <li><a href="http://pengguna-komputer.blogspot.co.id/search/label/Desain%20Blog">Desain Blog</a></li> <li><a href="http://pengguna-komputer.blogspot.co.id/search/label/Tips%20dan%20Trik">Tips Dan Trik</a></li> </ul> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-29115183500720782082018-02-11T10:48:00.000-08:002018-02-11T10:48:46.750-08:00Cara Menciptakan Gambar Tutorial<div style="text-align: justify;"> 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 langkah<sup>2</sup> dibawah ini.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <ol> <li style="text-align: justify;">Bukalah layar yang akan dijadikan gambar.</li> <li style="text-align: justify;">Selanjutnya tekan <abbr title="Cara Membuat Gambar Tutorial"><b>Ctrl</b></abbr> kemudian tekan <abbr title="Cara Membuat Gambar Tutorial"><b>Printscreen/PrtscrSysrq</b></abbr> yang ada <u>dikeyboard</u>.</li> <li style="text-align: justify;">Lalu buka jadwal <abbr title="Cara Membuat Gambar Tutorial"><b>Paint</b></abbr> yang ada dikomputer kita.</li> <li style="text-align: justify;">Di jadwal Paint kita klik <i>edit</i> di hidangan atas, dan pilih<i> Paste</i>.</li> <li style="text-align: justify;">Setelah itu beri tanda kotak memakai <b>Select</b> pada gambar yang akan diambil, kemudian <b>Cut</b> gambar tersebut.</li> <li style="text-align: justify;">Langkah selanjutnya, buka <abbr title="Cara Membuat Gambar Tutorial"><b>New</b></abbr> di paint, kemudian <b>Pastekan</b> gambar yang di Cut tadi. </li> <li style="text-align: justify;">Lalu Save gambar dengan Save As Type JPG. Seperti gambar dibawah ini.</li> <img alt=" Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial" border="0" height="149" src="https://lh4.googleusercontent.com/-_cxH-PIRHV0/UkBzZl1RMaI/AAAAAAAAAyU/KW2yCrXflFE/s349/h.JPG" title="Cara Membuat Gambar Tutorial" width="320" /> <li>Selesai.</li> </ol> <hr /> <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=" " imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt=" Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial" border="0" height="179" src="https://lh5.googleusercontent.com/-IU3KiomgpZM/UkB1xGcQWBI/AAAAAAAAAy4/nU3QIJuKU9E/s683/q.JPG" title="Cara Membuat Gambar Tutorial" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" "><b>Contoh</b> : Gambar Tutorial.</a></td></tr> </tbody></table> <div style="text-align: justify;"> 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:</div> <hr /> <ol> <li style="text-align: justify;">Klik Kanan pada gambar yang akan dipotong.</li> <li style="text-align: justify;">Lalu pilih Open With > Microsoft Office Windows Manager.</li> <img alt=" Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial" border="0" src="https://lh3.googleusercontent.com/-f6zQLEoCfHs/UkB1JT-FF_I/AAAAAAAAAyo/ecA82DFfKls/s205/g.JPG" title="Cara Membuat Gambar Tutorial" /> <li style="text-align: justify;">Selanjutnya klik Picture pada hidangan atas. Dan klik <b>Crop</b>.</li> <li style="text-align: justify;">Setelah itu Crop gambar dengan ukuran yang kita inginkan.</li> <li style="text-align: justify;">Terakhir save. Selesai.</li> </ol> <hr /> <ol></ol> <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=" " style="margin-left: auto; margin-right: auto;"><img alt=" Tips dan Trik kali ini ihwal cara menciptakan gambar tutorial Cara Membuat Gambar Tutorial" border="0" height="57" src="https://lh3.googleusercontent.com/-2-BW1ogq_MI/UkB1xKSSUcI/AAAAAAAAAy0/vGOd8Wbo76Q/s564/Copy%2520of%2520q.JPG" title="Cara Membuat Gambar Tutorial" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Contoh: Gambar Tutorial yang sudah dipotong.</a></td></tr> </tbody></table> <ol></ol> <div style="text-align: justify;"> 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.</div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-8015457468130176742018-02-10T22:48:00.000-08:002018-02-10T22:48:02.188-08:00Cara Menciptakan Icon Untuk Website<div style="text-align: justify;"> <img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" height="150" src="https://lh6.googleusercontent.com/-1mwOOAlAqTg/UkLQZ2-sX1I/AAAAAAAAA1Q/gMKrvz6WVw4/s371/Fandra%2520Juani.jpg" title="Cara Membuat Icon Untuk Website" width="150" /><br /> Cara buat Icon web atau juga blogger. Icon biasanya digukan untuk memperjelas judul menu, menyerupai home, profil, sitemap dan lain<sup>2</sup>. Dan letaknya berada disamping kanan atau kiri dari tulisan. Icon berkhasiat biar pengunjung lebih gampang untuk melihat hidangan yang ada diwebsite kita.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Disini aku akan beri rujukan gampang menciptakan icon web memakai foto kita sendiri diphotoshop.<br /> <br /> <a href="https://www.blogger.com/null" name="more"></a>Untuk lebih jelasnya. Ikuti langkah-langkah dibawah ini.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <hr /> </div> <div style="text-align: justify;"> <div style="text-align: justify;"> <img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" height="102" src="https://lh6.googleusercontent.com/-i9sgs6qGZqE/UkLQgs4RrOI/AAAAAAAAA1c/UU4co0rSI3E/s465/icon.jpg" title="Cara Membuat Icon Untuk Website" width="320" /></div> <ol></ol> <div style="text-align: justify;"> <br /> 1. Buka Photoshop.<br /> 2. Buka Foto yang akan dijadikan Icon.<br /> <div style="text-align: left;"> 3. Setelah itu klik tanda Crop yang berada disebelah kiri.</div> <br /> <br /> <hr /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" height="150" src="https://lh6.googleusercontent.com/-7_gCXdGOBKM/UkLQmif95UI/AAAAAAAAA1o/hDPeZJvBJe4/s376/logo.jpg" title="Cara Membuat Icon Untuk Website" width="150" /></div> <ol> </ol> <div style="text-align: justify;"> 4. Dan isi <u>colom width:128 dan height 128.</u> 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.<br /> <br /> 5. Selanjutnya <i>Crop gambar</i>, dan ratakan kotak crop untuk gambar yang akan diambil. Seperti gambar dibawah ini. Dan tekan tanda <u><b>centang hijau diatas bar</b></u>, untuk menuntaskan crop/pemotongan.<br /> <br /></div> <hr /> <ol></ol> <div style="text-align: justify;"> <img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" height="150" src="https://lh5.googleusercontent.com/-IL2TfXzAMFQ/UkLQgmI4WUI/AAAAAAAAA1g/1hN5yvYP-Us/s320/icon-3.jpg" title="Cara Membuat Icon Untuk Website" width="150" /> </div> <div style="text-align: justify;"> </div> <ol></ol> <div style="text-align: justify;"> <br /> <br /> 6. Setelah itu klik tanda image yang ada diatas kafe dan klik image size.<br /> <br /> Maka akan terbuka halaman gres pengaturan Pixel Dimensions dan Document Size.<br /> <br /> <br /></div> <hr /> <div class="separator" style="clear: both; text-align: justify;"> <img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" height="251" src="https://lh5.googleusercontent.com/-N4SevuDpgGU/UkLQZUHJVQI/AAAAAAAAA1I/k1mmkEbh73M/s320/icon-2.jpg" title="Cara Membuat Icon Untuk Website" width="320" /></div> <ol></ol> <div style="text-align: justify;"> 7. Selanjutnya, ganti ukuran <b>Pixel Dimensions</b> menjadi 32 x 32, ukuran standar Icon yang biasa dipakai untuk website.<br /> <br /> Document size <b>tidak perlu diganti</b>, alasannya ialah document size mengikuti perubahan dari ukuran pixel dimensions. Perhatikan juga <i>Constrain Proportions tidak perlu dicentang.</i></div> <div style="text-align: justify;"> <br /> 8. Terakhir Klik Ok, Lalu Save Gambar. Selesai.<br /> <br /> <hr /> <br /> <a href=" " style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt=" Icon biasanya digukan untuk memperjelas judul hidangan Cara Membuat Icon Untuk Website" border="0" src="https://lh5.googleusercontent.com/-67E5pLnBChM/UkLQWFOGNcI/AAAAAAAAA1A/WZlU8Tjf4z8/s32/32x32.jpg" title="Cara Membuat Icon Untuk Website" /></a>Contoh icon yang sudah jadi dengan ukuran 32 x 32 Pixels.<br /> 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.<br /> <br /></div> <table><tbody> <tr><td style="text-align: justify;"><ul> <li>16x16</li> </ul> </td><td style="text-align: justify;"><ul> <li>32x32</li> </ul> </td><td style="text-align: justify;"><ul> <li>48x48</li> </ul> </td><td style="text-align: justify;"><ul> <li>64x64</li> </ul> </td><td style="text-align: justify;"><ul> <li>128x128</li> </ul> </td></tr> </tbody></table> <div style="text-align: justify;"> <br /> 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.</div> </div> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-73190198427423193962018-02-10T10:48:00.000-08:002018-02-10T10:48:28.573-08:00Cara Menciptakan Artikel Berjalan Di Blog<div style="text-align: justify;"> Cara Membuat Artikel Berjalan di Blog. Sebelumnya aku sudah membagikan ihwal <a href=" " title="Cara Membuat Artikel Berjalan di Blog">cara menciptakan entri terkenal bergerak</a> ke bawah ataupun keatas. Dan kali ini yaitu lanjutannya entri terkenal akan bergerak ke arah kanan ataupun kiri. Jadinya menyerupai <b>artikel berjalan</b>. 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.<br /> <a href="https://www.blogger.com/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <img alt=" Sebelumnya aku sudah membagikan ihwal Cara Membuat Artikel Berjalan di Blog" border="0" height="62" src="https://lh4.googleusercontent.com/-Byq8la9ps_0/UkMqVdRTsgI/AAAAAAAAA2I/OW0eh5TKvy8/s550/artikel.JPG" title="Cara Membuat Artikel Berjalan di Blog" width="320" /></div> <br /> <div style="text-align: justify;"> Contoh artikel berjalan, dapat dilihat <a href="http://pengguna-komputer.blogspot.com/" rel="nofollow" target="_blank"><b>DISINI</b></a>, di blog aku satunya. Untuk lebih jelasnya ihwal cara menciptakan artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.</div> <ol> <li style="text-align: justify;">Pasanglah widget entri terkenal di blog.</li> <li style="text-align: justify;">Lalu atur entri terkenal tanpa gambar dan cupilkan, dan save widget.</li> <li style="text-align: justify;">Selanjutnya memasang aba-aba berjalan, baca di <a href=" " title="Cara Membuat Artikel Berjalan di Blog">cara menciptakan entri terkenal bergerak.</a></li> <li style="text-align: justify;">Setelah simpulan menciptakan entri terkenal bergerak. Ke pengaturan Template > klik Edit HTML dan cari aba-aba ]]></b:skin></li> <li style="text-align: justify;">Setelah itu copi aba-aba berikut, dan pastekan diatas ]]></b:skin></li> <div class="kotak" style="height: 210px; overflow: auto;"> <div style="text-align: left;"> .popular-posts {</div> <div style="text-align: left;"> width: 100%;</div> <div style="text-align: left;"> min-width: 960px;</div> <div style="text-align: left;"> position: fixed;</div> <div style="text-align: left;"> top: 0px;</div> <div style="text-align: left;"> left: 0px;</div> <div style="text-align: left;"> right: 0px;</div> <div style="text-align: left;"> height: 30px;</div> <div style="text-align: left;"> font-size: 12px;</div> <div style="text-align: left;"> z-index: 99;</div> <div style="text-align: left;"> white-space: nowrap;</div> <div style="text-align: left;"> background-color: #336699;</div> <div style="text-align: left;"> background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);</div> <div style="text-align: left;"> box-shadow: 0px 2px 0px rgb(14, 90, 140);</div> <div style="text-align: left;"> border-bottom: 1px solid rgba(255, 255, 255, 0.1);</div> <div style="text-align: left;"> }</div> <br /> <div style="text-align: left;"> .widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)</div> <div style="text-align: left;"> }</div> <br /> .popular-posts ul li{<br /> float:left; <br /> }<br /> <br /> <div style="text-align: left;"> .popular-posts ul li a{</div> <div style="text-align: left;"> float:left; </div> <div style="text-align: left;"> width:auto; </div> <div style="text-align: left;"> font-weight:Bold;</div> <div style="text-align: left;"> color:#FFFFFF;</div> <div style="text-align: left;"> text-align:justify; </div> <div style="text-align: left;"> padding:0px 10px 0px 0px; </div> <div style="text-align: left;"> }</div> </div> <li>Save template, selesai.</li> </ol> <span style="color: #0b5394;"><b>Keterangan aba-aba langkah 5:</b></span><br /> <ul> <li style="text-align: left;"> .widget .popular-posts ul {list-style:url(<span style="color: #0b5394;">http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG</span>)} aba-aba ini gunanya untuk menambahkan gambar disamping goresan pena artikel<sup>2</sup> yang berjalan, silakan ganti aba-aba <span style="color: #0b5394;">Biru</span> dengan url dari gambar yang kalian inginkan.</li> <li style="text-align: left;">Jika tidak ingin memakai gambar, ganti aba-aba list-style:url(<span style="color: #0b5394;">http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG</span>)} dengan aba-aba list-style:none;</li> <li>top: 0px; mengatur letak posisi diatas, kalau ingin ditempatkan dibawah ganti top dengan bottom.</li> </ul> <div style="text-align: justify;"> <blockquote class="tr_bq"> <b>Update:</b> </blockquote> <ul> <li style="text-align: left;">Jika warna tulisannya hitam, tambahkan aba-aba <span style="color: #0b5394;">.widget .popular-posts ul li a:link, .widget .popular-posts ul li a:visited{<b>color:white;</b>}</span> diatas ]]></b:skin>.</li> <li style="text-align: left;">Untuk menghilangkan judulnya, tambahkan aba-aba <span style="color: #0b5394;">#PopularPosts1 h2{display:none}</span> diatas ]]></b:skin>.</li> <li style="text-align: left;">Jika masih ada background yg tertinggal, tambahkan kode <span style="color: #0b5394;">#PopularPosts1 {background:transparent; box-shadow:none;}</span></li> </ul> Ganti aba-aba <b>color:white;</b> dengan warna yang kalian inginkan. Selesai sudah cara menciptakan artikel berjalan di blog, silakan dibaca juga artikel lainnya menyerupai ihwal cara <a href=" " title="Cara Membuat Artikel Berjalan di Blog">cara menciptakan icon untuk website</a> yang dapat dipakai untuk gambar disamping goresan pena artikel berjalan pada artikel diatas. Semoga bermanfaat. </div> <ol></ol> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-9390366621374235652018-02-09T22:48:00.000-08:002018-02-09T22:48:02.307-08:00Cara Menciptakan Sajian Vertical Sederhana<div style="text-align: justify;"> <img alt="Cara menciptakan sajian vertical sederhana di blog Cara Membuat Menu Vertical Sederhana" border="0" src=" " title="Cara Membuat Menu Vertical Sederhana">menu horizontal</a> yang memanjang kesamping.<br /> <br /> <abbr title="Cara Membuat Menu Vertical Sederhana">Menu vertical</abbr> akan memanjang atau menurun kebawah. Biasanya sajian vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat pola gambar disamping, atau pola sajian dibawah ini.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <style>#vertical { background: transparent; } #vertical ul { } #vertical ul li { background: #aaaaaa; list-style: none;border:1px solid #1780dd;padding:5px; margin: 0px; } </style> <br /> <div id="vertical"> <ul> <li><span style="color: white;"><b><a href="http://pengguna-komputer.blogspot.co.id/">Beranda</a></b></span></li> <span style="color: white;"><b></b></span> <li><span style="color: white;"><b><a href="http://pengguna-komputer.blogspot.co.id/p/about-us.html">Profil</a></b></span></li> <span style="color: white;"><b></b></span> <li><span style="color: white;"><b><a href="http://pengguna-komputer.blogspot.co.id/p/var-servicedomainwww.html">Contact</a></b></span></li> </ul> </div> <br /> <div style="text-align: justify;"> Untuk lebih jelasnya wacana cara menciptakan sajian vertical diblog. Ikuti langkah<sup>2</sup> dibawah ini.</div> <ol> <li style="text-align: justify;">Login ke blogger, dan pilih pengaturan template.</li> <li style="text-align: justify;">Lalu klik tambahkan gadget, dan pilih HTML/Javascript.</li> <li style="text-align: justify;">Selanjutnya copy aba-aba dibawah ini.</li> <div class="kotak" style="height: 120px; overflow: auto;"> <style><br /> <br /> #vertical {<br /> background: transparent;<br /> }<br /> #vertical ul {<br /> }<br /> #vertical ul li { <br /> <span style="color: red;"> background: #aaaaaa;</span> list-style: none;border:1px solid #1780dd;<br /> }<br /> #vertical ul li span {<br /> text-transform: uppercase;<br /> font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;<br /> font-size: 12px;<br /> color: #444444;<br /> font-weight:bold;<br /> padding:0px 0px 0px 10px;<br /> }<br /> </style><br /> <div id='vertical'><br /> <ul><br /> <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li><br /> <li><a href='#'><span>Facebook</span></a></li><br /> <li><a href='#'><span>Twitter</span></a></li><br /> </ul><br /> </div></div> <li style="text-align: justify;">Dan Pastekan di gadget HTML/Javascript tadi.</li> <li style="text-align: justify;">Terakhir, save gadget. Dan pindahkan gadget ke daerah yang kalian inginkan. Selesai.</li> </ol> <span style="color: #0b5394;"><b>Keterangan aba-aba langkah 3:</b></span><br /> <ul style="text-align: justify;"> <li><span style="color: #0b5394;"><a href='http://fandrajuani.blogspot.com/'></span> dan <span style="color: #0b5394;"><a href=''></span> Isi dengan <abbr title="Cara Membuat Menu Vertical Sederhana"><b>URL </b></abbr>yang kau inginkan.</li> <li>Jumlah sajian diatas ada 3. Untuk menambahkan jumlah menu?<br />Tambahkan aba-aba <span style="color: #0b5394;"><li><a href=''><span></span>Nama Menu kamu<span style="color: #0b5394;"></span></a></li></span><br /> Dibawah aba-aba <span style="color: #0b5394;"><li><a href=''><span></span>Twitter<span style="color: #0b5394;"></span></a></li></span></li> <li><span style="color: red;">background: #aaaaaa; <span style="color: black;">warna background</span></span></li> <li><span style="color: red;"><span style="color: black;"><span style="color: #0b5394;">border:1px solid #1780dd;</span> warna garis biru yang memisahkan antar menu.</span></span></li> <li><span style="color: #0b5394;">text-transform: uppercase;</span> aba-aba ini menciptakan Menu memakai abjad besar semua.<br /> Jika tidak ingin memakai abjad besar, hapus kodenya.</li> <li><span style="color: #0b5394;">padding:0px 0px 0px 10px;</span> spasi goresan pena sajian sebelah kiri.</li> </ul> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Silakan dibaca juga artikel wacana sajian yang lainnya. Seperti menciptakan <a href=" " title="Cara Membuat Menu Vertical Sederhana">menu dengan gambar disampingnya</a>, <a href=" " title="Cara Membuat Menu Vertical Sederhana">cara menciptakan sajian dropdown di blog</a> atau jikalau masih galau dengan cara menciptakan sajian di blog, silakan baca <a href=" " title="Cara Membuat Menu Vertical Sederhana">cara menciptakan dan mengisi sajian blog</a>. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Itulah sedikit cara desain blog dan tips trik wacana cara menciptakan sajian vertical sederhana di blog. Semoga Bermanfaat.</div> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-4842883122698833032018-02-09T10:48:00.000-08:002018-02-09T10:48:35.995-08:00Tulisan Dengan Warna Yang Berbeda<div style="text-align: justify;"> Tulisan dengan warna yang berbeda. Setiap aksara memiliki warna yang berbeda. Bisa dipakai sebagai goresan pena di <a href=" ">menu blog</a>. Pada ketika goresan pena tersebut di klik, akan terbuka halaman baru.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <div style="text-align: justify;"> <div style="text-align: center;"> <img alt=" Setiap aksara memiliki warna yang berbeda Tulisan Dengan Warna yang Berbeda" border="0" src="https://lh6.googleusercontent.com/-WhER8CVOHPQ/UlFYvkGi7oI/AAAAAAAAA24/yb_55Vr8Las/s201/warna.JPG" title="Tulisan Dengan Warna yang Berbeda" /></div> <br /></div> <div style="text-align: justify;"> Sebagai contoh: aku menciptakan sajian dengan judul Fandra Juani. Setiap aksara memiliki warna yang berbeda-beda. Dan pada ketika diklik akan terbuka halaman ihwal saya. Lihat <u>contoh</u> dibawah ini.</div> <style>#tulisan{background:transparent;height:30px} #tulisan ul li a{font-family:Ravie;text-transform:uppercase;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold} #tulisan ul li{list-style:none}d{font-size:180%;color:DarkCyan}g{color:red}h{color:blue}i{color:#ee3e80}j{color:pink}k{color:black}l{font-size:180%;color:violet}m{color:DarkCyan}n{color:blue}o{color:pink}r{color:red}t{font-size:180%;color:yellow}x{font-size:180%;color:#3af}#tulisan ul li span:hover{background:#3af}#tulisan ul li img{padding:0 10px 0 0;float:left;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}#tulisan ul li img:hover{width:32px; height:32px;-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style> <br /> <div id="tulisan"> <ul> <li style="text-align: left;"><a href="http://pengguna-komputer.blogspot.co.id/p/about-us.html" target="_blank" title="Tulisan Dengan Warna yang Berbeda"><img alt=" Setiap aksara memiliki warna yang berbeda Tulisan Dengan Warna yang Berbeda" height="32" src="https://lh5.googleusercontent.com/-LeOgiup3fqM/Ul7UfgCMxSI/AAAAAAAAA9w/pK-pvuyLHtg/s128/fandra-juani.jpg" title="Tulisan Dengan Warna yang Berbeda" width="32" /><b><d>F</d><g>A</g><h>N</h><i>D</i><j>R</j><k>A</k> <l>J</l><m>U</m><n>A</n><o>N</o><r>I</r></b></a></li> </ul> </div> <br /> <div style="text-align: justify;"> Untuk lebih jelasnya ihwal cara menciptakan goresan pena dengan warna yang berbeda di blog. Ikuti langkah-langkah dibawah ini.</div> <ol> <li style="text-align: justify;">Login ke blogger. Dari halaman dasbor pilih pengaturan tata letak.</li> <li style="text-align: justify;">Lalu, klik tambahkan Gadget. Dan pilih HTML/Javasript.</li> <li style="text-align: justify;">Selanjutnya copi isyarat dibawah ini.</li> <div class="kotak" style="height: 200px; overflow: auto;"> <style><br /> #tentang{background:transparent}<br /> #tentang ul{float:left}<br /> #tentang ul li{float:left;list-style:none}<br /> #tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}<br /> <span style="color: red;">d</span>{font-size:180%;color:DarkCyan}<br /> <span style="color: red;">g</span>{color:red}<br /> <span style="color: red;">h</span>{color:blue}<br /> <span style="color: red;">i</span>{color:#ee3e80}<br /> <span style="color: red;">j</span>{color:pink}<br /> <span style="color: red;">k</span>{color:black}<br /> <span style="color: red;">l</span>{font-size:180%;color:violet}<br /> <span style="color: red;">m</span>{color:DarkCyan}<br /> <span style="color: red;">n</span>{color:blue}<br /> <span style="color: red;">o</span>{color:pink}<br /> <span style="color: red;">r</span>{color:red}<br /> #tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}<br /> </style><br /> <div id='tentang'><br /> <ul><br /> <li><a href='<span style="color: white;"><span style="background-color: black;">http://fandrajuani.blogspot.com/p/blog-page_25.html</span></span>' title='Fandra Juani'><span><d><span style="color: blue;">F</span></d><g><span style="color: blue;">a</span></g><h><span style="color: blue;">n</span></h><i><span style="color: blue;">d</span></i><j><span style="color: blue;">r</span></j><k><span style="color: blue;">a</span></k> <l><span style="color: blue;">J</span></l><m><span style="color: blue;">u</span></m><n><span style="color: blue;">a</span></n><o><span style="color: blue;">n</span></o><r><span style="color: blue;">i</span></r></span></a></li><br /> </ul><br /> </div></div> <li style="text-align: justify;">Dan pastekan di Gadget HTML/Javascript Tadi. Save, kemudian tempatkan gadget kemanapun yang kalian inginkan. Selesai.</li> </ol> <div style="text-align: justify;"> <b><span style="color: #0b5394;">Keterangan Kode Diatas:</span></b></div> <ul> <li style="text-align: justify;"><span style="color: #0b5394;">#tentang ul li span {</span> fungsinya untuk mengatur tebal fon-family dan ukuran aksara yang digunakan.</li> <li style="text-align: justify;"><span style="color: #0b5394;">#tentang ul li span:hover{</span> fungsinya untuk mengatur tebal fon-family dan ukuran aksara pada ketika di sentuh kursor. </li> <li style="text-align: justify;">Kode Merah <span style="color: red;">d</span> hingga <span style="color: red;">r</span>. untuk mengatur warna tiap<sup>2</sup> huruf.</li> <li style="text-align: justify;">Kode Biru ialah kalimat yang akan ditampilkan.</li> <li style="text-align: justify;">Jadi Intinya setiap aksara memiliki isyarat tersendiri. <d></d> untuk <span style="color: blue;">f </span>dan seterusnya. </li> <li style="text-align: justify;"><span style="color: white;"><span style="background-color: black;"><span style="color: black;"><span style="background-color: white;">Terakhir, jangan lupa diganti </span></span> http://fandrajuani.blogspot.com/p/blog-page_25.html</span></span> dengan alamat URL kalian sendiri.</li> </ul> <blockquote class="tr_bq"> Contoh yang aku berikan ini jumlah hurufnya ada 11, jadi ada 11 isyarat tersendiri di setiap hurufnya. Jika jumlah aksara kalian lebih dari 11. Tambahkan isyarat yang lain, contohnya <z></z> ,<t></t>.</blockquote> <div style="text-align: justify;"> Jika aksara yang ingin kalian buat kurang dari 11, silakan dikurangi saja beberapa isyarat diatas. Misal aksara kalian 6, maka gunakan isyarat <b>merah</b> <span style="color: red;">d</span> hingga <span style="color: red;">k</span> saja. Kode <span style="color: red;">l </span>sampai <span style="color: red;">r</span> hapus.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Begitu juga untuk isyarat biru gunakan <d><span style="color: blue;">F</span></d><g><span style="color: blue;">a</span></g><h><span style="color: blue;">n</span></h><i><span style="color: blue;">d</span></i><j><span style="color: blue;">r</span></j><k><span style="color: blue;">a</span></k> saja. Kode <l><span style="color: blue;">J</span></l><m><span style="color: blue;">u</span></m><n><span style="color: blue;">a</span></n><o><span style="color: blue;">n</span></o><r><span style="color: blue;">i</span></r> hapus.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Itulah sedikit cara menciptakan goresan pena dengan warna yang berbeda yang sanggup dipakai di sajian blog. Semoga Bermanfaat.</div> <ul></ul> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-27095195502569176842018-02-08T22:48:00.000-08:002018-02-08T22:48:06.555-08:00Cara Print Banyak Kotak Di Excel<div style="text-align: justify;"> Cara print banyak kotak di excel dalam satu lembar kertas. Standarnya excel hanya sanggup diprint dalam beberapa kotak saja, sesuai dengan lebar dari kotak-kotak tersebut. Perlu pengaturan2 komplemen semoga excel sanggup di print dengan banyak kotak, dari lebar kertas, lebar dan tinggi document, juga bentuk kertas yang akan kita gunakan, apakah itu lanscape yang melebar kesamping atau portrait yang memanjang kebawah.<br /> <br /> Seperti referensi gambar dibawah ini, yang memakai lanscape yang melebar kesamping.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://lh4.googleusercontent.com/-CKtXqhxJleA/UlIx3_jmzTI/AAAAAAAABW0/2gCwEJ4SWPg/s912/Excel.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Cara print banyak kotak di excel dalam satu lembar kertas Cara Print Banyak Kotak di Excel" border="0" src="https://lh4.googleusercontent.com/-CKtXqhxJleA/UlIx3_jmzTI/AAAAAAAABW0/2gCwEJ4SWPg/s912/Excel.JPG" title="Cara Print Banyak Kotak di Excel" /></a></div> <br /> Untuk lebih jelasnya perihal cara print banyak kotak diexcel dalam satu lembar kertas, ikuti langkah<sup>2</sup> dibawah ini.<br /> <ol> <li>Buatlah goresan pena dengan kotak yang banyak, atau buka dokumen anda sendiri.</li> <li>Selanjutnya, klik Page Layout di bab sajian atas.</li> <li>Lalu ganti width dan height menjadi 1 page. menyerupai gambar dibawah ini.</li> <a href="https://lh5.googleusercontent.com/-p5SheQczbN4/UlIyxK9SYfI/AAAAAAAABW8/Y1fQ24-qvG0/s149/m.excel.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt=" Cara print banyak kotak di excel dalam satu lembar kertas Cara Print Banyak Kotak di Excel" border="0" src="https://lh5.googleusercontent.com/-p5SheQczbN4/UlIyxK9SYfI/AAAAAAAABW8/Y1fQ24-qvG0/s149/m.excel.JPG" title="Cara Print Banyak Kotak di Excel" /></a> <li>Selanjutnya print, selesai.</li> </ol> Dari pengaturan diatas, maka berapa banyak pun kotak diexcel akan di print dalam satu lembar kertas.<br /> Adapun Hal<sup>2</sup> lain yang harus diperhatikan, untuk print banyak kotak dalam satu lembar.<br /> <ul> <li>Karena memakai banyak kotak kesamping, maka aturlah kertas dalam bentuk Landscape. Caranya klik page layout > Orientation > Landscape.</li> <li>Mengatur Margin kiri-kanan-atas-bawah kertas. Klik Page layout > Margin > dan pilih margin yang kalian inginkan.</li> <li>Dan yang terakhir mengatur ukuran kertas yang digunakan. Caranya, klik Print > Properties > Printer Paper Size > kemudian pilih dengan ukuran kertas yang digunakan(contoh:A4).</li> </ul> Selesai sudah perihal cara print banyak kotak dalam satu lembar kertas di excel. Jika ada yang ditanyakan silakan masukan komentar dibawah. Semoga bermanfaat.<br /> <ol> </ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-88016800692804218942018-02-08T10:48:00.000-08:002018-02-08T10:48:06.645-08:00Cara Buat Header Dan Tabs Tanpa Jarak<div style="text-align: justify;"> Cara menciptakan header dan tabs penuh full body, tanpa ada jarak pemisah antara kiri dan kanan blog. Dibeberapa template header dan juga tabs blog tidak menampilkan background secara penuh, ada jarak kosong diantara kiri dan kanannya. Namun ada juga template yang menampilkan header dan tabs secara penuh tanpa ada jarak.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <div style="text-align: center;"> <img alt=" Cara menciptakan header dan tabs penuh full body Cara Buat Header Dan Tabs Tanpa Jarak" border="0" height="78" src="http://lh6.googleusercontent.com/-bF8yrPhjTfg/UlRG6XJoTAI/AAAAAAAAA3Y/HILmzVM7NR4/s794/tabs.JPG" title="Cara Buat Header Dan Tabs Tanpa Jarak" width="320" /></div> <br /> Cara mengubah header atau tabs blog menjadi penuh tanpa batas, Ikuti langkah-langkah dibawah ini. <br /> <h2 style="text-align: center;"> Cara Membuat Header Penuh</h2> <ol> <li>Login ke blogger. Lalu pada halaman awal dasbor. Pilih pengaturan <b>Tata Letak</b>.</li> <li>Selanjutnya Klik Desainer Template > Tingkat Lanjut > Dan Klik Tambahkan CSS.</li> <li>Dan Masukan isyarat dibawah ini.</li> <div class="kotak"> #header {background:black;margin:0px -235px 0px -235px;padding:0px 0px 0px 240px;overflow:hidden;}</div> <li>Setelah itu lihat dulu perubahan dari warna background blog kamu. Jika sudah pas memenuhi semua body, gres klik Terapkan ke Blog.</li> <li>Jika belum, tambahkan nilai pada isyarat <span style="color: #0b5394;">margin:0px -235px 0px -235px;</span> Contoh:<span style="color: #0b5394;">-245</span>. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada isyarat marginnya.</li> <li>Keterangan isyarat <span style="color: #0b5394;">margin:0px </span>(Atas) <span style="color: #0b5394;">-235px</span>(kanan) <span style="color: #0b5394;">0px</span>(bawah) <span style="color: #0b5394;">-235</span> (kiri). </li> <li>Untuk isyarat padding sama halnya ibarat margin. Tapi padding dipakai untuk merubah posisi bab dalam, jadi tulisannya sanggup kita tempatkan ditengah. Sedangkan margin untuk bab luar.</li> <li>overflow:hidden; isyarat ini gunanya semoga tampilan header tidak melebihi halaman blog. </li> <li>Setelah semuanya sudah sesuai dengan yang kalian inginkan, Klik Terapkan Blog. Selesai.</li> </ol> <ol></ol> <h2 style="text-align: center;"> Cara Membuat Tabs Penuh</h2> <ol> <li>Sama ibarat cara menciptakan header penuh. yang berbeda hanya isyarat yang harus dimasukan. Kodenya dibawah ini.</li> <div class="kotak"> .tabs-inner .widget ul {margin:0px -265px 0px -265px;padding:0px 0px 0px 240px;overflow:hidden;}</div> <li>Perbedaannya dengan isyarat header. Kita sanggup mengatur warna background tabs dibawah header pribadi dari Desainer Template > Tingkat Lanjut > Latar Tab.</li> <li>Jangan lupa diatur juga isyarat margin dan paddingnya semoga sesuai dengan keinginan. Selesai. </li> </ol> Semoga sanggup bermanfaat untuk anda. <br /> <ol></ol> <ol></ol>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-28849078074089748372018-02-07T22:48:00.000-08:002018-02-07T22:48:16.293-08:00Gambar Dengan Background Transparan<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: url("https://lh5.googleusercontent.com/-4AA-5X155MA/Ul9dF28GLAI/AAAAAAAAA_g/-gYgeGbJCuA/s300/Fandra-Juani.jpg") no-repeat right bottom;"> <div style="text-align: justify;"> Cara menciptakan gambar dengan background transparan memakai photoshop, yang berkhasiat untuk pembuatan icon dan juga penggunaan gambar di halaman blog. Agar gambar yang akan kita gunakan diblog, tetap transaparan, maka format gambar, harus diubah menjadi PNG, sebab bila kita memakai JPG maka background gambar akan menjadi putih. Walaupun gambar sudah kita edit dengan background transparan di photoshop.<br /> <a href="https://www.blogger.com/null" name="more"></a></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Untuk lebih jelasnya wacana cara menciptakan gambar dengan background transparan, silakan ikuti langkah-langkah dibawah ini.</div> <div style="text-align: justify;"> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="176" src="https://lh5.googleusercontent.com/-dNUcpqH6pjw/UliASPj0SFI/AAAAAAAAA5Y/ydEoq5XKB7A/s275/gambar.JPG" title="Gambar Dengan Background Transparan" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar.1. Backround Transparan</a></td></tr> </tbody></table> <div style="text-align: justify;"> <br /> <br /> <br /> 1. Bukalah gambar yang akan diedit backgroundnya. Klik <b>Magic Wand Tool</b>, untuk menyeleksi background yang akan dihapus.</div> <div style="text-align: justify;"> Contoh: Gambar dalam format JPG. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <div class="separator" style="clear: both; text-align: justify;"> </div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="159" src="https://lh5.googleusercontent.com/-JcdKUKMXWlg/UliIncy_PSI/AAAAAAAAA6Q/zrh7ZE6d1Zs/s565/h.JPG" title="Gambar Dengan Background Transparan" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar 2. kiri(cara dupliacte layer) dan kanan (duplicate gambar)</a></td></tr> </tbody></table> <div style="text-align: left;"> </div> <div style="text-align: justify;"> 2. Selanjutnya, buat duplicate gambar. Klik Background, kemudian klik kanan, pilih <b>Duplicate Layer</b>.<br /> <br /></div> <div style="text-align: justify;"> 3. Maka tampilannya layernya akan menjadi menyerupai gambar disamping.</div> <ul> <li>Bakcground(gambar asli). </li> <li>Background Copy(duplicate gambar). </li> </ul> <div style="text-align: justify;"> <br /> 4. Sekarang Klik <b>Background</b>, dan klik <b>delete</b> pada belahan bawah yang diberi <span style="color: red;"><b>tanda lingkaran merah</b></span>.</div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <div class="separator" style="clear: both; text-align: justify;"> </div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="200" src="https://lh6.googleusercontent.com/-BkuDMO_uIZs/UliATKqlCRI/AAAAAAAAA5w/ERudO7xoCuU/s255/u.JPG" title="Gambar Dengan Background Transparan" width="170" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar 3. Background Copy yang tersisa</a></td></tr> </tbody></table> <div style="text-align: justify;"> <br /> <br /> <br /> <br /> 5. Setelah di delete, maka yang tersisa ialah Background Copy saja, menyerupai gambar disamping.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="200" src="https://lh4.googleusercontent.com/-H-97lUlXCjc/UliATuh9VdI/AAAAAAAAA5s/earv9OtemYU/s234/y.JPG" title="Gambar Dengan Background Transparan" width="176" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar. 4. delete background gambar</a></td></tr> </tbody></table> <div style="text-align: justify;"> <br /> <br /> 6. Setelah itu pribadi ke gambar, delete backgroundnya. Dan save, dalam format <b>PNG</b>. Selesai.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Dengan men-save gambar ke PNG, background gambar tetap akan transparant, berbeda bila disave dalam format JPG, maka background gambar akan menjadi putih. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <div style="text-align: justify;"> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="100" src="https://lh3.googleusercontent.com/-vIDAbEJNalU/UliATUeli5I/AAAAAAAAA5k/ekTV01hO1tQ/s200/wwwq.png" title="Gambar Dengan Background Transparan" width="100" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar.5. Cotoh gambar</a></td></tr> </tbody></table> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Hasil gambar dengan background Transparant.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <div style="text-align: justify;"> <br /></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href=" " style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt=" Cara menciptakan gambar dengan background transparan memakai photoshop Gambar Dengan Background Transparan" border="0" height="67" src="https://lh6.googleusercontent.com/-r7nGTyNj3JE/UliC9acEtqI/AAAAAAAAA6A/SS6n_rKBXjk/s348/a.JPG" title="Gambar Dengan Background Transparan" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href=" ">Gambar.6. Contoh penggunaan gambar transparant di blog.</a></td></tr> </tbody></table> <div style="text-align: justify;"> Atau yang satu ini, teladan penggunaan gambar dengan background tranparant yang aku gunakan di blog.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Gambar ini letaknya pada belahan header, dan header aku beri warna background biru, sehingga background gambar juga berwarna biru, berbeda bila gambar disave dalam format JPG, backgorundnya gambarnya akan putih, jadi tidak sesuai dengan warna header yang aku gunakan.</div> <div style="text-align: justify;"> <br /></div> <hr style="margin-left: 0px; margin-right: 0px;" /> <div style="text-align: justify;"> Itulah sedikit tips dan trik wacana menciptakan gambar dengan background transparan, sanggup kita gunakan juga untuk pembuatan icon di blog dengan background transaparant.<br /> <br /> <br /> Semoga artikel diatas sanggup bermanfaat untuk anda. </div> </div> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0tag:blogger.com,1999:blog-8790870447969020911.post-66724663889994674642018-02-07T10:48:00.000-08:002018-02-07T10:48:38.683-08:00Cara Menciptakan Background Di Halaman Posting<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: url("https://lh4.googleusercontent.com/-4AA-5X155MA/Ul9dF28GLAI/AAAAAAAAA_g/-gYgeGbJCuA/w300-h50-no/Fandra-Juani.jpg") no-repeat bottom right;"> <div style="text-align: justify;"> Cara menciptakan atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background dapat kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya aku sudah menciptakan artikel wacana <a href=" ">cara menciptakan background berbeda dihalaman berbeda</a>, yakni dengan cara memasukan background menurut URL halaman.</div> <div style="text-align: justify;"> <a href="https://www.blogger.com/null" name="more"></a><br /> Dan kali ini background di halaman posting, pribadi dari artikelnya. Makara kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian selesai artikel ini. Atau lihat halaman <a href="http://pengguna-komputer.blogspot.co.id/p/var-servicedomainwww.html" target="_blank">profil</a> dan halaman <a href="http://fandrajuani.blogspot.com/p/hubungi.html" target="_blank">Contact</a> di blog ini.</div> <br /> Langsung saja, cara menciptakan background disetiap postingan blog, ikuti langkah-langkah dibawah ini.<br /> <ol> <li>Login ke blogger, kemudian buatlah entri baru. Atau edit artikel yang lama.</li> <li>Selanjutnya copy arahan dibawah ini. </li> <div class="kotak"> <div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div style="background: url(&quot;<span style="color: #0b5394;">http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png</span>&quot;) no-repeat right bottom;"></div> <li>Dan pastekan di awal goresan pena blog, pada bab HTML. Contoh Gambar.</li> <img alt=" Cara menciptakan atau memasukan gambar yang akan dijadikan background dihalaman posting blog Cara Membuat Background di Halaman Posting" border="0" height="117" src="https://lh3.googleusercontent.com/-7bo2elccEBM/Ul9dGDgPBRI/AAAAAAAAA_k/DvM6fLxthQc/s640/background%20posting.JPG" title="Cara Membuat Background di Halaman Posting" width="640" /> <li>Setelah itu masukan arahan </div> diakhirtulisan blog, masih pada bab HTML.</li> <li>Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.</li> <li>Jika sudah gres publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.</li> </ol> <span style="color: #0b5394;"><b>Keterangan Kode langkah 2:</b></span><br /> <ul> <li> <span style="color: red;"><span style="color: #0b5394;">http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png</span> <span style="color: black;">ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.</span></span></li> <li><span style="color: #0b5394;"> </span><span style="color: red;"><span style="color: black;"><span style="color: #0b5394;">no-repeat</span> berfungsi semoga background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;</span></span></li> <li><span style="color: #0b5394;">right bottom</span> ini posisi background, dapat diganti dengan.</li> <div class="kotak" style="height: 80px; overflow: auto;"> left top<br /> left center<br /> left bottom<br /> center top<br /> center center<br /> center bottom<br /> right top<br /> right center<br /> right bottom</div> </ul> <div style="text-align: justify;"> Jika belum tau cara menciptakan dan mengambil URL gambar sendiri, kau dapat baca di cara <a href=" ">cara upload dan ambil url gambar</a>. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini aku letakan dibagian paling bawah, yakni dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.</div> <div style="text-align: justify;"> Kalian dapat gunakan background dengan warna yang gelap, semoga goresan pena artikel dapat terlihat.</div> <br /> pola background dengan gambar.<span style="background-color: white;"><span style="color: white;"><span style="background-color: black;"> Tulisan ini sengaja aku blog, karenga tidak terlihat.</span></span> </span> Semoga Bermanfaat.</div> </div>Anihttp://www.blogger.com/profile/18141173116750705627noreply@blogger.com0