Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS

Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS - Memiliki blog yang bagus dan selalu terupdate dengan artikel-artikel yang berkualitas pasti akan menjadi rujukan bagi pemilik blog yang lainnya. Baik untuk mempelajari apa yang di bahas didalam blog tersebut, sekedar membaca isinya, atau sekedar meninggalkan komentar sebagai salah satu ciri khas dalam blogwalking. Dari sekian cara yang dilakukan pengunjung blog adalah kebiasaan lama yang mungkin tidak bisa hilang yaitu melakukan copy paste artikel, gambar, video, atau pun konten lainnya yang mungkin konten tersebut akan melengkapi konten atau artikel blog yang lainnya yang ada didalam blog mereka

Banyaknya pengunjung blog yang datang dengan berbagai sifat, sikap dan perilaku terkadang membuat khuatir bagi pemilik blog dan akhirnya memilih untuk melindungi semua atau sebagian artikel yang ada di blognya agar artikel tersebut tidak bisa di copy paste. Dan bagi Anda yang khawatir dengan artikel blog Anda dan ingin melindungi artikel tersebut, silahkan gunakan cara yang akan saya bahas berikut ini. Namun jika Anda menginginkan artikel blog Anda diberi password, silahkan baca Memasang password artikel blog

Untuk melindungi blognya agar artikel tidak bisa di copy paste, banyak yang menggunakan script anti copy paste, baik script yang berupa peringatan atau mematikan fungsi klik kanan pada mouse dan pada artikel ini saya menggunakan kode css agar artikel blog tidak bisa di copy paste yaitu dengan mematikan atau mendisable fungsi blog pada artikel yang dipilih menggunakan mouse atau dalam bahasa awamnya adalah Disable Text Selection

Daaann ternyata sudah banyak yang membahas tentang disbale text selection ini, saya sendiri menulisnya sesuai dengan ide saya sedangkan untuk sumbernya tidak mungkin saya tulis karena di Google sudah sangat banyak yang membahasnya. Nanti kalau saya tulis satu sumber, yang lainnya malah minta di tulis juga, namun yang pastinya tidak ada artikel yang sama seperti apa yang saya tulis ini karena saya menulis menggunakan kalimat dan bahasa saya sendiri. Kalau ada yang mengaku ada tulisan atau artikel yang sama dengan artikel ini, silahkan banding kemanapun

Perhatikan tampilan gambar berikut ini




Gambar diatas merupakan bentuk dari penerapan dari text selection yang saya buat sedemikian rupa. Ada 2 tampilan yang terdapat didalam gambar tersebut yaitu adanya artikel yang bisa di blok dan tidak bisa di blok. Sedangkan untuk DEMO langsung dari, saya menerapkan disable text selection ini pada 2 tulisan berikut ini

Gunakan mouse Anda untuk memblok 2 artikel berikut ini dan lihat hasilnya

1. Belajar ngeblog di Panduantemplateblog.com ternyata mudah sekali
   
2. Hayoo ajak teman-teman Anda untuk belajar disini! Gratis loh....

Itulah cara kerja text selection, jika kita memblok sebuah artikel atau paragrap maka akan terpilih sesuai dengan keinginan dan kita bisa menyalin artikel yang telah dipilih tersebut. Namun jika kita mendisable text selection ini maka hasilnya akan seperti pada poin 1 atau pada gambar yang bergerak diatas. Dan dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung

Dengan menggunakan kode CSS dari Text Selection ini lah, kita bisa melindungi blog kita agar artikel tidak bisa di copy paste. Dan untuk menerapkannya kedalam blog, salin kode berikut ini kedalam kode template blog

.disable_text_selection {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

Dan salin markup html berikut ini untuk memanggil fungsi dari kode CSS disable_text_selection diatas. Penempatan kode markup sesuai dengan keinginan, bisa di artikel atau pun di bagian sidebar blog

<div class="disable_text_selection">
Letakkan artikel blog disini agar tidak bisa di copy paste
</div>

Jadi dengan menggunakan kode CSS dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung. Memang cara ini sangat sederhana namun setidaknya masih membingungkan orang yang akan melakukan copy paste terhadap artikel blog kita

Memasang Password Artikel & Widget

Untuk membaca artikel Memasang Password Artikel & Widget ini

Klik Disini

Key : panduantemplateblog

Mengatasi Alamat Blog Tidak Tersedia

Mengatasi Alamat Blog Tidak Tersedia - Saat membuat blog di Blogger atau Blogspot terkadang kita terkendala dengan alamat blog yang tidak tersedia padahal kita menginginkan alamat blog tersebut menjadi milik kita. Namun untuk alamat blog yang umum digunakan seperti nama orang, nama produk, nama merek, nama tempat dan yang lainnya maka kita harus bersaing untuk memiliki alamat blog tersebut. Misalkan saya ingin memiliki alamat blog dengan atas nama saya sendiri, Ana Sriwahyuni maka saya akan memiliki alamat blog dengan URL anasriwahyuni.blogspot.com namun setelah saya cek alamat blog tersebut tidak tersedia ketika saya membuatnya dan alamat tersebut sudah dimiliki oleh orang lain dan ketika saya membukanya, blog tersebut tidak terupdate dengan baik

Baca juga Cara Mengenal URL Blog

Alamat blog atas nama saya bisa saya miliki jika ada tanda penghubung diantara nama saya tersebut yaitu dengan URL ana-sriwahyuni.blogspot.com dan sampai artikel ini saya buat, alamat blog tersebut masih belum terdaftar alias masih bisa saya miliki namun saya sudah enggan untuk memilikinya karena sudah banyak blog yang saya buat, entar kalau kebanyakan tidak bisa terurus dengan baik, kan bisa mubadzir nantinya. Silahkan yang menginginkan alamat blog dengan URL nama saya tersebut bisa diambil sekarang juga karena alamat blog tersebut tersedia untuk didaftarkan

Namun bagaimana jika alamat blog yang tidak umum dan kita pun beranggapan kalau alamat blog tersebut pasti tersedia untuk didaftarkan namun setelah kita membuatnya ternyata alamat blog tidak tersedia. Lihat screenshot gambar berikut ini!

Seperti yang terlihat pada gambar diatas, ternyata setelah mendaftarkan alamat blog dengan URL ftpsoft.blogspot.com di Blogger tidak tersedia. Betulkah alamat blog tersebut tidak tersedia? Jangan menyerah dulu, lebih baik lakukan cara kedua. Cara yang biasa saya lakukan untuk mengecek sebuah blog dan semua isinya :)

Bagaimana mengatasi alamat blog yang tidak tersedia tersebut tetap menjadi milik kita?
Jika saat membuat blog dan mengisi alamat blog dengan yang kita inginkan namun keluar pernyataan Maaf, alamat blog ini tidak tersedia seperti yang terlihat pada gambar diatas, jangan langsung menyerah atau mengganti dengan alamat yang lain tapi cek lah alamat blog tersebut di browser yang Anda gunakan. Apakah benar alamat blog yang di buat didalam Blogger benar-benar tidak tersedia atau adanya sistem dari Blogger yang mengalami error, Ingat tidak sepenuhnya sistem di Blogger benar-benar berubah 100% karena masih ada tampilan Lama yang masih bisa dilihat

Baca juga Tampilan Blogger Tidak 100% Baru

Perhatikan gambar diatas, ternyata setelah di cek di browser, alamat blog untuk ftpsoft.blogspot.com tidak ditemukan alias Blog not found namun masih tersedia dan bisa didaftarkan

Jika saat melakukan pengecekan alamat blog di browser dan masih tersedia seperti yang terlihat pada gambar diatas maka langsung saja Daftarkan blog tersebut melalui halaman browser tersebut dan jangan mendaftarkan alamt blog tersebut didalam Blogger karena hasilnya akan sama seperti saat melakukan registrasi, alamat blog tetap tidak tersedia

Namun perhatikan juga jika ditampilan browser saat melakukan pengecekan alamat blog seperti gambar berikut ini

Jadi itulah cara mengatasi alamat blog yang tidak tersedia saat melakukan registrasi di Blogger. Caranya cek lah alamat blog tersebut di browser, karena hasil yang didapat tidak sama dengan apa yang ditampilkan oleh Blogger. Ternyata alamat blog yang kita inginkan masih tersedia dan ingat, cara diatas bukanlah cara alternatif dalam menentukan sebuah alamat blog :)

Membuat Efek Kembang Api dengan CSS

Membuat Efek Kembang Api dengan CSS - Pernah bermain kembang api? Atau pernah melihat kembang api meledak dan bertaburan di angkasa di malam hari? Pernah dong.. Biasanya pada hari perayaan seperti hari raya Idul Fitri dan Tahun Baru banyak orang yang merayakannya dengan pesta kembang api



Baca juga Menerapkan efek malam di Blog

Tampilan diatas merupakan DEMO dari efek kembang api dengan CSS yang sudah saya pasang di blog ini. Namun sayangnya, untuk membuat efek kembang api dengan CSS ini tidak hanya diperlukan kode CSS saja tapi juga menggunakan kode script. Meski panduan ini saya berikan, kemungkinan besar tidak banyak yang akan menggunakannya karena tidak ada kegunaannya jika ditampilkan di blog, meskipun itu untuk memperindah tampilan blog. Saya kira tidak ada gunanya, sama dengan efek-efek lainnya seperti turun salju, atau daun berjatuhan :)

Baca juga Efek Rontok dengan CSS

Jika ingin memasang efek kembang api dengan css ini kedalam blog Anda, silahkan saja. Namun perlu dipertimbangkan juga untuk penggunaan dan pemasangan kode yang akan bertambah di dalam template blog, jangan sampai seperti blog saya ini, sudah sangat banyak kode css, javascript dan html yang terpasang yang secara langsung juga mempengaruhi loading blog. Jika kode blognya masih sedikit, silahkan dipasang... :)

CSS
Letakkan sebelum ]]></b:skin> atau diantara <style type='text/css'> dan </style>

#stage {
position:relative;
height:400px;
background:#000;
background-image:-webkit-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYePg9wuvWDqgvxJRVf701yMP9jR_QjHYC2hbPPELSn-_afSoRddPxCBQoFO9KAJdAcIvsEWBvoZ7AE057Zpb6KRPExVEZE2UxRAY3Uiw8kIutJGg_yT8uSrz3K5QfQJ4Oe3hR9MVmH8I/s1600/efek-kembang-api-css.gif);
background-image:-moz-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -o-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -ms-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
}
.launcher {
position:absolute;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
background:#fc073b;
border-bottom: 3px solid #2420e1;
}
.launcher div {
position:absolute;opacity:0;
-webkit-animation-name:explosion;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:explosion;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
left:3px;
top:3px;
width:10px;
height:4px;
border-right:4px solid #2420e1;
border-radius:2px;
-webkit-transform-origin:0 0;
-moz-transform-origin: 0 0;}

HTML
Letakkan kode HTMLnya sesuai keinginan. Misalnya di sidebar melalui menu Tata Letak dengan menambahkan kolom Widget disana :)

<div id="stage">
</div>

SCRIPT
Simpan kode scriptnya sebelum </body>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var num_launchers = 12;
var num_flares = 20;
var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'white', 'blue', 'green'];
var cssIdx = document.styleSheets.length - 1;

function myRandom(from, to)
{
return from + Math.floor(Math.random() * (to-from));
}

var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
+ "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
+ " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

for(var i=0; i < num_launchers; i++) {
leftfrom = myRandom(15, 85);
lefttop = myRandom(30, 70);
toptop = myRandom(20, 200);
leftend = lefttop + (lefttop-leftfrom)/2;
botbot = toptop + 100;

csscode = keyframes_template;
csscode = csscode.replace(/LEFTFROM/, leftfrom);
csscode = csscode.replace(/LEFTTOP/, lefttop);
csscode = csscode.replace(/TOPTOP/, toptop);
csscode = csscode.replace(/LEFTEND/, leftend);
csscode = csscode.replace(/BOTBOT/, botbot);

try { // WebKit browsers
csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }

try { // Mozilla browsers
csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
}

for(var i=0; i < num_launchers; i++) {
var rand = myRandom(0, flare_colours.length - 1);
var rand_colour = flare_colours[rand];
var launch_delay = myRandom(0,100) / 10;

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
+ " -webkit-animation-name: flight_" + i + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-name: flight_" + i + ";\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
+ " border-color: " + rand_colour + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_flares; i++) {
csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
+ " -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ " -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_launchers; i++) {
var newdiv = document.createElement("div");
newdiv.className = "launcher";
for(var j=0; j < num_flares; j++) {
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
}, false);

// ]]>
</script>

Silahkan jika tertarik untuk membuat dan memasang efek kembang api dengan CSS seperti yang telah dibahas di atas. Semoga bermanfaat

Tampilan Blogger Tidak 100% Baru

Tampilan Blogger Tidak 100% Baru - Dalam beberapa bulan terakhir ini Google dengan layanan blognya yaitu Blogspot atau yang saat ini sudah dikenal dengan sebutan Blogger sudah membenahi atau mengganti tampilan Blogspot/Blogger menjadi lebih baik. Langkah pertama yang diganti oleh Google adalah meniadakan format Blogspot untuk mobile atau ponsel, artinya pengguna Blogspot tidak bisa melakukan update artikel, menambahkan widget, edit kode template, dan lainnya sudah tidak bisa menggunakan ponsel

Dahulu kala tepatnya tahun 2009 adalah awal saya membuat blog di Blogspot dan saat itu saya ngblog menggunakan ponsel Nokia E63 dalam mengupdate artikel dan mengedit template blog dan browser yang saya gunakan dan yang sangat responsif dengan Blogspot adalah UCBrowser dan Bolt Browser, sedangkan browser lainnya seperti Opera Mini terkadang mengalami gangguan saat proses loading update artikel maupun saat mempublikasikan artikel sering mengalami gagal atau error. Selain meniadakan format Blogspot untuk mobile atau ponsel, Google juga mengganti beberapa tampilan dari menu-menu yang ada di Blogger dan yang terakhir yang saya tahu sampai artikel ini terbit adalah Mengganti tampilan upload gambar artikel

Meski secara keseluruhan Google telah mengganti beberapa bagian yang ada di Blogger, namun tidak semuanya sudah di ganti karena masih saja ada sisa-sisa tampilan lama Blogspot yang masih ada di tampilan baru Blogger alias sesuai judul artikel ini, Tampilan Blogger Tidak 100% Baru

Apa saja tampilan Blooger yang tidak baru tersebut? Untuk melihat sisa-sisa tampilan lama Blogspot, silahkan klik DISINI

Atau lihat tampilan Blogger yang tidak 100% baru pada gambar berikut ini

Ya, tampilan untuk halaman Follower Blogspot seperti yang terlihat pada gambar diatas masih menggunakan tampilan lama. Dan kapan tampilan ini akan bertahan? Atau jangan-jangan Blogger atau Google lupa dengan tampilan lama halaman follower ini.. :) Entah lah, yang pasti saya tidak tahu dan yang penting kita tetap disediakan tempat untuk menulis dan membagikannya secara online di Blogger. Namun ada kesimpulan yang saya ambil dengan adanya bagian yang belum diperbaharui yang ada di Blogger ini, yaitu Tampilan Blogger Tidak 100% Baru :)

Tampilan Facebook Baru, Apa Pendapat Anda?

Tampilan Facebook Baru, Apa Pendapat Anda? - Saya memang jarang aktif di Facebook jika menggunakan via desktop sehingga saya tidak tahu tentang kabar terbaru mengenai tampilan Facebook yang baru ini. Kalau mengenai status atau pembaharuan dari facebook selalu saya ketahui melalui ponsel karena saya menggunakan SMS Facebook. Dan beberapa jam yang lalu sebelum membuat artikel blog ini, saya mengakses Facebook menggunakan laptop dan ternyata, seluruh tampilan Facebook menjadi baru alias berubah total

Baca juga Tampilan Baru dan Fitur facebook

Apa saja tampilan baru dari Facebook ini?
Berikut beberapa screenshot yang saya ambil dari beberapa tampilan baru facebook yang saya akses langsung dari akun facebook saya. Untuk mengetahui secara detail mengenai tampilan ini, silahkan login ke akun Facebook Anda semua

Klik thumbnail berikut dan sorot pada gambar diatas untuk melihat detail dari tampilan facebook yang baru

• 
• 
• 
• 
• 
• 
• 

Bagaimana sudah melihat detail dari tampilan Facebook baru diatas? Jika belum silahkan dilihat di masing-masing akun facebooknya. Dengan adanya tampilan baru tersebut, apakah Facebook masih memiliki tampilan responsive? Tentu saja, karena sejak dulu sampai sekarang, facebook memiliki tampilan responsive yang sangat baik

Baca juga Tampilan Facebook Lebih Responsive

Jadi dengan adanya Tampilan Facebook Baru ini, Apa Pendapat Anda dengan tampilan tersebut? Silahkan tinggalkan pendapat Anda dalam komentar blog

Validasi Kode HTML5 & CSS Blog

Validasi Kode HTML5 & CSS Blog - Pada saat blogwalking kemarin ada sebuah artikel dari teman saya yang mengingatkan saya akan validasi kode HTML atau CSS blog. Didalam artikel teman saya tersebut dijelaskan bagaimana agar kode HTML yang tidak valid menjadi valid. Setelah membaca artikel yang ada di blognya teman tersebut, saya pun mencoba untuk mengecek kode html blog ini, apakah masih valid atau tidak. Dan ternyata hasilnya sebagai berikut

atau bisa di cek langsung di http://validator.w3.org/check?uri=http%3A%2F%2Fwww.panduantemplateblog.com%2F

Saya cek validasi kode HTML5 & CSS blog ini karena hanya ingin melihat apakah ada kode error yang sama yang seperti dijelaskan oleh +yanto cungkup didalam artikelnya hapus kode dir ltr dan ternyata setelah saya cek hasilnya; tidak ada kode HTML yang error alias kode HTML5 blog ini masih valid atau seperti yang terlihat pada gambar diatas

Baca juga Penggunaan Template Valid Pada Blog

Kenapa saat melakukan validasi kode HTML5 pada blog ini masih memiliki kode html yang valid? Padahal kalau dilihat dari sumber kode blog ini di view-source:http://www.panduantemplateblog.com, Anda semua pasti akan kaget kalau kode template blog ini (html, javascript, dan css) jumlah sangat banyak sekali. Mungkin saking banyaknya, saya beranggapan kalau tidak ada blog yang memiliki kode-kode template sebanyak blog saya ini. Belum lagi kode CSS dan javascript yang tersimpan dalam Google Drive

Baca juga Cara Edit Kode CSS di Google Drive

Jika pada kode HTML5 blog ini valid, namun pada kode CSSnya khususnya CSS3 sungguh lebih sangat mengejutkan. Dengan banyaknya kode CSS yang ada didalam template blog ini, sudah bisa ditebak kalau untuk kode CSS blog tidak valid. Bahkan sangat tidak valid seperti pada tampilan gambar berikut ini

Ternyata banyak error yang terjadi pada kode CSS template blog ini. Apakah itu membuat saya pusing dan harus memikirkannya agar valid CSS3? Tidak, saya tidak mau memikirkan mengenai validasi kode HTML & CSS blog ini karena menurut saya hal ini akan sangat tidak perlu. Valid atau tidak valid kode template blog tidak berpengaruh pada nilai SEO blog. Yang sekarang adalah lebih baik teman-teman meninggalkan komentar untuk artikel blog ini karena itu lebih penting dari segalanya :)

Memasang Tombol Sosial Media Di Halaman Artikel Blog

Apa sich gunanya Memasang Tombol Sosial Media Di Halaman Artikel Blog? Bukahkah dengan memasang tombol sosial media tersebut akan memperberat loading blog karena adanya penambahan script redirect ke server situs sosial tersebut? Misalnya script dari facebook atau pun twitter yang notabene akan menambah jumlah script di blog. Tapi menurut beberapa blogger dan tujukan dari Google, dengan memasang tombol sosial di blog akan menambah nilai SEO blog atau artikel tersebut semakin bagus karena adanya share dari setiap pengunjung blog. Dengan adanya share tersebut menunjukkan kalau blog atau artikel tersebut berguna bagi semua orang sehingga banyak yang melakukan share. Benarkah seperti itu? Entahlah yang pasti dengan memasang tombol sosial di setiap artikel blog hanya akan mempermudah pengunjung blog membagikan artikel tersebut ke dalam akun sosial mereka

Sehingga jika link artikel blog yang dibagikan sudah berada di akun sosial pengunjung blog yang melakukan share tadi, maka kemungkinan besar akan dibaca dan di klik oleh teman-temannya. Jika potongan artikel blog yang dibagikan menarik untuk dibaca, maka kemungkinan besar akan menambah trafik blog dan dari sinilah kenapa membagikan artikel blog ke sosial media menambah nilai SEO terhadap blog atau artikel blog tersebut

Baca juga Meningkatkan jumlah visitor blog dari sosial media

Lalu bagaimana cara memasang tombol sosial media di setiap halaman artikel blog yang biasanya berada di bawah artikel blog atau seperti yang terlihat pada bagian artikel blog ini. Pada artikel ini saya tidak akan menjelaskan bagaimana cara memasang tombol sosial di blog karena saya sudah membuatnya di artikel yang lama dan Anda bisa membaca di Memasang tombol sosial. Sedangkan pada artikel ini hanya sebagai ulasan saja bagaimana efek viral yang terjadi jika artikel blog kita bisa berada di semua halaman akun sosial pengunjung blog kita atau seperti yang terlihat pada diagram diatas

Gratis Panduan Lengkap Rahasia SEO Blog

Gratis Panduan Lengkap Rahasia SEO Blog - Banyak blogger yang membahas tentang SEO namun hampir semuanya tidak menunjukkan bagaimana SEO itu sebenarnya. Mereka yang membahas tentang SEO hanya memberikan dasar-dasarnya saja bahkan kalau pun memberikan secara lengkap, tidak pernah jelaskan bagaimana efek terdahsyat dari SEO jika dilakukan secara baik dan benar dan bagaimana juga pengaruh SEO jika dilakukan secara tidak benar

* gambar merupakan hasil kreatif TIM PanduanTemplateBlog

Dan pada artikel ini saya akan memberikan panduan lengkap rahasia SEO blog yang sebenarnya yang tidak pernah di bahas di blog atau website manapun, kalau pun ada, itu hanyalah sebagian dari apa yang saya berikan ini. Semua dijelaskan secara lengkap, mulai SEO tingkat dasar sampai tingkat advance. Dan dengan mempelajari panduan lengkap Rahasia SEO ini saya yakin blog dan artikel blog Anda akan mampu bersaing dengan blog-blog yang lain, apapun jenis blog Anda jika benar-benar menerapkan panduan ini, semuanya akan terasa lebih mudah

Silahkan baca Strategi SEO yang sebenarnya

Berikut salah satu bukti dari artikel saya yang saya buat kemarin per tanggal 10 Oktober 2014, belum sampai 1 hari sudah berada di No.1 halaman pertama Google dengan kata kunci "Memasang Efek Slide Tombol Share" dan No.2 untuk kata kunci "Memasang Tombol Share Sosial Media"

Bahkan dengan tingkat persaingan 123.000.000 untuk kata kunci "Membuat Email HTML" mampu menjadi No.1 di halaman pertama Google

Dan juga mampu bersaing dengan kata kunci "Membuat Tabel Harga di Blog" dengan tingkat persaingan 13.700.000

Tiga screenshot diatas bukan hasil rekasa atau editan tapi benar-benar terbukti berada di halaman pertama Google setelah menerapkan panduan lengkap rahasia SEO blog tersebut. Jika Anda tidak percaya dengan screenshot diatas, silahkan di cek untuk kata kunci yang saya sebutkan diatas

UPDATE: Untuk artikel ini dengan kata kunci "Gratis Panduan Rahasia SEO" dengan tingkat persaingan 488.000 sudah mampu bersaing dengan yang lainnya padahal saya belum memberikan backlink untuk artikel ini dan hanya butuh beberapa jam saja artikel ini sudah terindeks dan menempati posisi teratas

Bagaimana Cara Mendapatkan Panduan Lengkap Rahasia SEO Blog Secara Gratis ini? Saya tidak memberikannya untuk Anda tapi saya telah mempelajarinya dan telah menerapkannya dan benar-benar terbukti. Saya tidak akan membahas atau memberikannya untuk Anda tapi saya hanya memberitahukan kalau ada sebuah layanan yang membahas tentang rahasia SEO blog yang sangat mudah dilakukan yang membantu blog atau pun artikel blog Anda mendominasi halaman pertama Google

Untuk mendapatkan panduan lengkap rahasia SEO blog ini sebenarnya tidak murni gratis tapi Anda masih beruntung sekali karena Anda hanya cukup membayar Rp 50.000,. untuk mendapatkan semua rahasia seo yang ada didalam layanan ini. Tidak seperti saya yang harus membayar 4x lipat untuk mendapatkan panduan dan teknik SEO ini, dan Anda hanya membayar Rp 50.000,. untuk mendapatkan segalanya, untuk mendapatkan ilmu SEO yang sangat lengkap. Dan saya yakin dengan harga yang begitu murah tersebut atau dengan uang sekecil itu, Anda bisa mendapatkan semuanya, silahkan klik tombol berikut untuk mendapatkan panduan rahasia SEO blog ini

Silahkan daftarkan diri Anda dan gunakan kesempatan ini dengan sebaik-baiknya, uang Rp 50.000 begitu kecil jika dibandingkan dengan apa yang akan Anda dapatkan selama 7 hari dan selama itu, langsung saja download semua panduannya, pelajari dan terapkan kedalam blog Anda. Ingat, kesempatan ini terbatas dan tidak selamanya Panduan lengkap rahasia SEO blog ini gratis dan dibagi-bagikan dengan harga murah

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog - Sebuah artikel blog akan lebih berguna jika ada pengunjung dan pembaca artikel blog tersebut membagikannya ke media sosial yang mereka miliki dan dengan adanya artikel blog kita didalam sosial media maka akan membuat pengunjung blog akan bertambah. Namun akan terasa sulit jika didalam artikel blog tidak terdapat media yang digunakan untuk membagikan artikel tersebut dan syarat utamanya harus ada tombol share sosial media untuk artikel blog tersebut

Apa saja yang harus ada di tombol share sosial media tersebut? Seperti yang ada dibagian bawah artikel blog ini, terdapat 4 tombol sosial media yang terpasang yaiut Google Plus, Facebook, Twitter dan Linkedin. Dengan adanya tombol sosial media tersebut maka saya selalu berharap agar teman-teman blogger atau pembaca artikel blog ini dengan senang hati membagikan artikel-artikel yang ada di blog ini. Namun kalau tidak ada yang membagikan, ya tidak apa-apa, yang penting semoga blog ini tetap bermanfaat dan berguna bagi kita semua :)

Agar artikel-artikel blog bisa dengan mudah dibagikan maka kita harus memasang tombol sosial media tersebut seperti yang ada dibagian bawah artikel blog ini. Dan pada artikel ini, saya tidak akan membagikan tombol share sosial media seperti yang ada di blog ini. Saya akan membagikan sebuah tombol share sosial media dengan efek slide out, yaitu sebuah tombol yang akan keluar sosial media jika tombol tersebut di sentuh oleh pointer mouse

Baca juga Memasang Sosial Media Share di Gambar Blog

Bagaimana Cara Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog seperti pada gambar diatas?
Untuk memasang tombol share seperti yang terlihat diatas atau seperti pada DEMO berikut ini, silahkan salin kode-kode CSS berikut ini karena untuk memasang tombol share dengan efek slide out ini tidak diperlukan kode script atau jQuery hanya menggunakan kode CSS saja

#sh-sosmed {
position:relative;
margin:1em auto;
padding:0;
width:64px;
height:64px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrYXe-FOLhRyMGagbAk1RLn1udv8g783Z5JklX0hQ8Cwu0oWuquN1h4zTCUPrpHSz1kUXGo-qVOgChxzn-d5qUCcmiH5ooyqX-9ksU84RWxWYvNfu3Md03YeGXhPzoJHXC5ENhi9SqGM/s1600/bagikan-icon.png);
background-position:center center;
background-repeat:no-repeat;
list-style-type:none!important;
list-style-image:none!important;
line-height:1.0!important;
cursor:pointer;
}
#sh-sosmed {
float:center;
margin:80 auto;
}
#sh-sosmed li {
visibility:hidden;
position:absolute;
top:12px;
left:12px;
margin:0;
padding:0;
background-position:0 -45px;
background-repeat:no-repeat;
opacity:0;
transition-property:left,top,opacity,background-position,visibility;
transition-duration:0.2s,0.2s,0.2s,0s,0.2s;
transition-timing-function:ease-in,ease-in,ease-out,linear,linear;
transition-delay:0.2s,0.2s,0.2s,0s,0.2s}
#sh-sosmed li:hover {
background-position:0 0;}
#sh-sosmed li a {
display:block;
width:40px;
height:40px;
}
#sh-sosmed:hover li,#sh-sosmed.hover li {
visibility:visible;
opacity:1.0;
filter:0;
transition-property:left,top,opacity,background-position;
transition-duration:0.3s,0.3s,0.3s,0s;
transition-timing-function:cubic-bezier(.6,1.51,.66,.92),cubic-bezier(.6,1.51,.66,.92),ease-out,linear;
transition-delay:0s,0s,0s,0s;}
#sh-sosmed li.fbook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WDhbRJ3FJgqSOiSRXbwlgzCclFiFyoesSc0dDNCfGKxg5Pn-R-_ZcWZHDigTnaHfJ3RJCI9B4rXUVi_cQ5ImM9vbo2u2P91VMCpsjBJaKSRhy4LRSijypUr9wSax1968HDpfhdlnPhg/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSU_7qD3JX8K3P6-BsShQjup7UHbOhfTuJ8DG6IN4WRnyQPH4UsXJQLHElhtXgd95eIIJCGZ0f3j6xs1mxdehdHX9hyJWCNHIlvri-bAIjZpw7wrJQrD4GqQfi9EiKErAvA21c1n5Lei0/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CoFH9QKsbdkwBTF-RvLLVqdkW_2de7NINIReM0PRc_0x3Glbbic4Gd5KJ2JHwbn2pR5XbPsdFe_zvzDHMUpfLSReKIQPIYuNY4Dev1E6cu0Rlw2thyphenhyphenfR9BbAzJulC8fahkgGWUE0uQ0/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gMrdL_gR4jpYsqQ2TCLbO63aWfoXcwj5kWn5IsGwFVBjrwuXUy75Lfr9XcOFFGRh_n6UQms_3IBB4Ckh84T3ElWbmr9mQm5u6xSERUmITa3sCP8BzwdeFvJf7UNrLvB7jan9OfOCRrE/s1600/linkedin-icon.png);}
#sh-sosmed:hover li.fbook,#sh-sosmed.hover li.fbook {
left:-30px;
top:-30px;
}#sh-sosmed:hover li.tweet,#sh-sosmed.hover li.tweet {
top:-48px;
left:12px;}
#sh-sosmed:hover li.gplus,#sh-sosmed.hover li.gplus {
top:-30px;left:54px;}
#sh-sosmed:hover li.linkedin,#sh-sosmed.hover li.linkedin {
top:69px;right:-69px}

HTML

<ul id="sh-sosmed">
<li class="fbook"><a title="Share on Facebook" target="_blank" href="#"></a></li>
<li class="tweet"><a title="Tweet This" target="_blank" href="#"></a></li>
<li class="gplus"><a title="Plus on Google+" target="_blank" href="#"></a></li>
<li class="linkedin"><a title="Share on Linkedin" target="_blank" href="#"></a></li>
</ul>

DEMO Efek Slide Out Tombol Share Sosial Media - Silahkan arahkan pointer mouse Anda

Lalu bagaimana jika menginginkan agar tombol share sosila media ini terpasang secara otomatis di seluruh halaman artikel blog? Silahkan baca panduannya di Memasang Tombol Sosial Media Di Halaman Artikel Blog

Mengganti Topik Blog Berpengaruh Pada SEO

Mengganti Topik Blog Berpengaruh Pada SEO - Pernah mengganti topik blog karena sudah tidak ada ide untuk membuat artikel blog, padahal topik yang pertama sudah disenangi oleh Google dan trafik blog sudah sangat banyak. Namun karena merasa topik yang dibahas di dalam blog sangat terbatas, akhirnya ada penambahan-penambahan topik yang dibuatkan kedalam artikel blog. Sehingga, jika pada awalnya hanya menargetkan pada satu niche atau satu topik sehingga menjadi banyak niche yang keluar untuk blog tersebut

Lalu Apa Pengaruhnya Mengganti Topik Blog?
Jika pada awalnya blog yang kita kelola telah memiliki satu topik bahasan atau hanya menargetkan satu niche pada blog tersebut maka secara relevansi atau keterkaitan di dalam blog tersebut akan lebih kuat sehingga akan lebih mudah juga dalam melakukan optimasi. Bahkan tanpa optimasi pun sudah menjadi blog yang baik jika dinilai dari sisi OnPage SEO dan Keywords bahkan dalam bentuk Long Tail Keywords juga sangat bagus sehingga lebih mudah cepat terindeks dan bisa muncul di halaman pertama search engine

Memang, memiliki blog dengan satu topik atau satu niche terasa lebih berat tantangannya karena harus mencari artikel-artikel yang bisa relevan dengan yang telah di bahas didalam artikel blog, bahkan tantangan terberat adalah KEBOSANAN dalam melakukan update artikel blog karena artikel yang akan di update hanya itu-itu saja. Namun memiliki topik blog hanya dengan satu niche, lebih memudahkan dalam melakukan optimasi karena tidak terlalu banyak keywords yang dibutuhkan dan artikel atau konten yang ada sudah sangat relevan

Bagaimana Jika Mengganti Topik Blog ?
Banyak para master Blogger bahkan ahli SEO mengatakan, jika ingin membuat blog buatlah riset terlebih dahulu dan temukan kata kunci atau keywords yang akan menentukan topik blog Anda, sehingga dengan begitu akan lebih memudahkan dalam menemukan dan menentukan niche target dari blog yang akan di buat. Selain itu juga akan menentukan karakteristik dan tujuan blog di masa yang akan datang. Ingat, membuat blog bukan hanya sekedar hobby tapi dalam jangka panjang, keberadaan dan manfaat blog juga perlu diperhatikan

Namun akan sangat disayangkan jika tiba-tiba topik blog yang telah di buat dan sudah memiliki peringkat yang bagus di Google tiba-tiba ada sebuah atau beberapa artikel yang memiliki topik berbeda dengan topik blog yang telah ditentukan sebelumnya. Kenapa? Apakah mengganti topik blog berpengaruh pada SEO? Karena sudah ada perubahan struktur dari blog Anda, khususnya yang berhubungan dengan relevansi. Maka dengan adanya tambahan topik tersebut, blog Anda sudah tidak relevan dengan topik yang telah Anda buat dan Google sangat jeli dengan hal ini; Google akan berpikiran "Oh blog ini kok sudah ganti topik, apakah semua artikelnya juga diganti?" sehingga kemungkinan besar Google akan melakukan pengindeksan ulang. Bagaimana jika Google mengindeks ulang seluruh konten blog Anda? Kemungkinan besar beberapa artikel blog yang sebelumnya terindeks bagus akan mengalami penurunan, khususnya di halaman pencarian

Selain telah ditandai oleh Google, akan lebih banyak waktu yang dibutuhkan untuk mengurus blog tersebut. Bukan mengurus dalam mengupdate blog tapi akan lebih membutuhkan banyak waktu dalam melakukan optimasi karena sudah terdapat banyak topik dengan beberapa keywords didalamnya

Bagaimana Jika Mengganti Blog Title atau Post Title ?
Mengganti blog title ketika blog Anda sudah bagus, sama dengan Anda menghancurkan blog yang telah dibuat selama ini. Karena mengganti blog title atau Judul blog akan mengulang keberadaan blog Anda seperti semula, Begitu juga dengan Post Title seperti yang telah saya jelaskan diatas

Lalu Bagaimana Solusinya?
Mengganti topik blog sah-sah saja, namun alangkah baiknya jika tidak menambahkan topik baru kedalam blog yang telah ada dan telah baik, khususnya dari sisi SEO. Lebih baik buatlah blog yang baru dengan topik yang baru tersebut agar semuanya lebih mudah dilakukan

Cara Ngeblog Menggunakan Aplikasi Blogger di Android

Cara Ngeblog Menggunakan Aplikasi Blogger di Android - Masih berhubungan dengan artikel kemarin yang saya tulis, ngeblog menggunakan aplikasi Bloggeri di Android ternyata gampang-gampang susah, selain ukuran layar yang terlalu kecil dan ketidaknyamanan saat menulis atau melakukan pengetikan dengan cara mengetuk layar bukan merupakan suatu tantangan tapi akan selalu mengalami kekeliruan dalam mengetik

Baca juga Nyamankah Ngeblog di Aplikasi Blogger?

Namun jika Anda yang masih belum pernah mencoba ngeblog menggunakan aplikasi Blogger di Android, saya akan menjelaskan sedikit untuk Anda. Dan setelah membaca penjelasan dari saya berikut ini, silahkan Anda coba atau silahkan dinilai sendiri, apakah Ngeblog menggunakan aplikasi Blogger di Android itu perlu dilakukan atau tidak, apakah nyaman atau tidak..

Sebelum ngeblog menggunakan aplikasi Blogger di Android, maka harus ada syarat utama yang perlu dilakukan yaitu harus ada smartphone atau ponsel yang ber-OS Android dan memasang aplikasinya. Jika tidak ada, penjelasan artikel ini saya rasa sudah cukup memberikan pengetahuan apakah perlu Ngeblog menggunakan smartphone atau aplikasi Blogger yang ada di Android

Berikut Cara Ngeblog Menggunakan Aplikasi Blogger di Android

• Buka smartphone Anda yang ber-OS Android
• Buka aplikasi Play Store
• Cari Blogger di kolom pencarian yang ada di menu bar agar aplikasi Blogger bisa muncul
• Klik tampilan aplikasi Blogger tersebut

• Tampilan dari aplikasi Blogger yang ada di Android akan terbuka seperti yang terlihat pada gambar disamping. Pelajari terlebih dahulu aplikasi tersebut
• Jika ingin memasang aplikasi Blogger tersebut, silahkan sentuh tulisan Pasang
• Karena menggunakan layar sentuh jadi bukan Klik yang dilakukan :)
• Proses mengunduh (Download) sedang dilakukan, biarkan sampai selesai dan melakukan Pemasangan terhadap Aplikasi Blogger

• Jika proses mengunduh (Download) dan pemasangan aplikasi selesai, maka tampilan Aplikasi Blogger di Play Store akan terlihat seperti gambar disamping
• Silahkan sentuh tulisan Buka Untuk membuka aplikasi Blogger yang telah terpasang
• Atau tutup Play Store dan buka aplikasi Blogger di menu Applikasi yang ada di Smartphone Android Anda

• Pada saat pertama kali membuka aplikasi Blogger di Android maka akan ada permintaan dalam penggunaan Akun
• Jika Anda sudah memiliki Akun di Google (Seharusnya sudah) maka gunakan akun tersebut
• Yang mana akun Google yang digunakan? Email dari Google yang Anda miliki, jika belum memiliki email, silahkan buat dulu email di Google
• Sentuh Yang Sudah Anda jika sudah memiliki akun atau Baru jika belum memiliki Akun

• Halaman login atau Masuk ke akun Blogger akan terlihat seperti tampilan gambar disamping jika Anda telah menggunakan Akun yang sudah ada
• Sentuh Berikutnya untuk mengisi email Anda

• Tuliskan alamat email Anda dengan menggunakan email dari Google, bukan yang lain dan tuliskan juga kata Sandi atau password dari akun email tersebut
• Selanjutnya sentuh Selesai dan sentuh icon Segitiga ke Kanan

Langsung saja sentuh Oke

Proses masuk ke akun Blogger sedang berlangsung, silahkan ditunggu sejenak

Langsung sentuh Lewati untuk melanjutkan

Langsung saja sentuh icon Segitiga ke Kanan

• Karena tampilan mobile, maka halaman depan (dashboard) akun Blogger akan terlihat seperti gambar disamping

• Blog pertama yang tampil adalah blog yang terakhir di update jika Anda memiliki banyak blog dalam satu akun
• Penjelasan Menu:
  • icon Segitiga kecil untuk melihat dan memilih blog
  • icon Pensil untuk membuat artikel baru
  • icon akan membuka sub-menu didalamnya

Cara membuat artikel baru menggunakan aplikasi Blogger di Android

• Jika terdapat blog yang banyak di akun Blogger Anda, silahkan pilih terlebih dahulu blog yang akan di update dengan menyentuh icon Segitiga kecil
• Selanjutnya sentuh icon Pensil untuk membuat artikel baru
• Tampilan halaman penulisan artikel terlihat seperti gambar di samping
• Tulis judul artikel blog pada kolom Judul Pos, tulis artikel di Konten Pos dan masukkan Label artikel di kolom Label
• Sedangkan icon Camera digunakan untuk mengupload Gambar artikel

Proses penulisan artikel menggunakan aplikasi Blogger di Android yang saya lakukan untuk artikel sebelumnya seperti yang terlihat pada gambar disamping
Dari sinilah akan mulai terasa bagaimana Ngeblog menggunakan aplikasi Blogger di Android itu, sangat mudah memang, tapi butuh kesabaran dan ketelitian saat menulis artikel, apalagi dalam penggunaan huruf-huruf tebal, miring, dan garis bawah serta artikel dalam bentuk list atau penomeran serta memasang link artikel kedalam artikel

Memasukkan Gambar Artikel Menggunakan Aplikasi Blogger di Androdi

Untuk memasukkan gambar kedalam artikel adalah sebagai berikut:

• Buatlah paragrap pertama dari artikel yang ditulis tersebut. Setelah Paragrap pertama selesai dibuat, buatlah garis baru atau sentuh icon ↵
• Selanjutnya sentuh icon Camera yang ada disamping kolom Judul artikel

Ingat, jangan memasang Gambar artikel setelah selesai menulis artikel secara keseluruhan karena gambar artikel akan berada dibawah

Gambar disamping adalah hasil upload gambar artikel yang ada setelah paragrap pertama artikel dibuat. Untuk melanjutkan artikel, sentuh icon ↵ dan lanjutkan menulis

Cara menyalin teks atau tulisan di artikel blog menggunakan aplikasi Blogger di Android

Bagaimana cara menyalin teks atau tulisan?

• Untuk menyalin artikel, blok pada teks atau tulisan tersebut seperti pada gambar di samping; tekan dan tahan sampai terblok semua
• Sentuh menu Salin yang ada dibagian atas
• Letak kursor pada tempat dimana teks atau artikel tersebut akan di salin
• Sentuh menu Tempel

Jika sudah, sentuh menu Selesai untuk menutup artikel yang telah dibuat

Tampilan gambar disamping merupakan tampilan dari artikel yang saya buat dan masih dalam bentuk Draft alias belum diPublikasikan. Artikel yang dibuat sudah terlihat sempurna dan untuk memPublikasikannya, sentuh icon

Itulah Cara Ngeblog Menggunakan Aplikasi Blogger di Android, terlalu susah untuk dimengerti jika hanya membaca tulisan ini karena akan terasa lebih mudah jika langsung diterapkan. Selamat mencoba

Selamat Hari Raya Idul Adha 1435 Hijriyah

Selamat Hari Raya Idul Adha 1435 Hijriyah - Bulan haji telah tiba, selain melaksanakan rukun imam yang kelima tersebut dengan melaksanakan ibadah haji ke Baitullah. Umat Islam juga melaksanakan hari raya Idul Adha

Di bulan haji ini, selain melaksanakan ibadah haji, umat muslim diseluruh dunia juga melaksanakan ibadah puasa yang sunnah dilakukan dan melakukan amal ibadah yang lain yaitu melaksanakan qurban. Ada banyak kebaikan yang bisa dilakukan pada bulan haji ini. Namun di blog ini tidak bisa dijelaskan lebih rinci, namun untuk menyambut bulan haji ini, saya turut mendoakan saudara-saudara kita yang melaksanakan ibadah haji semoga menjadi Haji yang Mabrur, Aamiin Aamiin Ya Rabbal'alamiin...

Dan Selamat Hari Raya Idul Adha 1435 Hijriyah, Mohon Maaf Lahir dan Bathin

Ngeblog Menggunakan Aplikasi Blogger di Android

Menggunakan Aplikasi Blogger di Android - Artikel ini merupakan artikel uji coba yang saya lakukan dengan menggunakan aplikasi Blogger yang ada di Android. Uji coba ini hanya untuk mengetahui apakah menulis atau membuat artikel menggunakan aplikasi Blogger di Android mudah dilakukan atau tidak

Dan kesimpulannya menggunakan aplikasi Blogger di Android adalah :

1. Ngeblog menggunakan smartphone atau ponsel kurang nyaman
2. Ngeblog menggunakan aplikasi Blogger di Android kurang nyaman. Misalnya; saat menulis artikel, melakukan copy paste
3. Ngeblog menggunakan aplikasi Blogger di Android memiliki banyak keterbatasan
4. Tidak bisa cepat dan harus sabar..
5. Dan masih banyak keterbatasannya jika ngeblog menggunakan aplikasi Blogger di Android atau melakukannya dengan smartphone

Pendapat diatas hanya dari saya dan tidak bermaksud untuk mengajak agar tidak ngeblog menggunakan apalikasi Blogger di Android. Jika Anda ingin ngeblog melalui aplikasi tersebut, silahkan saja yang pastinya syarat pertama untuk menggunakan aplikasi Blogger tersebut harus memiliki sebuah ponsel yang sudah ber-OS Android karena menggunakan ponsel biasa untuk ngeblog di Blogger sudah tidak bisa dilakukan, tidak seperti 10 tahun yang lalu Lalu bagaimana cara ngeblog menggunakan aplikasi Blogger di Android seperti yang saya buat ini? Pada artikel selanjutnya, saya akan membuatkannya untuk Anda

Roll-Spin Effect (Efek Berputar) Pada Gambar

Roll-Spin Effect (Efek Berputar) Pada Gambar - Pada artikel sebelumnya saya telah membuat efek berputar pada teks atau tulisan dan pada artikel ini saya mencoba mengembangkan kode yang ada pada efek teks berputar tersebut dipasang dan diganti dengan gambar, sehingga gambar akan memiliki efek berputar juga

Untuk membuat Efek Berputar Pada Gambar ini, sebelumnya Anda harus memasang kode CSS Roll-Spin Effect yang ada pada artikel sebelumnya yaitu Efek Berputar Pada Teks

Selanjutnya tambahkan kode berikut ini

#roll-spin img {
position:absolute;
border:1px solid #ccc;
}
#roll-spin .img1a {
-webkit-transform:rotateY(0deg) translateX(180px);
padding:0 0 0 160px;
height:160px;
width:200px;
}
#roll-spin .img2a {
-webkit-transform:rotateY(-76deg) translateX(180px);
padding:0 0 0 147px;
height:160px;
width:213px;
}
#roll-spin .img3a {
-webkit-transform:rotateY(-148deg) translateX(180px);
padding:0 0 0 120px;
height:160px;
width:
240px;
}
#roll-spin .img4a {
-webkit-transform:rotateY(-220deg) translateX(180px);
padding:0 0 0 147px;
height:160px;
width:213px;
}
#roll-spin .img5a {
-webkit-transform:rotateY(-292deg) translateX(180px);
padding:0 0 0 122px;
height:160px;
width:238px;
}

Kode HTML
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
</div>
</div>
*Ganti URL Gambanya

Bagaimana jika gambarnya ada dua?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

Bagaimana jika gambarnya ada tiga?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gJrw8ajelqEprC_02lMbqpbb2-ukWD_HHqy_WubfJzivWd71Qh6G08lAOpKo33gsBmmiG0_dhzSjwpKV2IwbH12Iuotf8jrvRWJma6Hg1RZmHpeCbP-RguPOcwJqaxkcFBhI83S79KI/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

Bagaimana jika gambarnya ada banyak?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gJrw8ajelqEprC_02lMbqpbb2-ukWD_HHqy_WubfJzivWd71Qh6G08lAOpKo33gsBmmiG0_dhzSjwpKV2IwbH12Iuotf8jrvRWJma6Hg1RZmHpeCbP-RguPOcwJqaxkcFBhI83S79KI/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
<img class="img4a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38mfyW03_L-7hh6Xk-w4R3Dgb7H7jNwMKSTDakVdHaR8I2rQIohxpoSnel5wSa8CZM_Ek54v3SpubxrBmcAYP9eYxwu8clVl_vrn66GqjcnRfuyPse_qNWX6qzvjJ23244bf5a0mKWM4/s1600/seo-score.png" />
<img class="img5a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

Bagaimana jika dipasang link pada gambar?
Sama seperti pemasangan link pada umumnya, cukup menambahkan alamat url pada gambar
<a href="Url-Permanen"><img class="img1a" src="Url-Gambar" /></a>
*Ganti URL Permanen dan URL Gambanya

Bagaimana jika di isi dengan Video?
Untuk membuat efek berputar pada tampilan video masih belum saya coba, mungkin untuk pengembangan selanjutnya akan saya buatkan :)

Untuk tampilan efek berputar pada gambar ini memang belum terlihat sempurna karena tampilannya masih bertingkat dan belum sejajar antara gambar yang satu dengan yang lainnya