Cara Memasang Flag Counter di Blogspot

Cara Memasang Flag Counter di Blog Blogspot - Berapa jumlah pengunjung blog sobat?? Bagi sobat blogger yang belum tahu saya sarankan untuk memasang widget ini. Namanya Flag Counter. Flag counter adalah visitor count yang menampilkan jumlah pengunjung blog dengan ciri khas menampilkan bendera negara setiap pengunjung. Contoh bisa sobat lihat di sidebar blog ini.
Setelah sebelumnya posting cara membuat banner untuk link exchange kali ini saya akan share cara memasang widget flag counter di blog sobat. Sobat yang penasaran dan tertarik silahkan ikuti tutorial berikut.

1. Sobat kunjungi situs http://flagcounter.com 
Sobat akan melihat tampilan seperti berikut.

2. Seperti pada gambar, di situ sobat bisa mengatur tampilan dari flag counter tersebut sesuka hati.
Berikut beberapa menu editnya..

• Top Countries : menampilkan jumlah pengunjung tiap negara dengan bendera negara asal pengunjung
• Flag Map : menamplkan pengunjung dalam bentuk map aatau peta dunia seperti gambar berikut.

• Mini Counter : menampilan counter dalam bentuk mini berupa pagaview blog.
• Maximum Flag to Show : Jumlah bendera yang akan di tampilkan
• Column of Flags : Jumlah kolom untuk counter
• Label on Top of Counter : Nam dari counternya. bisa di ganti sesuai keinginan.
• Background Color : Warna latar belakang
• Text Color : warna teks
• Border color : Warna garis tepi
• Show Country Codes : Menampilkan kode setiap negara, misalnya amerika dengan kode US.
• Show Pageview Count : Menampilkan jumlah pageview atau jumlah penelusuran halaman di satu blog
• Show Number of Flags : Menampilkan seluruh jumlah bendera asal pengunjung

3. Setelah selesai ngeditnya, klik tulisan GET YOUR FLAG COUNTER. Kemudian sobat akan melihat tampilan seperti berikut.

4. Klik Skip, ambil kodenya, kemudian pasang ke HTML/Javascript blog sobat.

Cara Pemasangan :
Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kode kedalam kotak yang di sediakan kemudian klik save.

Read More

RAM DDR 4 GENERASI TERBARU 2015

Dalam Komputer kita sudah sangat tidak asing dengan salah satu bagian komputer ini yaitu Memory. Yang sebagai media penyimpan dan komponen yang sangat vital dalam performance sebuah komputer.

Sampai saat ini ada tiga jenis DDR RAM yaitu DDR (atau biasa juga disebut DDR1), DDR2 dan DDR3. Lalu apa perbedaan antara DDR, DDR2 dan DDR3?

Mari kita lihat perbedaan ketiga DDR RAM tersebut.

DDR

DDR (double data rate) RAM generasi 1 merupakan memori yang mulai menggunakan teknologi double clock cycle. Ini berbeda dengan SDR (single data rate) RAM yang hanya mampu melakukan single clock cycle. Sehingga DDR RAM mampu mentransfer data dua kali lebih cepat.

DDR RAM ini ada beberapa jenis seperti DDR-200 (memiliki memory clock 100 MHz), DDR-266 (memiliki memory clock 133 MHz), DDR-333 (memiliki memory clock 166 MHz) dan DDR-400 (memiliki memory clock 200 MHz). Frekuensi transfer yang bisa dihasilkan DDR1 hanya antara 200-400 MHz.

DDR RAM versi 1 ini dikembangkan sejak 1996 sampai 2000.

DDR2

DDR2 RAM memiliki clock cycle dua kali lebih banyak. Artinya, kemampuanya dua kali lebih cepat dibandingkan DDR1. Memory clock-nya terentang dari 100 MHz sampai 266 MHz. Jenis DDR2 memiliki nama standar DDR2-400, DDR2-533, DDR2-667, DDR2-800 dan DDR2-1066. Dan frekuensi transfer antara 400-1966 MHz.

DDR3

Sementara DDR3 RAM, dari segi memory clock-nya tak jauh beda dengan DDR2 yaitu dari 100 MHz sampai 266 MHz. Bedanya terletak frekuensi transfernya yang lebih tinggi yaitu mencapai 2133 MHz (DDR2 maksimal hanya sampai 1066 MHz) dan voltasenya yang lebih hemat yaitu hanya 1.5v (DDR2 memerlukan voltase 1.8v dan DDR 1 dengan 2.5/2.6v).

Nah, bagaimana? Sekarang jadi lebih jelas kan perbedaaan antara DDR1, DDR2, dan DDR3?

Karena teknologi komputer terus berkembang, bisa dipastikan akan ada banyak jenis memory lain yang akan ditemukan di masa depan. Bisa jadi generasi tersebut dinamakan DDR4, DDR5 atau mungkin dengan nama yang lain. Hanya tinggal menunggu saja kapan memory-memory tersebut diimplementasikan pada desktop PC, Notebook, Tablet dan perangkat teknologi yang lain.

Berikut saya tampilkan tabel Perkembangan Teknologi Memory secara Performance dari Generasi DDR1 – DDR3

DDR4

Dalam Komputer, DDR4 SDRAM, singkatan untuk tipe Double Date Rate Random Access Memory, adalah jenis dynamic random-access memory (DRAM) dengan Interface bandwidth tinggi diharapkan akan dirilis ke pasar pada tahun 2012 .  ini adalah salah satu dari beberapa varian dari DRAM yang telah digunakan sejak awal 1970-an [4] dan tidak kompatibel dengan semua jenis sebelumnya random access memory (RAM) karena tegangan sinyal yang berbeda, antarmuka fisik dan faktor-faktor lainnya.

Memori DDR4 ini diklaim sebagai memory generasi Terbaru yang memiliki Tingkat kecepatan transfer rate 2133 – 4266 MT/ second dimana yang kita ketahui sekarang masih tekhnologi DDR3 dan itu dengan kecepatan 800MT/second.

Bagi anda sekalian pengguna motherboard minimal dengan chipset intel G41 dan ram DDR3 pasti anda sudah merasakan kecepatannya ,itu dikisaran 800Mt/second .., Lalu bagaimana dengan DDR 4 yang akan datang yang sejatinya bisa 4x lipat dari DDR3 ,ditambah lagi dengan VOLTAGE yang sangat rendah 1.05- 1.2 V untuk DDR4 dan 1.2 – 1.5 V untuk DDR3.

Klik Untuk Memperbesar

the great benefit

Memory jenis DDR3 yang telah Beredar cukup luas dan umum digunakan komputer PC, segera digantikan oleh jenis yang lebih baru, yaitu memory DDR4. Micron Technology, perusahaan yang bergerak di bidang semi konduktor hari Senin menyatakan, memory DDR4 akan menjadi penerus DRAM DDR3 dan segera digunakan diberbagai perangkat tahun depan. Perusahaan ini juga telah mulai mengirimkan sampel jenis memory DDR mendatang.

Memory baru jenis DDR4 lebih hemat listrik dan lebih cepat dari memory sebelumnya jenis DDR3, yang ditemukan di sebagian besar komputer baru saat ini. Memory DDR4 juga akan mengalirkan data dengan kecepatan lebih tinggi pada sistem komputer.

Memory DDR pertama kali dibuat untuk digunakan pada server dan dekstop, hingga kemudian digunakan pula untuk laptop. Micron menyatakan, mereka berharap memory DDR4 juga akan mencapai perangkat portable seperti tablet, yang saat ini menggunakan jenis memory low-power dari DDR3 dan DDR2.

Daya yang dibutuhkan oleh DDR4 dipastikan lebih rendah dari memory sebelumnya, yaitu mulai dari 1.2 volt, sementara DDR3 mencapai 1.5 volt. DRAM ini juga akan mentransfer data pada kecepatan tinggi, dengan bus speed mulai dari 2133MHz. Selain itu memory baru dirancang agar dapat memproses read, write dan refresh lebih efisien, sehingga dapat membantu meningkatkan performa aplikasi serta dapat memperoleh informasi dari storage dengan lebih cepat.

Micron dalam suatu pernyataan menyatakan, JEDEC (Joint Electron Devices Engineering Council) organisasi yang menetapkan standar memory diharapkan sudah memutuskan spesifikasi final memory DDR4 pada pertengahan tahun. Sehingga, perusahaan diharapkan sudah bisa memulai produksi masal memory DDR4 pada akhir tahun.

Bagian pertama dari DRAM DDR4 dikembangkan Micron bekerja sama dengan produsen memory Nanya Technology dan nantinya, akan diluncurkan sejumlah unit DDR4 dengan kecepatan transfer maksimum sesuai standar JEDEC mencapai 3.2 gigatransfer perdetik.

Read More

Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan

Cara Membuat Tulisan Berjalan dan Bergerak Pada Blog, Cara Membuat Kalimat Bergerak dan Berkedip Pada Artikel, Cara Membuat Alamat Link Berjalan dan Bergerak Di Blog

Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan menggunakan efek marquee- Mungkin banyak diantara sahabat blogger yang telah dulu mengenal dan memahami apa itu marquee ?, berhubung saya masih pemula di dunia blogging dan juga baru mengenal kata MARQUEE gak ada salahnya saya share beberapa model efek marquee di artikel kali ini, ya... hitung-hitung memperbanyak koleksi perkenalan kode marquee ke sahabat lain gitu..!! hehe..

Ok..! dech tanpa basa-basi lagi langsung aja kita meluncur ke topik Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan - yang kita kenal sebagai marquee itu menggunakan perkodean CSS HTML, cara membuatnya pun terbilang mudah, cukup menuliskan kode <marquee> di awal teks, dan akhiri dengan kode penutup </marquee> di akhir teks seperti ini:

<< MACAM >><< MACAM >>

EFEK TEKS DENGAN MARQUEE

Berikut beberapa model MARQUEE yang dapat Anda gunakan untuk Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan:

1. Marquee Tanpa Atribut
Silahkan tinggal di copy aja kode html dibawah ini

<marquee>TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN


2. Marquee Dengan Atribut
Scrollamount = Kecepatan kalimat, semakin besar angka maka kalimat berjalan cepat
Direction = Pengaturan gaya arah kalimat berjalan
Bgcolor = Pengaturan warna kalimat atau Teks berjalan
Behavior = Pengaturan gaya kalimat bejalan
Scrolldelay = Pengaturan gaya kalimat yang ditentukan dengan detik/mil

Silahkan tinggal di copy aja kode html dibawah ini

<marquee scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="left" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee behavior="alternate" scrollamount="15">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee bgcolor="red">TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN


3. Marquee Dengan Penggabungan Beberapa Atribut
Silahkan tinggal di copy aja kode html dibawah ini

<marquee loop="5">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="right" style="background-color: green;" width="125">KALIMAT INI AKAN BERJALAN</marquee><marquee direction="left" style="background-color: blue;" width="125">KALIMAT INI AKAN BERJALAN</marquee>
<marquee style="font-style: italic;">KALIMAT MIRING AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN 5X SETELAHNYA AKAN HILANG
KALIMAT INI AKAN BERJALANKALIMAT INI AKAN BERJALAN
KALIMAT MIRING AKAN BERJALAN


4. Marquee Dengan Penggabungan Atribut Sesuai Perintah Mouse
Atribut berikut dapat Anda tambahkan untuk memanggil perintah pointer mouse. Singkatnya, efek teks akan berhenti saat panah mouse Anda melintasi/berada pada teks, dan sebaliknya teks akan kembali berjalan saat pointer mouse di lepas.

Silahkan tinggal di copy aja kode html dibawah ini

<marquee onmouseout="this.start()" onmouseover="this.stop()">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="up" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="down" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN

KALIMAT INI AKAN BERJALAN

KALIMAT INI AKAN BERJALAN

5. Marquee Dengan Perpaduan Atribut Style
Silahkan tinggal di copy aja kode html dibawah ini

<marquee direction="right" scrollamount="225" width="200">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee scrollamount="200" width="180">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN
Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan


Beberapa kode pada artikel ini, sudah saya benarkan atau saya perbaharui agar memudahkan Anda dalam menerapkan efek ini pada tulisan blog Anda, sebagai referensi panduan buat sahabat semua pecinta SAHABAT BLOGGER 77, berikut beberapa desain terbaru untuk membuat tampilan efek pada teks atau tulisan. Semoga tutorial ini dapat memberikan Anda inspirasi, untuk berbagi hal-hal menarik lainnya di sini. Terimakasih

Read More

Cara Menempatkan Kata Kunci Yang Tepat

Cara Menempatkan Kata Kunci Yang Tepat - Membuat beberapa baris cerita dengan judul yang sudah Anda pikirkan dapat merangkum tulisan adalah hal yang sangat mudah untuk dilakukan, namun pernahkah Anda sadari dimana tempat yang tepat untuk meletakkan gambar, menutup tulisan untuk berhenti dari paragraf pertama, menyisipkan internal link dan sudahkah Anda Menempatkan Kata Kunci Yang Tepat dalam postingan Anda?. Hal seperti ini saya yakin tidak pernah terlintas dibenak sahabat semua, yang akibatnya Traffik SERP, lalu lintas penelusuran naik turun, bounce rate low adalah hadiah yang akan kita dapatkan sepanjang waktu.

Menulis bukanlah hal yang mudah untuk dilakukan, namun tidak sulit juga untuk membuatnya, karena tidak perlu Anda menguasai bidang tulis menulis untuk memperaktekkannya, cukup dengan rajin berkunjung Anda bisa Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking. Akan tetapi kepada siapa tulisan itu Anda sajikan, dengan menerapkan beberapa tips SEO dibawah ini, maka tulisan Anda akan dilihat, dibaca jika Anda tahu Cara Menempatkan Kata Kunci Yang Tepat disetiap artikel blog yang Anda publikasikan, lalu dimana letak yang tepat untuk menempatkan kata kunci.?


1. JUDUL
Bagus, buruk, berkualitas atau tidak berkualitas judul yang akan Anda buat adalah nilai mutlak yang diperhitungkan oleh SEO trafik, judul yang menarik akan membawa blog Anda kelevel sempurna pada peringkat penelusuran. Pembaca tidak akan pernah tahu isi tulisan Anda, jika judul post Anda tidak pernah menembus 10 besar diposisi google search.
Solusinya:

- Heading Tag
Google sangat menyukai teks dengan heading tag, jadi pastikan judul sudah dibungkus dengan tag H1 dalam dokumen HTML Anda, karena judul adalah nama yang akan mewakili situs Anda pada tab browser. (Baca- Inilah Kiat Penting Dalam Menentukan Judul Post).

- Tanda Baca
Setiap teks yang akan Anda tuliskan dalam judul merupakan kata kunci, namun jangan melakukan penjejalan optimalisasi keyword didalamnya. Agar kualitas kata kunci didalamnya tetap terjaga, gunakan tanda baca seperti tanda Hubung (-) dan pipa (|).


2. PARAGRAF PERTAMA
Teks awal dimana Anda akan memulai merangkai kata demi kata, dan menghubungkannya menjadi sebuah tulisan dalam satu paragraf pertama adalah tempat yang paling tepat dan akurat untuk menempatkan kata kunci. Umumnya 90% pengunjung akan membaca tulisan pada paragraf pertama, dan selebihnya mereka akan melihat-lihat saja, begitupun deskripsi singkat yang menemani judul Anda tampil dalam penelusuran.
Solusinya:

- Sisipkan 2-3 kata untuk mengulang judul pada paragraf pertama, usahakan buatlah semenarik mungkin. Namun hindari mengulang kalimat yang sama jika kalimat itu sudah Anda tuliskan pada postingan sebelumnya.



3. ALL CONTENT
Selain pada JUDUL dan PARAGRAF, cara menempatkan kata kunci yang tepat berikutnya adalah diseluruh area tulisan Anda. Ini merupakan penyusunan sebuah konsep tulisan blog untuk menentukan Jumlah Kata Yang Ideal Untuk Membuat Artikel, sehingga akan menghasilkan banyak kata kunci, namun lebih daripada itu, kita kembali lagi kepada kebutuhan pengunjung yang biasanya melihat awal dan akhir sebuah tulisan. Jadi fokus pada paragraf terakhir, lakukan seperti pada poin ke-2, namun jaga agar tetap teroptimasi.
Solusinya:

- Atribut
Menebalkan beberapa kalimat atau membuatnya dengan style-italic pada font tulisan dengan kode <b>Kata Kunci</b> atau <i>Kata Kunci</i>, mungkin ini sering Anda lakukan untuk menerangkan bahwa kalimat tersebut adalah penting, dan sudah pasti dilihat oleh pengunjung. Akan tetapi cara seperti ini adalah salah, karena google telah mengabaikan trik seperti itu, jadi sia-sia bukan..?

Anda bisa gunakan format kode:

<strong>Kata Kunci</strong>  (Tulisan Tebal)
<em>Kata Kunci</em>  (Tulisan Miring)

Akan jauh lebih akurat, dan ini adalah tehnik SEO dalam keyword optimasi. Karena Spider, crawler dan googlebot dapat membaca tag dengan atribut seperti ini, dan menganggap bahwa teks tersebut penting, sehingga selain pada judul, beberapa konten Anda akan ikut terindeks sebagai kata kunci.

Banyak tempat dimana letak yang seharusnya dalam menargetkan kata kunci, mengelola tag heading dan trik penggunaan format atribut hanya merupakan poin-poin pokoknya saja untuk sahabat semua pecinta pelajari, karena hal ini sudah saya alami, dan sudah terbukti cukup ampuh untuk menjawab masalah TNT (Trafik Naik Turun) dalam hal SEO optimasi keyword. Jika Anda Ingin Tahu Banyak Tentang Optimasi SEO?, maka Cara Menempatkan Kata Kunci Yang Tepat tidak akan Anda sepelekan dikemudian hari. Terimak Kasih.

Read More

JavaScript Konversi Kode Otomatis

JavaScript Konversi Kode Otomatis - Saat kita menuliskan simbol teks sebagai kode pada halaman HTML, maka saat tulisan tersebut ditampilkan maka teks akan berubah menjadi perintah kode. HTML mendeteksi simbol tag seperti ini:

- simbol ( < )
- simbol ( > )
- simbol ( ')
- simbol ( " )
- simbol ( & )

sebagai tag kode, sehingga saat simbol yang kita tuliskan tidak akan ditampilkan dalam bentuk teks, melainkan sebagai perintah kode. Agar kode tersebut tampil sebagai teks biasa, yang perlu kita lakukan hanya merubah semua tag kode tersebut dengan mengganti tag (<) menjadi (&lt;), (>) menjadi (&gt;) dan seterusnya. Sebagai contoh, coba buka formulir posting baru model HTML, lalu Copy kode dibawah ini dan Pastekan pada halaman mode tulis HTML dengan teks kode seperti ini:

<style type='text/css'>
/*-----
.konversi {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 5px 10px;
  text-align: left;
-----*/
}
</style>
<div class="konversi">JavaScript Konversi Kode</div>

Maka saat tulisan Anda publikasikan, halaman akan terlihat kosong karena teks yang Anda tuliskan terdeteksi sebagai perintah tag kode. Namun jika semua tag kode diatas kita konversi, maka semua kode tersebut akan ditampilkan sebagai teks biasa. Jika semua tag kode tersebut Anda ganti satu persatu pekerjaan yang sulit bukan.?, untuk memudahkan pekerjaan Anda, disini sudah saya siapkan Alat Konversi Kode Otomatis Dengan JavaScript yang bisa Anda gunakan untuk merubah semua tag kode menjadi teks biasa seperti ini:




COBA ALAT

Baca juga - Artikel Tampil Full Tanpa Sidebar

Perintah yang sama pada Konversi Kode Agar Menjadi Perintah Teks di artikel sebelumnya, namun tombol konversi saya hilangkan pada alat konversi kali ini, saya gantikan dengan tabel textarea untuk menampilkan hasil koversi secara otomatis saat Anda letakkan kode pada tabel konversi, sehingga pekerjaan Anda lebih mudah, praktis dan cepat untuk merubah kode tersebut menjadi teks biasa.

Sebenarnya untuk membuat alat konversi kode otomatis

<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Graduate|Arial);
textarea{
  box-sizing:border
  width:100%;
  height:160px;
  padding:10px;
  overflow:hidden;
  border-top:3px solid aqua;}
</style>
<script type='text/javascript'>
function copyText(){
var code = document.getElementById('code');
var code2 = document.getElementById('code2');
var str = code.value;
var str = str.replace(/&/g, "&amp;");
var str = str.replace(/</g, "&lt;");
var str = str.replace(/>/g, "&gt;");
var str = str.replace(/'/g, "&#39;");
if (code != null){code2.value = str;}
}copyText();
</script>
<textarea id="code" onkeyup="copyText()" placeholder="Letakkan kode Anda disini, lalu LIHAT hasilnya dibawah"></textarea>

<textarea style="border-top:3px solid red" id="code2" name="code2" placeholder="Hasil Konversi Kode"></textarea>

Semoga alat konversi ini dapat memudahkan pekerjaan Anda untuk merubah tag kode menjadi perintah teks. Akhir cerita saya ucapkan terima kasih.

Read More

Cara Mengatur Halaman Blog Agar Responsive

Cara Mengatur Halaman Blog Agar Responsive - Responsive atau "RESPON" berarti menerima dan dapat menyesuaikan diri terhadap hal-hal yang diterima serta dapat mengatur letaknya sesuai dengan dimana halaman tersebut terbuka sebagai tempat. Responsive bisa juga diartikan sebagai fleksibel area halaman blog, jika halaman dibuka pada resolusi layar yang kecil, maka tampilan halaman blog akan mengikuti lebar layar yang Anda gunakan saat membuka halaman blog saat ini. Sebagai contoh coba Anda minimalkan ukuran layar monitor Anda saat ini, maka secara otomatis halaman akan ikut menyusut mengikuti resolusi layar, hal inilah yang disebut dengan Responsive Page.

Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.

Top Artikel - CSS Flower Navigasi Efek Rotasi

Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:

//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {

//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}

//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}

Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.


Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:

<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini...
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini... 
}
</style>

2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper

Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.

Read More

Inilah Kiat Penting Dalam Menentukan Judul Post

Inilah Kiat Penting Dalam Menentukan Judul Post 

Membuat sebuah tulisan sudah pasti ada judul, karena judul post pada blog merupakan kalimat inti yang paling penting sebelum pembaca akan menyimak isi dari keseluruhan tulisan tersebut, bukan pada isi post, paragraf post tetapi semuanya terletak pada sebuah judul. Judul pada sebuah tulisan dapat membangun, akan tetapi dapat juga menghancurkan seluruh post dalam blog Anda, karena dalam menentukan sebuah judul akan terasa rumit jika kita tidak berkonsentrasi pada strategi dan tujuan yang tepat. Umumnya judul post pada sebuah tulisan merupakan rangkuman seluruh isi dalam sebuah kontent artikel, karena tidak hanya dapat meningkatkan blog Anda, tetapi dapat juga berdampak buruk terhadap optimasi SEO.

Penting untuk diketahui, lebih dari 90% pengguna Google mencari sesuatu yang ia butuhkan akan melihat hasil pada halaman pertama, dan jarang sekali mereka akan meng-klik tombol NEXT untuk melihat hasil yang serupa pada halaman berikutnya. Jadi, sudah dapat dipastikan selama judul post Anda selalu berada pada posisi pertama, maka jumlah pengunjung ke blog Anda akan terus ada atau bahkan bertambah terus dan kian meningkat. "botgoogle" tidak menjelajah isi kontent, tetapi lebih kepada judul yang relevan, jika judul post Anda termasuk dalam kategori itu maka botgoogle akan melanjutkan pencarian kata kunci pada isi kontent, berlanjut pada tag gambar. Jika tidak terdapat error dalam penjelajahan, blog Anda akan dioptimalkan sehingga akan dapat membuat blog bertahan di halaman pertama Google.

Keyword atau kata kunci yang Anda targetkan, akan terasa relevan jika judul post Anda mengandung kata kunci yang berkualitas oleh pengguna google, sedangkan kandungan kata kunci pada isi post hanya berperan sebagai pembantu saja dalam SEO optimasi keyword. Dengan demikian, Inilah Beberapa Kiat Penting Dalam Menentukan Judul Post berikut ini perlu kita terapkan untuk merebut posisi pertama google penelusuran

Judul Yang Sederhana
Jangan pernah berpikir judul apa yang pantas untuk menggambarkan tulisan Anda hari ini, tetapi gunakanlah kata kunci yang paling umum, yang sekiranya menurut Anda dapat menarik pengunjung ke blog Anda. Ingat..!! Anda akan memberikan informasi kepada pembaca, jadi berikanlah cerita yang berkualitas, bukan cerita yang tidak logis yang dapat menyesatkan pembaca, buatlah sederhana namun mengandung makna, karena Google menyukai kesederhanaan.

Tujuan Judul
Anda menulis untuk dikomentari pembaca, jadi jangan berpikir terlalu egois atas kehendak Anda. Cerita dapat membuat tidur terlelap, begitupun tulisan, karena pembaca akan paham isi tulisan Anda sekalipun dengan mata tertutup jika tulisan Anda tepat dan akurat.
Contoh - Saat Anda membuat tulisan tentang Pepaya dengan judul post Apel, maka pembaca yang sedang mencari informasi tentang Apel akan singgah ditempat yang salah dan tidak seharusnya, karena kelicikan Anda, Anda akan kehilangan pembaca/pengunjung setia.

Judul Yang Deskriptif
Judul post Anda akan memberikan ide kepada pembaca, memberikan pengetahuan/ilmu baru yang semuanya telah tercakup dalam postingan Anda, jadi judul post yang unik akan jauh lebih penting daripada judul post yang terlalu panjang dan bertele-tele. Gunakan karakter standart 65-75 karakter pada judul post. Baca tentang 6 Hal Pembuatan Judul Yang Deskriptif

Gunakan Persamaan Kata (Sinonim) Pada Judul Post
Hal ini penting pada saat menentukan judul post, Anda sering melakukan pencarian kata kunci untuk memeriksa sudah berapa banyak jumlah kata tersebut digunakan orang lain. Jadi dalam hal ini Anda perlu menerapkan teknik persamaan kata (sinonim). Seperti kata “Trik” Anda dapat ganti menjadi “Kiat”, dengan sinonim Anda dapat mentargetkan konten yang sama tetapi dengan kata kunci yang berbeda.

Judul Singkat (Pilih Keywords Penting)
Ingat, judul yang singkat bukan judul pendek, Cobalah untuk membuat judul sesingkat mungkin dan pastikan tidak pernah melebihi 75 karakter termasuk spasi. Agar judul post tetap terkesan relevan dan kualitas kata kunci di dalamnya terjaga, gunakan 60 karakter dalam setiap judul posting Anda.

Melirik Event Yang Sedang Trend
Ini lebih keperhatian pembaca atas judul post Anda, jadi cobalah sesekali menggunakan kata-kata yang sedang lagi trendi masa kini, pikirkan informasi apa yang paling banyak dicari oleh mereka, jika Anda berpikiran tentang nice "HOT" cobalah untuk mengarah kesana, namun jangan sampai nice blog Anda tidak sesuai dengan topik yang Anda bahas

Judul Dengan Kata “Eye Catching”
Mayoritas pembaca akan mencari artikel yang terbaik dan berkualitas, misalnya warung si "JONO" selalu dikunjungi oleh kerumunan orang yang rela mengantri, sudah pasti hasil dari warung tersebut berkualitas dan terbaik. Dengan demikian pembaca hanya ingin membaca konten yang berkualitas dan terbaik, sehingga dengan menggunakan kata kunci seperti HOT, terbaik, sempurna, baik, mudah, gratis akan membuat orang tertarik untuk melihatnya.

Judul Post Terkesan Bertanya
Manfaatkan kosa kata, dalam hal ini Anda dapat menentukan judul post yang paling efektif dan akurat. Misalnya menggunakan kata - Bagaimana, Apa, Cara, Inilah, dalam judul post yang akan Anda buat.

Setelah Anda menerapkan beberapa kiat penting diatas, saat ini saya yakin Anda sudah menyiapkan banyak informasi yang bermanfaat yang akan Anda bagikan kepada pengunjung setia Anda dilain waktu, namun jangan lupa untuk selalu melakukan analisis terhadap penggunaan Jumlah Kata Yang Ideal Untuk Membuat Artikel.

Terimakasih.!! Semoga bermanfaat

Read More

Membuat Menu Blogger Dengan Target Gambar

Membuat Menu Blogger Dengan Target Gambar - Bergegas dari pembahasan pada artikel sebelumnya tentang Cara Membuat Panel Slide Halaman Posting, pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan obrolan singkat seputar pembahasan tips sederhana untuk mendesain serta membuat tampilan blog agar terlihat lebih menarik dan keren dengan Membuat Menu Blogger Dengan Target Gambar sebagai tampilan widget pada halaman sidebar. Widget ini saya khususkan untuk ditampilkan pada sidebar page, karena bentuk dan tampilan sudah saya desain mengikuti lebar kolom sidebar blog pada umumnya seperti tampilan gambar berikut:

Referensi URL - Pengenalan Elemen CSS Target


Tidak jauh berbeda saat Anda memberikan title teks pada sebuah link-url, yang mana sebelum link pada menu tersebut di klik akan menampilkan sejumlah teks sebelum akhirnya Anda dialihkan pada halaman baru. Namun untuk Membuat Menu Blogger Dengan Target Gambar seperti ini, saya membungkus setiap kode pada link-menu dengan Elemen first-child img {z-index:1; opacity:1;} untuk dapat memanggil gambar sebagai title jika salah satu menu di hover. Singkatnya, setiap satu menu sudah saya beri satu buah gambar sebagai target sebelum Anda menuju tautan tersebut. Kode lengkapnya seperti ini:

<style type='text/css'>
//* Image target show menu for sidebar widget
input data='css-target' id='sm-container'
visit: http://hudathemaster.blogspot.com
modified by. Devy Indriyani
publish date: November 23, 2014
*/
#img-sm {
  border-radius:20px;
  background:#3F3935;
  padding-top:290px;
  width:300px;
  position:relative;
  margin:0 auto;}

#img-sm a {
  display:block !important;
  color:#CFCECE;
  font-family:Lato, sans-serif;
  border-left:2px solid #e06666;
  font-size:14px;
  text-transform:uppercase;
  box-sizing:border-box;
  transition:.7s all linear;
  text-shadow:2px 2px 2px rgba(0,0,0,0.6);
  padding:8px 8px;}

#img-sm a:first-child img {z-index:1; opacity:1;}
#img-sm a:hover img {opacity:1; z-index:2;}
#img-sm a:hover {border-left-width:20px;}
#img-sm a img {
  width:250px;
  border-radius:50%;
  overflow:hidden;
  position:absolute;
  top:25px;left:25px;opacity:0;
  transition:.7s all linear;
  box-shadow:0 0 0 3px #eee;}
</style>

Hasilnya:




DEMO SHOW


Semua kode-kode diatas sudah saya ringkas termasuk penggunaan perintah javascript, agar nantinya widget ini tidak membuat loading halaman blog Anda menjadi berat. Tahap selanjutnya tinggal menambahkan link menu sebanyak yang Anda inginkan pada HTML berikut:

<div id="img-sm">
<a href="#">MENU 1<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 2<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 3<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 4<img src="http://Url-Gambar.jpg" alt=".."></a>
</div>

Terlihat keren dan menarik bukan, hehe..!! widget ini saya tampilkan dengan tampilan default seperti warna background, hover link color yang saya desain sesuai dengan warna blog saya, jika sekiranya Anda ingin mengubah tampilan warnanya, Anda bisa pilah-pilih warna yang sesuai dengan blog Anda pada ► Tabel Kode Color Heksa Terlengkap (Ragam Warna).

terima kasi semoga bermanfaat :)

Read More

Get Free Backlinks To Your Website & Increase Your SEO Traffic

Backlink Toolbox speeds up your backlink efforts by 10 times.

Blog Commenting is a great way to get backlinks to your website. Backlinks help improve your search engine ranking. The more backlinks you have the better your ranking.
Backlink Toolbox has these time saving features:

	Search For Related Blogs Easily Search multiple Search Engines for related blogs.
	Auto Fill Name & URL Fill your Name & URL in the comment with one (1) click.
	Tracks Sites You Comment On Great for checking to see if a blog owner accepted your comment.
	Tracks Sites You have Already Visited Keeps you from wasting time looking at the same page twice.

Free Download

System Requirements
   Supported Operating Systems: Windows Server 2003; Windows Server 2008; Windows Vista; Windows XP
   Microsoft .NET Framework 3.5: Required. Will download during install if not already present
   Processor: 400 MHz Pentium or equivalent; 1GHz Pentium or equivalent (Recommended)
   RAM: 96 MB (Minimum); 256 MB (Recommended)
   Hard Disk: Up to 500 MB of available space may be required
   CD or DVD Drive: Not required
   Display: 800 x 600, 256 colors (Minimum); 1024 x 768 high color, 32-bit (Recommended)

How To Use Backlink Toolbox

Step #1 - Add Your Auto Fill Settings

Click Tools | Auto Fill Settings


Once the Auto Fill Settings windows appears click "Add"


Enter your website settings and click "OK"

Step #2 - Find Websites

Click Tools | Find Websites


Enter your keyword phrase and click "Start"
(Backlink Toolbox will search for blogs containing your keyword.)


After searching the results will appear in the Possible Comment List

Step #3 - Make Comments

Double click on an item in the possible comments list
(Backlink Toolbox opens the blog in the browser above)


Read the blog post and scroll the the "Leave Comments" section.
Right Click on the blog page and a Context Menu will appear.
Click "Auto Fill" and Enter your comment in the appropriate box.
Backlink Toolbox fills the Name, Mail, and Website boxes
with your information for you.


Click Submit on the blog page
If Backlink Toolbox finds your link on the page it will ask you
to add it to your "Posted URLs"
(Sometimes your comment won't show until it is moderated.
In this case click "Add This Page To Posted Urls List")

Download Now, It's Free!

Read More