Postingan

Menampilkan postingan dengan label Tutorial And Tips

Merubah Judul Blog Dan Judul Posting

Gambar
Kali ini saya coba memberikan sebuah tips sederhana untuk blogger. Yaitu bagaimana cara meletakan atau merubah posisi nama blog dan judul posting yang berada di addres bar link yang aktif. Maksudnya yaitu ketika anda mengklik postingan anda, di adress bar link yang aktif akan muncul nama blog anda di susul dengan judul postingan. Tips ini yaitu merubah posisi tersebut menjadi judul posting di awal dan nama blog anda di belakang, jika anda pengguna blog Wordpress mungkin sudah secara otomatis judul posting di awal dan nama blognya di belakang, tapi kalau untuk blogger kita harus membuatnya secara manual. kalau masih bingung coba lihat gambar di bawah ini : Gimana sudah paham...Kalau sudah silahkan ikuti caranya dibawah ini. Pertama anda masuk ke blog anda. Pilih Tata Letak Dan Pilih Edit HTML Selanjutnya cari kode di bawah ini : <title><data:blog.title/></title> Tepatnya di bagian atas jadi jangan jauh jauh nyari ke bawah. Setelah itu Delete dan ganti kode di atas den

Script Anti Iframe

Gambar
Dulu, kang Rohman pernah menulis tentang Iframe pada artikel Mengenal perintah IFRAME, dengan iframe kita bisa menampilkan isi dari website yang lain didalam website atau blog milik kita. Ini tentunya bisa menguntungkan bagi yang memasang iframe, namun sebaliknya bagi pemilik website yang dipasang iframe sangat merugikan karena tidak mendapatkan jumlah kunjungan yang sebenarnya dan dapat mengambil jatah bandwidth website tersebut ( apabila hosting sendiri). Untuk yang blognya di host di blogger tentu tidak ada masalah karena bandwidth blogger boleh di katakan tidak terbatas, namun bagi yang sewa hosting sendiri ini sangatlah merugikan. Walaupun demikian untuk pengguna blogger juga dirasa sedikit kurang menguntungkan karena mendapatkan sebuah kunjungan palsu. Bagaimana cara untuk menghindari agar orang lain tidak bisa memasang iframe untuk blog kita? caranya sangat mudah, dengan hanya memasang sebuah script sederhana, anda dapat menghindari pencurian dari kode iframe. Langkah sederhana

Jangan Matikan Ide Kreatifitas Anda hanya Untuk Sebuah Posting

Gambar
Sebuah ide atau kreatifitas mungkin sulit di dapat untuk sebagian orang. Tapi banyak pula orang yang mudah atau cepat untuk mendapatkan ide atau kreatifitas,mungkin salah satunya saat anda atau saya membuat sebuah artikel atau postingan untuk di blog. Tentunya sebuah ide dan kreatifitas di perlukan untuk membuat sebuah artikel atau postingan supaya bisa menarik para pembaca atau pengunjung blog anda. Saya bukan seorang penulis yang handal,bukan pula orang yang pandai merangkai kata kata ,tapi bukan berarti saya ataupun anda tidak bisa membuat sebuah tulisan, artikel atau postingan yang menarik, mungkin karena saya ataupun anda masih dalam proses pembelajaran untuk mampu menulis sebuah artikel yang menarik. Tidak ada tulisan atau artikel yang jelek tapi kalau tidak menarik itu sudah pasti jelek...! tapi minimal kita sudah berusaha membuat sebuah artikel yang menarik, mungkin buat saya ini artikel terbaik saya tapi bisa jadi untuk anda ini merupakan artikel yang paling jelek yang pernah

Modifikasi Vertical Menu Dengan Ronded Corner

Gambar
Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner , Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini . Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini. seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja : 1. Masuk ke Blog anda. 2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman. 3. Tambah Gadget - Lalu pilih HTML/JavaScript. 4. Masukan Kode HTML di bawah ini : <style type="text/css"> /* vertikal vertikal merah di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-merah{ border-bottom-width: 0; } #vertikal-me

Jelajahi Profil Para Blogger

Gambar
Mengetahui profil para Blogger mungkin akan memberikan keuntungan untuk Saya bahkan buat anda. Tidak hanya bisa mengetahui blog tersebut mempunyai trafic yang tinggi bahkan kita juga bisa melihat Blogger Blogger yang sehaluan dengan blog kita. jadi kita bisa saling bertukar informasi atau menambah informasi. Bahkan kita juga bisa mengetahui Blogger Blogger yang ada di sekitar kita,tetangga kita ataupun teman kita baik dalam satu kota, propinsi, maupun Negara. Tapi bagaimana caranya supaya kita bisa menemukan para blogger lain ? Kali ini saya akan memberikan tips bagaimana caranya supaya kita bisa menjelajahi atau mengetahui profil dari para blogger lain. Silahkan anda cari para blogger dengan memasukan alamt alamat di bawah ini pada adress bar browser anda : Ini untuk mengetahui blogger seluruh dunia yang sehaluan dengan blog anda atau dengan Hobi anda : http://www.blogger.com/profile-find.g?t=i&q= desain+grafis Ini untuk mengetahui Blogger Dari Indonesia : http://www.blog

Google Translate Dengan Navbar Untuk Blogger

Gambar
Kali ini saya akan memberi informasi cara memasang Google translate bahasa dengan menggunakan Navbar yang terletak pada bagian atas. Sebagai contoh bisa dilihat gambar di atas, ataupun pada blogger blogger lain yang menggunakan translator bahasa model Navbar seperti ini. Jika anda tertarik untuk memasangnya silahkan ikuti caranya di bawah ini. Untuk memasang Google Translate Model Navbar ini cukup simple, anda hanya memasang Script yang ada di bawah ini,atau klik disini untuk mengambil dari Om Google. Setelah itu anda tinggal meletakannya pada bagian widget blog anda jadi tidak perlu memasukannya di bagian Edit HTML. Dan secara otomatis akan langsung muncul pada bagian Atas seperti Navbar Blogger. Silahkan Copy Paste Script Google Translator bahasa dengan Navbar di bawah ini dan pasang pada widget anda. Anda bisa menaruhnya pada bagian sidebar, footer maupun header. <div id="google_translate_element"></div><script> function googleTranslateElementIni

Menghilangkan Jejak Link Yang Di Klik

Gambar
Tips kali ini saya akan membahas bagaimana cara menghilangkan jejak link atau image yang telah kita klick. Mungkin banyak orang yang kurang memperhatikan bekas link yang telah di klik biasanya ada seperti border dotted atau titik titik kecil di sekitar link, contohnya seperti gambar di bawah ini : Jejak seperti ini memang tidak menggangu si, tapi buat sebagian orang yang mencintai keindahan pada blog-ya atau website-y ini tentu sangat membantu supaya tampilan nya terlihat lebih Profesional. Untuk menghilangkan jejak link ini yang kita klik caranya cukup mudah anda tinggal menambahkan kode di bawah ini di blog anda. Langsung saja : 1. Masuk ke Blog Anda 2. pilih Tata Letak - Element Halaman - dan Edit HTML 3. Cari Kode ini di bawah. ]]></b:skin> Lalu Tambahkan kode di bawah ini di atas kode ]]></b:skin> a:active { outline: none; } a:focus { -moz-outline-style: none;} 4. Simpan . Sekarang silahkan coba klik link yang ada di blog anda apakah jejaknya masih ada atau su

Teks Area Dengan Ronded Corner

Gambar
Mungkin anda pernah membuat background untuk teks area, dengan menggunakan background kotak saja,sekarang anda bisa mencoba membuat variasi lain untuk background teks area dengan menggunakan Ronded Corner. Jika sebelumnya teks area anda berujung tajam atau lancip, dengan ronded corner maka kita bisa merubah bagian bagian sudut tersebut menjadi melengkung. Masukan Kode HTML di bawah ini di bagian teks area yang anda inginkan, Jika anda ingin memasangnya di postingan seperti ini anda tinggal masuk ke Posting , Entri Baru dan pilih Edit HTML dan masukan kode di bawah ini untuk teks area anda. <div style="border: 1px solid #666; padding: 20px; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; text-align: justify;">

Artikle Terkait Dengan Scroll Banyak Diminati

Gambar
Setelah sebelumnya saya membuat postingan tentang artikle terkait atau related post, ada teman blogger yang menanyakan cara membuat postingan terkait tersebut dengan menggunakan scroll, katanya kalau yang biasa saja kurang enak di pandang terlalu panjang...bisa aja si bozzzz.! Sebenarnya untuk membuat postingan terkait dengan scroll anda cukup menambahkan beberapa code saja di Bagian CSS. Tapi jika anda kesiltan untuk editnya mendingan di hapus dulu kode Postingan terkaitnya yang dulu dan ganti dengan kode ini, kalau yang belum pasang langsung aja ikuti caranya seperti ini. Silahkan Ikuti caranya seperti di bawah ini : 1. masuk ke blogger 2. Pilih Tata letak 3. Edit HTML 4. Beri centang pada "Expand Widgets Template" Cari Kode HTML seperti ini <data:post.body/> Masukan kode di bawah ini , di bawah Kode di atas. <b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <br/> <H2>Artikel Terkait:</H2> <div class='rb

Menu Link Vertical Dengan Hover Backgroun

Gambar
Menu vertical ini biasanya di gunakan atau di tempatkan pada bagian sidebar. Mungkin untuk menu link vertical ini biasanya tidak menggunakan background hanya menggunakan teks tanpa backround paling untuk hover menggunakan perubahan warna saja pada teks tanpa menggunakan background. Disini saya coba membuat Menu Link Vertikal dengan menggunakan Hover background . Maksudnya yaitu ketika mouse menyentuh link tersebut maka background akan muncul atau berganti warna. Link hover seperti ini juga biasanya di gunakan untuk link Horizontal yang biasa di letakan di bagian atas blog atau di bawah header. Kelebihan dari kode HTML di bawah ini bisa di pasang langsung pada widget template tanpa membuka edit HTML. Jadi kita bisa memodifikasi setiap Widget link yang ada di sidebar menjadi berbeda beda. Langsung saja Ikuti caranya seperti di bawah ini : Yang pertamaMasuk Ke Blogger Pilih Tata Letak Pilih Elemen Halaman dan Klik Tambah Gadget Pilih HTML/JavaScript Masukan Kode di bawah ini. <sty

Menghilangkan Garis Pinggir Iklan Kumpul Blogger Di Blog

Gambar
Kumpul blogger merupakan PPC lokal yang terbukti membayar setiap membernya dengan rata rat Rp 200 rupiah per klik untuk iklan teks dan Rp 300 rupiah untuk iklan mini baner, Tapi sangat disayangkan iklan teks dari Kumpul Blogger ini kurang sedap dipandang menurut saya. Apalagi dengan adanya garis pinggir berwarna hitam yang kadang kala kurang matc dengan tampilan blog. Jadi disini saya coba untuk memberikan tips cara menghilangkan garis pinggir / aoutline iklan dari kumpul blogger. Silahkan anda ikuti caranya di bawah ini : Masuk Ke blog Anda. Pilih Tata Letak . lanjutkan Dengan Edit HTML . Cari Kode Seperti ini: <b:skin><![CDATA[/* Tepatnya di bagian paling atas . Ganti Kode di atas dengan Kode Di bawah ini : <b:skin><![CDATA[.garping,.garpinghor { border: none !important; } .garping table,.garpinghor table { border:#FFFFFF solid 1px !important; background-color:#FFFFFF !important; } .garping td,.garpinghor td{ color:#000000 !important; background-color:#FFFFFF !i

Membuat Menu Link Horizontal Langsung di Widget

postingan ini saya buat sebagai pilihan untuk posting sebelumnya yaitu membuat menu horizontal yang simple , berhubung ada teman yang koment Katanya kurang paham dengan postingan tersebut, jadi Saya membuat postingan mengenai cara membuat menu horizontal yang lebih mudah yang diletakan langsung pada widget, jadi kita tidak perlu membuka edit HTML. Mudah mudahan bisa dimengerti. Cara ini Sangat mudah sekali karena ini cuma menambah Kode HTML yang ada di bawah ini ke dalam Gadget + HTML/Javascript . Silahkan Ikuti caranya di bawah ini. Pertama Buka blog Blogger Kedua Pilih Tata Letak + Elemen Laman + Tambah Gadget + Pilih HTML/JavaScript Lalu Masukan Kode Di bawah ini : <style type="text/css"> ul.menu { margin:0px; padding:0px; } ul.menu li { list-style:none; float:left; width:100px; text-align:center; font:11px/25px verdana,arial,sans-serif; height:auto !important; height:25px; } ul.menu li a { display:block; text-decoration:none; background:#EFEFEF; color:#000000; }

Artikle Terkait Di Bawah Posting Blogger

Langsung saja ga pake basa basi. Cara membuat Artikle terkait , Related Post , Atau Apa pun tu namanya yang jelas menampilkan Judul judul dari Postingan yang di tempatkan setelah postingan atau di bawah postingan.....! Silahkan Ikuti caranya dibawah ini. 1. Pertama Masuk ke Blogger. 2. Pilih Tata letak 3. Edit HTML 4. Beri centang pada "Expand Widgets Template" Cari Kode HTML seperti ini <data:post.body/> Masukan kode di bawah ini ,di bawah Kode di atas. <b:if cond='data:blog.pageType == "item"'> <div class='similiar'> <div class='widget-content'> <h3> Artikle terkait untuk dibaca </h3> <div id='data2007'/><br/><br/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul

Membuat Menu Horizontal Yang Simple Dan Cantik

Gambar
Ada beberapa macam menu link horizontal yang biasa di pakai untuk sebuah blog ataupun website, dari yang menggunakan warna dasar sampai dengan menggunakan image, tapi toh fungsinya tetap sama yaitu menuju link yang diinginkan. Untuk membuat sebuah menu atau link yang horizontal tidaklah sulit. Disini saya coba untuk membuat menu link horizontal yang sederhana tatapi akan terlihat cantik. Silahkan ikuti langkah - langkahnya berikut ini : Masuk pada Tata Letak dan Edit HTML Masukan kode di bawah ini diatas kode ]]></b:skin> ********************************************************* /* horizontal solid menu di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ .menu-solid{ margin: 0; padding: 0; float: left; font: bold 12px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: #000 ; } .menu-solid { display: inline; } .menu-solid a{ float: left; color: white; padding: 9px 11px; text-decoration: no

Blog Idaman Blogger

Gambar
Setiap Blogger yang baru membuat blog ataupun yang udah lama bergelut di dunia blogger, tentunya menginginkan blognya bisa menjadi idaman ataupun favorite buat blogger itu sendiri ataupun blogger lain. Makanya tidak salah kalau para blogger berlomba lomba memperbanyak isi postingan dan juga mempercantik tampilan template blog itu sendiri. Tidak terkecuali dengan Blog yang sedang anda lihat ini......!!! Kalau Boleh jujur mungkin ini salah satu cara untuk mengatasi kejenuhan atau kebosanan dalam ngeblog buat saya tentunya, Bagaimana dengan anda ? Mungkin Bagi yang sering berkunjung ke blog ini slalu melihat tampilan dari blog sering berganti - ganti...!!! jadi malu, bahkan ada teman saya yang mengatakan kalau saya seperti penjahat template heheee yang sering gonta ganti template. Sebenarnya saya juga tidak menginginkan tidak terlalu sering mengganti template di blog ini, tetapi ada 2 alasan yang menjadi pertimbangan yang mungkin orang lain tidak tahu. yaitu : Saya menginkan tampilan blo

Pasang Ikon Pada Judul Posting Dan Sidebar

Untuk Memasang image,ikon atau gambar di judul postinga dan di judul sidebar template anda, caranya cukup mudah anda tinggal menambahkan image yang telah anda simpan di tempat upload gambar pada bagian .post h3 { untuk Judul posting, dan h2 { untuk judul di sidebar. dan mengatur jarak antara padding dan margin saja. untuk lebih jelasnya silahkan ikuti caranya di bawah ini. Menambah image sebelah kiri judul Posting : Cari kode seperti dibawah ini: .post h3 { margin:.5em 0; padding:0px 0px 0px 10px; font-size:140%; font-weight:bold; font-style:italic; line-height:1.3em; color:#333; Untuk lebih cepat silahkan anda Ganti kode tersebut dengan kode di bawah ini : .post h3 { background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFL14uF44NwVKc7xZ1aDGmphA75I9Fz1WE0QbUryD2Q-ckVgBb-4SlUhizWcJyOPe7EVmA2mLKtYHYnaZElWFcsMmJW6FvaF5NK2u3E0OesDkAoNZ2vzHX2AnTyKdDTN0LOgbfqVjzdg/ ') no-repeat; margin:.5em 0; padding:0px 0px 05px 30px; font-size:140%; font-weight:bold;

Translator Bahasa Dengan Logo Bendera

Cara memasang translator bahasa dengan logo bendera ,Buat teman-teman blogger yang blog-nya banyak dikunjungi atu banyak tamu yang datang dari dalam maupun dari luar negri tentunya memasang translator bahasa sangat diperlukan untuk memberikan pelayanan kepada para visitor atau para pengunjung. untuk bisa membaca isi dari blog blogger. apalagi dengan menggunakan logo bendera akan lebih memperindah dari tampilan blog blogger. Di bawah ini ada beberapa script untuk membuat translator dengan menggunakan bendera walaupun tidak semua negara, tapi mudah mudahan bisa mewakili untuk semua. silahkan copy paste script di bawah ini dan masukan di sidebar atau di atas postingan gimana bagusnya aja menurut blogger. Bendera English Bahasa English <a href="http://translate.google.com/translate?hl=id&sl=auto&tl=en&u=http:// link-kamu /"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQYWOxcbGEmCy8X3to8OEVo-jLopL3HduIAKTb0Oo64VgHDIqIpiauEZZF

Memasang Keyword Blogger

Dulu memasang keyword atau Meta tag di blogger atau blogspot mungkin sangat penting bagi blogger-bloger baru yang umur blognya masih bulanan, tapi blogger-blogger lama pun malah lebih memaksimalkan keyword atau kata kunci di blognya berarti sangat penting sekali pemasangan sebuah keyword untuk mengoptimalkan blog tersebut. seberapa pentingkah sebuah keyword atau kata kunci untuk sebuah blog? Jawabnya pasti penting banget alasanya hampir sama yaitu untuk lebih cepat terindext atau mendapat urutan no 1 di Google mendapatkan pengunjung lebih ramai datang di blog kita. waktu pertama bikin blog ini gw juga memasang keyword di blog, tapi ternyata tidak secepat itu bisa terindext oleh Google. tapi alhamdulilah sekarang sih udah ada di urutan no 1 waktu nulis postingan ini, lihat disini Buat teman blogger yang ingin mencoba memasukan atau memasang keyword anda bisa mencoba menggunakan keyword di bawah. 1. Langkah pertama Buka blogger. Klik Layout -> Edit HTML 2. Letakkan script meta t

Cara Membuat Auto ReadMore

Setelah putar - puter sana sini , searching di blog-y para master seperti blog-ya kang Rohman dan yang laenyanyari cara membuat pasang auto readmore pada postingan , tapi semuanya masih pake auto readmore versi lama....! eeeeee.... akhirnya dapat juga di blog bang O-Om yang memposting tentang Cara membuat auto readmore yang gw cari-cari. Disini saya mw sharing buat teman teman blogger yang lagi nyari tips untuk membuat auto readmore . Dengan Auto read more ini kita tidak perlu memotong artikelnya karena dengan auto readmore ini akan secara otomatis memotong sendiri artiklel tersebut. Cara ini di ambil dari postingannya bang o-Om . Cuma ada kekurangannya menggunakan auto readmore ini yaitu dari masalah menampilkan image thumbnailnya pada postingan, jadi diusahakan kalau mau memasukan image ke dalam postingan pastikan ukurannya sama untuk setiap postingan, supaya tidak terjadi perubahan image thumbnailnya pada awal auto readmore di posting. Gimana kalau langsung aja pada proses

Cara Membuat Teks Berjalan (Marque)

Kali ini saya akan meberikan sebuah Tips yaitu membuat teks bergerak atau berjalan tanpa menggunakan sofwer animasi seperti flash ataupun yang lainnya, melainkan dengan menggunakan efek Marque Atau kode HTML yang mengatur pergerakan teks tersebut tersebut. Saya akan memberikan beberapa contoh efek marque yang biasa digunakan, dan saya juga menggunakan efek marque tersebut di bawah header blog ini. Contoh efek marque dengan teks bergerak dari kiri kekanan : <MARQUEE align="center" direction="right" height="100" scrollamount="2" width="100%"> tuliskan teks atau link kamu disini </MARQUEE> Hasilnya seperti ini : tulis teks atau link kamu disini Contoh efek marqu dengan teks bolak-balik ditambah dengan menggunakan bacground : <div align="left">&ltFONT FACE="georgia" color="black"><B><MARQUEE BGCOLOR="yellow" width="100%" scrollamount="3" beh