Tampilkan posting dengan label Blog. Tampilkan semua posting
Tampilkan posting dengan label Blog. Tampilkan semua posting

Trik Dasar Membuat Blog Responsive

Trimuda Reog | 11.33 | 0 komentar
Sebenarnya apa sih yang dinamakan Blog yang Responsive itu? Bisa kita artikan blog responsive itu adalah blog yang mudah atau gampang merespon perubahan. perubahan dari apakah? ya tentunya perubahan dari browser dan jenis OS yang kita gunakan, blog itu harus bisa dan bisa menyesuaikan jika dibuka lewat apapun. Blog itu harus maksimal saat dibuka lewat HP, Blackbarry, Iphone, Gadget dll.
Kesimpulannya adalah Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya, Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart Phone. Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang 1680x1050, 1024x768, 768x1024, 320x420 dll.
Karna Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya maka Untuk membuat blog menjadi responsive cukup menambahkan kode @media-query pada CSS. Apa itu media query? 
CSS Media query memungkinkan Anda untuk menargetkan aturan CSS berdasarkan - misalnya - ukuran layar, perangkat-orientasi atau display-density. Ini berarti Anda dapat menggunakan CSS Media Query untuk men-tweak CSS untuk iPad, printer atau membuat situs responsif. Lengkapnya tentang CSS Media query selain pada topik ini (template responsif) dapat dibaca disana.

Jadi, untuk membuat blog tampil responsif, kita akan membuat CSS Media query terlebih dahulu lalu menyisipkannya kedalam template.
"ini sulit ya?"
Oh no!, ini sangat mudah man, santai saja anda akan mengerti jika anda belajar dan menyelesaikan bacaan ini.
Beruntungnya anda tidak perlu mempelajari semua tentang media query, tapi cukup memahami media query standar berbagai perangkat. Berikut silahkan dipahami:

1. Pedoman Media Queries diberbagai perangkat


/* Smartphones (portrait dan landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* gaya Css responsive */ }


/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) { /* gaya Css responsive anda */ }


/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) { /* gaya Css responsive anda */ }


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* gaya Css responsive anda */ }


/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* gaya Css responsive anda */ }


/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* gaya Css responsive anda */ }


/* Media untuk layar komputer atau laptop ----------- */

@media only screen and (min-width : 1224px) { /* gaya Css responsive anda disini */ }


/* layar besar ----------- */

@media only screen and (min-width : 1824px) { /* gaya Css responsive anda */ }


/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* gaya Css responsive anda */ }

Catatan: Media quuery diatas boleh digunakan semua atau beberapa saja juga boleh tergantung kebutuhan setia anda. Yang warna merah adalah komentar / penjelasan tentang pada perangkat berukuran apa saja dia akan bekerja (tidak ditulis juga tidak masalah). Sedangkan yang berwarna hitam tebal " gaya Css responsive anda" adalah kode style / css responsive yang akan menentukan tampilannya.
2. Komponen - Struktur Template Blog

Seperti saya katakan diatas, anda setidaknya mengetahui dasar-dasar pada  HTML blogger karna usaha yang akan kita lakukan adalah berenang kedalam lautan kode-kode HTML pada template blogger...dan tentu saja, ulasan mengenai ini tidak akan bisa diceritakan pada halaman ini, disarankan untuk kembali membuka buku atau rajin bertanya kepada Om google, jika tidak? anda akan tenggelam dan terjatuh tak bisa bangkit lagi *cakra khan :D. Misalnya nih, anda menemukan bagian <div id="keongracun">blalalala teks dan blablalalallaa </div> maka itu adalah komponen keongracun.

Kita ambil contoh Pada template ini, strukturnya dibuat dengan komponen dasar:
header
botmenu
Pengantar
Content
right
footer

3.Membuat Css Media Query responsive pada Template

Setelah mengetahui komponen dalam struktur template diblogger anda, mari memasaknya agar siap hidang :D, maksud saya membuat @media query nya gitu loh :)...

Pada contoh ini, Kita akan mengatur tampilan blog pada perangkat berlayar seksi atau kecil dengan lebar   320px atau lebih kecil. Langsung kita pasangkan sesuai dengan contoh komponen dan struktur template diatas, maka css query agar template menjadi responsive bisa jadi sebagai berikut:

/* Inilah gaya blog responsive dihape anda berukuran kecil ----------- */

@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:100%} }
atau bisa juga
@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:320px} }
Width pada style diatas mengatur lebarnya komponen, bisa diedit sesuai keinginan. Ini hanya contoh dasar saja, anda masih bisa membuatnya lebih oke, menambahkan style yang lainnya pada komponen tertentu, misalnya kita akan menyembunyikan komponen #botmenu, maka tambahkan saja stylenya menjadi:
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
Artinya : display:none menjelaskan bahwa komponen bootmenu tidak ditampilkan pada perangkat dengan lebar 320px kebawah.
Ingin memaksimalkan pengetahuan anda, saya rekomendasikan membuka pelajaran dasar css di www.w3schools.com/css/‎

4. Langkah terakhir adalah Menyisipkan Css Responsive Kedalam Template

Langkah Terakhir Modifikasi Template blogger Menjadi Rensponsive adalah menyisipkan kode css responsive yang telah kita buat tadi (Media Query) kedalam Template blogger anda.

Dimanakah Media Query diletakkan?

Seperti biasa, masuk ke edit HTML template anda.

Letakkan didalam tempat kode style ...saya tidak menganjurkan anda menggunakan CTRL+F, tapi cari dan temukan manuali, untuk ketepatan dan kerapian mengingat blogger tampilan baru sekarang membungkus beberapa komponen.

Biasanya style dalam temlapte blogger jika terbungkus akan seperti ini <style>...</style>. Cari dan  Temukan,  biasanya tidak jauh, paling beberapa baris dibawah header, dan ingat SAYA TIDAK MENGANJURKAN ANDA UNTUK menggunakan CTRL+F karna akan ada banyak, jadi usahakan
anda temukan secara manual.

Setelah menemukan <style>...</style> klik (yang diklik adalah titik-titik ...) antara pembuka dan penutup style tersebut. Jika itu benar maka style akan membuka.

letakkan Media Query yang telah kita siapkan tadi tepat dibagian paling bawah style terbuka tersebut, sebelum penutup </style>.
Contoh peletakkan:
<style>
#cssblalalalalala{..}
#lain-lain{...}
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
</style>

 Nah sekian tutorial cara membuat blog Responsive dengan mudah.... semoga bermanfaat.

Search: tutorial responsive, cara agar responsive, trik modifikasi, trik blog responsive, cara mudah, supaya responsive

Cara Buat Background Blog Ganti Saat Di Refresh

Trimuda Reog | 22.47 | 0 komentar
Puisi Dan Pendidikan, Background Blog Berubah Saat Refresh, anda ngerti kan maksud saya?, Background pada blog anda akan berubah warna kalau di refresh, gitu loh,,hehe.. Caranya sangat gampang, anda tidak perlu mengedit HTML, anda cukup meng-copy kode script dibawah ini ke elemen laman/Add Gadget pada blog anda.


<script type='text/javascript'> //CDATA[ /* JavaScript Kit (http://trimudareog.blogspot.com/)*/ //Created Ageboy: var bgcolorlist=new Array("#FFFFFF", "#B30000", "#EEFF00", "#11FF00", "#FF8A14", "#0008FF", "#4AFFF3", "#000") document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] //]]>
</script>

Silahkan anda ganti Tulisan URL yang berwarna merah dengan alamat blog anda. Setelah itu silahkan di simpan gedget anda, dan lihat hasilnya. Selamat mencoba semoga berhasil.





NB: Silahkan gonta ganti warna sesuai keinginan ente..........



Sitemap Blog Terbaru Dan Keren 2013

Trimuda Reog | 02.06 | 1komentar
Cara buat sitemap blog paling keren dan terbaru silahkan pelajari disini!
Sitemap terbaru keren ni sangat mudah dalam pembuatanya sbb:
1. Masuk Blogger
2. Klik Entry Baru/ Posting baru
3. Pilih mode HTML
4. Copas Kode Dibawah ini
5. Ganti kode warna kuning dengan alamat sobat serta modif warna yg sesuai => kasih judul dan terbitkan!

Hasilnya seperti dibawah ini
Kode HTMLnya
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<style type="text/css"> /*Outer Border ------------------*/ #toc{width:99%;margin:5px auto;border:1px solid #fff000; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} /*Label Color and Background ------------------*/ .labl{color:#000f;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#000f),color-stop(1,#C2EAFE)); border:1px solid #fff000;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#000C 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#D00),color-stop(1,#D0000));} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style>
<div id="toc"><script src="http://rohman.googlecode.com/files/petasitus4.js" type="text/javascript"> </script>
<script src="http://trimudareog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div>
</div>



Cara Tingkatkan Traffic Blog Ke-Sekian

Trimuda Reog | 09.17 | 0 komentar
Ada beberapa Cara Jitu Tingkatkan Traffic Blog  secara gratis salah satunya jadilah member di Fweb Traffic,  menurut saya sih bagus , paling tidak ini dilihat dari sistem yang diterapkannya karena setiap member baru terpaksa harus berkunjung ke blog para member lama untuk mengambil kode yang diberikan. Sehingga designernya berani mempromosikan cara ini dengan 1 Milion Visitors Free and Real seperti tampak pada banner dibawah ini
Saya angkat 2 jempol untuk perancangnya..  Terbukti cara ini sekarang sedang banyak digandrungi.. dan tak ada salahnya untuk dicoba.. mumpung gratis,  kalau dilihat peminatnya yang begitu banyak siapa tahu adminnya berubah pikiran jadi berbayar. .. Yoo ..  kita sama-sama mencobanya :



Inilah Cara Jitu Tingkatkan Traffic Blog ,   langkahnya :
  1. Silahkan click situsnya Get 1 Million Hits Visitors, FREE!
  2. Scroll terus kebawah sampai pada format Sign Up Now For Free , seperti ini :Trafficlt
  3. Klik link yang ada disana secara berurutan dari 1 s/d 6 untuk mendapatkan code ads nya , kemudian tunggu sebentar sampai kodenya muncul.
  4. Jika kodenya sudah muncul, misalnya AD CODE #1: 61484 , nah kode yg 61484 di copy dan simpan di format berikutnya seperti form dibawah ini, awas harus sesuai jika kode untuk no.1 maka simpan juga di kotak code for ad 1,  begitu seterusnya . Traffic2
  5. Sebelum diteruskan mumpung  masih berada diblog pemberi kode tersebut. ada baiknya kita berkomentar disana sebagai info bahwa kita sudah ikutan sistem ini.
  6. Setelah semua kode dimasukan , baru  mengisi data yang diminta, seperti Nama, Email,  Text untuk Iklan, Website Url dan password.  Setelah itu baru klik SUBMIT ..
  7. Buka email untuk verifikasi dan klik link yang diberikan.
  8. Nanti  akan ada kata2 Congratulations!  kemudian klik here pada You can login to your new members area here.
  9. Buka Email lagi untuk mengambil user id , password dan link url yang bisa digunakan untuk promosi dan login ke member area  ( simpan user id dan passwordnya , karena nanti mungkin kita gunakan lagi)
  10. Login ke member area lihat linknya sudah ada disana .. disini juga bisa merubah teks iklan , melihat down line serta mengambil kode marketing tools seperti code banner dan text link
  11. Selanjutnya terserah anda… tinggal promosi saja , seperti pasang banner atau text link , karena semakin banyak yang daftar melalui link kita tentu semakin banyak pula visitornya kan gitu …
  12. Akan lebih baik lagi jika anda juga membuat postingan tentang ini atau copas postingan ini tinggal ganti linknya saja
  13. Selain cara ini bisa juga melalui Tukar Link HEBAT Banget.
  14. Selamat mencoba..  Cara Jitu Meningkatkan Traffic Blog . Semoga ada manfaatnya .. Amin
Silahkan cari tahu banyak hal tentang mendatangkan traffic pengunjung secara instan mamupun manual di internet, majalah, buku maupun di perpustakaan terdekat dari tempat anda... wkwkwk

,

Cara Buat Like Page Blog FB Tampilan Timer

Trimuda Reog | 21.59 | 6komentar
fans page timer
Selamat malam sobat blogger. Kali ini saya akan membahas tentang cara membuat like fan page pada blog dengan timer. Nah, maksudnya tampilan ini menggunakan timer atau wakktu sesuai yang kita inginkan. Misal, 15 detik, 20 detik, atau 30 detik dan seterusnya. Tinggal kita seting semau kita dan akan menghilang dengan sendirinya tanpa mengganggu pemandangan. he'eeee! gak usah panjang lebar langsung aja kita ikuti langkahnya sobat.

1. Langsung masuk blogger >template >edit HTML
2. Cari kode </body> kemudian letakkan script dibawah ini tepat diatasnya.
<script type='text/javascript'>
    //<![CDATA[
        KNFBFansPRO='Puisi dan Pendidikan'
    //]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://likebox-nurrohman.googlecode.com/files/likebox.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/pages/CintaDanSeni/143954359061554',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

3. Simpan template sobat
4. Eits belum selesai lihat keterangan dibawah!

Keterangan :
  • Ganti ini Puisi dan Pendidikan dengan nama \halaman/Fanspage Facebook sobat. 
  • Timer diset untuk 30 detik, untuk mengubahnya cukup mengedit timeout: 30 
  • Widget ini muncul segera setelah ada visitor. Jika sobat ingin untuk muncul setelah satu menit atau lebih kemudian edit wait: 0
  • Ganti http://www.facebook.com/pages/CintaDanSeni/143954359061554 dengan alamat halaman/Fanspage sobat. 

Ada juga cara membuat komentar fb dengan mudah dibawah postingan silahkan dibaca.
Demikian cara membuat like fans page blog dengan timer ini semoga bermanfaat.

SEO Smart Auto Link

Trimuda Reog | 20.54 | 12komentar
Puisi dan pendidikan ++++ kali ini akan membahas seputar SEO smar link. pernah mendengar gak sob? plugin yang untuk wordpress itu? Plugin itu fungsinya untuk mengubah setiap kata yang kita tentukan menjadi sebuah link.  Nah, kalau sudah menjadi link, apa fungsinya? tentu sobat blogger lebih tahu, soalnya saya akan posting tentang puisi atau pendidikan lagi males lebay sob. Daripada nganggur mending share yang bermanfaat buat sahabat blogger? iya gak?. Ok, langsung kembali ke topik. kalu dulu hanya bisa digunakan pada WP, sekarang sudah bisa digunakan pada blogspot sob.


Bagaimana cara kerja script ini?
Script ini akan membaca setiap kata pada seluruh postingan sobat. Misalnya, sobat memasukkan kata "puisi" pada script ini maka semua posting yang mengandung kata "puisi" akan di direct ke alamat yang telah sobat tentukan.

Apakah script autolink ini melanggar google guidelines?
Ya, asalkan sobat tidak pasang lebih dari satu kata tidak masalah. alias sewajarnya saja.

Untuk cara pemasangannya lihat dibawah :

1. Login akun blogger sobat
2. Pastikan masuk edit HTML
3. Cari kode </body>, dan letakkan script dibawah ini tepat diatas </body>
4.
<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;puisi&quot;, &quot;http://trimudareog.blogspot.com/&quot;);
f.startScript();
</script></b:if>
Keterangan :

* Ganti akhir script "puisi" dengan kata kunci sobat
* Ganti url  puisi dan pendidikan dengan url sobat.

Selamat berkarya sobat....

Sifat Buruk Para Blogger

Trimuda Reog | 14.03 | 4komentar

Blogger itu ternyata banyak juga sifat buruknya (Indonesia) alias sifat buruk blogger. Kalau yang belum punya blog mending gak usah nge-blog deh daripada kecanduan (kaya narkoba aja). Pengalaman lihat blogger2 yang lainnya pun juga seperti itu. Kalau yang merasa blogger coba intropeksi diri deh,,,, dengan poin-poin dibawah ini! Nih pengalaman saya, tapi tidak semua bener.

Inilah sifat yang tidak perlu dicontoh bagi para blogger:

     1.      Suka mencontek/ duplikat. (copy paste merupakan hal buruk yang dilakukan blogger) khusus yang ini   
              ada 3 postingan saya yang copas dengan sedikit edit.
     2.      Suka menghabiskan waktu. (yang seharusnya malam cepat istirahat malah melayang2 di dunia maya...
              apa sih yang dicari??) seharusnya bisa membagi waktu dengan kesehatan.
     3.      Terlalu berharap (ibarat menunggu anak kambing yang belum tentu lahir dengan selamat (contohnya 
               iklan, PPC, adsense, dll))
     4.      Selalu tidak punya rasa puas (tiap lihat blog orang yang lebih menarik, lansung pengen (kaya saya))
     5.      Tidak tekun (tidak bisa selalu fokus pada tulisannya sendiri)
     6.      Lupa waktu (tidak terasa kapan waktu istirahat, maunya blogging melulu)
     7.      Lupa orang lain (tidak peduli ortu, pacar, temen, kalau lagi nge-blog gak ada yang boleh ganggu. Sms
              gak dbls, telepon gak diangkat! Apa sih maunya?)
     8.      Lupa belajar (bagi para pelajar, dia akan melupakan buku mata pelajarannya. Yang dia pelajari selalu
              CSS, HTML, javascript, dll. Ga percaya? buktikan)
     9.      Menghabiskan kopi, gula, dll (seperti saya jika lagi nge-blog gak habis-habisnya minum kopi cari jajan
              yang banyak, siapkan modem dan . . . . go)
     10.    Silahkan ditambahi sendiri . . . . wkwkwkwkwk

Sekian, salam blogger!

Dunia Blogger dan Blogging (istilah)

Trimuda Reog | 12.45 | 0 komentar
Istilah-istilah dunia blogging

Berikut merupakan istilah yang perlu diketahui oleh para blogger (terutama yang masih newbie)! Istilah-istilah blog dibawah ini pasti sudah tidak asing lagi ditelinga kita, apalagi yang sudah master. Untuk blogger seperti saya masih wajib mengetahui. Nah istilah-istilah tersebut saya rangkum menjadi dibawah ini yang saya rangkai berdasarkan kategori:


+++  Blog
Blog : istilah yang pertama kali digunakan oleh Jorn Barger untuk menyebut kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website lain yang mereka anggap menarik disertai dengan komentar-komentar.
Weblog : istilah lain dari blog.
Blogging : kegiatan-kegiatan yang dilakukan dalam dunia blog.
Blogger : seseorang yang melakukan blogging.
arti lainnya: sebuah layanan blog dari google.
Blogosphere : komunitas dalam blogging.
Posting : kegiatan untuk mengirimkan artikel ke dalam blog.


+++  Bentuk-Bentuk Blogging
Photoblogging
: sebuah blog yang difokuskan pada dunia Photografi dan gambar-gambar.
Podcasting : metode untuk mendistribusikan file multimedia (video/audio) secara online melalui feeds
Autocasting : bentuk podcasting secara otomatis.
Blogcasting : penggabungan blog dan postcas dalam sebuah website.
Vlog / Vlogging : jenis blogging yang lebih senang menggunakan video daripada text.
Audioblog / Audioblogging : jenis blogging yang lebih senang menggunakan audio/musik daripada text.
Moblogs / Moblogging : kegiatan blogging dengan menggunakan HP (handphone).

+++  Komponen dan Fungsi-Fungsi Blog
Index page : halaman depan dari blog.
Header : bagian paling atas blog.
Footer :bagian paling bawah blog.
Sidebar : kolom-kolom yang berada di sisi blog.
Link : proses untuk menghubungkan ke suatu postingan/kontent atau ke web/blog yang lain.
Archive : sekumpulan/arsip dari semua postingan. Bisa dikelompokkan dalam bulan, tahun dsb.
Categories : sekumpulan/sekelompok spesifik dari beberapa artikel.
Commnets : Kompentar-komentar dari para pembaca blog.
Captcha : kependekan dari "Completely Automated Public Turing test to tell Computers and Humans Apart: yaitu sebuah gambar yang berisi kata atau huruf yang harus diketikkan untuk verifikasi : Berguna untuk menangkal spam.
Ping (Packet Internet Grouper) : berfungsi untuk memberitahu layanan-layanan yang berhubungan dengan blog (seperti tchnocarty dkk) bahwa kita baru menambah atau mengupdate konten blog kita.
Trackback : berfungsi untuk memberitahu bahwa kita me-link ke postingan atau kontent blog orang lain.
Blogroll : sekumpulan link yang dijukan ke blog yang lain.
Template : desain dasar blog.
Plugin : sebuah file yang berfungsi untuk menambah feature2 blog.
Dashboard : sebuah tampilan yang berisi kontrol-kontrol, tool, setting dll saat pertama kali kita login ke blog account.

+++ Penyedia Layanan Blog
Blogger/Blogspot : Layanan blog gratis dari google.
Wordpress : Salah satu layanan blog gratis yang lain, memiliki feature yang lebih lengkap daripada blogger.com tapi kita tidak bisa mengotak-atik script HTML, kalo mau mengedit harus bayar dulu, jadi buat yang gratisan nggak bisa ngedit.
LiveJournal : Tolls blogging gratis dari SixApart
TypePad : Tolls blogging tidak gratis (bayar) dari SixApart.

+++  Bloging Habits
Metablogging : menulis artikel tentang blogging.
Blogstipation : blogger yang sedang malas ngeblog, karena sedang bad mood atau nggak pingin ngeblog.
Blogopotamus : Postingan blog yang sangat panjang.
Bleg : adalah ketika seseorang memohon pada sebuah blog.
Blego : Blog+Ego, ukuran kekayaan blogger.
Blog Hopping : Berpindah-pindah dari satu blog ke blog yang lain.
Blogroach : Komentator yang tidak setuju dengan postingan atau kontent suatu blog, biasanya diungkapkan dengan kata-kata yang kasar.
Blogoholic : Pecandu Blog.
Blogorific / Blogtastic : Suatu hal yang dahsyat dari perkataan blogger.
Blogsit : Pemeliharaan blog ketika sang pemilik utama blog sedang bepergian atau sedang liburan.
Blogvertising/Blogvert : Iklan-iklan yang ada di blog.
Blurker : Pembaca blog yang hanya melihat-lihat saja, tidak memberikan komentar atau apapun.
Blogathon : mengaupdate blog setiap 30 menit dan selama 24 jam non-stop.
Blogiversary : Ulang tahun Blog.
Blog Carnival : Link ke artikel yang lain yang disamarkan dengan topik yang spesifik.
Multiblog : menjalankan banyak blog.
Blog Tipping : pujian atau ucapan selamat setiap tanggal 1 setiap bulannya.
Blogger Bash : Pesta para blogger.
Reciprocal Links / Link Exchange : Tukar link atau Link Love, saling me-link antara blog yang satu dengan blog yang lain.
Linkbaiting : menulis artikel yang bagus supaya dilink oleh blog yang lain.
Hitnotice : me-refresh browser berulang-ulang untuk melihat hit-counter atau melihat apakah ada komentar yang baru atau tidak.
Blogstorm / Blogswarm : Kegiatan komunitas blogger yang sangat besar.
Blogsnop : menolak respon dari komentator yang bukan temannya.
Doppelblogger : blogger yang menjiplak konten dari blog orang lain.
Blogophobia takut terhadap blog atau blogging.
Blogeerel : opini yang sama yang dikirim berulang-ulang pada sebuah blog.

+++  Tipe-Tipe Blogger
Problogger : Blogger yang sudah profesional.
Blogebrity : Blogger yang sangat terkenal, kayak selebriti gitu.
Blogerati : Komunitas Blogger yang sudah pinter-pinter.
Blognoscenti : Blogger yang memiliki kemampuan yang spesial.
Commnetariat : Komunitas para komentator (lho emangnya ada? ).
Dooced : kehilangan pekerjaan gara-gara blognya.
Blogther : teman/saudara/keluarga blogger.
Blogstar : Blogger yang mengoperasikan blog yang sangat populer.

+++  Web/Blog Feeds
Web Feed : format data yang disediakan untuk user agar bisa berlangganan pada postingan sebuah blog.
RSS : adalah sebuah file berformat XML untuk sindikas. RSS mengijinkan kita untuk berlangganan kepada web/blog yang menyediakan umpan (feed) RSS. RSS kependekan dari Really Simple Syndication (RSS 2.0), Rich Site Summary (RSS 0.91, RSS 1.0), RDF Site Summary (RSS 0.9 and 1.0).
XML : (eXtensible Markup Language).
RDF : (Resource Description Framework)
Atom : hampir sama dengan web feed.
Photofeed : web feed dengan lampiran gambar.

Nah, mungkin itu yang bisa saya simpulkan dan sampaikan untuk sobat blogger semua . . . semoga sedikit memberikan tambahan wawasan bagi kita semua. Amiinnn..


Sumber: Book blogger, internet, majalah, perpustakaan UMP, 1001 blogging.

Cara Mengetahui Kedok Spammer

Trimuda Reog | 20.58 | 2komentar
Ok sobat . . . kali ini saya akan share sedikit ilmu untuk kita semua! (untuk yang sudah aster tidak usah ketawa)!!! Nah sering banget khan kita jumpai link yang dipependek menggunakan URL shortener? Misal: bit.ly, adf.ly, is.gd, soc.li, t.co dll. Bahkan facebook, google, dan youtube juga memiliki pemendek URL. Banyak ragam dari tujuan perpendek link tersebut, salah satunya agar mudah di ingat, mudah dibagikan di jejaring social, cari uang, dapat dijadikan ulah para spamer, dll. Mulai dari tujuam yamg negative sampai tujuan yang positif sering banget kita jumpai. Ulah jebakan juga sering terjadi untuk menuju link yang sebenarnya tidak kita ingin kunjungi. Untuk mengatasi hal ini ada sebuah cara yang menurut saya lumayan efektif yang ditawarkan oleh LinkPeelr. Cukup kita masukkan link yang sudah dipendekkan dengan URL shortener, kemudian akan muncul link asli dari URL tersebut, akan muncul kedok dari link yang telah disembunyikan dan kita akan mengetahui arah dari link tersebut.

http://linkpeelr.appspot.com
Khusus untuk pengguna browser google chrome, LinkPeelr juga menyediakan extension yang dapat kita gunakan untuk melihat link asli dari pemendek URL cukup dengan cara mengarahkan kursor.
https://chrome.google.com/extensions/detail/ahhcmjnfhbpgagklnjhlcabnbcdgipje?hl=en
dgipje?hl=en

Demikian tips yang saya rekomendasikan kali ini, semoga bermanfaat! Amiinn….

Cara/ Tips Agar Postingan/ Blog Cepat Deteksi Google

Trimuda Reog | 12.04 | 3komentar
Sangat penting sebuah blog memiliki pengunjung yang banyak karena akan meningkatkan ranking blog kita. akan tetapi tanpa terindeks mesin pencari/ search engine seperti google, yahoo, bing dkk. apa mungkin kita mendapatkan banyak pengunjung? tentu tidak. nah, disini saya akan memberikan beberapa tips agar blog kita cepat muncul di search engine google atau yang lain sampai banyak pengunjung.
  • Langkah awal ya sebelum kita memasukkan URL blog kita(ngedaftarin ke Google) kita harus sudah punya blog sendiri dan paling penting disini yaitu pemilihan Domain dari judul Blog anda(isi yang akan digunakan harus berkaitan ama judul Blog anda) dan paling penting carilah domain yang begitu sangat menarik perhatian dan paling sering dicari oleh pengguna/orang yang butuh informasi..                                                                               
  • Isi dari Blog kita harus tidak jauh dari topik yang sudah ditentukan tentunya berkaitan dengan Domain dari blog anda,maksud nya saat anda mengupdate content pada blog anda,judul yang anda gunakan itu harus benar-benar sangat baik dalam arti kata itu sangadt dicari orang,.contoh : cara buat blog..kata ini sangat simple,.,tp anda bisa ubah versi nya,.,baik itu agar blog terlihat bagus,atau cara memilih judul blog yang baik..dll..
jadi judul itu sangat penting,.,dan anda harus bisa memikirkan hal-hal yang orang lain belum punya namun sangat diminati oleh pengguna yang banyak..                                                                 
  • Kalo ingin membuat blog terlihat indah gunakanlah aplikasi-aplikasi atau widget yang dibutuhkan saja.mkarna pada dasar nya pengguna hanya ingin mencari informasi bukan untuk melihat indah atau tidak nya blog anda..contoh kecil nya,.,
membuat jam pada blog anda..memang sepintas blog akan terlihat indah.,.namun apabila blog kita berisikan tentang berita atau informasi yang penting penggunaan aplikasi jam disini sepertinya kurang efektif..namun apabila blog anda itu bersifat personal ya kenapa nggak..
sekedar masukan saja,.,bila itu perlu ya silahkan gunakan..                                                        
  • Blog anda siap untuk di daftarkan dalam mesin pencari Google atau mesin pencari lain nya..
nah ikuti step by step..
  1. Lakukan update isi dari blog anda paling tidak dalam sehari itu ada 1 informasi secara rutin,.,
baik berupa artikel atau apa pun yang berkaitan dengan blog anda..
  1. dan ini yang terakhir.,
lakukan sesering mungkin blogwalking dan sisipkan url anda setiap kali anda berkunjung ke blog lain,.,
Semoga bermanfaat . eh jangan lupa habis posting selalu ping ke google biyar langsung update.
Saat aku posting masalah wd jss belum ada 5 menit sudah ke detek. Lihat screenshotnya.



Tips Trik SEO (Verify Your Alexa Site ID)

Trimuda Reog | 15.49 | 0 komentar
Kali ini membahas » SEO » Cara Verifikasi Blog ke Alexa, terbaik ~ Penting dan tidaknya mem-verifikasi blog ke Alexa adalah tergantung tujuan blogging kita, bagi sebagian blogger money online, submit blog ke Alexa adalah suatu keharusan. Karena pada kenyataannya Alexa masih menjadi tolok ukur popularitas sebuah blog atau website di jagat maya / dunia blog. Terlepas dari itu semua, tidak ada salahnya bagi kita para blogger dan webmaster untuk mendaftarkan blog ge Alexa, toh tidak akan membuat kita rugi walaupun secara pribadi tidak terlalu menganggap penting untuk blog yang berbasis non profit. Itu semua tergantung pada pilihan masing-masing, karena pada dasarnya kita akan menentukan sendiri ke arah mana jalan yang akan kita tempuh di dunia bloging / online. Kalau anda tertarik untuk memverifikasi blog ke Alexa, silahkan ikuti langkahnya:
Selesailah kita dalam mem-verifikasi blog ke Alexa dengan cara memasang meta tag Alexa verify. Selamat mencoba dan semoga bermanfaat sobat...
,

Cara Membuat Efek Pada Gambar Posting

Trimuda Reog | 13.11 | 1komentar
Sorry sob lagi males bertele2. langsung aja lihat live demonya disini. silahkan arahkan moouse pada gambar posting akan tahu efeknya.

tutorialnya ada dibawah ini.

  1. Dekatkan kopi dan roko sobat ( setidaknya itu obat penenang )
  2. Login ke Blogger Sobat
  3. Pilih Template lalu Pilih Edit HTML tekan Lanjutkan
  4. Kalu takut error silahkan di backup dulu template sobat
  5. Kemudian Centang Expand Template Widget
  6. Terus Cari Kode ]]></b:skin> biar mudah tekan CTRL+F
  7. Tambahkan Kode Berilut Tepat diatsa kode ]]></b:skin> atau bisa di urutkan di .post img{ 

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}

Selamat mencoba sobat semoga berhasill. . . .

Cara Buat Efek Pada Link

Trimuda Reog | 14.32 | 2komentar
Ok kali ini akan mencoba membahas style pada link dengan sesuatu yang berbeda sob, sedikit memodifikasi pada CSS3 dan kita akan mendapatkan hasil yang lumayan bagus. Sebenarnya masih banyak lagi jenis pengaturan CSS ini, namun tidak ada salahnya kita mencoba hal yang baru. Ok langsung aja kita praktekkan.

Kita buat Mark-up HTML terlebih dahulu :


<ul class="shift">
<li><a href="#">Arahkan Mouse Kesini</a></li>
<li><a href="#">Arahkan Mouse </a></li>
</ul>


Sesudah itu mari kita buat CSS-nya :


.shift {
list-style: none;
display: inline-block;
}

.shift li {
background: orangered;
width: 0%;
display: block;
-webkit-transition: all 0.125s ease-in-out;
-moz-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}

.shift li:hover {
width: 100%;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}

.shift li a {
text-transform: uppercase;
display: block;
color: #000;
font-size: 1em;
margin: 0.5em;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
}


Berikut hasilnya yang sudah jadi, coba sorot tulisan “Arahkan Mouse Kesini” lalu lihat efeknya :


Silahkan buat kreasi yang lain yang akan mengembangkan CSS ini.
Kerenkan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. siapa yang mau coba ?


Tags : Trimudareog, Nurrohman, Ngebel, Cah Gunung, Artikel, Coretanku.



Membuat Efek Tulisan Berjalan

Trimuda Reog | 23.56 | 0 komentar
Ok, Tulisan berjalan sering juga disebut marque, n itu sama saja alias podo sob. kadang kita bingung dengan istilah2 yang berbeda. nah untuk membuat tulisan yang ber-efek2 kaya gitu saya coba kasih script sederhana untuk membuatnya. ok langsung aja kita mulai :
1. Tentukan sebelah mana yang akan dikasih tulisan tersebut
2. Login ke blogger anda
3. Klik Rancangan/Layout
4. Pilih Tambah Gadget. lalu pilih Tambahkan HTML/Javascript
5. Masukan dengan kode berikut

Tulisan berjalan ke kanan atau ke kiri

Tulisan berjalan ke kiri

(<marquee behavior="scroll" direction="left">Tulisan berjalan ke kiri</marquee><br />)

Tulisan berjalan ke atas


Tulisan berjalan ke atas
(<marquee height="75" behavior="scroll" direction="up">Tulisan berjalan ke atas</marquee>)

Tulisan berjalan yang jika disentuh cursor berhenti

Tulisan berjalan yang jika disentuh cursor berhenti

(<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan berjalan yang jika disentuh cursor berhenti</marquee>)

Tulisan yang bergerak lambat

Tulisan yang bergerak lambat

(<marquee behavior="scroll" scrolldelay=32 scrollamount=1>Tulisan yang bergerak lambat</marquee>)


Keterangan Atribut :
~  Tulisan Berwarna Merah : adalah arah bergerak tulisan marquee, seperti "left" ,  "up" Jika ingin mengganti arahnya gunakan bahasa inggris. contoh, kanan="right" dsb.
~  Tulisan Berwarna Biru : adalah tulisan yang ingin ditampilkan ditampilkan.

Masih banyak lagi silahkan tanya mbah google. ok.... hanya sebatas petunjuk.

Cara Membuat Label Animasi

Trimuda Reog | 14.53 | 3komentar
Cara Membuat Label Animasi >>>buat blog sobat lebih menarik dengan membuat label bergoyang, Sekarang kita akan menambahkan membuat label ala Ayu Ting-ting yang suka bergoyang. Apa efeknya? Jadi, ketika sobat meletakkan kursor sobat pada salah satu label, label akan bergerak ke kanan. . Terlihat benar bagus? Sekarang, jika sobat ingin mencoba Label animasi dengan jQuery, cukup ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger sobat
2. Pergi ke Desain -> Edit HTML
3. Copy kode di bawah, dan paste di atas </head>
__________________________________________________
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$undefineddocument).readyundefinedfunctionundefined) {
$undefined'a.linknudge, .Label ul li a').hoverundefinedfunctionundefined) {
$undefinedthis).animateundefined{
paddingLeft: '20px'
}, dur);
}, functionundefined) {
$undefinedthis).animateundefined{
paddingLeft: 0
}, dur);
});
});</script>
__________________________________________________
 4. clik save template.. 
Cara Membuat Label Animasi Mudah n Simpel kan?? Semoga bermanfaat sobat. . . .

Cara Membuat Daftar Isi Keren

Trimuda Reog | 15.20 | 0 komentar
daftar isi keren terbaru

Cara Membuat Daftar Isi Keren tidaklah sulit sob, qm bisa ganti background sesuai keinginan atau menyesuaikan warna template sobat. Nich seperti punyaku disamping kanan juga bisa n satu lagi, pastinya dapa dikelompokkan menurut tanggal publikasi, judul, ataupun menurut kategori.

Ok langsung aja menuju TKP :

1.     ==>  Masuk Dasboard sobat
2.     ==>  Pilih Design or Rancangan  
          ==>  Pilih Add Gadget kemudian HTML/Java Script
3.     ==>  Masukkan kode berikut didalamya n bisa kasih judul sesuai selera
 _________________________________________________________
 
<div style="-moz-border-radius: 7px 7px 7px 7px; background-color: transparent; border: 0px solid rgb(33, 33, 33); height: 400px; margin: 0px; overflow: auto; padding: 10px; text-align: left; width: auto;" >
    <div id="cl_option">
    Tunggu Broo. . .  </div>
    <div id="cl_content_list">
    </div>
    <script type="text/javascript">
    var jumlah_kata_dalam_ringkasan = 500;
    </script>
    <script src="http://cah-ngebel.googlecode.com/files/sitemap-rohman.js">
    </script>
    <script src="http://trimudareog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999">
    </script> </div>
    <div style="clear: both;" >
    </div>
 ________________________________________________________

Ok selamat mencoba sobb. . . semoga bermanfaat. . . .

Keterangan:
Ganti warna biru dengan alamat situs sobat
Ganti warna merah dengan warna sesuai keinginan sobat, kodenya bisa lihat disini
Ganti warna ungu dengan lebar gadget sobat,

NB: bisa juga diletakkan dalam posting



Tags: cara membuat daftar isi keren, cara membuat daftar isi menarik, cara buat daftar isi otomatis, cara buat daftar isi keren, cara membuat daftar isi keren, cara membuat daftar isi


Cara Mudah Memasang Komentar FB di Blog

Trimuda Reog | 15.20 | 0 komentar
Memasang komentar fb di blog susah-susa gampang, namun disini ane  akan sedikit berbagi tips dengan sobat  dan membuat komentar fb sangan mudah dan cepat. Dengan cara yang sederhana blog sobat dapat memiliki komentar fb eperti yang berada di blogku  ini.
 

Mau tau caranya??
1. Login Blogger
2. Pilih Rancangan
3. EDIT HTML
4. Centang tulisan Expend Widget
5. Cari kode yang mirip di bawah ini :

</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>

Jika sudah ketemu tambahkan kode komentar fb ini di atas </b:includable> :


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>

Hasilnya seperti ini sob :

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>
 </b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>

Tulisan yang ane tandai biru sesuaikan dengan lebar main posting sobat.  Nah gimana sob, mudah bukan? demikianlah cara mudah memasang komentar fb di blog semoga bermanfaat.....



Tags: trimudareog, telaga ngebel, ponorogo, tips, tutorial

Daftar Kategori


close
cbox
 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger