Catatan Sang Pemula: Trik-Blogger

Trik-Blogger

Tampilkan postingan dengan label Trik-Blogger. Tampilkan semua postingan

Tutorial Menambah Video di Artikel Blog

Memasukkan Video ke dalam Artikel Blog

Kali ini saya akan berbagi sedikit ilmu yang saya ketahui tentang bagaimana cara menambahkan video kedalam artikel blog kita dengan mudah. Dalam tutorial kali ini saya akan membagikan 2 cara untuk memasukkan video kedalam artikel blog kita, langsung saja kita mulai.

Cara Pertama

Untuk cara pertama kita akan memasukkan video dengan cara langsung menyematkan (embedded) video milik kita. untuk bisa menyematkan sebuah video kedalam artikel blog kita, sobat harus punya dulu video di Youtube (karena prakteknya menggunakan Youtube).

Tapi kalau males bisa juga sih langsung buka youtube, pilih video yang sobat inginkan untuk dimasukkan di blog sobat dan langsung ikuti langkahnya dibawah ini. kalau bisa sih harusnya upload karya sendiri biar lebih afdol.. (jangan kayak saya ya..hehehe)

Ok..sekarang kita mulai menyematkan video kedalam blog kita, ikuti langkah dibawah ini dengan seksama:

Pertama, Buka video milik kita terlebih dahulu, misal langsung kunjungi video berikut (TKW Lucu)
Kedua, Scroll ke bawah pilih bagikan / share -> sematkan/ embeded -> atur ukuran -> copy script i frame seperti berikut:

Ketiga, Sebelum anda mempastekan script tadi, silakan tambahkan dahulu perintah untuk membuat video menjadi di tengah. dengan menambahkan <center>...</center>, hasilnya seperti berikut:

<center><iframe width="420" height="315" src="https://www.youtube.com/embed/wqhIRIuJ0eI" frameborder="0" allowfullscreen></iframe></center>

Keempat, Paste-kan script i-frame tersebut kedalam artikel kita tapi ingat ngopy-nya ke dalam HTML jangan di compose. kalau anda melakukannya dengan benar maka hasilnya akan muncul seperti berikut:

Kalau belum berhasil dengan cara diatas, coba baca lagi dengan seksama mulai langkah yang pertama, hingga keempat. kalau masih belum bisa silakan coba cara kedua dibawah ini.

Cara Kedua

Untuk cara kedua, kita akan langsung meng-upload file videonya kedalam blog kita jadi file video tersebut akan tersimpan kedalam akun google kita, berikut cara selengkapnya:

Pertama, Pastikan kalau anda memasang sudah punya blog..(ini hal terpenting dan wajib ..hehe)

Kedua, Silakan buat entri baru, atau postingan baru, kemudian sobat lihat di menu toolbar sobat pilih icon file video yang seperti gambar film, seperti berikut.

Ketiga, akan muncul jendela baru, berikut beberapa pilihannya

-upload = untuk meng-upload langsung dari PC kita

-from youtube = kita bisa mencari video dari youtube langsung

-my youtube video = kita mengambil video dari video youtube yang kita miliki
-from your photo = kita mengambil file video dari folder photo anda.

Langkah Keempat, saya akan mengupload file video langsung dari PC saya, saya pilih pada menu upload lalu silakan cari file video yang akan di upload pada file manager anda, kemudian pilih open, kemudian file video anda akan langsung di upload. setelah upload berhasil, biasanya videonya akan langsung muncul, seperti dibawah ini

Kalau sobat mengikuti langkah-langkah mulai dari awal kemungkinan besar akan berhasil seperti saya, mungkin sekian tutorial sederhana yang bisa saya share ke kawan-kawan..semoga bermanfaat bagian kawan-kawan sekalian

#happyblogging

Cara Memasang Tombol Back to Top

Trik-Blogger

Nuha 19 Comments

Nuha

Tombol Back to Top Simple

Tombol Back to Top (Kembali ke Atas) bisa kita tempatkan di blog untuk memudahkan visitor agar bisa lebih mudah untuk kembali ke halaman teratas.

Jadi, kalau kita pasang tombol back to top ini visitor bisa langsung memilih tombol tersebut untuk pindah ke halaman paling atas sendiri.

Untuk script kali ini, saya mengikuti dari contohblognih.blogspot.com salah satu master blogger Indonesia yang menjadi langganan saya untuk belajar blogger.

Untuk model tombol back to top ini akan muncul saat visitor berada pada halaman website/ blogger kita. Berikut tutorialnya silakan ikuti dengan seksama.

Tutorial

Pertama, Buka blogger pilih Template lalu pilih Edit HTML.

Kedua, Pasang kode CSS berikut diatas </b:skin>

#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}

Ketiga, Pasang kode Javascript berikut diatas </head>

<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#MD-StoTop&quot;).scrollToTop();
});
</script>

Keempat, Pasang kode HTML berikut diatas </body>

<a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>

Kelima, Save Template. Ini hasil jika anda berhasil.

Sekarang tombol back to top sudah terpasang di blog anda, jika belum muncul silakan baca lagi tutorialnya secara seksama.

Jangan lupa juga baca trik-trik simple blogger lainnya DISINI

Script Code ANTI ADBLOCK

Trik-Blogger

Nuha Add Comment

Nuha

Mencegah Adblock Iklan Dengan Mudah

Adblock merupakan sebuah add-on / aplikasi tambahan yang ada di browser, yang mana fungsi dari aplikasi ini adalah untuk mencegah iklan yang ada di blog / website kawan-kawan sekalian.

Jadi, saat seseorang menambahkan adblock di browsernya maka iklan yang kita tampilkan akan disembunyikan oleh adblock / tidak ditampilkan.

Ini selain akan membuat tampilan blog / website kita terkadang menjadi tidak pas lagi, dan pastinya visitor tidak bisa melihat iklan yang kita iklankan diblog kita.

Padahal untuk iklan sendiri merupakan salah satu sumber daya untuk blogger dalam berkarya..hehe

Tutorial Pembuatan Anti Adblock

Script Code ini saya dapatkan dari Suhu Ardhinw Blog . berikut script code anti adblock nya:

Pertama, Login Blogger.

Kedua, Pilih Tata Letak / Lay Out

Ketiga, Pilih Tambahkan Widget / Add Widget

Keempat, Pilih HTML / Javascript, lalu anda masukkan script berikut.

<style>#h237{position:fixed !important;position:absolute;top:2px;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:-2px;width:102%;height:102%;background-color:#fff;opacity:.95;filter:alpha(opacity=95);display:block;padding:20% 0}#h237 *{text-align:center;margin:0 auto;display:block;filter:none;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h237 ~ *{display:none}</style><div id="h237">
Please Enable JavaScript!
Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">[ Enable JavaScript ]</a></div>
<script>window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h237"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJeYk2LRGiuKKZwjxvYTcfHDYDJ7RL_uFnjE9h46FwpPMdrD_Kj4qpzUFYWRN6UlAZfhGPvvtlHSTeGg46Gn1gxQpfvm4bq0e5aSgDg8RG0_UnthwbVegdrGku29igRSYzmW0ZAgKAHez/s1600/Disable+Adblock+-+Indonesian+2.png" height="350" width="699" alt="" /> <a href="JavaScript:window.location.reload()">[ Muat Ulang - Reload ]</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

Kelima, Jangan lupa untuk save script tersebut. dan selesai..

#Jika anda sudah melakukan langkah diatas dengan benar, maka saat anda mencegah iklan dengan menggunakan adblock maka akan muncul gambar seperti berikut:

Itulah script yang bisa kita gunakan untuk membuat anti adblock, silakan dicoba semoga bermanfaat

Jangan Lupa Juga untuk Mencoba Trik-trik Blogger Lainnya DISINI

Macam-macam Iklan untuk Blog / Website

Trik-Blogger

Nuha 4 Comments

Nuha

Berikut Jenis-jenis Iklan di Blog / Website

Artikel ini saya buat setelah saya jalan-jalan ke ladang ilmunya Maxmanroe dan ketemu beberapa artikel yang memang baru saja saya ketahui ada beberapa jenis-jenis iklan blog / website yang memiliki ketentuannya masing-masing.

Sebenarnya dulu saya sendiri kurang percaya dengan iklan-iklan yang ditampilkan diblog / website bisa memberikan uang bagi si empunya blog / website tersebut.

Namun, setelah banyak bukti yang telah saya baca-baca berbagai artikel akhirnya saya percaya dengan iklan tersebut. ya meskipun belum membuktikan sendiri karena kemarin nyoba daftar adsense ditolak mulu saya..hehe

Lalu Apa Saja Jenis-jenis Iklan yang Ada di Blog / Website?

Langsung aja ke intinya sekarang, dari sumber yang saya dapatkan terdapat 7 jenis iklan yang bisa kita manfaatkan untuk memberi pendapatan kedalam blog kita. berikut selengkapnya:

Iklan Pay Per Click (PPC)

mengklik iklan kita tampilkan.

Iklan Sponsor

Iklan Affiliate

iklan affiliate

link affiliasi

Iklan Cost Per Action (CPA)

iklan affiliate

CPA

ataupun

Iklan Pay Per Download (PPD)

download

Cara daftar adf.ly)

Iklan Cost Per Mille (CPM)

pageview

Iklan Pay Per Post (PPP)

blog / website

pengiklan

Jadi sekarang jenis iklan mana yang akan anda gunakan untuk menanamkan lahan penghasilan di blog / website anda setelah ini? hehe...

Itulah beberapa jenis iklan untuk blog / website yang ada, semoga bermanfaat bagi kawan-kawan sekalian, Untuk lebih lengkapnya silakan anda akses website penuh inspirasi karya om Maxmanroe DISINI, dan Jangan lupa juga baca selengkapnya berbagai info-info sederhana tentang Blogger DISINI

Cara Submit Blog ke Webmaster Google dan Bing

Trik-Blogger

Nuha Add Comment

Nuha

Submit Blog ke Google dan Bing

Setelah bingung mau posting apa malam ini akhirnya saya memutuskan untuk berbagi trik sederhana untuk submit URL blog ke Google dan juga Bing . hehe

Submit URL blog merupakan salah satu langkah wajib yang biasa saya lakukan setelah saya memposting artikel di blog kesayangan saya ini hehe.

Menurut berbagai sumber yang dulu pernah saya temui, bahwasannya men-submit URL blog ke google maupun bing bertujuan untuk memberitahukan kepada sistem dari vendor yang kita buat untuk submit tadi supaya melakukan peng-index-an ke url yang kita submit-kan.

Cara Submit di Google Webmaster

Pertama, kunjungi halaman submit google webmaster disini.

Kedua, isikan url dengan link url blog yang akan anda submit dan isi juga code captha dengan benar

Ketiga, pilih kirim permintaan / submit.

Selesai....

Cara Submit di Bing Webmaster

Pertama, kunjungi halaman submit bing webmaster disini

Kedua, isikan url dengan link url blog yang akan anda submit dan isi juga code captha dengan benar

Ketiga, pilih kirim permintaan / submit.

Selesai....

Caranya cukup mudah kan, cara ini sangat membantu para blogger agar blognya dapat terindex oleh google maupun di bing, jadi tidak ada salahnya kalau kawan-kawan yang mungkin belum mencobanya, silakan dicoba ya.. untuk submit url blognya pun tanpa dipungut biaya sama sekali alias free...

Jangan lupa juga baca trik-trik sederhana blogger yang mungki harus anda ketahui disini

Cara Membuat Syntax Highlighter

Trik-Blogger

Nuha Add Comment

Nuha

Simple Syntax Highlighter

Syntax Highlighter merupakan script yang dibuat untuk membuat sebuah kode script dalam sebuah blog ataupun website. Untuk website yang general mungin masih sebagian yang memanfaatkannya karena jarang dibutuhkan juga sih..hehe.

Tutorial untuk kali ini berawal dari perburuan saya untuk mencari script dari Syntax Highlighter yang memang mau saya gunakan diblog ini, dan akhirnya saya ketemu di web nya Madamvia yang paling cocok dan sesuai untuk blog saya.

Oleh karenanya, sekarang saya buat sebuah tutorial yang sama namun, dengan script yang sedikit saya modifikasi, .hehe semoga bermanfaat bagi kawan-kawan, berikut tutorialnya,

Tutorial Membuat Syntax Highlighter

Pertama, silakan buka akun blogger anda

Kedua, buka template, kemudian edit HTML

Ketiga, copy dan paste kan script dibawah ini dan letakkan tepat diatas kode </head>

<script src="http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js" type="text/javascript">

Keempat, langkah terakhir copy dan paste kan script di bawah ini dan letakkan tepat diatas ]]></b:skin>

/*syntax highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#ededf2;border:2px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#3b8800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#69a7d2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#e70905}
pre .tex .formula{background:#eee8d5}

Sekian tutorial untuk membuat syntax highlighter semoga bermanfaat, dan Jangan lupa juga untuk menglihat trik-trik blogger seru lainnya DISINI