Cara membuat Postingan Artikel di Blogger Terbaru (+ Cara memasang Embed Sites di Blogger)

Assalammu‘alaikum Wr. Wb. 

Halo guys! Taukah anda? Bahwa sejak 3 Bulan yang lalu (September 2020), Blogger dan Pihak Google telah menghapus Blogger yang Versi Lama. Jadi sekarang sudah memakai Blogger yang Versi Terbaru. Pastinya berbeda kan Tampilan-tampilan di Blogger Lama (yang dulu) dengan Blogger Baru (yang sekarang)? Dan mungkin kalian Rindu dengan Blogger Lama kan? Kali ini saya akan membahasnya lebih dalam. Di Postingan ini tidak hanya tentang "Cara membuat Postingan Artikel di Blogger Terbaru", tapi juga tentang "Cara memasang Embed Sites di Blogger".

MEMBUAT POSTINGAN ARTIKEL DI BLOGGER

Sumber Artikel : Randi.id

Jika Anda pernah membuat dan kirim-kirim Email atau sering mengetik pada program pengolah kata Microsoft Word maka untuk melakukan Postingan Artikel di Blogger bukanlah hal yang sulit. Tetapi, jika Anda masih belum bisa mengerti caranya, disini saya akan berikan langkah-langkah membuat postingan baru di Blogger. Terlebih lagi jika sekarang, Blogger telah dirombak menjadi Tampilan yang Baru.

Masuk (Login / Sign in) ke Blogger dengan menggunakan Akun Google kalian. Lalu klik di Tomnol "+ Postingan Baru" / "+ New Post" untuk memulai membuat Postingan baru.

Kurang lebih seperti berikut tampilan Entri Baru (Postingan Baru) di Blogger, disini Anda bisa memulai membuat Postingan (Artikel) baru dengan Fitur yang sudah disediakan.

Berikut, inilah Fitur-fitur di Blogger jika ing membuat Postingan baru :

1. Judul Postingan atau Artikel.
2. Isi Postingan.
3. Menu dan Fasilitas untuk mengatur isi Postingan, seperti Undo dan Redo, Ukuran Font, Jenis Font, Cetak Tebal (Bold) / Cetak Miring (Italic) / Garis Bawah (Underline) / Coret Tuilisan, Warna Teks / Warna Background Teks, Sisipkan atau Edit Link, Sisipkan Gambar dan Video, Sisipkan Karakter Khusus, Perataan Teks (Align Text), Bullet dan Numbering, dan lainnya. Di Blogger terbaru juga ada tanda Titik Tiga (⋯) berarti ada sambungan / lanjutan atau Opsi Lainnya.
4. Format Jenis Postingan, Compose untuk Mode pengetikan biasa dan HTML untuk pengetikan dengan model Bahasa Pemograman HTML.
5. Label untuk Jenis Postingan.
6. Tanggal Postingan dibuat, atau untuk ditunda penerbitannya sesuai Jadwal.
7. URL (Link) atau Alamat Postingan seperti Permalink (Tautan Permanen), Link Judul, Link Lampiran (Enclosure Link), Link Mime, dan Link jenis lainnya.
8. Lokasi saat postingan ditulis.
9. Opsi / Pilihan lainnya.
10. Jika Artikel sudah selesai dan siap dipublikasikan, klik Publikasikan (Perbarui) untuk menerbitkan Artikel tersebut ke Blog.
11. Preview, memeriksa kerapian artikel sebelum dipublikasikan.
12. Menyimpan Postingan ke Draf atau menyimpan ke Konsep (Perbarui).
13. Keluar dari Editor Entri baru tanpa mempublikasikan dan postingan disimpan kedalam Draf.
14. Tanda Awan, merupakan Simbol untuk menandakan apakah Postingan-nya sudah tersimpan atau belum.
15. Menu dan Fasilitas untuk mengatur Gambar, seperti Perataan Gambar (Align Picture), Ukuran Gambar, Captions, dan Mengubah.

Tampilan Halaman Post Editor

Terakhir, jika Artikel-nya sudah selesai dan siap dipublikasikan ke umum, klik Publikasikan. Kamu juga bisa menambahkan Gambar dan/atau Video apapun.

Lihat hasilnya di Blog Anda, tulisan Anda sudah diterbitkan pada blog dan bisa dibaca orang banyak.

CARA MEMASANG EMBED SITES DAN EMBED VIDEO (YOUTUBE) DI BLOG

Sumber Artikel (Sebagian) : Igniel.com, Blogtipsintrik.com, dan Idcloudhost.com

Fitur Embed dari YouTube ini sangat bagus untuk di gunakan sebagai salah satu cara menambah nilai seo sebuah Artikel yang kita buat.

Yang mana dengan menambahkan atau Embed Video YouTube dalam Artikel. Postingan yang kita buat akan mendapatkan nilai plus dari pembaca, apalagi jika Artikel tersebut berbentuk Tutorial. Pastinya pengunjung akan merasa sangat senang membacanya, karena Artikel Tutorial yang kita bagikan jauh lebih lengkap dan lebih mudah untuk dipahami oleh Pembaca.

Bahkan sekarang ini di bagian Blogger untuk membagikan Video (Share Video) dari YouTube memang sudah berbeda. Jika kita langsung menekan Tombol Blogger, kita langsung membuka ke Tab baru, dan cara membaginya berbeda.

Berbeda kan dengan cara yang lama?? Berikut, inilah cara memasukkan Video dari YouTube beserta dengan Embed Sites lainnya. Ingat! Pertama-tama Salin dulu Kode Pemogramannya yang ada di bawah ini. 

1. Video di YouTube

Untuk Ukuran 270 x 480 px :

<div style="text-align: left;"><iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/[KODE VIDEO DI YOUTUBE]" width="480"></iframe></div>

Hasilnya :

Dan untuk Ukuran Bebas ([Height / Tinggi] x [Width / Lebar]) :

<div style="text-align: left;"><iframe allowfullscreen="" frameborder="0" height="[TINGGI]" src="https://www.youtube.com/embed/[KODE VIDEO DI YOUTUBE]" width="[LEBAR]"></iframe></div>

Keterangan : Cara menentukan Kode Video di Youtube, yaitu dengan melihat dulu di bagian Tautan Link yang tertera diatas Laman Web.

Contoh :

Atau juga bisa klik di Tombol "Share (➝)" yang ada di bagian Bawah Video, lalu Salin (Copy) Link yang seperti di bawah ini. Mungkin cara ini juga membantu bagi Anda yang memakai Ponsel atau Tablet.

Untuk di HP (Ponsel) :

Lalu Tempel (Paste) di sembarang tempat (untuk di Ponsel dan Tablet bisa memakai Memo / Notes utnuk sembarang Tempel), dan ambil di bagian Kode Video-nya saja. Lalu masukkan kembali ke dalam Kode Pemograman yang ada di atas tadi.

2. Dokumen

Caranya hampir sama, tapi ini untuk memasukkan Dokumen (Seperti Word, PDF, Excel, dan PowerPoint) ke dalam Blog (Blogspot / Blogger). Tapi untuk hal yang ini hanya untuk File yang berasal dari Google Drive (Seperti Google Docs, Spreadsheet, dan Slides) saja.

Untuk Ukuran 700 x 500 px (Untuk Word dan PDF) :

<div style="font-family: arial;">
<iframe height="700" src="https://docs.google.com/viewer?srcid=[NAMA FILE YANG BERBENTUK WORD DAN PDF]&amp;pid=explorer&amp;chrome=false&amp;embedded=true" width="500"></iframe><br /></div>
<span style="font-family: &quot;arial&quot;;"><br /></span></div>

Atau yang ini :

<div style="font-family: &quot;times new roman&quot;; font-size: small;">
<iframe height="900" src="https://docs.google.com/document/d/[NAMA FILE YANG BERBENTUK WORD DAN PDF BERUPA KODE]/mobilebasic;pid=explorer&amp;chrome=false&amp;embedded=true" width="600"></iframe><span style="font-family: arial;"><br /></span></div>

Hasilnya : 

Untuk Ukuran 700 x 500 px (Untuk Excel / Spreadsheet) :

<div style="text-align: left;"><span style="font-family: &quot;arial&quot;;"><iframe height="1700" src="https://docs.google.com/spreadsheets/d//[NAMA FILE YANG BERBENTUK EXCEL/SPREADSHEET BERUPA KODE];pid=explorer&amp;chrome=false&amp;embedded=true" width="760"></iframe></span></div><div style="text-align: left;"><span style="font-family: &quot;arial&quot;;"><br /></span></div>

3. Embed Sites

Untuk Embed Sites juga hampir sama, yaitu tinggal ambil saja Website yang akan kalian ambil.

Untuk Ukuran 1300 x 600 px :

<div style="text-align: center;"><span style="font-family: arial;"><iframe height="1300" src="[NAMA ALAMAT SITUS / WEBSITE]?embedded=true" width="600"></iframe></span></div><div><span style="font-family: arial;"><br /></span></div>

Hasilnya :

[BONUS] CARA MEMASANG WIDGET LABEL KEREN 단 MENARIK DI BLOG

Sumber Artikel : Awanbaginda.blogspot.com, Zonainternetku.blogspot.com, Milano-Ruus.blogspot.com, dan Zainelhasany.com

Diatas saya sudah selesai membahas tentang Cara membuat Postingan Artikel di Blogger yang Terbaru, dan juga sudah membahas tentang Cara memasang Embed Sites di Blogger. Sekarang giliran membahas tentang Cara memasang Widget Label keren dan menarik di Blog(spot).

Adapun Cara memasang Widget di Blog yaitu : 

    1. Masuk (Login / Sign in) ke Blogger dengan menggunakan Akun Google Anda.

    2. Silahkan pilih Dasboard > Theme > Edit HTML (di depan Tombol "Customize")

    3. Tekan Ctrl+F, lalu cari Kode ]]></b:skin>.

    4. Jika sudah ketemu, Copy kode CSS dibawah ini dan Paste-kan (Letakkan) kodenya tepat diatas kode ]]></b:skin>.

    5. Jika sudah jangan lupa Save/Simpan.

Dan inilah Cara Memasang Label Cloud di Blog :

    1. Masuk menu Layout atau Tata Letak >> Tambah Gadget >> Label

    2. Silahkan setting Label (Tergantung dari nama Label Anda) menjadi Cloud, caranya pada display pilih Cloud (Jangan List). [Lihatlah pada Gambar di Atas.]

Dan inilah beberapa Kumpulan Widget Unik dan Menarik yang saya Rekomendasikan :

1. Label / Widget Keren Varian 1

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px

2. Label / Widget Keren Varian 2

 

.label-size{ margin:0; padding:0; position:relative; }  .label-size a ,  .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;  border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px;  border-top-right-radius:4px;  } .label-size a:before ,  .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0;   } .label-size a:after ,  .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; }  .label-size a:hover ,  .label-size span::hover { background:#555;} .label-size a:hover:before ,  .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

3. Label / Widget Keren Varian 3

.widget-content.list-label-widget-content {padding:0;}.widget-content.cloud-label-widget-content {display:inline-block;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:10px;}.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}.label-count:hover {background:#fafafa;color:#222;border-radius:4px}.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}.Label li:hover {background:#fff;color:#FF9934;}.Label li:before {content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;color:#666;transition:all .3s ease-out;}.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}.Label li a {color:#666;transition:all .3s ease-out;}.Label li a:hover {color:#FF9934;}.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}.Label li span:hover{background-color:#FF9934;color:#fff}.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}.label-size:hover{background:#FF9934;border-color:#FF9934;}.label-size a {display:inline-block;color:#444;padding:8px 10px;font-weight:400;}.label-size a:hover {color:#fff;}.label-size a:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#444;transition:initial;}.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}.Label li:hover {color:#29abe2;}.Label li a {color:#aaa;transition:all .3s ease-out;}.Label li a:hover {color:#29abe2;}.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}.Label li span:hover{color:#29abe2}.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}.label-size a {display:inline-block;color:#fff;padding:8px 10px;font-weight:400;transition:initial;}.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}label-size a:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#fff;transition:initial;}.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}.label-count {background:#333;}

4. Label / Widget Keren Varian 4

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}

5. Label / Widget Keren Varian 5

#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}#sidebar-wrapper .Label li:before {content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;color:#666;transition:all .3s ease-out;}#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}#sidebar-wrapper .Label li a:hover {color:#ef4824;}#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;font-weight:400;}#sidebar-wrapper .label-size a:hover {color:#fff;}#sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#444;transition:initial;}#sidebar-wrapper .label-size a:hover:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}

6. Label / Widget Keren Varian 6

.label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; left: 0;
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

7. Label / Widget Keren Varian 7

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#abc123;font-size:15px;}
#Label1 .label-size-2 a {background:#5cc9cd;font-size:15px;}
#Label1 .label-size-3 a {background:#e24f4f;font-size:15px;}
#Label1 .label-size-4 a {background:#f568dc;font-size:15px;}
#Label1 .label-size-5 a {background:#38a3ee;font-size:15px;}
#Label1 .cloud-label-widget-content span a:hover {background:#007abe;} 

8. Label / Widget Keren Varian 8

#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}

[Dan masih banyak lagi ....]

Demikianlah, kita sudah membahas tentang "Cara membuat Postingan Artikel di Blogger yang Terbaru"; "Cara memasang Embed Sites di Blogger"; dan juga tentang "Cara memasang Widget Label keren dan menarik di Blog".

Terima Kasih, dan Semoga Bermanfaat :)

Wassalammu‘alaikum Wr. Wb.