Aan Channel YT: Blog

Home Blog

Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Kamis, 20 Mei 2021

Cara Sembunyikan Gambar Dalam Artikel Menjadi Thumbnail Postingan Blog

my_id Comment

Mengenai tulisan di blog, sebuah gambar tentu benar-benar di perlukan, untuk semata-mata memberi rasa penasaran pengunjungnya. Sebenarnya saya selalu menerbitkan tulisan bersama dengan 1 gambar di atas tulisan untuk menjadi thumbnail, harapan saya supaya tampilan di page home menjadi lebih menarik bersama dengan adanya gambar. Namun sesudah saya menulis beberapa artikel, lama-lama saya mulai bahwa gambar di atas tulisan itu tambah mengakibatkan tmpilan artikel saya menjadi tidak baik dan kurang sedap untuk di baca.

Padahal artikel yang bagus itu artikel yang bisa mengakibatkan pembacanya mulai nyaman didalam membaca. Sayapun mulai berfikir ini sebuah artikel bukan komix. Jadi saya rasa gambar tidak benar-benar punyai peran mutlak didalam sebuah artikel, tapi jikalau saya tidak memberi gambar mirip sekali terhadap artikel saya, maka tampilan home page bakal menjadi tidak baik dan kurang memikat, sebab pembacanya tidak meliki rasa penasaran yang kuat, rasa penasaran yang di ciptakan oleh sebuah gambar.

Dari pada bingung, selanjutnya saya putuskan untuk membawa dampak thumbnail. Jadi gambar atau foto yang saya buat thumbnail ini akan tampil di home page saja dan tidak akan tampil di di dalam artikel.

Bagaimana cara membuat thumbnail atau gambar yang hanya tampil di home page?

1. Masuk blog kalian ya gengs.

2. Pilih template/tema.

3. Edit HTML.

4. Cari kode </head> atau </head>

5. Pastekan kode di bawah ini di atas kode </head> atau </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>

6. Simpan template.

Selanjutnya kita akan mencoba untuk membuat postingan dan upload sebuah file gambar dalam postingan tersebut untuk kita jadikan thumbnail dan tidak akan tampil di dalam artikel.

Cara membuat thumbnail gambar tidak tampil dalam artikel.

1. Setelah gambar di upload, kita ganti mode penulisan dari "compose" menjadi "HTML" letaknya ada di pojok kiri atas.

2. Di mode penulisan HTML akan muncul kode seperti di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkO8vZKSdXVe2d0PVKGulsiHB1UaB37rOCIa_PVRKVgNEIBDLnQIsVtdXJ6Ry7ilBqxIXP4mjJ7cOmMKvXP0-RPQO_xKgKPC4OdNC60hnF8MJgGVLJRuntX29UyW3L1woiqZGXz-t7-lk/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkO8vZKSdXVe2d0PVKGulsiHB1UaB37rOCIa_PVRKVgNEIBDLnQIsVtdXJ6Ry7ilBqxIXP4mjJ7cOmMKvXP0-RPQO_xKgKPC4OdNC60hnF8MJgGVLJRuntX29UyW3L1woiqZGXz-t7-lk/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<div>

3. Ganti "separator" menjadi "thumbnail", hingga menjadi seperti ini.

<div class="thumbnail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkO8vZKSdXVe2d0PVKGulsiHB1UaB37rOCIa_PVRKVgNEIBDLnQIsVtdXJ6Ry7ilBqxIXP4mjJ7cOmMKvXP0-RPQO_xKgKPC4OdNC60hnF8MJgGVLJRuntX29UyW3L1woiqZGXz-t7-lk/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkO8vZKSdXVe2d0PVKGulsiHB1UaB37rOCIa_PVRKVgNEIBDLnQIsVtdXJ6Ry7ilBqxIXP4mjJ7cOmMKvXP0-RPQO_xKgKPC4OdNC60hnF8MJgGVLJRuntX29UyW3L1woiqZGXz-t7-lk/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<div>

Dengan megganti "separator" menjadi "thumbnail" maka gambar tersebut akan otomatis berubah menjadi thumbnail saja dan tidak terlihat di dalam artikel ketika di publikasikan.

Begitulah cara membuat thumbnail postingan blog, dengan gambar tidak terlihat di dalam artikel. Semoga bermanfaat!!!

Selasa, 13 April 2021

Blog

Membuat Tombol Button Download Atau Demo Di Blog

my_id Comment

Pada kali ini saya akan membagikan bagaimana caranya membut tombol Button download atau demo responsive serta keren di blog sobat, apalagi jika blog kalian merupakan blog yang niche berbagi link seperti link film, link download template pastinya tombol-tombol button ini sangat dibutuhkan bukan.

Namun sebelum lanjut tutorial ini sekedar pemberitahuan untuk kalian semua kalau tombol button ini terdapat icon Font Awesome yang tentunya membuat tampilannya akan lebih elegant dan keren pada blog sobat.

Cara Membuat Tombol Button Download Atau Demo Di Blog

Note cara ini berkerja apabila blog sobat sudah memasang Font Awesome pada template kalian, untuk cara melihat apakah template sobat sudah menerpakannya silahkan cari kode di bawah ini pada tempalate sobat.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika kode tersebut tidak ada pada blog sobat, silahkan copy kode tersebut dan tempelkan di atas kode </head> atau </head> namun jika sudah ada abaikan saja.

1. Masuk Blogger

2. Tema > Edit HTML

3. Cari Kode Berikut ini ]]></b:skin> Atau </style> dan salin kode dibawah ini dan pastekan di atas kode tersebut.

/* CSS Button Style www.lewatinaja.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

4. Klik Simpan Pada Template

Cara penggunaan :

Silahkan buat sebuah artikel pada mode HTML bukan Compose dan salin kan kode di bawah ini :

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://www.lewatinaja.com" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.lewatinaja.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Namun jika kalian ingin menampilkan tombol salah satu button saja contohnya saja kalian ingin menampilakan tombol download saja maka hapus kode ini :

<li><a class="demo" href="https://www.lewatinaja.com" target="_blank">Demo</a></li>

Begitupun sebaliknya jika kalian hanya ingin menggunakan tombol demo saja maka kode di bawah ini tinggal di hapus saja :

<li><a class="download" href="https://www.lewatinaja.com" target="_blank">Download</a></li>

Maka lihat sekarang tombol yang kalian gunakan sudah keren bukan dan tentunya membuat tampilan blog semakin menarik bukan, oke sampai disini tutorial cara membuat tombol button yang menarik dan keren dan jangan lupa untuk membagikan artikel ini ke media sosial kamu jika anda menyukainnya. terima kasih telah berkunjung

Blog

Script membuat Bockquote di Postingan Blog

my_id Comment

Penulisan Script

<blockquote><p>Note:<br />
	+ Blokir software nya menggunakan Windows Firewall supaya akitvasi nya menjadi permanen<br />
	+ Jika anda memiliki Wondershare Filmora versi lama, Uninstall menggunakan software Revo Uninstaller dan hapus folder “C:\ProgramData\Wondershare Filmora”</blockquote>

Hasil

Note:
+ Blokir software nya menggunakan Windows Firewall supaya akitvasi nya menjadi permanen
+ Jika anda memiliki Wondershare Filmora versi lama, Uninstall menggunakan software Revo Uninstaller dan hapus folder “C:\ProgramData\Wondershare Filmora”

Penulisan Script

.toggle{display:block;background-color:#888;height:30px;line-height:30px;overflow:hidden;margin:10px auto 0;text-align:center;border-radius:3px;color:#fff;cursor:pointer}<br />

.toggle .icons{width:20px;height:20px;vertical-align:middle;fill:#000;margin-right:15px}<br />

</style></blockquote><br />

Hasil

<style type="text/css">
.toggle{display:block;background-color:#888;height:30px;line-height:30px;overflow:hidden;margin:10px auto 0;text-align:center;border-radius:3px;color:#fff;cursor:pointer}
.toggle .icons{width:20px;height:20px;vertical-align:middle;fill:#000;margin-right:15px}
</style>

Penulisan

//<![CDATA[<br />

var vid, fullscreenbtn;<br />

function intializePlayer(){<br />

<span style="white-space: pre;"> </span>vid = document.getElementById("frameFullscreen");<br />

<span style="white-space: pre;"> </span>fullscreenbtn = document.getElementById("fullscreenbtn");<br />

<span style="white-space: pre;"> </span>fullscreenbtn.addEventListener("click",toggleFullScreen,false);<br />

}<br />

window.onload = intializePlayer;<br />

function toggleFullScreen(){<br />

<span style="white-space: pre;"> </span>if(vid.requestFullScreen){<br />

<span style="white-space: pre;"> </span>vid.requestFullScreen();<br />

  screen.orientation.lock("landscape-primary");<br />

<span style="white-space: pre;"> </span>} else if(vid.mozRequestFullScreen){<br />

<span style="white-space: pre;"> </span>vid.mozRequestFullScreen();<br />

  screen.orientation.lock("landscape-primary");<br />

<span style="white-space: pre;"> </span>} else if(vid.webkitRequestFullscreen){<br />

<span style="white-space: pre;"> </span>vid.webkitRequestFullscreen();<br />

  screen.orientation.lock("landscape-primary");<br />

<span style="white-space: pre;"> </span>} else if(vid.msRequestFullscreen){<br />

<span style="white-space: pre;"> </span>vid.msRequestFullscreen();<br />

  screen.orientation.lock("landscape-primary");<br />

}<br />

</script></blockquote>

Hasil

<script type='text/javascript'>
//<![CDATA[
var vid, fullscreenbtn;
function intializePlayer(){
vid = document.getElementById("frameFullscreen");
fullscreenbtn = document.getElementById("fullscreenbtn");
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
screen.orientation.lock("landscape-primary");
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
screen.orientation.lock("landscape-primary");
} else if(vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
screen.orientation.lock("landscape-primary");
} else if(vid.msRequestFullscreen){
vid.msRequestFullscreen();
screen.orientation.lock("landscape-primary");
}
}
</script>

Senin, 29 Maret 2021

Blog

Cara Mengubah Link Download Google Drive Redirect Menjadi Link Download Langsung

my_id Comment

Pengguna Google Drive dapat share file yang dibuat di aplikasi Google Drive untuk digunakan oleh orang lain. Artinya tiap-tiap file yang kami unggah (upload) ke Google Drive maka file berikut dapat dishare ke orang lain didalam wujud link. Link berikut seterusnya dapat di unduh (download) oleh orang lain.

Namun sebelum saat lakukan aktivitas ini, sebaiknya Anda praktikkan pernah hal-hal berikut :

Belum punyai akun Google? Silakan buat dulu akunnya! Nanti silahkan Anda membuka URL drive.google.com untuk masuk kehalaman Google Drive. Anda cobalah upload file apa saja kedalam Google Drive dari tombol Baru > Unggah File.

Jika file sudah selesai di unggah ke Google Drive, pastikan Anda sudah menyesuaikan bahwa file berikut dibuat untuk dibagikan (share) bersama orang orang lain. Artinya file Google Drive Anda terbuka untuk umum, maka Anda wajib mengaktifkan tombol berbaginya.

Silakan Anda salin (copy) URL otomatis yang dihasilkan! Contoh saya mempunyai satu URL file Google Drive seperti ini :

https://drive.google.com/open?id=0B-by9WPUnvv6S0V3VnhKbTdpNG8

Lihat link yang saya kasih warna merah di atas! Itu adalah ID atau kode unik untuk membedakan bersama link file Google Drive di seluruh dunia. ID berikut sudah pasti tidak akan tersedia yang sama.

Jika kita segera membagikan URL tersebut, maka ketika pengguna atau orang lain klik link otomatis akan dihadapkan terhadap halaman preview terutama dahulu. Jika file sudah kompatible bersama aplikasi Google Drive, maka di sini akan ditampilkan. Seperti file Word, Excel, Gambar, PDF akan tampil terhadap halaman preview Google Drive.

Selanjutnya jikalau pengguna sudi unduh atau download file Google Drive berikut maka wajib klik tombol Unduh yang berada di kanan atas.

Nah saat ini yang kita idamkan bagaimana menghilangkan tampilan halaman preview Google Drive saat kita membagikan link download kepada orang lain, apakah bisa? Mungkin tidak bakal jadi kasus terkecuali yang unduh file adalah orang yang paham. Namun terkecuali yang unduh tidak mengerti dimana tombol unduh berada, ini dapat jadi kasus besar. Yang kita idamkan saat ini begitu pengguna klik link file Google Drive langsung menuju ke proses download saja.

Caranya mudah, cobalah Anda amati 2 link URL Google Drive di bawah ini :

Link 1 = https://drive.google.com/open?id=0B-by9WPUnvv6S0V3VnhKbTdpNG8

Link 2 = https://drive.google.com/uc?export=download&id=0B-by9WPUnvv6S0V3VnhKbTdpNG8

Kedua-duanya adalah link URL Google Drive, tapi punyai kegunaan yang berbeda. Link pertama adalah link URL Google default sedangkan link URL ke-2 telah dimodifikasi. Jika kita idamkan merubah link download Google Drive jadi link download langsung, maka silahkan tambahkan link selanjutnya sebelum ID link Google Drive :

https://drive.google.com/uc?export=download&id=

Contoh tadi ID link Google Drive aku adalah 0B-by9WPUnvv6S0V3VnhKbTdpNG8, maka terkecuali telah dimodifikasi bakal seperti ini :

https://drive.google.com/uc?export=download&id=0B-by9WPUnvv6S0V3VnhKbTdpNG8

Bagaimana ringan bukan? Silakan selamat mencoba dan semoga sukses! Mungkin artikel Cara Mengubah Link Download Google Drive Menjadi Link Download Langsung dicukupkan sekian saja. Semoga artikel ini ada manfaatnya dan salam hangat.

Minggu, 28 Maret 2021

Blog

Membuat Tombol Full Screen Landscape Video iFrame di Blogger

my_id Comment

Mungkin ada yang penasaran bagaimana langkah mengakibatkan tombol FULLSCREEN terpisah dari video controls di Blogger/blogspot untuk seluruh perangkat? dan menjadikan penampilan full screen berikut berubah menjadi landscape atau lakukan rotasi layar HP secara otomatis? baik itu untuk laptop/komputer terlebih di hp/smartphone. Tombol full screen amat mungkin pengunjung untuk dapat lihat video di blog bersama dengan penampilan satu layar penuh.

Masalahnya adalah, saat kami membagikan video denga kode iframe (dan lainnya) di blog, dan menginginkan menontonnya didalam mode full screen selagi menggukanan handphone/smartphone, video berikut tetap didalam posisi portrait, tidak lakukan rotasi landscape secara otomatis.

Masalah ini sering ditemui terhadap tv online yang mengandalkan fitur navigasi bawaan dari video control. Fitur fullscreenya sebenarnya berfungsi bersama dengan baik untuk pengguna di perangkat pc/laptop, tapi tidak untuk pengguna device yang lebih kecil layaknya pill dan smartphone.

Nah, bagaimana caranya supaya video yang kami bagikan di blogger/blogspot itu, terkecuali menginginkan ditonton bersama dengan mode full screen, penampilan layar sangat berotasi otomatis menjadi landscape/horizontal untuk pengguna hp/mobile.

Dan solusinya ialah, kami mesti menambahkan sebuah tombol fullscreen untuk mewujudkan perihal itu. Berikut langkah bikinnya.

Langkah 1

Tambahkan tag seperti ini di format video atau kode iframe video:

<div id="frameFullscreen" class="frameFullscreen">
<iframe frameborder="0" scrolling="no" src="https://www.youtube.com/embed/jdgfD8ac6ao?rel=0&showinfo=0&autoplay=0" height="100%" width="100%"></iframe>
</div>

Atau bisa juga seperti ini:

<iframe id="frameFullscreen" frameborder="0" scrolling="no" src="https://www.youtube.com/embed/jdgfD8ac6ao?rel=0&showinfo=0&autoplay=0" height="100%" width="100%"></iframe>

Catatan tambahan

Tambahkan allowfullscreen="true" pada iframe agar mendapatkan izin full screen tanpa tombol.

Gunakan src="https://drive.google.com/file/d/1Z3dSPFqB1WSc4INlTJCoPehNCr5FiBSS/preview" jika video berasal dari Google Drive.

Sesehingga menjadi

<iframe allowfullscreen="true" id="frameFullscreen" frameborder="0" scrolling="no" src="https://drive.google.com/file/d/1Z3dSPFqB1WSc4INlTJCoPehNCr5FiBSS/preview" height="100%" width="100%"></iframe>

Langkah 2

Tambahkan kode berikut di bawah kode tadi:

<span class='toggle' href='javascript:void(0)' id='fullscreenbtn' role='button' tabindex='0'><svg class='icons' viewBox='0 0 24 24'><path fill="#000000" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>FULL SCREEN</span>

Kode tersebut adalah tombol untuk memanggil tampilan FULL SCREEN. Yang akan diaktifkan oleh javascript pada langkah selanjutnya.

Untuk mengedit tampilan tombol tersebut edit CSS berikut ini dan letakkan di bawah kode di atas:

<style type="text/css">
.toggle{display:block;background-color:#888;height:30px;line-height:30px;overflow:hidden;margin:10px auto 0;text-align:center;border-radius:3px;color:#fff;cursor:pointer}
.toggle .icons{width:20px;height:20px;vertical-align:middle;fill:#000;margin-right:15px}
</style>

Tampilan tombolnya silahkan kembangkan sesuai kreatifitas.

Langkah 3
Letakkan JavaScript berikut ini di atas kode </body> atau </body>

<script type='text/javascript'>
//<![CDATA[
var vid, fullscreenbtn;
function intializePlayer(){
vid = document.getElementById("frameFullscreen");
fullscreenbtn = document.getElementById("fullscreenbtn");
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
screen.orientation.lock("landscape-primary");
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
screen.orientation.lock("landscape-primary");
} else if(vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
screen.orientation.lock("landscape-primary");
} else if(vid.msRequestFullscreen){
vid.msRequestFullscreen();
screen.orientation.lock("landscape-primary");
}
}
</script>

Langkah 4
Simpan tema, dan lihat hasilnya.

Contoh dapat kalian lihat di AeM Movie

Rabu, 24 Maret 2021

Blog

Tips Membuat Halaman About Me / Tentang Keren di Blog

my_id Comment

Halaman About Me atau About Us atau Tentang Kami atau About saja bahkan Tentang saja, merupakan halaman yang cukup penting dalam sebuah blog atau web baik itu komersil atau pun bukan. Biasanya pengunjung akan penasaran tentans siapa pemilik blog atau website yang sedang dikunjungi dan dibacanya.

Jadi, dari pada kita membuat penasaran si pembaca, alangkah baiknya kita memberikan sedikit informasi tentang identitas kita di dalam blog.

Nah, buat kalian yang ingin membuat tampilan halaman About Us atau Tentang ini dengan keren, ya walaupun masih ada yang lebih keren, tapi ini sudah lumayan lah ya.. hehe..

Langkah untuk membuat halaman tentang atau About Me keren.

1. Siapkan Foto, silahkan edit bentuknya menggunakan aplikasi yang kalian bisa, boleh Photosop, CorelDraw, atau aplikasi lainnya (editing foto).

2. Setelah foto siap, silahkan masuk ke Dasboard blog kalian masing-masing.

3. Buat Halaman baru dan beri nama About Me.

4. Upload Foto kalian.

5. Setelah upload foto, Silahkan kalian buka tampilan Edit HTML (dari gambar pensi di bawah judul).

6. Lalu, copy dan paste code di bawah ini di kotak yang berada di bawahnya.

Pilihan variasi lain untuk membuat tombol pada halaman Abouat Me yang keren

Cukup kalian ganti script di atas dengan yang ada di bawah ini.

1. Membuat About me di blog dengan Button Black

</div>

</div>

2. Membuat About me di blog dengan Button Blue

</div>

</div>

3. Membuat About me di blog dengan Button Red

</div>

</div>

4. Membuat About me di blog dengan Button Pink

</div>

</div>

Tinggal kalian ganti URL kalian masing-masing ya untuk akun media sosialnya...