Kumpulan Carousel Slider Sederhana

Kumpulan Carousel Slider Sederhana - Saya tidak akan membuat panduan tentang Carousel Slider karena sudah banyak yang membahas tentang efek transisi yang di pasang pada sebuah konten atau gambar. Dengan adanya efek transisi ini maka akan membuat blog atau website lebih menarik

Untuk efek transisi lainnya bisa Anda baca Slide Show Tab Widget

Sedangkan untuk Carousel sendiri adalah memiliki efek transisi berputar atau berulang yang biasanya dalam bentuk horizontal. Carousel merupakan salah satu dari bentuk-bentuk Slider yang biasa digunakan untuk memberikan efek transisi pada sebuah objek. Selain Carousel, masih ada beberapa efek slider lainnya seperti Nivo Slider, Revolution Slider, Rhino Slider, Skitter Slider dan sebagainya. Dan slider yang paling saya sukai adalah Revolution Slider, namun pada artikel ini saya lebih memilih Carousel Slider karena hanya memiliki sedikit script yang digunakan jika dibandingkan dengan jenis slider yang lainnya

Dan untuk membuat Carousel Slider ini, saya hanya bisa menunjukkan sebuah situs yang bisa Anda gunakan sebagai panduannya. Jika berminat silahkan kunjungi http://owlgraphic.com/owlcarousel/ yang telah membuat berbagai kumpulan Carousel Slider yang bisa digunakan secara gratis

Cara Menampilkan Jumlah Artikel Di Beranda Blog

Cara Menampilkan Jumlah Artikel Di Beranda Blog - Artikel ini merupakan artikel jawaban atas pertanyaan yang disampaikan teman saya +Ulfa Choiriyatun Nisa yang telah berkomentar di Cara membuat halaman blog berdasarkan Label  dan dengan adanya artikel ini semoga bisa menjawab pertanyaan tersebut

Untuk menampilkan jumlah artikel di halaman depan blog atau di Beranda blog sebenarnya sangat mudah dilakukan

• Buka blog yang ada di dashboard akun Blogger Anda
• Pilih menu Tata Letak >> Blog Posts >> Edit
• Muncul halaman Konfigurasi Posting Blog >> Opsi Laman Utama >> Jumlah posting di halaman utama:
  Ganti jumlah atau angka yang ada di kolom sesuai dengan jumlah artikel yang ingin ditampilkan
  
• Klik Simpan

Untuk menampilkan artikel blog di Halaman Blog silahkan baca di

Itulah cara menampilkan jumlah artikel di beranda blog yang bisa diterapkan untuk blog Anda

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks - Saya tidak tahu apa nama efek yang saya buat ini, karena adanya hasil efek berputar maka saya menamakannya "Roll Spin Effect" - Roll adalah gulungan dan Spin adalah berputar. Jadi seperti itulah, entah nyambung atau tidak yang penting efek dari hasilnya adalah berputar. Selain menimbulkan efek berputar pada teks, efek lainnya adalah bisa menghentikan efek berputar tersebut dengan mengarahkan kursor mouse

Membuat roll-spin effect atau efek berputar pada teks ini hanya menggunakan sedikit kode CSS dan tanpa script sama sekali sehingga tidak akan memperberat loading blog Anda

Baca juga

DEMOnya dibawah ini ya..

Roll-Spin atau Berputar-putar

Cara Membuat Roll-Spin Effect (Efek Berputar) Pada Teks
Salin kode CSS berikut ini kedalam template blog

#roll-bg {
margin:1em auto;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px;
}
#roll-bg p {
font-size:30px;
text-align:center;
color:#444;
padding:10px 0;
}
#roll-spin {
-webkit-animation-name:roll-spin;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:6s;
animation-name:roll-spin;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-duration:6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#roll-spin:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes roll-spin {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(-360deg);}
}
@keyframes roll-spin {
from {-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
transform:rotateY(0deg);}
to {-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
transform:rotateY(-360deg);}
}

HTML
<div id="roll-bg">
<p id="roll-spin">
Roll-Spin atau Berputar-putar</p>
</div>

Kode diatas merupakan pengembangan dari efek jatuh yang pernah saya buat sebelumnya, silahkan baca di

Silahkan jika tertarik untuk membuat rool spin effect diatas, agar teks di blog Anda bisa berputar

Mengetahui & Menghapus Broken Link Blog

Mengetahui & Menghapus Broken Link Blog - Blog memiliki beberapa komponen yang memberikan pengaruh terhadap SEO blog itu sendiri. Salah satunya adalah Link Blog. Blog yang baik adalah jika link yang terpasang berfungsi dengan baik. Namun bagaimana jika link tersebut tidak berfungsi atau menjadi Link Mati? Link mati atau yang jika di klik tidak memiliki fungsi atau tidak mengarahkan ke halaman yang dituju maka link tersebut disebut sebagai "Broken Link"

Dengan adanya broken link pada blog maka akan memberikan persepsi yang tidak baik bagi pengunjung, karena apa yang dibutuhkan oleh pengunjung ternyata tidak dapat ditemukan karena saat melakukan klik terhadap link tersebut tidak ada isinya. Dan hal ini akan menjadi pengalaman yang tidak nyaman bagi pengunjung blog tersebut, pada suatu saat jika mereka menemukan blog seperti itu maka mereka tidak akan kembali lagi dan akan beralih ke blog yang lainnya

Selain mempengaruhi pengunjung blog, Broken link juga akan berdampak langsung terhadap peringkat di Google, bahkan untuk mendapatkan Google Site Link juga akan sulit. Namun yang pastinya jika didalam blog terdapatnya banyak broken link, maka akan mengalami penurunan peringkat di Google

Jangan lupa baca juga

Lalu bagaimana cara mengetahui broken link blog?
Untuk mengetahui link blog yang tidak berfungsi atau link blog yang sudah rusak adalah dengan cara memeriksa seluruh isi blog, mulai dari awal sampai dengan artikel yang dibuat dan di bagian-bagian yang lain yang terpasang link, misalnya di widget blog. Karena sebagai seorang blogger kita semua tidak serta merta hanya memasang link dari dalam saja tapi link dari luar seperti sumber artikel juga harus di periksa, apakah link tersebut masih berfungsi atau tidak

Selain itu, dalam penulisan link saat membuat artikel juga terkadang mengalami kesalahan yang mengakibatkan link tersebut tidak berfungsi sebagaimana mestinya. Link yang dibuat akan menjadi link kosong dan akan membuat link sendiri, karena Blogger memiliki sistem yang menidentifikasi sebuah penulisan link

Contohnya link kosong adalah sebagai berikut:
Jika kita menuliskan sebuah link didalam artikel seperti <a href="">Sumber artikel</a> tanpa ada URL didalamnya maka saat di Publikasikan link tersebut akan berisi URL seperti ini, <a href="https://www.blogger.com/blogger.g?blogID=4802074111865276681">Sumber artikel</a>
Pernah mengalami seperti itu? Benar, link tersebut berfungsi jika yang memiliki akun Blogger dengan ID yang ada di URL tersebut dalam keadaan login namun tidak bagi pengunjung blog, link tersebut menjadi link yang terindikasi menjadi link mati atau broken link

Bagaimana Cara Mengetahui & Menghapus Broken Link Pada Blog?
Seorang blogger wajib memeriksa setiap link yang di pasang atau di tulis didalam blognya dan minimal setiap 1 bulan 1 kali, karena dengan melakukan pemeriksaan secara rutin tersebut maka blog menjadi lebih baik dan tentunya lebih disenangi oleh pengunjung atau mesin Google..

Untuk mengetahui dan menghapus broken link pada blog, saya ada sebuah layanan Gratis yang bisa membantu mengetahui broken link yang ada di blog, bahkan sudah diberi tahu letak dari link yang rusak tersebut. Klik www.brokenlinkcheck.com

Dengan menggunakan layanan tersebut, akan diketahui mana link yang rusak dan juga akan didapatkan sebuah ide apa yang harus dilakukan setelah mengecek link blog tersebut. Berikut hasil dari blog saya, ditemukan 91 Broken Links!

Ingat, Link yang rusak atau broken link yang terdapat pada sebuah blog biasanya lebih banyak ditemukan pada Link Internal. Salah satu contohnya adalah seperti yang saya tulis diatas atau karena adanya artikel yang di hapus yang masih menyisakan link dan ketikan pengunjung blog melakukan klik terhadap link tersebut makan akan mendapatkan halaman Error 404 dan hal inilah yang menyebabkan pengunjung blog mendapatkan pengalaman buruk dengan blog tersebut dan mereka pun enggan untuk mengunjungi kembali blog tersebut. Seperti yang telah saya tulis diatas, jangan pengunjung blog yang mulai tidak senang dengan blog Anda, Google juga benci dengan blog yang memiliki lebih banyak link yang rusak. Dan hal inilah yang dapat mengurangi peringkat lbog di mesin pencari atau search engine

Mengetahui dan menghapus broken link blog secara dini atau segera diperbaiki maka hal tersebut akan lebih baik dan pastinya akan lebih membantu keadaan blog kita, khususnya bagi search engine!

Membuat Floating Caption Gambar Artikel Blog

Membuat Floating Caption Gambar Artikel - Caption adalah sebuah keterangan yang terdapat dibagian bawah sebuah gambar dan biasanya caption ini ditulis secara manual untuk memberikan penjelasan pada gambar tersebut. Dan melalui artikel ini, saya akan sedikit memodifikasi caption tersebut dengan memberikan efek Hover, maksudnya, Sebuah keterangan pada gambar akan muncul jika gambar tersebut di sorot dengan pointer mouse

Dengan membuat floating caption atau efek hover tersebut maka akan menambah kesan yang menarik pada sebuah gambar dan juga akan mengurangi penggunaan tempat dalam menulis sebuah keterangan. Berikut beberapa bentuk contoh caption yang memberikan penjelasan pada sebuah gambar atau pada gambar artikel ini juga terdapat caption

Gambar dengan Caption manual

Membuat Floating Caption Gambar Artikel: Pada gambar terdapat beberapa contoh tampilan dari sebuah gambar yang telah memiliki keterangan(Caption) pada gambar tersebut atau seperti yang terlihat pada gambar artikel ini

Gambar dengan Floating Caption
Silahkan sorot pada kedua gambar dibawah ini dengan menggunakan mouse

• Ini adalah Keterangan Gambar (caption) yang muncul jika gambar artikel di sorot oleh pointer mouse. Membuat caption ini tidak diperlukan kode script tapi cukup menggunakan kode CSS

Gambar dengan Floating Caption berfungsi untuk memberikan keterangan agar Gambar atau Artikel blog tidak di copy paste

• Dilarang Keras Menyalin Gambar atua Artikel ini Dalam Bentuk dan Dengan Cara Apapun Tanpa Seizin dari Penulis

Bagaimana tertarik untuk membuat floating caption gambar artikel blog tersebut? Berikut kode CSS untuk membuat floating caption seperti demo diatas

.gbr_img {
width:500px;
height:274px;
overflow:hidden;
}
.gbr_img img {
width:100%;
}
.gbr_img .caption {
width:100%;
height:125%;
margin-top:-99%;
padding:1em 0;
position:relative;
z-index:2;
}
.gbr_img .caption ul {
list-style:none;
float:left;
width:100%;
padding:0;
margin:100% 0;
}
.gbr_img .caption ul li {
display:block;
float:left;
padding:10px;
text-align:left;
color:transparent;
background:#ecf0f1;
box-shadow: inset 0 2px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.4);
transition:transform .4s ease .5s, opacity .25s ease .5s;
transform:translateZ(0);
opacity:0;
}
.gbr_img .caption ul li span {
color:#444444;
font-size:11px;
line-height:1;
}
.gbr_img ul li:hover span {
color:#ecf0f1;
}
.gbr_img:hover ul li {
opacity:1;
transform:translateY(-11.5em) translateZ(0);
}
.gbr_img ul li:hover {
background:#2c3e50;}

Kode HTML

<div class="gbr_img">
  <img src="ganti-dengan-url-gambar-anda.png" />
  <div class="caption">
    <ul>
      <li><span>Tulis Keterangan Disini</span></li>
    </ul>
  </div>
</div>

Mudah bukan? Silahkan jika ingin membuat floating caption pada gambar artikel blog Anda agar menjadi lebih menarik. Cara pasangnya bagaimana? Sesuaikan saja kode dengan kode CSS gambar artikel yang ada pada kode template blog Anda :)

Ada Tampilan Baru Upload Gambar Di Blogger

Ada Tampilan Baru Upload Gambar Di Blogger - Saat membuat artikel tentang Strategi SEO, tampilan yang dimiliki oleh Blogger ini masih seperti dulu namun setelah saya membuat artikel ini, ada yang berubah dengan tampilan upload gambar tersebut. Seperti apakah tampilan baru upload gambar di Blogger ini?

Blogger telah merubah tampilan upload gambar menjadi lebih bagus dan terlihat lebih nyaman daripada sebelumnya. Pada tampilan baru upload gambar ini terlihat ada perbedaan dari tampilan sebelumnya yaitu menggunakan tampilan menu Horizontal, seperti yang terlihat pada gambar

Bandingkan dengan tampilan lama upload gambar di Blogger berikut ini

Pada gambar merupakan tampilan lama dari upload gambar di Blogger yang masih menggunakan tampilan menu vertikal

Itulah tampilan baru upload gambar di Blogger, semoga kedepannya masih ada lagi tampilan baru yang lebih baik lagi..

Seperti Apa Strategi SEO yang Sebenarnya?

Seperti Apa Strategi SEO yang Sebenarnya? Kita semua tahu kalau trafik blog yang melimpah datang silih berganti setiap detik kedalam blog adalah salah satu tujuan utama agar blog tetap eksis dan semakin populer. Dan cara terbaik untuk mendatangkan trafik blog adalah artikel blog harus berada di halaman pertama search engine karena trafik blog yang sangat disenangi oleh Google adalah yang berasal dari search engine

Untuk menempatkan artikel blog dengan kata kunci yang relevan (khususnya artikel baru) langsung berada di halaman pertama search engine bukanlah sesuatu yang bisa langsung diterapkan atau langsung nongol begitu saja. Sekali pun para blogger yang telah banyak membahasnya, membayar guru SEO untuk sebuah trik dan tipsnya, atau seminar-seminar SEO dengan harga jutaan rupiah yang telah memberikan penjelasan secara detail mengenai trafik blog yang berasal dari halaman pencarian dan bahkan mereka mengatakan untuk menempatkan artikel blog berada di halaman depan search engine dan mendatangkan trafik blog dari search engine adalah mudah dilakukan, bahkan mereka mengatakan sangat mudah mendatangkan trafik blog dengan cara seperti itu

Seperti Apa Strategi SEO yang Sebenarnya?

Kenyataannya? Benar apa yang mereka katakan, teori dari yang mereka ajarkan adalah benar dan mudah dilakukan namun untuk prakteknya secara langsung terkadang masih mengalami banyak kendala karena hampir semua yang mereka ajarkan masih menyisakan sebuah tanda Tanya dan pertanyaan yang pastinya akan selalu diajukan, kenapa seperti ini? Bagaimana ini? Kok saya tidak bisa mempraktekkan? Bahkan ada pertanyaan yang lebih gila lagi.. Loh kok saya harus membayar lagi? Nah lhooo..

Sekali lagi memang benar apa yang mereka katakan namun masih ada banyak faktor yang lebih mendukung terhadap cara-cara yang telah disampaikan untuk mendatangkan trafik blog melalui search engine dan hampir semua blogger, guru SEO, pengajar seminar tidak pernah memberikan secara detail dan lengkap tentang rahasia SEO yang sebenarnya. Bahkan beberapa mitos ini juga masuk dalam ajaran mereka tentang SEO:

Ngeblog Menggunakan Blogger
Banyak yang mengatakan jika ingin blog cepat terindeks, ngebloglah menggunakan Blogger (Blogspot) karena Blogger merupakan layanan blogging yang dimiliki oleh Google dan Google adalah penyedia mesin pencarian (Search Engine) terbesar yang sering dan banyak digunakan. Jika menggunakan Blogger, maka otomatis akan cepat terindeks oleh mesin pencarian tersebut. Benarkah?
Google tidak memperhatikan layanan yang digunakan untuk membuat blog, Google hanya lebih tertarik dengan blog yang berisi dengan artikel-artikel yang fresh, selalu update, relevansi dalam konten, dan menghubungkannya dengan social media
Lalu apa maksud dari jika ngblog menggunakan Blogger cepat terindeks? Memang jika menggunakan Blogger akan lebih mudah di indeks namun jangan dibandingkan dengan wordpress self hosting yang di bantu dengan plugin-plugin SEO yang siap mengantarkan blog tersebut lebih cepat berada di halaman pertama search engine. Blogger akan lebih cepat terindeks jika penggunanya mampu melakukan optimasi yang sebaik-baiknya, sekalipun blog tersebut masih berusia 1 minggu!

Usia Domain Blog
Matt Cuts dari Google pernah mengatakan malah membisikkan ke saya :), Usia domain sebuah blog bukan salah satu faktor utama dalam pengindeks-an di search engine. Namun blog baru yang berusia kurang dari 1 bulan akan lebih cepat ter-indeks jika telah menerapkan SEO yang baik dan benar

Memang, jika dibandingkan dengan blog yang masih baru, blog yang sudah lama akan lebih cepat ter-indeks juga karena sudah terdapat inbound link yang kualitas dan konsisten dalam melakukan update blog. Jadi, berapa pun usia blog yang dimiliki tidak memiliki efek seberapa cepat blog tersebut ter-indeks dan mendapatkan peringkat

Penggunaan Kata Kunci Artikel Blog
Kata kunci atau keyword adalah salah satu faktor yang lebih diperhatikan dalam optimasi SEO, dan hampir semua blog menggunakan banyak kata kunci dalam artikel atau blog mereka. Namun itu dulu.. Berbeda dengan sekarang, Google sudah tidak begitu memperhatikan kata kunci yang terdistribusi (menyebar) dalam artikel blog. Google akan mengancam sebuah blog jika terlalu banyak menggunakan kata kunci dengan melakukan deindeks terhadap blog tersebut. Lalu bagaimana cara menggunakan kata kunci yang baik? Lebih disarankan untuk menggunakan Long-Tail Keywords

Jadi apapun yang kita dapatkan tentang SEO, jangan hanya semata-mata langsung mengambil dan mempraktekkan apa yang telah kita pelajari, baik di blogger, ilmu dari para guru SEO, atau seminar tentang SEO untuk mendapatkan peringkat di search engine dan trafik yang melimpah. Belajar SEO tidak hanya sekali dapat langsung jadi, tapi butuh beberapa waktu untuk membuktikan semua yang telah kita pelajari tentang SEO. Lalu, Seperti Apa Strategi SEO yang Sebenarnya? Entahlah...