Cara Membuat Featured Post Content Slider Image

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly.

SEBELUMNYA CB pernah share tentangFeatured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasilsurvei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:

1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.

Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER

Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolisbaik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depantanpa slider, silakan cekCara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya.

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

Cara Membuatnya:

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode ]]>

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIX0zRZopPOPW8lcVbmaBz8sxTJKZQ_HOq3FlVGcAAaBg4y_2v9h1uPy5mP_ci-swmKdqqreDVIRtjK0sJgYbxkjF1b5FGorlsgJmvVZ_uY5QhUiDEUFgjM3HgRIP61ush8ZmYQSUx3ja/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.

3. Copas kode berikut inidi atas kode

4. Copas kode berikut ini di bawah kode

atau yang sejenisnya.

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5).

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan diFeatured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: ....feeds/posts/default?max-results ...

7. Save!!!
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1.Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}

3. Copas kode berikut di atas kode

4. Cari kode

atau yang sejenusnya. Copad kode berikut ini di bawahnya.

5. Save Template!

6. Klik "Layout". Akan Widget Baru di atas element "Blog Posts" seperti gambar di bawah ini. Jika belum muncul, Refresh dengan menekan tombol F5.

7. Saatnya memasang posting yang akan ditampilkan. Klik "Edit" dan Copas kode berikut ini di kolom "Content". Kolom judul biarkan kosong!

Catatan:
1. GantiLabeldengan nama label posting yang akan ditampilkan diFeatured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode/-/Labelsehingga menjadi begini: ....feeds/posts/default?max-results...

Demikian Cara Membuat Featured Post Content Slider Image / Slide Gambar Posting di halaman depan blog. Good Luck & Happy Blogging!

reff : http://www.contohblog.com/2015/01/membuat-featured-post-content-slider-image-gambar-blog.html

Read More

White Hat SEO Dan Tekniknya

MBS BLOG - maaf nih saya baru update lagi bagaimana pertemuan kemarin cukup jelas ya untuk penjelasan tentang Black Hat SEO.. nah kali ini saya akan mengupas tentang teman dari Black Hat SEO, yaitu White Hat SEO,, apa itu White Hat SEO..?

White hat SEO adalah usaha optimasi SEO yang baik dan benar serta tidak melanggar TOS yang telah ditetapkan oleh search engine. Untuk semua blogger yang ingin memperoleh hasil yang baik di halaman SERP wajib untuk menerapkan teknik seo ini. teknik SEO yang di pergunakan oleh seorang SEO dengan mengambil teknik etis atau etchical technique. Tujuan utama White hat SEO yaitu menaikkan page rank website utama ataupun blog utama menuju page satu di search engine. Memang teknik ini membutuhkan waktu lama, akan tetapi lebih aman dan Anda bisa merangkul kepercayaan Mesin Pencari. Bukankah menyenangkan bila blog atau website utama ataupun Blog utama Anda sering di kunjungi oleh Mesin Pencari? Selain itu, traffic website utama ataupun Blog utama Anda akan ramai dan stabil apabila Anda berhasil mengoptimize mencapai page satu di Mesin Pencari.

Teknik - teknik yang di pakai oleh seorang White hat SEO itu sangatlah simple asalkan tekun dan memiliki keinginan untuk update setiap hari Blog ataupun Website Utama Anda. Merangkaikan kata atau menulis memang tidak semudah yang Anda bayangkan, akan tetapi search engine sangatlah senang dengan content original. Content original selain tulisan, bisa juga di sini maksudnya adalah sebuah gambar atau photo yang asli belum pernah ada seorang pun upload ke dunia maya(internet).

tidak hanya black hat seo yang memiliki teknik, white hat seo juga memiliki beberapa teknik, diantaranya adalah :

• Optimasi Konten Blog

Meningkatkan kualitas blog dengan selalu menyajikan konten yang berkualitas dan original.

• Optimasi Kata Kunci

Melakukan berbagai optimasi kata kunci yang benar tanpa memanipulasi warna maupun ukuran huruf dengan keyword density perkonten yang tidak lebih dari 3 % atau 4%.

• Optimasi pada URL Blog

Tidak membuat redirect url tertentu ke halaman lain ketika seoarng pengunjung mmebuka url tersebut dan tentunya memperkuat oprimasi seo dengan cara memasukkan keyword blog dalam url blog.

• Melakukan link building

Melakukan link bulding yang benar dan tidak keluar dari jalur white hat seo seperti membangun link building secara natural dan bukan dengan cara membeli backlink berkualitas dari blog yang memiliki pagerank tinggi.

• Template/tampilan

Dalam memilih template atau tampilan juga termasuk salah satu tehnik White hat seo yang bisa dilakukan, jadi pilihlah template yang SEO friendly dan jangan lupa untuk mengatur CSS dengan merampingkannya sehingga loading blog menjadi cepat. Blog yang ringan sangat disukai oleh mesin pencari atau search engine.

• Meta Tag

Pasanglah Meta Tag hal ini sangat membantu terutama judul dan deskripsi yang perlu di perhatikan adalah robot dan judul yang tepat dibawah head juga charset yang di gunakan agar spider jelas membaca kode. Untuk white hat seo tempatkan judul sebagai keyword dan juga deskripsi, ada baiknya di tempatkan di unsur berikut ini:

- Judul

- Meta Description

- Kata kunci Meta

- Pos Unsur h1-h6

- Alt Tag yang bisa di optimalkan di dalam gambar

- Title Tag

- Link yang berisi keyword

• Informasi yang terarah

Membuat konten yang relevan dan menunjukan informasi yang relevan juga, maksudnya adalah apabila ingin memasarkan suatu produk maka pasarkanlah yang sportif tidak membuat kata kunci yang lain yang diselipkan di dalam konten sehingga pengunjungpun mengetahui maksud dan tujuan web/blog tersebut dengan produk yang diarahkan.

• Backlink yang baik

Carilah backlink yang baik dari situs ? situs yang ber PR tinggi, submit juga ke directory dofollow dan carilah backlink yang satu arah / sesuai dengan konten blog sobat.

• Ping secara teratur

Direkomendasikan untuk melakukan teknik Ping secara teratur baik setelah mengupdate blog atau mempublikasikan postingan baru. Namun jangan melakukan Ping terlalu sering karena akan dianggap spam. Jika sobat membuat banyak postingan dalam sehari, cukup lakukan Ping sekali saja.

• Promosikan Blog ke SocialNetwork

Lakukan dengan mengandalkan facebook dan twiter ataupun social network yang lain bagi saya facebook dan twiterlah yang paling baik untuk promosi, yang perlu di perhatikan apabila menautkan link harus mempunyai judul yang sesuai dengan pembahasan di Web/blog.

ya itulah sekilas penjelasan tentang white hat seo beserta teknik yang di milikinya.. jika ada yang ingin di tanyakan tentang white hat seo ini, silahkan tinggalkan jejak di komentar, terima kasih..

sumber

reff : http://googlepintar.blogspot.com/2013/06/white-hat-seo-dan-tekniknya.html

Read More

Memasang Widget Statistik Jumlah Pengunjung Blog

BLOG Anda menampilkan atau memasang widget statistik jumlah pengunjung blog di sidebar? Ada dari Sitemeter, PageRank, Histasts. Feedjit, Hit Counter, Stat Counter, Whois Among Us, dan sejenisnya? Saran CB, lepas sekarang juga!

Lepas saja widget itu.... jika Anda ingin:

1. Loading blog Anda lebih cepat dan ringan.
2. Blog Anda tampak clean, bersih, dan "tidak kumuh".
3. Mengurangi Outbound/External Link dari Blog Anda.

Memasang widget statistik jumlah pengunjung blog tidak salah. Boleh saja, bagi Anda yang ingin "show off" alias "pamer" trafik pengunjung blog. (Tapi malu juga sih ya kalo trafiknya rendah, he he....)

Pendapat CB, widget atau kotak statistik jumlah pengunjung itu tidak pengaruh bagi SEO dan reputasi blog, kecualinya jumlah pengunjungnya WOW banget!

Widget statistik jumlah pengunjung hanya memperlambat loading, karena ia harus "menarik" kode dan tautan ke luar blog kita. Apalagi kalo widgetnya yang "kerlap-kerlip" dan "warna-warni" animasi, kaya iklan obat kuat, he he....

Apalagi statistik jumlah pengunjung dan Page Views sudah disediakan blogger. Ada di Dashboar Blog, juga ada di Google Analytic. Itu sudah cukup!

Biasanya sih... yang suka "pasang segala macem widget" di blognya itu blogger baru, terutama blogger "alay" (maaf ya... jangan tersiggung). Ditambah jenis huruf yang "aneh", cursor jadi kupu-kupu atau ular, ada musiknya, ada jamnya... waaah segala macem deh. Mereka pikir itu bagus... padahal, iya sih bagus, tapi itu lho... apa gunanya buat user?

Ingat prinsip utama SEO Blog: Usability!

Jadi, blog Anda masih memasang widget statistik jumlah pengunjung blog? What do you think...? Any better idea...?

Baca Juga:
1. Lepas Musik, Jam, dan Flash di Blog Anda!
2. Slider Tidak Bagus untuk SEO Blog

reff : http://www.contohblog.com/2014/06/memasang-widget-statistik-jumlah-pengunjung-blog.html

Read More

Cara Mengubah Nama Facebook dengan Satu Kata

Hai kawan pada kesempatan kali ini saya ingin membahas tentang Tips Facebook nih, untuk kali ini mengenai Cara Megubah Nama Facebook dengan Satu Kata. Gunanya apa ? kalau menurut saya pribadi, agar kita bisa tampil beda aja,hehehe karena secara 3D (dilihat, ditrawang dan diraba) nama-nama di Facebook telah didominasi oleh nama yang panjang dan terkesan seperti Alay :P. Trik ini juga barusan saya peroleh dari searching di google yang kemudian saya praktekan dan ternyata berhasil. Nah buat Anda yang juga ingin mencoba trik ini, silahkan ikuti langkah berikut ini :

1. Silahkan Login ke akun Facebook Anda
2. Lalu buka Pengaturan Akun atau klik disini
3. Lihat pada Nama, klik Sunting yang berada dikanan Nama
4. - Isi nama depan dengan nama satu kata misalkan : Sari
- Untuk nama tengah dikosongi saja dan
- Pada nama belakang tekan tombol spasi
5. Pada kolom kata sandi, ketikan kata sandi Facebook anda
6. Tekan tombol Simpan

Nah jika anda sudah melakukan langkah diatas dengan benar maka nama anda di facebook akan menjadi satu kata seperti punya saya diatas, lihat gambar

Mungkin itu sedikit pembahasan saya kali ini mengenai cara mengubah nama di Facebook menjadi satu kata, selamat mencoba dan semoga berhasil !!!

Artikel ini dicopy dari http://perilian.blogspot.com Copy Right http://perilian.blogspot.com

reff : http://perilian.blogspot.com/2013/10/cara-mengubah-nama-facebook-dengan-satu.html

Read More

Cara Termudah Membuat Tabber Tab di Sidebar Blogger

POSTING cara termudah menampilkan, memasang, atau membuat Tabber Tab di sidebar blog blogspot ini melengkapi --bahkan mengeliminasi-- tips sebelumnya:Cara Membuat Tabbed Widget di Sidebar Blog.

Tutorial membuat tabber berikut ini mudah banget, gak pake tidak ribet, juga GPL (Gak Pake Lama).

Sebelumnya, bagi yang belum tahu apa itu Tabber Tab, lihat saja gambar ilustrasi posting ini.

Tabber atau Tab adalah widget di sidebar blog berupa tabel yang menggabungkan dua atau tiga widget dalam satu space, sehingga menghemat sidebar, lebih efektif-efisien, dan lebih ramah pengguna (user friendly).

Tabber ini merupakan salah satu trending desain blog saat ini, selain Next Previous berupa judul posting.

Kode Tabber di bawah ini sudah CB terapkan di blog demo New Johny Wuss. Demonya juga tentu saja bisa dilihat di Demo Template JNWseperti gambar ilustrasi posting ini.

Cara Termudah Membuat Tabber Tab di Sidebar Blogger

Tahap #1: Memasang Tabber

1. Klik "Layout" > pilih "HTML/Javascript"
2. Judul Kosongkan
3. Copy & Paste kode berikut ini di kolom "Content":

Tabber Widget

4. Save!

Tahap #2 Menampilkan Widget di Tabber

Masih di Layout, tambahkan tiga buah gadget di bawahnya. Di blog NJW, CB pasangkan tiga widget sebagai berikut: Terpopuler, Terbaru, dan Komentar. Widget keempat dst. tidak akan ikut masuk ke dalam Tabber Tab.

Widget Popular Post dan Label (Kateori) sudah disediakan blogger. Untuk menampilkan widget Posting Terbaru dan Komentar Terbar, silakan ke posting Cara Menampilkan Posting Terbaru dan Komentar Terbaru.

Demikian cara terudah membuat Tabber Tab di Sidebar Blogger yang sudah dipraktikkan dan berhasil di blog demo Template SEO Friendly New Johny Wuss. Kodenya CB ambil dan modif dari Blogger Central. Good Luck! (http://contohblognih.blogspot.com).*

reff : http://www.contohblog.com/2015/09/cara-termudah-membuat-tabber-tab-sidebar-blogger.html

Read More

Membuat Kotak Pencarian Responsive di Sidebar Blog

Cara Membuat Kotak Pencarian(Search Box) atau Tombol Cari (Search Button) Responsive di Sidebar Blog

KOTAK Pencarian wajib ada di situs web atau blog. Gunanya untuk memudahkan pengunjung mencari informasi yang mereka butuhkan.

Kotak pencarian juga sangat dibutuhkan blogger untuk menemukan posting yang, misalnya, akan dijadilan internal link di sebuah posting baru.

Berikut ini cara membuat kotak pencarian responsif (mobile friendly), fleksibel, dan fast loading di sidebar blog. Contohnya ada di sidebar blog CB ini.

1. Template > Customize > Advance > Add CSS
2. Masukkan kode di bawah ini:

#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

3. Klik "Apply to Blog"

4. Back to Blogger

Catatan:
Bisa juga dengan cara: Template > Edit HTML > Copas kode di atas tepat di atas kode ]] lalu "Save Template".

5. Klik "Layout" > Add a Gadget > Edit HTML/Javascript

6. Copas kode di bawah ini di kolom "Content"

7. Save!

KiniKotak Pencarian Responsive sudah muncul di Sidebar Blog Anda. Good Luck! (http://contohblognih.blogspot.com/).*

reff : http://www.contohblog.com/2015/03/membuat-kotak-pencarian-responsive-di.html

Read More

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widgetKotak Pencarian (Search Box) plus Ikon Media Sosialdi sidebar blog sangat mudah. Kita tinggal pasang kode.

Contohnya ada di sidebar blog CB ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di Online News Template yang baru saja dipasang.

Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.

Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy+ Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.

cbblogger' rel='nofollow' style='margin-right: 15px;' target='_blank'>


contohblog' rel='nofollow' style='margin-right: 12px;' target='_blank'>


106869251529186655236/posts' rel='me' style='margin-right: 12px;' target='_blank'>


cbblogger' style='margin-right: 12px;' target='_blank'>


contohblognih' rel='nofollow' style='margin-right: 12px;' target='_blank'>


cbblogger' rel='nofollow' style='margin-right: 12px;' target='_blank'>

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda!

reff : http://www.contohblog.com/2015/01/membuat-kotak-pencarian-plus-media-sosial.html

Read More