Bagaimana Cara Membuat Postingan Atau Postingan Valid Amp Html

Source: Listrik Elektronika Otomotif Template Blogger Accelerated Mobile Pages atau disingkat menjadi AMP merupakan layanan gratis yang berfungsi untuk memuat laman pada perangkat seluler lebih cepat dan lebih ringan. Sekilas tidak ada perbedaan yang nampak dari cara menulis artikel untuk AMP dan Non-AMP, hanya saja bagian yang paling terlihat mencolok adalah pemanggilan gambar, pada template amp tidak menggunakan tag melainkan dengan menggunakan tag , jadi jika Anda berniat bermigrasi menggunakan template AMP maka Anda harus mengubah semua gambar pada postingan Anda. Cara Memasang gambar utama(Thumbnail) dari postingan Pada umumnya kita, para blogger sudah mengetahui bahwa Blogspot tidak bisa membaca gambar dengan , jadi thumbnail postingan Anda pada homepage tidak akan muncul, atau ketika Anda share artikel ke media sosial gambar thumbnail artikel Anda tidak akan muncul. Untuk mengatasi thumbnail postingan Anda pada homepage tidak muncul, gunakan kode dibawah ini pada bagian awal postingan Anda. noscript > img alt=' Judul_alt_gambar ' src=' Url_gambar.jpg ' title=' Judul_gambar '/> noscript > Ganti bagian yang di blok warna dengan url gambar yang ingin Anda gunakan sebagai gambar utama postingan artikel anda. Cara Menambahkan gambar pada isi artikel Seperti yang dijelaskan diatas gambar pada AMP berbeda dengan gambar pada Non-AMP, contoh kode untuk memasang gambar pada tengah artikel (selain diatas artikel) adalah seperti dibawah ini: amp-img alt=' Judul_alt_gambar ' height=' 300 ' layout=' responsive ' src=' Url_gambar.jpg ' width=' 430 '/> Silahkan ubah ukuran gambar dan layout nya sesuai keinginan atau ukuran layout template Anda. Cara Embed video Youtube pada postingan (optional) anda dapat menggunakan kode di bawah ini untuk menampikan video dari Youtube kedalam postingan Anda. Silahkan anda ambil kode video dari url video Youtube yang ingin Anda tampilkan. Letakkan pada kode amp-youtube . Simpan kode pada postingan Anda. Kode amp-youtube amp-youtube data-videoid=' xxxxxxxxxxx ' height=' 270 ' layout=' responsive ' width=' 480 '/> Anda mesti mengganti bagian yang di blok warna dengan kode video Youtube opsi Anda. Sumber : median-amp.blogspot.com
Sumber https://pakgalingging.blogspot.com

11 Koleksi Menciptakan Script Widget Recent Post/ Postingan Terbaru Responsive Untuk Blogger

11 Koleksi Membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger ini kami kumpulkan dari aneka macam sumber saat berburu script-script keren dan menarik, tidak eksklusif kami pakai mentah-mentah, tetapi dengan sedikit modifikasi sesuai cita-cita dan template blog kami, koleksi script widget Recent Post ini aku simpan, dan biasa saya pakai untuk mempercantik tampilan blog klien . Selain hal itu, widget recent posting /postingan terbaru ini juga dapat berfungsi menampilkan daftar postingan yang baru diterbitkan. Dengan begitu pengunjung blog anda akan mudah menyaksikan dan mengakses daftar artikel terbaru yang ada pada blog anda. Koleksi script Widget Recent Post keren, responsive dan  mewah    yang akan saya bagikan dalam artikel ini berjumlah 11 koleksi, untuk penerapannya pada blog sangatlah gampang, anda tinggal pilih rancangan widget Recent Post sesuai cita-cita, salin/copy script widget yang kami sediakan untuk ditempelkan di gadget HTML/JavaScript pada sidebar blog. Berikut 11 (sebelas) membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger: 1. Script Widget Recent Post Keren ke-1 Oke, jikalau kami perkenalkan yang pertama, silahkan gunakan Script Widget Recent Post/ Artikel Terbaru berikut. Agar performa artikel modern blog anda dilihat pengunjung. Jika template anda banyak texture garis, coba deh gunakan isyarat ini. #recent-postswidth:auto;padding:0 10px;margin:0 auto;border:1px solid #ddd#recent-posts ul,#recent-posts limargin:5px;list-style-type: disc;list-style-position: inside;text-indent: -1em;#recent-posts atext-decoration:none #recent-posts a:hovertext-decoration:none;color:#d6d4d4#recent-posts liborder-top:0px solid #ddd;padding:0px#recent-posts li:first-childborder-top:none 2. Script Widget Recent Post Keren ke-2 Anda boleh memberi warna template blog dengan menggunakan instruksi yang satu ini.                     img.recent-post-thumbpadding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;    .recent-posts-container font-family:'Oswald', sans-serif;font-size:12px;    ul.recent-posts-container lilist-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%    ul.recent-posts-container counter-reset: countposts;list-style-type:none;padding:0;    ul.recent-posts-container li:before content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;    .recent-posts-container atext-decoration:none;    .recent-post-title margin-bottom:5px;    .recent-post-title a font-size:12px; text-transform: uppercase; color: #2aace3;    .recent-posts-details margin: 5px 0px 0px 92px;font-size:11px;    .recent-posts-details acolor: #777;    3. Script Widget Recent Post Keren ke-3 Koleksi ke-3 kami adalah Script Widget Recent Post/ Artikel Terbaru berikut ini, lumayan bisa dipakai untuk memperindah performa side kafe blog.                     img.recent-post-thumbwidth:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff    ul.recent-posts-container list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;    ul.recent-posts-container li:nth-child(1n+0) background: #F49A9A; width: 100%    ul.recent-posts-container li:nth-child(2n+0) background: #FCD092; width: 95%    ul.recent-posts-container li:nth-child(3n+0) background: #FFF59E; width: 90%;    ul.recent-posts-container li:nth-child(4n+0) background: #E1EFA0; width: 85%;    ul.recent-posts-container li:nth-child(5n+0) background: #B1DAEF; width: 80%;    ul.recent-posts-container li padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;    .recent-posts-container a text-decoration:none;     .recent-posts-container a:hover color: #222;    .post-date color:#e0c0c6; font-size: 11px;     .recent-post-title a font-size: 14px;color: #444; font-weight: bold;    .recent-post-title padding: 6px 0px;    .recent-posts-details a color: #222;    .recent-posts-details padding: 5px 0px 5px;     4. Script Widget Recent Post Keren ke-4 Siapa yang tidak menggemari Script Widget Recent Post/ Artikel Terbaru ini? Saya pasti menyukainya, dan telah saya gunakan diblog saya lainnya.                   .recentpoststyle counter-reset: countposts;list-style-type: none;    .recentpoststyle a text-decoration: none;color: #49A8D1;    .recentpoststyle a:hover color: #000;    .recentpoststyle li:before content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;li.recent-post-titlemargin-bottom: 5px;padding: 0;    .recent-post-title a color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;    .post-date font-size: 11px;color: #999;margin:5px 0px 15px 32px;    .recent-post-summ border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;    5. Script Widget Recent Post Keren ke-5 Jangan anggap remeh Script Widget Recent Post/ Artikel Terbaru yang satu ini. Sekali anda terapkan di blog, woo, blog anda akan mantul, elok betul. #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize; .rctitles2 padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted #cccccc;background:#fdaeae;border-radius: 10px; 6. Script Widget Recent Post Keren ke-6 Tidak ada kata tidak pada Script Widget Recent Post/ Artikel Terbaru nomor enam ini. Pasalnya, sangat mewah dan responsive. img.recent-post-thumb width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%; .recent-posts-container font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px; ul.recent-posts-container counter-reset: countposts;list-style-type: none; background: #fff; ul.recent-posts-container li:before content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px; ul.recent-posts-container li padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB; ul.recent-posts-container border: 2px solid #FCD6CB; .recent-posts-container a text-decoration:none; .recent-posts-container a:hover color: #222; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 14px;color: #616662; .recent-post-title padding: 6px 0px; .recent-posts-details a color: #888; .recent-posts-details padding-bottom: 5px; a.readmorelink color: #4DACE3; 7. Script Widget Recent Post Keren ke-7 Oke, bila kurang puas lagi, silahkan Script Widget Recent Post/ Artikel Terbaru berikut. Biar mantap tampilan blog anda dilihat pengunjung. Jika template anda banyak texture garis, coba deh gunakan arahan ini. img.recent-post-thumb padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%; .recent-posts-container font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px; ul.recent-posts-container li padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px; ul.recent-posts-container counter-reset: countposts;list-style-type: none; ul.recent-posts-container li:before content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef; .recent-posts-container a text-decoration:none; .recent-posts-container a:hovercolor: #4DACE3; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 13px; text-transform: uppercase; color: #5C4D4D; .recent-post-title margin: 5px 0px; .recent-posts-details border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px; .recent-posts-details a color: #888; a.readmorelink color: #4DACE3; 8. Script Widget Recent Post Keren ke-8 Anda mampu menggunakan Script Widget Recent Post/ Artikel Terbaru koleksi nomor delapan kami ini. Blog anda akan terlihat bagus betul. Sebaiknya anda terapkan pada template yang warnanya rame. img.recent-post-thumbnailfloat:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff ul.recent-posts-wrap background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif; ul.recent-posts-wrap li:nth-child(1n+0) background: #FCD092; width: 94% ul.recent-posts-wrap li:nth-child(2n+0) background: #FFE0B4; width: 94% ul.recent-posts-wrap li:nth-child(3n+0) background: #FFF59E; width: 94%; ul.recent-posts-wrap li:nth-child(4n+0) background: #E1EFA0; width: 94%; ul.recent-posts-wrap li:nth-child(5n+0) background: #B1DAEF; width: 94%; ul.recent-posts-wrap li padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777; .recent-posts-wrap a text-decoration:none; .recent-posts-wrap a:hover color: #222; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 14px;font-weight: bold;color: #444; .recent-post-title padding: 6px 0px; .recent-posts-details a color: #222; .recent-posts-details padding: 5px 0px 5px; Your browser does not support JavaScript! 9. Script Widget Recent Post Keren ke-9 (Model Gallery) Jika anda sedang Script Widget Recent Post/ Artikel Terbaru dengan penampilan yang mantap dan menarik, silahkan gunakan kode berikut. Kode ini cocok untuk blog anda yang magazine. /* CSS Recent Post Gallery Widget */.recent-grid padding:0;clear:both; .recent-grid:after content:"";clear:both;display:table; .recent-grid .galleryviewposition:relative;display:inline-block;margin:6px 0;overflow:hidden; .recent-grid .galleryview atext-decoration:none;float:left;position:relative;margin:0 6px .recent-grid .galleryview .ptitledisplay:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s .recent-grid .galleryview:hover .ptitlevisibility:visible;opacity:1 .recent-grid a imgbackground:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s .recent-grid a:hover img border-color:#bbb; 10. Script Widget Recent Post Keren ke-10 Script nomor sepuluh Widget Recent Post/ Artikel Terbaru dari kami ini, pantas buat anda terapkan diblog anda. Kode yang satu ini bisa nyambung dengan template yang minimalis. #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize;.rctitles2 padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc; 11. Script Widget Recent Post Keren ke-11 Koleksi terakhir kami Script Widget Recent Post/ Artikel Terbaru sangat sesuai untuk anda. Kode yang satu ini cocok untuk template blog yang secara umum dikuasai putih, seperti Median UI, Viomagz Putih, Dll #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize; .rctitles2 padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted#cccccc;background:#f2f2f2; Demikian uraian lengkap 11 Koleksi Membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger , supaya goresan pena ini berfaedah.
Sumber https://pakgalingging.blogspot.com

Cara Membuat Widget Recent Post (Postingan Modern) Di Blog Yang Unik Viomagz

- Cara membuat widget Postingan Terbaru juga biasa kita kenal dengan istilah Recent Post pada sebuah Blog diperlukan supaya pengunjung gampang bisa melihat postingan terbaru blog anda. Terdapat banyak sekali script Widget yang dapat anda gunakan, mulai dari format hanya tulisan saja sampai dengan menggunakan thumbail gambar. Dengan menggunakan fitur ini maka pengunjung akan betah berlama lama untuk membaca tulisan kita. Script beriktu merupakan Widget milik Template VioMagz 3.3.0 miliknya Mas Sugeng. Sementara pada versi sebelumnya, widget ini hanya menampilkan tulisan tetapi tidak ada batasan garis dan icon pensil pada depan judul artikel. Display Postingan Terbaru (Recent Post) ini saya ambil dari template versi terbaru mulai 2.4 sampai saat ini sudah versi 4.6.0. Ada banyak blogger yang bertanya ke saya bagaimana sih cara membuat wiget tersebut Pak? Saat ini, kami bukan membuatkan untuk anda, namun kami hanya ambilkan Kode CSSnya dan kode HTML untuk menampilkan Postingan terbaru tersebut. Langkahnya cukup mudah dan tidak menambah beban berat pagespeed Blog anda. Selain itu, tampilan dari recent post ini juga cukup unik dan menarik walaupun sekilas terlihat sederhana karena tidak menggunakan Gambar. Cara membuat widget Recent Post (Postingan Terbaru) di Blog yang Unik Langkah pertama : Silahkan anda masuk ke Dashboard Blogger anda, lalu pilih Tema >> Edit HTML >> Kemudian silahkan letakkan kode CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode " Blogger CSS " dengan menggunakan CTRL + F dan letakkan kode dibawah ini tepat dibawah CSS Tersebut. Jangan anda lupa untuk Save. /* Artikel Terbaru */ .artikel-terbaru ul li     border-bottom: 2px dotted $(label.border.color);     padding-bottom: 8px;     margin-bottom: 8px;     font-weight: 500; .list-label-widget-content ul li, .LinkList ul li, .PageList ul li     border-bottom: 2px dotted $(label.border.color);     padding-bottom: 5px; .artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before     content: "\f14b";     font-family: FontAwesome;     font-style: normal;     font-weight: normal;     text-decoration: inherit;     margin-right: 6px; .artikel-terbaru ul li:before     content: "\f14b"; .list-label-widget-content ul li:before     content: "\f07b"; .LinkList ul li:before     content: "\f14c"; .PageList ul li:before     content: "\f249"; Silahkan Lihat Gambar berikut ini : Langkah kedua  : Berikutnya adalah silahkan masuk ke Tata Letak >> Tambahkan Ganget Tutorial cara membuat widget Recent Post (Postingan Terbaru) di Blog yang Unik bisa anda terapkan Viomagz 4.3.0 Keatas. Karena telah saya terapkan pada template viomagz terbaru. Langkah ketiga  :  Anda klik pada tanda + pada opsi HTML/JavaScript   Langkah empat : Isikan tuliskan pada kolom judul dengan kata " Artikel Terbaru " dan lalu pastekan Kode HTML pada kolom dibawahnya. Jangan lupa klik Simpan .  Pengguna template Viomagz 4.6.0 Untuk template Viomagz 4.6.0 juga bisa diterapkan widget Recent Post (Postingan Terbaru) ini. Namun, ada bagian script yang perlu anda buang. Silahkan cari arahan : $(label.border.color), setelah ketemu, HAPUS kode ini. Ingat, jangan hapus ; (titik komanya). JANGAN LUPA TAMBAH SCRIPT FONT AWESOME ini tepat ditas Catatan : Silahkan cek apalagi dahulu, jika font ini belum ada, silahkan tambahkan. Namun, apabila telah ada terpasang script diatas, artinya telah ada didalam template. Anda tidak perlu menambahkan script ini. Sangat gampang bukan? Cara membuat Recent Post atau widget Postingan Terbaru di Blog mirip dengan penampilan milik Template VioMagz V2.8. Jika anda masih kebinggungan untuk menerapkannya, anda bisa melihatnya melalui Tutorial yang kami upload di Youtube. Selamat berkreasi dan semoga sukses.  Video Youtube Cara membuat Recent Post unik cuma Tulisan
Sumber https://pakgalingging.blogspot.com