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...

Blog

Tips Membuat Halaman Kontak (contact form) Keren Pada Halaman Statis di Blogger

my_id Comment

Sebuah blog tidak cukup lengkap rasanya kalau tidak miliki halaman kontak pada anggota navigasinya. Memang tidak mesti menempatkan form kontak di blog tapi form kontak ini dapat memudahkan para pengunjung blog kita untuk semata-mata berkomunikasi dengan kita selaku pemilik blog (admin).

Laman kontak (contact form) dibuat sebagai pendukung kelengkapan pada navigasi blog yang umumnya letaknya disejajarkan atau bersebelahan dengan halaman about, disclaimer, privasi, tos dan partner.

Manfaat Halaman Kontak di Blog

Ada beberapa kegunaan yang didapatkan pengunjung blog jikalau mereka mengirim pesan melalui laman kontak yang telah terpasang di blog kita.

Privasi Terjaga

Mengirim pesan melalui laman kontak diklaim sebagai langkah yang lebih aman untuk melindungi privasi berkaitan identitas diri kami dibanding mengirim pesan melalui laman komentar. Jika kami sebagai pengunjung mengirimkan sebuah pesan melalui laman kontak di blog.

Maka publik tidak dapat sadar apa isi pesan yang dikirimkan jikalau kami dan pemilik blog tersebut. Hal ini tidak sama jikalau mengirimkan pesan melalui komentar pasti identitas diri bisa dilacak dengan mudah.

Menghemat Waktu

Waktu adalah uang jadi slogan tenar untuk para orang yang memiliki mobilitas tinggi di dalam hidupnya. Lalu kaitannya apa dengan laman kontak?

Begini mengirimkan pesan via laman kontak di blog memiliki kesempatan dibalas lebih tinggi oleh pemilik blog dibanding berikirim pesan melalui komentar.

Alasannya sebab laman kontak telah mengenai dengan e mail khusus pemilik blog jadi notifikasi pesan dapat segera ditampilkan dan kesempatan memperoleh balasan jadi lebih tinggi.

Bersifat Lebih Personal

Sebagian dari pengunjung terbiasa basa-basi di dalam berkomentar di sebuah blog. Bahkan kebanyakan komentar cenderung disalahgunakan sebagai ajang bercandaan saja.

Sebenarnya tersedia sih pengunjung yang berkomentar berbobot sesuai dengan isikan dan topik yang disajikan. Namun pengunjung yang berkarakter seperti itu persentasenya benar-benar sedikit dan jarang ditemui.

Lebih banyak pengunjung dengan cii-ciri komentar yang ngawur dan tidak sejalur dengan topik yang diulas. Akibatnya kadang kala pemilik blog enggan dan malas menanggapi komentar para pengunjung yang kesannya cuma bercanda dan tidak cukup menghargai.

Disinilah kelebihan laman kontak berikut cii-ciri pesan yang dikirim melalui jalan e mail memiliki cii-ciri yang lebih personal dan serius. Sehingga pemilik blog dapat cepat termasuk membalas pesan yang dikirimkan.

Nah mengingat begitu pentingnya keberadaan laman kontak di blog. Maka kali ini aku dapat memberi tambahan tutorial enteng mengenai langkah memicu laman kontak di Blogspot atau Blogger.

Cara Membuat Halaman Kontak (contact form) Pada Halaman Statis di Blogger

1. Login ke akun Blogger kamu.

2. Lihat pada tab sebelah kiri Dasbor. Lalu klik Halaman > Buat Halaman Baru > Mode HTML (Bukan Compose).

3. Selanjutnya masukkan kode script di bawah ini:

<i class="material-icons md-48">verified_user</i></div>

.enterblogger-logo{text-align:center;}

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');

}

.material-icons {

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: inherit;

display: inline-block;

line-height: 1;

text-transform: none;

letter-spacing: normal;

word-wrap: normal;

white-space: nowrap;

direction: ltr;

vertical-align:middle;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */

text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

font-feature-settings: 'liga';

}

.md-48{font-size: 100px;

color: #546de5;

padding: 10px;

background: #dde3ff;

border-radius: 100px;}

.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

account_circle

</i> Name</label></div>

contact_mail

</i> Email</label></div>

message

</i> Message</label></div>

</div>

</div>

</form>

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2794963633726348050';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d2794963633726348050','//aanchannel-yt.blogspot.com/','2794963633726348050');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '2794963633726348050', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

Catatan:

Ganti angka 2794963633726348050 dengan ID blog kamu dan ganti aanchannel-yt.blogspot.com/ Dengan blog kamu.

4. Beri nama halaman baru dengan nama "contact". Lalu simpan halaman. Selanjutnya silakan lihat halaman kontak tersebut dengan cara mengunjunginya.

Bagaimana? Mudah bukan? Semoga kamu berhasil membuat laman kontaknya. Share juga pada yang lain. Terimakasih

Kamis, 25 Februari 2021

Blog

Cara Membuat Baca Juga di Tengah Artikel Blog Otomatis

my_id Comment

Contoh Hasil Baca Juga

Sudah menjadi kebiasaan kita menulis di platform blogspot atau di wordpress, untuk menghasilkan sebuah artikel yang menarik dan dapat memicu minat para pembaca, diperlukannya sebuah pengetahuan dan juga Info yang jelas.

Tujuan dari tulisan ini adalah supaya memicu para pengunjung ataupun pembaca betah untuk berlama-lama mengunjungi web site ini, dan para pembaca puas dapat banyaknya Info yang di tampilkan sebuah website.

Dengan membuat sebuah artikel agar pengunjung bisa berlama-lama di website kalian, maka situs itu akan menjadi baik dipandang oleh google. Saya menerapkan cara ini di blog saya sendiri dengan membuat BACA JUGA atau Link Yang Terkait/Artikel Yang Terkait ( Related Post ).

Berikut cara membuat LINK BACA JUGA atau yang sering di sebut dengan istilah related post.

Jika membawa dampak Artikel terkait secara Otomatis maka kamu kudu membawa dampak artikel di atas 500 kata supaya para pengunjung tidak tergangu. Belum termasuk membaca telah di sugukan link Baca Juga dengan banyak Link. Jika kamu berminat silakan mengikuti tutorial berikut ini. Anda kudu masuk ke HTML untuk mengimbuhkan Kode dan CSS.

Pastikan artikel dalam blog kalian sudah di beri label, maka dia akan otomatis menampilkan artikel-artikel yang terkait di tengah artikel yang di buat secara otomatis. Kalian bisa mengikuti cara di bawah ini.

Silahkan masuk ke blog kalian > Kemudian pilih TEMA > edit HTML.
Setelah itu kalian cari/find kode </head> atau </head>
Untuk memudahkan pencarian, kalian bisa menggunakan CTRL + F untuk memudahkan pencarian.
Letakkan kode dibawah, tepat di atas </head> atau </head>

<b:if cond='data:blog.pageType == "item"'>

//<![CDATA[

//]]>

</script>

</b:if>

Setelah itu kalian cari <data:post.body/>
Kemudian kalian ganti <data:post.body/> dengan kode dibawah ini

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

</b:loop>

</b:if>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

var obj0=document.getElementById("post1<data:post.id/>");

var obj1=document.getElementById("post2<data:post.id/>");

var s=obj1.innerHTML;

var t=s.substr(0,s.length/2);

var r=t.lastIndexOf("<br>");

if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}

</script>

Sampai tahap ini kalian telah selesai membuat BACA JUGA di blog,tinggal kalian klik SIMPAN TEMA. Namun masih memberikan tampilan yang kurang menarik. Kalu tidak percaya silahkan buka salah satu artikel pada blog kalian.

Tetapi jika kalian ingin mempercantik nya dengan menambahkan CSS style, kalian bisa menambahkan kode di bawah ini.

Langkah seperti cara di atas, kalian cari dulu kode ]]></b:skin> atau </style>

Kemudian copy paste kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Related Post Style 1 */

.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}

.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}

.related-simplify ul li:nth-child(odd){background:#fefefe}

.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}

.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Maka tampilan BACA JUGA menjadi lebih berwarna, CSS style BACA JUGA bisa kalian cari juga di blog-blog yang lain, sesuai selera kalian

Itulah cara membuat BACA JUGA / RELATED POST / ARTIKEL YANG TERKAIT di blog secara manual ataupun otomatis, cara ini bisa kalian terapkan dan langsung lihat hasilnya, CUKUP MENARIK BUKAN ? :)

Ikuti cara di atas secara pelan-pelan, agar berhasil dan bisa menampilkan BACA JUGA di tengah artikel, karena jika salah menaruh tempat kode nya, BACA JUGA tidak akan tampil atau bakal menjadi error.

Perlu diperhatikan juga, jika ingin memasang BACA JUGA, kalian harus juga memperhatikan Page Speed pada blog kalian. JANGAN SAMPAI jika kalian memasang BACA JUGA, maka Page Speed Blog menjadi lambat.

Sekian tutorial dari saya, semoga bermanfaat bagi kita semua. Jika kalian masih mengalami kendala dalam membuat baca juga, perlu di ingatkan, pelan-pelan saja buatnya. Dan jika masih tidak tampil atau mengalami kendala, bisa berkomentar di bawah dan kita akan menyelesaikan bersama-sama.

Kalian punya style CSS BACA JUGA / RELATED POST yang bagus dan unik ? Kalian boleh Berkomentar di bawah ini.

Blog

7 Template Blogger Paling Rekomendasi Bagi Pemula

my_id Comment

Hallo sobat blogger semuanya jikalau saat ini kalian tetap bingung melacak sebuah jenis template yang keren dan yang idamkan kalian pasangkan terhadap blogger kalian, maka tersedia baiknya teman teman semua dapat download template yang mimin Rekomendasikan, ini hanya untuk Template Blogger saja lho ya, dan hingga saat ini, ini merupakan Template Blogger Terbaik di Tahun 2021. Tentu ini berdasarkan merupakan analisa mimin pribadi bersama memakai sumber data berasal dari beberpa tool online yang tersedia.

Sebuah Template Blog yang terlalu baik dan yang paling sering orang cari baik para blogger pemula yakni adalah tentu templete yang free bersama punyai tampilan yang terlalu menarik, fast loading dan terhitung mobile frindly yang paling utama. Dari beberpa fitur lainnya layaknya button share ke sarana sosial, lantas Recent post, Popular Post, Related post, Subscribe box dan terhitung sebagian fitur bawaan berasal dari template lainnya yang sebenarnya biasanya terhitung banyak dilirik sebelummenentukan template lantas memasangnya ke template tersebut. Tema Blog Gratis ini sanggup teman teman coba pada blog teman baik semua dan kalau teman teman semua belum berniat untuk membeli template premium. Berikut ini deretan template blogg Free dan SEO.

1. Seo Rocket

Template yang satu ini punya tampilan bersama dengan style warna warni dan amat memukau para pengguna. Banyak sekali pengguna template ini menggdang-gadang menjadi template tercepat di kelasnya. Akan namun memang sesudah melaksanakan ujicoba test speed pada beberapa tools juga GT Metrix dan juga tes lewat Google Speed Testing tool, Template ini tentu saja punya skor yang lumayan fantastis dan tentu menjadi amat panduan para master blogger dan juga master SEO untuk dijadikan sebagai template blognya, khususnya untuk para blogger pemula. Seo Rocket punya fitur lengkap. Dengan tampilan menu yang responsive, artikel terkait, sesudah itu recent post dan juga tombol share sosial tempat menjadi salah satu andalan dari template yang satu ini.

2. FooddyBlog

Template yang berikutnya yaitu FooddyBlog merupakan template yang di design khusus untuk tema makanan. Akan tetapi biasanya orang menggunkan tema yang ini sebagai artikel yang senang berwisata kuliner. Tentunya dengan memanfaatkan tampilannya yang menraik, FooddyBlog telah dipercaya dapat dapat menarik perhatian para pengunjung blog yang tengah mencari cari beraneka menu-menu masakan dan terhitung daerah makan favorite. Selain dari aspek tampilan yang sesungguhnya unik dan menarik, tema FooddyBlog terhitung dapat menyajikan sebuah tampilan menu dan widget yang telah membantu tema ini jadi salah satu template blogger dengan niche makanan terbaik.

3. Reading

Apabila sahabat blogger semua mendambakan membangun sebuah blog bersama tampilan tema monokrom? Tempplate Reading bisa Anda jadikan sebagai pilihan. Karena style tampilan yang dari tema ini yang disajikan terbilang sudah terlalu menopang sekali lebih-lebih untuk sebuah website Prtofolio, dan fotografi atau lebih-lebih website berkenaan sebuah petualangan penjelajah alam. Selain tampilannya yang bagus, template reading terhitung menyajikan strukture template yang fast loading dan super seo, terkecuali kawan dekat blogger tertarik bersama tema blog yang satu ini silahkan langsung saja untuk coba demoanya atau bisa langsung download tema blog ini.

4. Stylish News

Jika sobat memandang dari segi tampilannya saja tentu sobat semua sudah sanggup menebak bahwa Template Stylish News ini adalah tema blogger kategori untuk berita. Ya betul, itu sebetulnya benar. Template blogger Stylish New ini sebetulnya bersama sengaja didesign untuk ikuti perkembangan pada situs-situs berita besar contohnya seperti CNN dan termasuk lebih dari satu website berita besar lainnya yang ada di Indonesia. Beberapa fiturnya saja sudah di dukung untuk keperluan di dalam website berita. Template ini termasuk sanggup dipercaya sanggup bersaing bersama lebih dari satu template berita seperti berflatform wordpress. Hal ini termasuk yang menyebabkan banyak blogger bersama niche berita dan informasi Selain tampilannya yang keren, template blog ini termasuk terlalu disukai sebab gratis dan gampang dioperasikan. Masih banyak sekali fitur-fitur lainnya dari pada tema ini yang sebetulnya terlalu menopang untuk keperluan artikel sobat semua yang tentuny mempunyai niche informasi dan termasuk berita.

5. Momma's Love

Template ini merupakan template yang benar-benar dianjurkan banget terlebih untuk blog bertema Ibu dan Bayi. Dari tema ini sepenuhnya udah dirancang sedemikian rupa sehingga keluar keren dan dapat bersaing bersama tema blog yang bertema sama. Selain itu termasuk dapat teman baik melihat berasal dari segi desainnya yang memadai keren, featured post slider pada laman homepage yang benar-benar menunjang tema ini. Widget Popular post. Momma's Love ini tentu saja udah jadi keliru satu pilihan template terbaik terlebih untuk niche ibu dan anak atua dapat teman baik ganti bersama niche yang lain.

6. Games

Bagi kawan baik blogger yang punyai hobi dan juga punyai banyak file game dan juga dambakan dishare di fasilitas Internet tentunya di blog, tidak tersedia salahnya untuk kalian mencoba template geratis Games platform blogger yang satu ini. Template ini sepenuhny telah benar-benar menopang terhadap bagian penampilan dan juga menu-menu nya. Penambahan fitur-fitur widget yang pasti telah dirancang tertentu untuk para pengagum game menjadi penambah sumber energi tarik berasal dari template ini sendiri. Template Games ini sesungguhnya tidak sepopuler dibadning dengan template game-game lainnya, tapi jika kawan baik melihat berasal dari fitur, maupun kecepatan dan juga Optimasi SEO berasal dari template yang satu ini tidak kalah juga dengan template game lainnya. Untuk kawan baik semua yang sesungguhnya berminat, pasti sanggup mencobany, dan jika kawan baik blogger tetap menjadi sangsi kawan baik semua sanggup check khususnya dahulu terhadap tbutton demo yang telah mimin sedia kan di bawah ini.

7. VideoPlay

Sobat blogger barangkali telah miliki account youtube dan telah banyak konten yang teman akrab semua upload tentu saja account youtube selanjutnya barangkali telah jadi keliru keliru satu media penyimpanan file video paling baik teman akrab semuanya. Namun bagaimana terkecuali dengan sebuah situs blog yang satu ini yang tentu saja teman akrab semua idamkan menambahkan informasi berupa video melalui situs selanjutnya kepada pengunjung. Maka dari itu inilah keliru satu pilihan yang terlalu tepat untuk niche video teman akrab semua yaitu dengan manfaatkan template blogg Video Play. Template ini telah support tentu saja untuk penyedia berupa video streming dan juga nonton film, agar tidak jadi penasaran silakan teman akrab semua dapat segera cek pda demo dibawah ini.

Catatan Penting Untuk Sobat Semua

Dari keetujuh tema blogger diatas selanjutnya tentu sudah terlampau responsive dan juga terlampau cocok untuk digunakan di dalam versi situs yang tentu saja sementara ini yang sudah mengharuskan untuk situs situs bersama dengan tampilan Mobile Friendly. Silakan kawan dekat semua tinggal menentukan mana yang dirasa template cocok dan cocok bersama dengan tema blogger yang kawan dekat punya.

Namun ada lebih dari satu hal yang kudu kawan dekat semua menyimak kecuali kawan dekat manfaatkan tema / template free, biasanya kawan dekat semua dapat menemukan sebuah link credit berasal dari pemilik template itu sendiri dan tentu saja untuk hal selanjutnya adalah wajar. Apabila kawan dekat semua menghendaki menghilangkan link credit tersebut, silahkan kawan dekat blogger semua sanggup bersama dengan cara membeli bersama dengan versi premiumnya dan tentu saja dapat lebih bagus dan lebih SEO lagi kecuali kudu dibandingkan bersama dengan yang versi free, dan ini juga bersifat sementara saja sekiranya terdapat pembaharuan dapat mimin upadete lagi tentu saja disesuaikan bersama dengan analisa mimin sendiri. Demikian artikel yang sanggup mimin sampaikan semoga vermanfaat dan selamat berkarya di dunia blogger.

Rabu, 24 Februari 2021

Blog

Cara Memasang Widget Newsticker di Blogger

my_id Comment

Kali ini Penulis bakal sharing tips mengenai Cara Memasang Widget Newsticker di Blogger. Widget Newsticker saya bagikan sebab tersedia permohonan berasal dari teman baik Blogger dan kebetulan tempo hari saya memperbaharui template Asal SEO Pro, menjadi tidak tersedia salahnya saya saya sharing salah satu fitur Pro berasal dari template tersebut sebab sesungguhnya di Source code blog demo fitur ini sengaja dibikin terbuka untuk alasan sebabkan postingan ini.

Adapun fungsi utama berasal dari widget ini yaitu untuk menampilkan daftar sebagian artikel teranyar bersama animasi slide nyaris sama bersama widget recent post, namun yang ditampilkan hanya dalam wujud judul postingannya saja. Oke, segera saja. Berikut ini adalah beberapa langkah Cara Memasang Widget Newsticker di Blogger.

Cara Memasang Widget Newsticker di Blogger

Pertama buka Blogger > Klik menu Tema dan tombol Edit HTML > Kemudian tambahkan kode CSS ini sebelum </head>.

/* Breaking News */

#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}

@media screen and (max-width:768px) {

#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}

</style>

Selanjutnya, tambahkan kode di bawah ini tepat sebelum </body>.

//<![CDATA[

// Breaking News

$(document).ready(function(){var e="https://aanchannel.my.id/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});

//]]>

</script>

Ganti kode yang ditandai dengan alamat blog Anda dan ganti angka 10 sesuai dengan jumlah post yang ingin Anda tampilkan.

Baca Juga :

Nah, selanjutnya tambahkan kode di bawah ini bebas dimana saja selama masih di dalam body diantara <body> dan </body> seperti pada postingan sebelumnya.

<span class='tulisbreaking'>News Update<span class='breakhidden'/></span>

<div id='recentbreaking'>Loading...</div>

var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var now = new Date();

document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");

</script>

</div>

Setelah itu klik tombol Simpan tema dan Selesai! Silakan lihat hasilnya di blog Anda. Jika berhasil dan pemasangan tepan akan tampil seperti pada blog saya ini.

Oke, cukup sekian dari Aan Channel YT. Kalau teman-teman masiih mengalami kendala, silahkan tinggalkan dikolom komentar, insyallah akan saya bantu. Semoga bermanfaat buat Anda semua.