Cara menampilkan View Excel dan word di blog

Cara menampilkan View Excel dan word di blog

Cara menampilkan View Excel dan word di blog
mukhlismj.com

 

Step 1 - Upload File ke Google Drive

pertama kali yang harus kita lakukan adalah mengupload file (dokumen) ke Google Drive nya terlebih dahulu, kemudian kita share dan ubah akses umum menjadi SIAPA SAJA YANG MEMILIKI LINK

salin link.

perhatikan gambar dibawah ini

Cara menampilkan View Excel, word, ptt di blog

Cara menampilkan View Excel, word, ptt di blog


pastekan link yang sudah kamu copy tadi di notepat atau dimanapun yang menurut mu aman dan mudah untuk di akses kembali.

step ke 2

Langkah selanjutnya, Copy Link yang ada dibawah ini

<iframe src="https://docs.google.com/viewer?srcid=PASTE LINK DISINI&pid=explorer&chrome=false&embedded=true" width="500" height="500"></iframe> 

 

Kemudian Buka kembali Link yang kamu simpan di notepat tadi dan perhatikan kodenya. karena kita hanya mengambil bagian tertentu saja.

Coba perhatikan link punya saya

https://docs.google.com/spreadsheets/d/1cH4F9YQMbn77fNrZXT50cM6YzyxkpCR7/edit?usp=sharing&ouid=110996520977441383492&rtpof=true&sd=true

pastikan kita hanya akan meng Copy bagian yang berwarna Merahnya saja (yang lain ga usah). kemudian pastekan kedalam kode yang saya kasih diatas. sehingga nantinya akan menjadi seperti ini

<iframe src="https://docs.google.com/viewer?srcid=1cH4F9YQMbn77fNrZXT50cM6YzyxkpCR7&pid=explorer&chrome=false&embedded=true" width="500" height="500"></iframe>

dan Step terakhir, barulah kalian Copy kembali kode yang sudah kita buat barusan kedalam blog teman-teman, dan pastikan juga kalian pastekan di bagian Mode HTML ya.

Tinggal tempel di mode HTML saja, Ga usah di PARSE kan lagi

berikut hasil tampilannya di blog saya.


TAMPILAN FILE EXCEL


TAMPILAN WORD


Nah, itu saja untuk artikel kali ini semoga bermanfaat.

share di sosmed kamu untuk membantu teman-teman yang lain :)

terimakasih.

Cara membuat pembungkus script atau Syntag higlighter diblog

Cara membuat pembungkus script atau Syntag higlighter diblog

syntag higlighter
mukhlismj.com

Sebelumnya saya udah pernah buat artikel mengenai cara pasang syntag seperti arlina design. tapi itu dulu waktu saya pakek templatenya beliau berjalan dengan lancar, namun ketika kali ini saya pakek template nya mas sugeng, setelah saya coba pasang tapi kok ga bisa, bikin pala pusing.

akhirnya saya nemu cara baru, dan menurutku ini paling simple dan paling mudah untuk di ikutin.

sebenarnya bisa dibilang ini merupakan artikel yang aku tulis ulang sih, yang saya temui di blognya bung franki.

karena ini berdasarkan pengalaman pribadi. sudah saya coba saya pasang dan berhasil. jadi saya pikir ga ada salahnya juga untuk aku share kembali.

iya seperti biasalah, akhirnya saya tulis ulang biar tidak lupa di waktu yang akan datang.

langsung aja ke caranya guys!


Langkah 1

masuk ke Tema dan pilih Edit HTML. kemudian pastekan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Namun dalam percobaan saya, ini saya pastekan diatas </head>



<style type='text/css'>
/* Syntax Highlighter Monokai Sublime */
.post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
.post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
pre,pre code{white-space: pre-wrap;}
.hljs {
display: block;
overflow-x: auto;
padding:0 0.5em 0.5em;
margin:0;
background: #23241f;
max-height:360px;
}

.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}

.hljs-strong {
font-weight: bold;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}
.hljs::-webkit-scrollbar{width:8px;height:25px;}
.hljs::-webkit-scrollbar-thumb
{border-radius:2px; background:rgba(255,255,255,.2)}
</style>


Selanjutnya cari kode </body> atau  &lt;!--</body>--&gt;&lt;/body&gt; dan Pastekan kode dibawah ini diatas kode tadi.


 
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>


Setelah semuanya selesai, kemudian simpan Tema.


Langkah 2

Cara Menggunakan Syntag Higlighter

Letakkan kode dibawah ini didalam mode tampilan HTML bukan di mode tampilan MENULIS (COMPOSE) ya.



<pre><code>

Kode CSS/JavaScript/PHP posisinya disini

</code></pre>


pastekan kode (Script) kalian ke dalam kode tersebut. tapi ingat sebelum kodenya dipastekan, pastikan kode tersebut sudah di PARSE terlebih dahulu, supaya kodenya bisa terbaca dengan baik di blog kalian.

Untuk mem Parse kode (script) bisa di blogcrowds


Variasi Syntag Higlighter

Sebenarnya untuk menulis Syntag Higlighter itu cukup banyak variasinya, namun yang paling sering kita temui diantaranya seperti: CSS, JAVASCRIPT, HTML, dan PHP.

Nah, untuk menampilkan variasi warna yang lebih spesifik berdasarkan fungsinya, teman-teman bisa pakai kode-kode berikut ini untuk memanggilnya.

Syntag Higlighter CSS


<pre><code class="css">

Kode CSS yang sudah di parse disini

</code></pre>


Syntag Higlighter Javascript


<pre><code class="javascript">

Kode JavaScript yang sudah di parse disini

</code></pre>


Syntag Higlighter html


<pre><code class="html">

Kode HTML yang sudah di parse disini

</code></pre>


Syntag Higlighter php


<pre><code class="php">

Kode PHP yang sudah di parse disini

</code></pre>


ingat kode-kode diatas berfungsi untuk memanggil kode Syntag nya ya, jadi bisa pilih aja sesuai kebutuhan (keinginan) teman-teman.

Itulah artikel kali ini, jika kalian merasa artikel ini bermanfaat, jangan lupa untuk share di sosmed kalian agar teman-teman yang lain bisa terbantu juga.

terimakasih.

cara buat widget instagram di sidebar blog (snapwidget)

cara buat widget instagram di sidebar blog (snapwidget)

MUKHLIS MJ - Halo Readersku yang setia, sesuai dengan janjiku, setiap hari minggu bakal ada artikel baru di blog ini. All Right Guys langsung aja hari ini aku pengen berbagi sedikit pengalaman gimana sih caranya supaya instagram kita nongol di blog (situs web Pribadi kita)? soalnyakan istagram sekarang lagi  pada axis-axisnya apalagi sampe ada yang jadi selebgram. kan asyik tuh!! auto kaya!! heheeee.


OK!! karena itulah hari ini aku akan bikin tutorialnya

SNAPWIDGET

Jadi snapwidget ini adalah sebuah aplikasi pihak ketigalah pokoknya ya. heheee

langsung aja ke caranya:

#1 Masuk ke situsnya SNAPWIDGET (klik disini aja)

Nah!! jadi kamu udah masuk ke situsnya snapwidgetkan? kalau masih belum klik aja tu link di atas nanti kamu akan dibawa ke situsnya snapwidget yang tampilan kayak gini.

#2 Klik GET A FREE WIDGET


Nah!! sampai disini kamu bisa SIGN UP dulu aja kalau belum punya akun ya!! dan ikuti langkah-langkahnya

#3 Create a New Widget


disini kamu klik CREATE A NEW WIDGET, Oh iya itu kalau kita perhatikan dibagian bawahnyakan kek ada yang udah terinstal tuh!! itu karena aku udah pernah bikin widgetnya dulu sebelum ini, So, mungkin di tempat kamu akan keliatan kaya gitu kalau kamu udah pernah daftar sebelumnya, tapi kalau gak mungkin akan keliatan kosong alias gak ada apa-apa.

Lanjut lagi aja langsung Klik CREATE A NEW WIDGET

#4 Pilih Instagram Grid


nah!! ini perlu aku jelasin sedikit, disitukan kamu akan dapat banyak pilihan tuh, kayak instagram gird, intagram Popup, terus ada instagram gird lagi dan masih banyak lagi dibawahnya. semua itu punya fungsinya masing-masing dan beda antara 1 sama lain, jadi abaikan aja kita akan pilih yang pertama aja yang Instagram Gird.

#5 Basic setting



dibagian ini kamu ikutin gambar diatas aja ya, agak ribet soalnya kalau aku jelasin satu-satu. pokoknya isi aja Username instagram kamu di kolom username (gak usah pakek @ lagi). terus di kolom Responsive kamu pilih yes (tadi aku lupa ganti), heheee


scroll kebagian atas untuk lihat previewnya, kalau settingan tadi sama kayak punya ku, lebih kurang nanti tampilannya juga mirip kayak gambar yang di atas ini. nanti tampilannya gitu di sidebar blogmu. kalau dirasa sudah cukup keren dan kece scroll kebawah lagi dan klik GET WIDGET (lihat gambar dibawah.


kamu akan mendapatkan kode-kode berupa script HTML dan klik COPY TO CLIPBOARD (perhatikan gambar dibawah)


#6 Masuk ke dasbor blog kamu lalu masuk ke TATA LETAK dan dibagian sidebar klik tambahkan Widget


#7 pilih HTML/Java Script


#8 Pastekan Script yang kamu Copy tadi di sapwidget ke HTML dan klik simpan (lihat gambar dibawah)



Nah sampai disini Widget instgram kamu udah jadi tuh!!, coba lihat deh punya ku
taraaaaaaa...

itu Wedgetnya disebelah kanan ya, gimana kerenkan.. selemat mencoba, semoga artikel ini bermanfaat buat teman-teman semua.

thanks, daaannnn...
sampai ketemu di artikel berikutnya
Pengalaman menggunakan template blog Premium

Pengalaman menggunakan template blog Premium

Template premium, kelebihan, pengalaman, mukhlis mj
Image : pixabay

Hari ini saya baru saja beli sebuah template premium karyanya Arlina Design. Saya tidak tau kenapa, sepertinya template blog karya-nya mbak arlina ini agak beda sama yang lainnya.

Template karyanya mbak arlina terlihat simple, bersih, elegant dan profesional itulah yang paling saya suka. stylenya keren banget kalau menurut saya.




Sebelumnya saya sudah menggunakan template ini begitu lama, tapi tidak dalam kondisi premium melainkan masih dalam versi free/gratis.

Dan sekarang saya sudah beli Versi premiumnya dengan harga Rp50.000,00- dan ini membuktikan bahwa template ini telah menjadi milik saya sepenuhnya.

Berbicara mengenai template premium apa saja sih kelebihannya?

Yukk disimak 😁

Kelebihan Menggunakan Template Blog Premium


Sesuatu yang premium apapun itu, pasti ada kelebihannya dong, begitu pula dengan sebuah template yang premium, tentunya juga mempunyai kelebihannya tersendiri.

Ok!! Berikut beberapa kelebihan Menggunakan template Premium
  1. Lebih SEO
  2. Mendapatkan Update Terbaru
  3. Tanpa Link Credit di Footer
  4. Bebas dari Enskripsi Scripts
  5. Dapat bonus
  6. Mendapatkan Bantuan dari sipembuat jika ada kesulitan. Dll



Kenapa saya beli Template Premium?


Iya!! kenapa saya malah beli template premium? Sedangkan saya sudah punya yang free.

Ok!!

Mungkin kamu akan berpikir buat apa beli jika ada yang gratisan. Memang benar tapikan kamu bisa lihat sendiri kelebihan yang premium. Dan Ini juga sebuah bentuk apresiasi saya dimana kita bisa menghargai karya orang lain dengan cara bijak atau tidak dengan cara menghapus link kredit di template blog gratisan.

Banyak blogger di Luar sana yang mungkin saja kepikiran ingin menghilangkan Link kredit blog yang sudah di kasih free sama yang buat.

Teman-teman tau tidak? Disaat seseorang mulai berkarya percayalah, waktu mereka begitu banyak terbuang bahkan mungkin mereka rela untuk tidak tidur dimalam hari agar proyeknya cepat kelar.

Sekarang bisa kalian bayangkan sendiri apa artinya perjuangan mereka kalau kita tidak pernah menghargai karyanya.

Saya adalah salah satu tipe orang yang sangat menghargai karya orang lain. Karena saya tau berkarya itu tidaklah mudah, butuh semangat dan konsistensi.




Mungkin artikel ini dapat mengubah menset kita untuk selalu menjaga karya-karya anak bangsa dengan cara menghargai dan tidak curang.

Terimakasih
Mukhlis MJ
pengalaman diterima di adsense | Mukhlis MJ

pengalaman diterima di adsense | Mukhlis MJ



halo sobat blogger semua, hari ini tanggal 24/12/2017 adalah hari yang begitu membuatku semangat. karena pada hari inilah blog aku Mukhlis MJ baru saja di Approve oleh Google Adsense.

Berbicara mengenai Approved Adsense aku mau sharing sedikit pengalaman. mengenai bagaimana caranya aku dapat di approve sama adsense dalam waktu lebih kurang satu minggu.

Penasaran?? mari kita kupas masalah ini sekarang juga, hahaaaa

Sedikit cerita singkat mengenai blog ini. blog Mukhlis MJ sebenarnya sudah dipublish dari tahun 2011 dengan nama blog Muchlisweb domain muchlisweb.blogspot.com. sebelum ini pada masa itu blog aku sudah pernah ditolak berulang kali dengan berbagai macam alasan.

singkat cerita karena aku merasa udah babak belur dan tidak pernah tembus adsense pada waktu itu akhirnya aku tinggalkan blog ini.




dan tahun ini 2017 ternyata ada beberapa teman aku yang blognya udah diterima sama adsense. darisanalah aku kembali lagi ikut mengincar adsense kembali. Tapi sama saja, blog aku tetap di tolak.

tanpa kata menyerah aku searching kesama kemari buat nyari informasi terbaru mengenai hal ini. terus aku terapkan semua ilmu yang aku dapatkan ke dalam blog aku. Mulai dari Upgread Domain ke Top Level Domain (TLD), Hapus semua konten lama, dan masih banyak lagi. intinya blog aku harus dibangun dari nol lagi.

aku ajukan kembali kemaren tanggal 16/12/2017 dan pada tanggal 22/12/2017 aku mendapatkan Sebuah email dari Adsense seperti ini.

Email Penolakan Adsense

Isinya:
Status permohonan AdSense Anda
Seperti yang kami utarakan dalam email sambutan kami, kami melaksanakan peninjauan kedua terhadap permohonan AdSense Anda setelah kode AdSense ditempatkan pada situs Anda. Sebagai hasil dari peninjauan tersebut, kami telah menolak akun Anda karena pelanggaran berikut:
Kami tidak menyetujui permohonan Anda karena beberapa alasan yang tercantum di bawah ini
Tidak dapat meninjau situs Anda: Saat meninjau http://www.mukhlismj.com, kami mendapati bahwa situs Anda tidak aktif atau tidak tersedia. Bila Anda mengajukan permohonan melalui mitra host AdSense, seperti YouTube atau Blogger, situs yang menjadi host Anda tidak tersedia atau tidak ditemukan (dibuang) pada saat peninjauan.
---------------------
Untuk memperbarui dan mengirim ulang permohonan, kunjungi google.com/adsense dan masuk menggunakan alamat email dan sandi yang Anda kirim bersama permohonan. Pakar kami akan meninjau akun Anda untuk mengetahui kepatuhannya terhadap kebijakan program kami, jadi pastikan untuk mengatasi semua masalah yang dicantumkan di atas sebelum mengirim ulang permohonan Anda.
Untuk informasi selengkapnya, kunjungi Pusat Bantuan kami atau telusuri Forum Bantuan AdSense, tempat komunitas penayang berbagi praktik terbaik AdSense.
Hormat kami,
Tim Google AdSense
Pesan ini dikirim dari alamat email khusus pemberitahuan yang tidak menerima email masuk. Jangan balas pesan ini. Jika Anda memiliki pertanyaan, kunjungiPusat Bantuan Google AdSense untuk menemukan jawaban dari pertanyaan umum.

aku mulai bingung!! masak tidak aktif, orang blog aku bisa dibuka kok udah aku cek. trus aku coba ganti template bawaanya blogger karena banyak yang bilang template blog aku berat, Loadingnya lambat. Entah Bagaimana caranya dua hari kemudian pada tanggal 24/12/2017 blog aku langsung di approve.

email di terima adsense

Akhirnya blog aku di setujui sepenuhnya.

Nah!! Itulah sedikit cerita mengenai perjuanganku dalam merintis Google Adsense.
Sekarang aku akan kasih tau sobat semua mengenai pengajuan blog aku, apa saja rincian didalam blog tersebut, Baca sampai habis.

Rincian blog saat aku daftar adsense-di Approve

  1. Domain: Top Level Domain (TLD)
  2. Konten Unik (semua hasil ketikan)
  3. Nice/Topik: Gado-gado
  4. Hanya memiliki 12 artikel
  5. Gambar: Pixabay, Pinterent (tapi ada Link sumbernya)
  6. Template Bawaan Blogger Namanya Contempo 
  7. Submite ke Webmaster
  8. Setiap setelah bikin Artikel aku selalu Submit Url di Search Console
  9. Umur Blog, Publish 2011-Mulai Start lagi 2017
  10. saat blog dalam masa riview aku sempat update 2 artikel
  11. belum terindex sama sekali di www.alexa.com/

Menu Halaman

Artikel Blog saat itu

  1. Tips memilih Stock gambar yang bijak dan aman
  2. Panduan Lengkap Daftar Akun di Broker Supra FX
  3. Mengenal Apa Itu Bisnis Forex
  4. Cara buat kotak script responsive dalam postingan seperti arlina design
  5. Cara Membuat Kotak Catatan blockquote keren di postingan blog
  6. Cara Menampilkan Video Youtube Responsive di Blog
  7. software yang wajib kamu instal setelah instal ulang windows
  8. Cara posting Ulang status Facebook, Instagram, dan twitter di blog
  9. Cara menulis Huruf Tebal, Miring, dan Coret di Whatsapp
  10. Pentingnya Fanspage/Facebook Page Bagi Pembisnis
  11. style gaya berpakaian Pria Cool
  12. 2 kesalahan yang sering dilakukan pria dalam berpakaian

Cek sendiri satu persatu artikelnya seperti apa.

Sebenarnya artikel ini lebih ke personal. sengaja aku tulis untuk dokumentasi pribadi saja. tetapi kalau artikel ini bisa membantu banyak orang tentunya akan memberikan efek kepuasan dan rasa senang bagi si penulis.

Ingat!! semua blogger mengalami hal yang sama. saya di Approve hari ini berkat ada perjuangan keras dari dulu. jangan pantang menyerah, terus berusaha samapai Google Adsense Luluh. hahaaa

Itu aja dariku hari ini semoga dapat membatu dan menambah wawasan buat teman-teman blogger lainnya.

jangan lupa share di sosmed kalian untuk membantu teman-teman blogger lainnya.

Oh iya, kalau kalian punya pengalaman yang berbeda mengenai hal ini. share aja di komentar, aku juga pengen tau cerita kalian.
Cara posting Ulang status Facebook, Instagram, dan twitter di blog

Cara posting Ulang status Facebook, Instagram, dan twitter di blog

Halo teman-teman blogger semua pada artikel ini saya ingin berbagi sedikit tips/Tutorial mengenai Cara posting Ulang Status Facebook, Instagram, dan twitter di blog. terkadang kita pengen mengepost ulang hasil postingan sosial media kedalam postingan blog entah itu alasannya karena postingan tersebut lagi viral atau karena kepentingan Pribadi/individu.

Ilustrasi


cara ini sangatlah elegan semua postingan kita di Sosmed bisa di Repost Ulang kedalam Postingan Blog kita, bahkan Postingan Video di sosmed bisa kita repost ulang ke blog dan langsung bisa di putar di dalam postingan kita. Gimana menurut kalian, Keren Gak?? Paaaassti doooong!!

Baiklah dari pada Kebanyakan Materi ayuuukk langsung aja kita mulai tutorialnya

Cara post Status Facebook

Seabagai langkah awal kita mulai dengan postingan Facebook.

  • Login ke Facebook agan terus cari postingan yang mau kalian repost ulang ke blog, kemudian klik dibagian pojok kanan postingan pada ( ... ) terus klik Lihat Opsi Lainnya dan Pilih Benamkan (perhatikan gambar dibawah ini)
Langkah 1

Langkah 2

  • Sehingga akan tampil tab baru Sisipkan Kiriman Ini dan klik pada tulisan Pengaturan Lanjut. Perhatikan Gambar dibawah
Pilih Pengaturan Lanjut

  • Setelah agan mengeklik Pengaturan Lanjut maka secara otomatis browser kamu akan membuka tab baru ke Facebook Developer. dibagian Generator Kode Pada Kolom lebar piksel pengiriman ubah menjadi 100% supaya konten responsive di semua browser. Terus klik button Dapatkan Kode. Perhatikan gambar berikut.
Ubah Lebar piksel kiriman jadi 100% dan klik Dapatkan Kode

  • pada tab baru Pilih IFrame dibagian atas terus copy semua kode dibawah kemudian pastekan pada postingan blog agan di bagian HTML. lihat gambar berikut
Pilih IFrame dan copy semua kodenya terus pastekan pada HTML postingan blog agan

Lihat Hasilnya

Baca Juga :

Postingan Video di Facebook

Untuk Postingan Facebook yang berbasis Video caranya sama aja, dan atur ukuran Lebar pikselnya sesuai keinginan.

Cara ini juga bisa untuk semua postingan facebook, kalian bisa merepost postingan facebook orang lain ke postingan blog kamu dan kabar gembiranya caranya masih sama seperti cara diatas

Cara Repost ulang Postingan Instagram ke Blog

untuk instagram caranya lebih gampang alias gak pakek ribet.
  • login ke instagram melalui PC kamu kemudian buka Gambar yang ingin kalian repost ke blog dan klik ( ... ) pada bagian Pojok kanan Bawah terus pilih Sisipkan. Lihat gambar dibawah
Klik ( ... ) dan pilih Sisipkan

  • block semua kode dan copy atau bisa juga dengan mengeklik tombol Salin Kode Sisipan kemudian pastekan di bagian HTML postingan agan. Lihat gambar dibawah.
Klik tombol Salin Kode Sisipan

Hasilnya

Sebuah kiriman dibagikan oleh MUKHLIS MJ 🐜 (@mukhlismjalil) pada

Postingan Instagram Berbasis Video


kalau teman-teman tidak ingin menampilkan keterangan Gambar/videonya kalian tinggal Unceklis di box sertakan keterangan

Untuk tutorial Twitter akan saya Lanjutkan Besok.
Thanks
Cara Menampilkan Video Youtube Responsive di Blog

Cara Menampilkan Video Youtube Responsive di Blog

ilustrasi


halo teman-teman pencinta blog, yang suka menulis dan suka berbagi, kali ini saya ingin share sedikit tips mengenai video Youtube, iyaa maksud saya cara menampilkan video youtube dalam postingan blog namun dia bisa menyesuaikan ukurannya dimanapun,mau itu di PC atau di Smarphone terserah, pokoknya dia akan menyesuaikan ukurannya sesuai dengan apa yang kamu gunakan. Tanpa basa-basi lagi langsung aja ke tahapannya yuukk!!

Baca juga:

    #LANGKAH 1

    Buka Blogger > Template > Edit HTML > Tambahkan Kode dibawah ini sebelum ]]></b:skin> atau </style>

    /* Youtube Responsive */
    .videoyoutube{text-align:center;margin:auto;width:100%;}
    .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
    .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

    #LANGKAH 2

    Tambahkan Kode dibawah ini sebelum </body>
    <script type='text/javascript'>
    //<![CDATA[
    // Youtube Responsive
    setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
    //]]>
    </script>


    #LANGKAH 3

    Simpan Template


    #LANGKAH 4

    Gunakan Kode dibawah ini untuk menampilkan Video Youtube di postingan blog, Ganti Kode yang berwarna Putih dengan kode video youtube teman-teman Atau lihat contoh di dibawah ini.


    <div class="videoyoutube">
    <div class="video-responsive">
    <div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
    </div>
    </div>
    </div>


    Cara menerapkan video youtube ke postingan


    #STEP 1


    Copy dan Pastekan Link HTML diatas pada postingan blog sobab, INGAT!! di bagian HTML ya bukan dibagian COMPOSE.



    #STEP 2


    buka Youtube dan Copy link EMBED nya / Lihat Gambar dibawah.
    #LANGKAH 1


    #LANGKAH 2: Copy Linknya Persis seperti yang saya block



    sehingga Kode HTML nya menjadi seperti kode dibawah ini.

    <div class="videoyoutube">
    <div class="video-responsive">
    <div class="video-youtube loader" data-src="https://www.youtube.com/embed/Xa5K9MuoFSw&quot;>
    </div>
    </div>
    </div>


    Semoga Bermanfaat

    Cara Membuat Kotak Catatan blockquote keren di postingan blog

    Cara Membuat Kotak Catatan blockquote keren di postingan blog

    Kotak Catatan/blockquote
    Ilustrasi Gambar Kotak Catatan/blockquote

    saya sangat suka dengan graphic, menurut saya sesuatu yang di warnai dengan tata letak yang bagus akan mendapatkan pemandangan yang indah dan bisa memanjakan mata. begitu juga dengan blog, setelah kamu mendapatkan template yang keren kemudian hiasilah blog tersebut dengan content-content yang bermanfaat dan berkualiatas tinggi. tidak cukup seperti itu saja teman-teman, hiasi juga dalam isi content kamu dengan pernak - pernik yang simple namun memberikan kesan yang indah, sehingga Visitor kamu betah berlama-lama di blog kamu, salah satu pernak-pernik yang saya maksud di sini adalah seperti Kotak Catatan/Blockquote yang keren seperti gambar yang kamu dilihat diatas.

    Nah... teman-teman pasti udah gak sabarkan untuk memasang kotak Catatan/blockquote tersebut di blog kesayangan sobat? heheee.. kotak Catatan/blockquote ini juga sangat sering digunakan oleh arlina design sang designer template blog

    Sebenarnya mengenai Kotak Catatan seperti ini sudah banyak sekali di bahas oleh para blogger yang lain, namun untuk mendokumentasi ilmu yang saya dapat dari tetangga, saya Share kembali di blog ini.

    Oklah!! tanpa basa-basi yang panjang, Yuuk,, langsung saja ke Tahapan atau langkah-langkah untuk Memasang kotak Catatan/blockquote ini di blog kamu.

    CARA PASANG KOTAK CATATAN/BLOCKQUOTE DI BLOG/TEMPLATE


    Langkah#1

    Seperti biasa, buka dasbor blog kamu atau klik disini aja dan masuk ke bagian template > Tema 

    Langkah#2

    kemudian Cari kode </head> dan Pastekan CSS dibawah ini tepat diatasnya.


    <style type='text/css'>
    /*Blockquote Catatan*/
    .post-body blockquote {
    text-align: left;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
    }
    .post-body blockquote:before {
    position: absolute;
    content: 'Catatan';
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    display: block;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    color: #6591c2;

    }
    .post-body blockquote:after {
    position: absolute;
    content: 'f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
    }
    </style>

    Langkah#3

    Setelah dipastekan CSS di atas kemudian SAVE dan coba cek postingan kamu yang ada blockquotenya pasti akan nonggol tu, heheee

    CARA MEMASANG CATATAN/BLOCKQUOTE DALAM POSTINGAN

    Saya rasa ini merupakan hal yang sepele, karena cara menggunakannya cukup mudah, seperti bisa kamu tinggal klik di bagian menu Quote pada menu postingan kemudian tinggal ketik catatan yang ingin di tampilkan atau dengan cara lain kamu bisa block terlebih dahulu textsnya dan kemudian kamu tekan menu Quotenya.

    Kalau teman-teman bingung gak tau yang mana Menu Qoutenya, coba perhatikan SS berikut

    kotak catatan/blockquote blog
    SS Letak tool menu Qoute di Postingan

    Itu saja yang dapat saya Share kali ini semoga bermanfaat. kalau ada kesulitan, tinggalkan komentar kamu pada kotak komentar dibawah.

    Oh ya, Kalau kamu merasa Content ini bermanfaat silakan Share di SOSMED kamu untuk membantu teman-teman yang lainnya :)
    Cara Buat Kotak Script Responsive dalam Postingan Seperti Arlina Design

    Cara Buat Kotak Script Responsive dalam Postingan Seperti Arlina Design

    kotak script responsive
    Kotak Script Responsive

    bagi kamu semua yang sering mampir ke blognya mbak arlina tentunya kalian sudah sangat mengerti dengan hal ini. apa lagi buat teman-teman yang sudah sering gonta-ganti template dengan templatenya mbak arlina.

    namun tujuan saya menulis artikel ini adalah buat teman-teman yang menggunakan template lain yang belum dilengkapi dengan pembungkus kotak script seperti kotak scriptnya mbak arlina.

    Cara Pasang Kotak Script Responsive


    Langkah 1

    Buka Desboardnya blog kamu dan masuk ke Setingan template > Edit HTML > terus salin semua kode CSS dibawah ini dan letakan tepat diatas kode </style>


    /* CSS Prism Syntax Highlighter */
    pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;position:relative;border-radius:4px;max-height:500px}
    pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold}
    pre::after{content:'Double click to selection';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out}
    pre:hover::after{opacity:0;top:-8px;visibility:visible}
    code{font-family:Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px}
    pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold}
    code .token.punctuation{color:#ccc}
    pre code .token.punctuation{color:#fafafa}
    code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777}
    code .namespace{opacity:.8}
    code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56}
    code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad}
    pre code .token.selector,pre code .token.attr-name{color:#fafafa}
    pre code .token.string{color:#40ee46}
    code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc}
    code .token.operator{color:#1887dd}
    code .token.atrule,code .token.attr-value{color:#009999}
    pre code .token.atrule,pre code .token.attr-value{color:#1baeb0}
    code .token.keyword{color:#e13200;font-style:italic}
    code .token.comment{font-style:italic}
    code .token.regex{color:#ccc}
    code .token.important{font-weight:bold}
    code .token.entity{cursor:help}
    pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
    code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
    pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
    .comments pre{padding:10px 10px 15px 10px;background:#2c323c}
    .comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none}
    .comments pre::after{font-size:11px}
    .comments pre code{color:#eee}
    .comments pre.line-numbers{padding-left:10px}
    pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber}
    pre.line-numbers > code{position:relative}
    .line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0}
    .line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber}
    .line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms}
    pre[data-codetype='CSSku']:before{background-color:#00a1d6}
    pre[data-codetype='HTMLku']:before{background-color:#3cc888}
    pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0}
    pre[data-codetype='JQueryku']:before{background-color:#e5b460}

    Langkah 2

    Sekali lagi Copy tiga kode di bawah ini dan pastekan diatas </body> atau </head> (pilih salah satu, namun dalam percobaan saya, saya mempastekannya di atas) </head>


    <script src='https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/prisma.js' type='text/javascript'/>


    <script>
    $('pre').attr('class', 'line-numbers');
    Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
    </script>


    <script type='text/javascript'>
    var pres = document.getElementsByTagName(&quot;pre&quot;);
    for (var i = 0; i &lt; pres.length; i++) {
    pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
    }, false);
    }
    </script>

    Kemudian Simpan Templatenya.

    Cara Menggunakannya


    Untuk menggunakan pembungkus script tersebut kedalam postinganmu, gunakanlah kode dibawah ini untuk pemanggil CSS nya.

    <pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML disni (yang sudah diparsee) di sini ... </code></pre>

    <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>

    <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

    <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

    ambil salah satu kode tersebut sesuai kebutuhan dan tempelkan di HTML jangan di Compose

    Catatan:Parsee kan terlebih dahulu kode yang akan kamu masukan kedalam artikelmu supaya kodenya terlihat.
    Untuk memParsee kan HTML mu bisa klik disni

    Kusus Pengguna Templatenya mbak Arlina


    Buat kamu yang sudah menggunakan template mbak arlina cukup gunakan kode pemanggilnya aja. karena biasanya mbak arlina sudah memaksimalkan semua template hasil karyanya.

    jadi kamu tinggal gunakan kode pemanggil berikut ini sesuai keperluan.

    <pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>

    <pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

    <pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

    <pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

    <pre class='code code'><code>... kodenya disni (yang telah di parse) ...</code></pre>

    Nah selesai sudah artikel ini. semoga bermanfaat, yang tidak mengerti silakan komentar dibawah.
    thanks.