Cara Memasang Komentar Facebook Ke Dalam Blog

Cara Memasang Komentar Facebook Ke Dalam Blog

Label:

Blogging

Date: 30 Mei 2014

Pada postingan terdahulu saya pernah mempublish cara memasang komentar Disqus ke dalam halaman blog, dan kali ini saya akan coba memberikan sebuah trik tentang cara memasang komentar Facebook kedalam halaman blog. Dengan adanya komentar facebook dalam setiap artikel blog anda, saya harap para pengunjung web semakin dipermudah ketika ingin meninggalkan komentarnya. Seperti yang sama- sama sudah kita ketahui para pengguna facebook jumlahnya sangat banyak sekali, dan mereka bisa berkomentar menggunakan masing-masing akun facebook mereka ketika ingin berkomentar tentang artikel yang anda publish.

Untuk menyimpan widget komentar facebook ke dalam halaman blog, mula-mula Anda harus melakukan perubahan setting pada 'Settingan komentar' buat agar kolom komentar blogger anda tidak terlihat. Kemudian dalam setiap pengaturan komentar dalam artikel yang akan anda publish buat menjadi  'Jangan bolehkan,(sembunyikann yang ada)'

Setelah berhasil merubah settingan tersebut, langkah selanjutnya pilih 'Template' lalu pilih 'Edit HTML' dan cari kode yang mirip-mirip seperti ini <div class='post-footer-line post-footer-line-3'> dalam template blog anda. Ok, selanjutnya copy dan pastekan kode di bawah ini tepat setelah kode <div class='post-footer-line post-footer-line-3'>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <br/>
     <br/>
<div class='n'>
    <div class='fb_reset' id='fb-root'>
        <div style='position: absolute; top: -10000px; height: 0px; width: 0px;'>
        </div>
    </div>
    <script src='http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1' type='text/javascript'>
</script><script language='javascript' type='text/javascript'>

        //<![CDATA[
        document.write("<fb:comments href='http://www.mochadnan.com' num_posts='10' width='600'><\/fb:comments>");
        //]]>
    </script>
</div>
</b:if>

Pada bagian Url http://www.mochadnan.com silahkann ganti dengan URL web anda masing-masing. Untuk menyesuaikan lebar widget silahkan ganti angka 600 dan sesuaikann dengan lebar blog anda. Sementara untuk mengatur jumlah komentar yang tampil, anda bisa merubahnya dengann cara mengganti angka 10 di atas dengan jumlah komentar yang ingin anda tampilkan.!

 Klik 'Simpan' jika dirasa sudah cukup dan menyesuaikan dengan tampilan web anda. dan inilah hasil dari cara memasang komentar facebook ke dalam Blog.

Contoh hasil pemasangan FB Comments

Oya, kode di atas juga bisa anda pasang pada sidebar blog anda sebagai widget facebook komentar. Ok, demikian saja cara memasang Komentar Facebook ke dalam Blog, baca juga cara membuat widget Recent Comments with Avatar untuk Blogger. semoga bermanfaat.

Cara Memasang Widget Google Translate Di Blogger

Cara Memasang Widget Google Translate Di Blogger

Label:

Widget

Date: 29 Mei 2014

Cara Memasang Widget Google Translate Di Blogger

Google translate berguna untuk menterjemahkan bahasa dari isi konten web kita  kedalam beberapa bahasa yang bisa di pilih, para pengunjung bisa tetap membaca isi artikel kita yang notabene berbahasa Indonesia ini, dengan cara memilih salah satu jenis bahasa yang tersedia serta berlaku di negara masing-masing pengunjung. Dengan demikian anda tidak perlu cemas kehilangan pengunjung dari luar Indonesia. :D

Cara memasang widget google translate ini memang sedikit berbeda dari widget yang sudah disediakan dalam dasbor  blogger sendiri, dimana melalui cara ini anda akan diwajibkan untuk mengambil dua buah kode script dan menyimpannya dalam halaman web (blog). Bagaimana, tertarik untuk mencobanya? Ok. Langsung saja pada tata cara pembuatannya.

Langkah 1

Buka /Klik tautan link berikut:  https://translate.google.com/manager/website/

Setelah terbuka sebuah halaman baru, selanjutnya silahkan untul "Login" terlebih dahulu, kemudian klik "ADD TO YOUR WEBSITE NOW"

Langkah 2

Silahkan Isikan alamat Url website anda kedalam kotak yang telah disediakan, pilih juga bahasa yang akan anda tampilkan dalam widget Google Translate nantinya. Setelah itu klik "NEXT"

Langkah 3

Dalam tahap ini anda bisa memilih beberapa bahasa yang ingin anda gunakan dalam widget Google translate, atau memberinya check list pada keseluruhan bahasa jika ingin menggunakan semua bahasa yang tersedia. Setelah itu Klik "GET CODE"

Langkah 4

Copy dan pastekan kedua kode snippets yang telah tersedia, kode pertama anda pastekan kedalam template website, tepatnya sebelum kode </head> . Dalam dasbor blog pilih "Template"  >> Pilih "Edit html". 

Kode kedua, anda pastekan kedalam widget HTML. Dalam dasbor blog pilih "Tata Letak" >>"Add a gadget" >> "HTML". Klik "Simpan" dan selesai.

Dengan demikian maka Widget Google Translate pun sudah terpasang dan langsung duduk manis dalam sidebar blog anda. Ok, sampai disini saja Cara memasang widget Google Translate di Blogger, baca juga postingan saya sebelumnya tentang cara membuat Randam Posts untuk Blogger. Semoga bermanfaat. Salam Blogger...

Cara Membuat Random Posts Atau Daftar Artikel Secara Acak

Cara Membuat Random Posts Atau Daftar Artikel Secara Acak

Label:

Widget

Date: 28 Mei 2014

Cara Membuat Random Posts Atau Daftar Artikel Secara Acak

Widget atau juga gadget Random post ini bisa sahabat blogger simpan dibilah halaman blognya, guna memperlihatkan hasil postingan anda. Mungkin karena menampilkan judul postingannya secara acak, sehingga widget ini lebih familiar dengan sebutan Random Posts. Walau sebenarnya jika kita menamai widget ini dengan sebutan 'Hot Artikel', atau 'Pencarian Teratas' Saya rasa bisa-bisa saja. Tapi apalah arti sebuah nama, kita bisa bebas -bebas saja untuk menamai widget ini, sekarang yang penting untuk anda yang belum mengetahui cara pembuatannya lebih baik kita fokuskan pada pembahasan tersebut. 

Random posts bisa dengan sangat mudah kita buat, dan kemudian memajangnya di sidebar blog kita. Anda hanya cukup mengikuti langkah-langkah yang akan saya berikan berikut ini. Kemudian anda melakukan apa-apa yang saya tuliskan dibawah ini. Dengan itu, maka widget Random posts sudah bisa berada dalam blog anda.

Cara membuat widget Random posts atau Daftar artikel secara acak

Ok, langsung saja. Sekarang masuk ke dalam dasbor blog anda. Setelah berada dalam 'dasbor blog', pilih 'Tata Letak' kemudian lanjutkan dengan mengklik 'add a gadget' tambahkan gadget baru, dan setelah itu pilih 'HTML'
Copy dan Pastekanlah kode berikut ini kedalam gadget HTML tadi. 

<style>
    #random-posts img {
        border-radius: 0px;
        float: left;
        margin-right: 5px;
        width: 75px;
        height: 75px;
        background-color: #FFFFF;
        padding: 3px;
        transition: all 0.2s linear 0s;
    }
    #random-posts img:hover {
        opacity: 0.6;
    }
    ul#random-posts {
        list-style-type: none;
        padding: 0px;
    }
    #random-posts a {
        font-size: 13px;
        text-transform: capitalize;
        padding: 0px auto 5px;
    }
    #random-posts a:hover {
        text-decoration: none;
    }
    .rp-snippet {
        font-size: 11px;
        background: none;
        padding: 5px;
        margin-right: 8px;
    }
    #random-posts span {
    }
    #random-posts li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
        padding: 4px;
    }

</style>
<ul id="random-posts">
    <script type="text/javaScript">
        var rdp_numposts=4;var rdp_snippet_length=80;var rdp_info='no';var rdp_comment='comment';var rdp_disable='Comments Disabled';var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
    </script>
    <script type="text/javaScript">
        function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_nRe4QnKfGX56OZ44g1iKqRhwV35Fhu0LM3oyaUTY5Ugf2Ivs5IVandpbJSMTS6W_kkSNdaMXomeQCg31umRVtmtzQaoG7xs6poA2SromU4fF2KgSoPjazEJOUB9JSDUZAc1fdfCxJ0/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
    </script>
</ul>

Silahkan ganti Angka yang terdapat dalam kode var numofpost=10; untuk menyesuaikan jumlah postingan yang akan anda tampilkan.

 

Klik "Simpan" gadget dan selesai. Demikianlah cara membuat widget Random posts atau Daftar artikel secara acak, baca juga cara membuat widget Recent comment with Avatar untuk blogger, semoga bermanfaat.

Ssssstttt.... Ada Satria Fu150 Terbaru Nih

Ssssstttt.... Ada Satria Fu150 Terbaru Nih

Label:

Otomotif

Date: 23 Mei 2014

Motor Suzuki sangat terkenal dengan type Satria FU150 nya, banyak muda-mudi indonesia termasuk saya sendiri, menggandrungi type bebek sport yang satu  ini, yaaa... kuda besi yang satu ini memang sangat khas  dengan tampilan lampu depannya yang mengusung gaya Ayam jago. Sejak pertama kali diluncurkannya ke khas-an Satria Fu tersebut  memang enggak berubah, yang membedakanya hanya pergantian sriping body saja. Dari segi mesin sendiri, Satria Fu tetap mengusung  mesin 150cc.

Dan melalui postingan ini saya akan menginformasikan hal baru mengenai Satria Fu ini, lnfo apa saja yang akan saya share kehadapan anda semua? Silahkan untuk lanjut membaca tulisan saya ini. 
Ada dua berita terbaru tentang Suzuki Satria Fu, dan ini bukan gosip lho!

Berita pertama bahwasanya PT. Suzuki Indomobil Motor telah resmi mengeluarkan type terbaru Satria Fu, pertanggal 21 Mei kemarin seperti apa bentuknya? Tenang saya akan publish juga kehadapan sobat semua tentang bagaimana  jogrogannya.  

Berita kedua, pertanggal 23 Mei 2014 Harga On The Road motor Satria mengalami kenaikan, rata-rata hampir Rp.100.000. Untuk detail kenaikan masing- masing typenya di bawah ini saya lampirkan tabel harga terbaru motor Suzuki Satria Fu150 

Tabel Harga Sebelumnya:

Merk/ Type:	Harga OTR (On The Road):
SATRIA FACE LIFT	RP.19.220.000.
SATRIA FACE LIFT WITH ALARM	RP. 19.825.000.
SATRIA FIGHTER 1 ACCESORIS/ CROME	RP. 19.820.000.
SATRIA FIGHTER 1 WITH ALARM	RP. 20.320.000.

Tabel Harga/ OTR Terbaru:

Merk/ Type:	Harga OTR (On The Road):
SATRIA FACE LIFT	RP. 19.320.000.
SATRIA FACE LIFT  ALARM	RP. 19.825.000.
SATRIA FIGHTER 1  ACCESORIS/ CROME	RP. 19.820.000.
SATRIA FIGHTER 1 WITH ALARM	RP. 20.320.000.

Untuk saat ini, sampai disini dulu info terbaru tentang Suzuki Satria Fu, di lain kesempatan saya akan mempublish jogrogan Satria Fu teranyar tersebut kehadapan anda semua lengkap dengan spesifikasinya. So, pastikan anda berlangganan artikel kami. Untuk mendapatkan update terbaru dan langsung ke dalam email anda.

Wassalam....

Cara Membuat Widget Recent Comment

Cara Membuat Widget Recent Comment

Label:

Widget

Date: 23 Mei 2014

Cara Membuat Widget Recent Comment

Untuk menampilkan beberapa komentar terbaru ke dalam sidebar blogger, maka sebelumnya anda harus membuat sebuah widget yang berfungsi untuk menampilkan komentar-komentar tersebut. Nah, dalam kesempatan kali ini saya akan coba menyuguhkan sebuah tutorial cara membuat widget/gadget recent comment lengkap dengan avatar si pengomentar. Yang mana dengan gadget recent comment with avatar ini, saya yakin tampilan komentar terakhir dalam blogspot anda akan terlihat semakin menarik. Baca juga Cara membuat widget komentar terakhir menggunakan comment slider

Baik langsung saja sekarang Anda 'Login' kedalam dasbor Blog, setelah itu pilih 'Tata Letak' kemudian pilih 'Add a gadget' atau tambahkan gadget baru. Pilih 'HTML' kemudian copy dan pastekan kode script di bawah ini kedalam gadget HTML tadi..

<div style="overflow:auto;width:300px;">

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 5,

showAvatar = true,

avatarSize = 40,

roundAvatar = true,

characters = 100,

defaultAvatar = "",

hideCredits = true;

//]]>

</script>

<script src="https://googledrive.com/host/0B9D8rrkPwqxPWXNWSXV5RENQOWc" type="text/javascript"></script>

<script type="text/javascript" src="http://NAMABLOGANDA.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=9999"></script>

</div> 

 Perlu diperhatikan bahwa dalam kode di atas ada beberapa kode yang harus anda edit (ganti) terlebih dahulu agar gadget/widget recent comment ini berjalan sesuai dengan yang anda harapkan. Dimana atau pada bagian apa sajakah anda perlu mengedit? Cukup Edit pada bagian kode yang masing-masingnya berwarna Merah. itu saja. Pilih 'Simpan' Gadget dan selesai.

Demikian saja cara membuat widget / Gadget Recent Comment untuk blogspot, jika ada pertanyaan silahkan tinggalkan di kolom komentar, secepatnya saya akan merespon setiap pertanyaan anda. baca juga tutorial saya sebelumnya tentang cara membuat widget/ gadget Recent Posts/ Artikel Terbaru

Cara Mudah Menghilangkan Tanggal Postingan Dalam Artikel

Cara Mudah Menghilangkan Tanggal Postingan Dalam Artikel

Label:

Blogging

Date: 19 Mei 2014

Baik, menyambung tulisan saya sebelumnya tentang tutorial serta tips Ngeblog tentang mengatur dan menjadwalkan postingan blog, maka kali ini saya akan berbagi sebuah tips tentang cara mudah menghilangkan tanggal postingan artikel. Yang mana bagi sebahagian blogger keberadaan tanggal postingan ini mungkin sedikit mengganggu penampilan halaman blognya.

Oke, tanpa berpanjang lebar lagi langsung saja kita menuju pokok pembahasan kita tentang cara menghilangkan tanggal postingan artikel blog. Nah, untuk itu silahkan 'login' terlebih dahulu kedalam dasbor blog anda.

Cara Mudah Menghilangkan Tanggal Postingan Dalam Artikel

Setelah itu pilih 'Tata Letak' >> Blog Post. Kemudian klik 'Edit' perhatikan gambar diatas. Maka akan terbuka sebuah jendela munculan dan memperlihatkan beberapa pengaturan posting area blog anda, mulai dari jumlah posting yang tayang dalam beranda hingga kepengaturan media sharing. Nah, untuk menghilangkan tanggalan pada postingan artikel, anda cukup menghilangkan tanda check list (centang)pada bagian 'waktu dan tanggal postingan' untuk lebih jelasnya berikut ini saya lampirkan gambarnya.

Cara Mudah Menghilangkan Tanggal Postingan Dalam Artikel

Seperti itulah proses mudahnya untuk menghilangkan tanggalan pada postingan artikel blog, jika suatu saat anda ingin mengembalikan tanggalan dalam postingan artikel ini terlihat  kembali, maka anda cukup melakukan kebalikannya saja. Pilih 'simpan' dan selesai. 

Demikianlah cara mudah menghilangkan tanggalan dalam  postingan artikel blog, semoga bermanfaat untuk anda semua. Baca juga cara menghilangkan tanda obeng dan tang dalam gadget blog. Wassalam...

Cara Daftar Yang Benar Ke Google Adsense (GA)

Cara Daftar Yang Benar Ke Google Adsense (GA)

Label:

Adsense

Date: 15 Mei 2014

Google Adsense (GA) di gadang- gadang sebagai satu satunya program adsense yang terbaik sebagai media bisnis online dan untuk memonetasi konten blog, namun tidak sembarang web atau blog bisa ikut berpartisipasi menjadi publishernya. Karena untuk ikut bergabung kedalam jaringannya sebagai penayang ada banyak syarat yang cukup sulit (untuk sebagian) untuk dipenuhi, namun saya yakin ada banyak jalan menuju Roma (Agar bisa di terima oleh GA).
 

Lain halnya dengan pertama kali kita mendaftar, dalam proses ini tidak diperlukan banyak waktu. Dan dalam beberapa menit saja formulir pendaftaran pun akan langsung terkirim, kemudian berlanjut ke tahap peninjauan isi konten. Nah, dalam tahap inilah kesabaran kita akan di uji. Nasiblah yang akan menentukan seberuntung apakah kita, dan semujur apakah kita.  :D

Ok, langsung saja di bawah ini saya akan menjelaskan tentang cara mendaftar yang benar ke Google Adsense (GA) dan semoga setelahnya peninjauan isi konten web anda, iklan pun sudah mulai tayang dalam setiap konten blog.
    

1√. Login ke dalam dasbor blog/ akses dasbor blog anda.

2√. Pilih menu "penghasilan " yang terdapat di bilah kiri dasbor blog.

3√. Maka akan terbuka halaman "Blogger+Google AdSense" kemudian klik "Mendaftar AdSense" 

4√. Dalam tahap ini akan ada 3 hal yang harus anda perhatikan mulai dari Pemilihan akun Google Anda, pemberitahuan tentang isi konten, dan yang terakhir pengiriman formulir Adsense. Klik "Ya, lanjut masuk ke akun google" 

5√. Langkah selanjutnya beri tanda check list pada bahasa konten, serta pada kotak bagian kebijakan program Adsense. Lalu lanjutkan dengan mengklik tombol  "lanjutkan" 

6√. Dalam tahap ini lengkapilah data pribadi anda (biodata) dalam formulir yang sudah disediakan. Seperti jenis akun, Negara, No handphone, serta alamat lengkap penerima pembayaran. Lalu klik tombol "kirim permohonan saya"  

7√. Setelah itu klik kembali tombol "Lanjutkan" yang tersedia. Dan.... Selamat, anda sudah berhasil melaksanakan pendaftaran Adsense.

Oya, bagaimana jika dalam dasbor blog belum terdapat Tab/Menu "Penghasilan"? Caranya sangatlahlah gampang, anda hanya perlu mengklik "pengaturan" lalu pilih "bahasa dan pemformatan" kemudian pilih "bahasa Inggris" Lalu klik "simpan perubahan." Refresh halaman dasbor blog, maka Tab "penghasilan" akan terlihat dalam menu dasbor blog Anda.

Perlu 3 hari hingga 1 minggu Team Google AdSense meninjau isi blog, ketika peninjauan mereka telah selesai, maka sebuah email akan dikirimkan kedalam kotak masuk (Inbox) email anda. Saya rasa sejauh ini Anda telah mengerti tentang cara daftar yang benar ke Google Adsense (GA) oleh karena itu sekali lagi saya ucapkan selamat mencoba, semoga pengajuan adsen anda cepat diterima. Baca juga artikel saya sebelumnya tentang cara daftar ke Yllyx dan mendapatkan kode iklannya.

Cara Membuat Huruf Drop Cap Pada Awal Artikel

Cara Membuat Huruf Drop Cap Pada Awal Artikel

Label:

Blogging

Date: 12 Mei 2014

 

Moch Adnan Blog - Tutorial cara membuat huruf dropcap ini pada dasarnya sudah banyak sekali yang menshare, namun tanpa berkecil hati saya akan tetap mempublish tutorial yg satu ini yakni tentang tata cara membuat huruf dropcap. Huruf besar tersendiri yang biasanya terletak diawal kalimat, atau mungkin anda lebih sering melihatnya dalam sebuah artikel majalah dimana huruf awal selalu tercetak lebih besar dari default atau bawaan huruf  penulisan.

Jika sobat sudah sering membuka- buka banyak  artikel dalam blog ini saya yakin anda akan menjumpai tiga jenis huruf dropcap yang berbeda dalam setiap postingnya, di mana bentuk- bentuk huruf drop cap yang ada  tersebut kurang lebih terlihat seperti ini: 

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan class drop cap simple.

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan 'class'= drop cap square.

Ini hanya sebuah contoh pembuatan huruf drop cap menggunakan class drop cap fancy.

Nah, jika sobat tertarik.untuk  menerapkan salah satu huruf dropcap seperti yang terlihat di atas kedalam setiap halaman artikel sobat, maka silahkan ikuti tata cara pembuatannya. Saya akan coba merinci satu persatu tentang cara pembuatannya. Oya, sebelumnya ke, 3 jenis huruf dropcap ini kita namai dulu supaya mudah di ingat.

• dropcap Simple
• dropcap Square
• dropcap Fancy

Ok, sekarang langsung saja akses ke dalam halaman dasbor blog sahabat, lalu pilih "Template" kemudian pilih " edit html " dan sekarang kita lanjut pada cara membuat ke 3 jenis huruf dropcap tersebut.

Cara Membuat Huruf Drop Cap Pada Awal Artikel

Dalam halaman edit html silahkan cari kode yang mirip seperti ini ]]></b:skin> jika sudah menemukannya, selanjutnya copy dan pastekan kode berikut ini tepat di bawah kode ]]></b:skin>

 /* DROPCAPS

----------------------------*/

.dropcapsimple, .dropcapsquare, .dropcapfancy {
float:left;
overflow:hidden;
text-align:center;
}
.dropcapsimple {
font-size:34px;
height:34px;
line-height:38px;
width:30px;
text-align:left;
}
.dropcapsquare {
font-size:28px;
height:38px;
line-height:38px;
width:38px;
margin-right:7px;
color:#fefefe;
background:#111;
text-shadow:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.dropcapfancy {
font-size:26px;
height:40px;
line-height:40px;
width:40px;
margin-right:7px;
color:#fefefe;
text-shadow:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj555wjVL_OOvvdz82r8Jr0BtteJvCSscvO2nloICjzQMY_sADqVvzRyhG_ij0Mh4duhwyjOxEHLDXiB3OFixgyJgFWs3m930VFNB9ZEF0phkwKA0krmuJrx5j07wxRLnGc9U5petwBU-Q/s1600/bk_dropcap3.png) 0 0 no-repeat !important;
}

Simpan template,  done! 

Nah, untuk memunculkan huruf dropcap tersebut secara otomatis kedalam setiap postingan baru, langkah selanjutnya adalah klik "Pengaturan" lalu pilih "Post dan Komentar" copy dan pastekan kode html berikut kedalam kotak "Template Entri"

Klik guna memperbesar tampilan gambar

 <span class="dropcapsimple">Huruf awal Anda</span>

Buka postingan baru untuk memunculkannya kemudian ubahlah mode penulisan menjadi mode "HTML" dan ganti tulisan "Huruf awal Anda" dengan awal huruf postingan.

Untuk merubah tampilan huruf Dropcap Anda hanya perlu mengganti tulisan dropcapsimple yang tercetak tebal dan berwarna merah tersebut dengan kata berikut ini : "dropcapfancy" untuk dropcap Fancy, "dropcapsquare" untuk Dropcap Square. 

Ok, rasanya sampai disini saja Cara membuat huruf Dropcap pada awal Artikel baca juga tutorial cara merubah tulisan posting lama dan posting baru dengan judul artikel dalam postingan artikel saya sebelumnya, Terima kasih sudah membaca artikel ini saya ucapkan selamat mencoba.

Lowongan Kerja Surveyor Di PT. WOM Finance Tbk

Lowongan Kerja Surveyor Di PT. WOM Finance Tbk

Label:

Info Bekasi

Date: 9 Mei 2014

Lowongan Kerja Surveyor Di PT. WOM Finance Tbk

Kembali lagi satu kabar lowongan kerja marketing untuk wilayah Bekasi, Cikarang, karawang, Depok, Cileungsi dan Bogor saya infokan kepada sahabat semua, dan kali ini lowongan kerja marketing untuk wilayah Bekasi datang dari PT. Wahana Ottomitra Multiartha. Tbk (WOM Finance). Dimana saat ini PT. WOM Finance Tbk sedang membuka kesempatan berkarir untuk anda yang berminat  menjadi Surveyor dan atau menjadi seorang  Kolektor (bag. Penagihan).

Lowongan di PT. WOM Finance Tbk untuk posisi Surveyor atau Collector sudah tidak lagi tersedia melalui blog ini

Kesempatan Berkarir ini bisa anda share dan  siapa tahu ada teman, saudara atau tetangga yg masih butuh kerja yuk....ke WOM finance, kami sedang membuka kesempatan untuk berkarir sebagai Collector dan Surveyor di cabang Karawang, Cikarang, Bekasi, Cileungsi, Depok, Bogor, dan Leuwiliang.

Syarat pendidikan minimal. SMA/D3
Memiliki kendaraan roda dua dan Sim C.

Kirimkan lamaran Anda ke cabang terdekat atau ke :
PT.  WOM Finance. Tbk
Jl. RE Martadinata No.3-4 Cikarang Utara

atau kirim CV lengkap anda via email ke:
hc.ga.cikarang@wom.co.id
 

Demikian saja info lowongan kerja Surveyor di PT. WOM Finance Tbk untuk area Bekasi, Cikarang, Karawang, depok, dan Bogor semoga bermanfaat untuk sobat yang tengah mencari pekerjaan.

Cara Merubah Navigasi Posting Lama & Baru Dengan Angka Di Beranda Blog

Cara Merubah Navigasi Posting Lama & Baru Dengan Angka Di Beranda Blog

Label:

Blogging

Date: 2 Mei 2014

Melanjutkan tulisan saya sebelumnya tentang cara merubah tampilan posting lama serta posting baru dengan judul artikel pada setiap halaman postingan, maka kali ini saya akan memberikan tips ataupun sebuah tutorial tentang cara  Merubah Navigasi Posting Lama & Baru Dengan Angka Di Beranda Blog. Yang mana pada dasarnya kedua cara ini hanya menggunakan kode script semata sebagai modal untuk pembuatannya, oya sebagai contoh berikut ini saya lampirkan juga gambar hasil dari merubah navigasi posting lama dan posting baru di beranda blog. Cekidot  :D  

Okay langsung saja kita menuju tahapan cara pembuatannya dalam blog. 

Langkah awal login terlebih dahulu kedalam dasbor blog, setelah itu pilih "template" kemudian pilih "edit html" lalu cari kode seperti ini </body> gunakan pencarian cepat dengan menekan "ctrl+f" pada keyboard. 

Dan setelah menemukan kode tersebut, selanjutnya copy dan pastekan kode script berikut  ini tepat di bawah kode </body>

<script type='text/javascript'>
//<![CDATA[
var pageCount=7;
var displayPageNum=3;
var upPageWord ='« Previous'
var downPageWord ='Next »';
function showpageCount(x){var C=home_page_url;var E=new Array();var y=1;var H=1;var v=0;var p=0;var G=0;var F="";var J="";var w="";for(var z=0,A;A=x.feed.entry[z];z++){var u=A.published.$t.substring(0,19)+A.published.$t.substring(23,29);timestamp=encodeURIComponent(u);var i=A.title.$t;if(i!=""){if(v==0||(v%pageCount==(pageCount-1))){if(C.indexOf(timestamp)!=-1){y=H}if(i!=""){H++}E[E.length]="/search?updated-max="+timestamp+"&max-results="+pageCount}}v++}for(var D=0;D<E.length;D++){if(D>=(y-displayPageNum-1)&&D<(y+displayPageNum)){if(p==0&&D==y-2){if(y==2){J='<span class="showpage"><a href="/">'+upPageWord+"</a></span>"}else{J='<span class="showpage"><a href="'+E[D]+'">'+upPageWord+"</a></span>"}p++}if(D==(y-1)){F+='<span class="showpagePoint">'+y+"</span>"}else{if(D==0){F+='<span class="showpageNum"><a href="/">1</a></span>'}else{F+='<span class="showpageNum"><a href="'+E[D]+'">'+(D+1)+"</a></span>"}}if(G==0&&D==y){w='<span class="showpage"> <a href="'+E[D]+'">'+downPageWord+"</a></span>";G++}}}if(y>1){F=""+J+" "+F+" "}F='<div class="showpageArea">'+F;if(y<(H-1)){F+=w}if(H==1){H++}F+="</div>";var I=document.getElementsByName("pageArea");var B=document.getElementById("blog-pager");if(H<=2){F=""}for(var D=0;D<I.length;D++){I[D].innerHTML=F}if(I&&I.length>0){F=""}if(B){B.innerHTML=F}}function showpageCount2(A){var F=home_page_url;var G=new Array();var J=F.indexOf("/search/label/")!=-1;var M=J?F.substr(F.indexOf("/search/label/")+14,F.length):"";M=M.indexOf("?")!=-1?M.substr(0,M.indexOf("?")):M;var B=1;var L=1;var y=0;var p=0;var K=0;var I="";var P="";var z="";var N='<span class="showpageNum"><a href="/search/label/'+M+"?&max-results="+pageCount+'">';var F=home_page_url;for(var C=0,D;D=A.feed.entry[C];C++){var x=D.published.$t.substring(0,19)+D.published.$t.substring(23,29);timestamp=encodeURIComponent(x);var i=D.title.$t;if(i!=""){if(y==0||(y%pageCount==(pageCount-1))){if(F.indexOf(timestamp)!=-1){B=L}if(i!=""){L++}G[G.length]="/search/label/"+M+"?updated-max="+timestamp+"&max-results="+pageCount}}y++}for(var H=0;H<G.length;H++){if(H>=(B-displayPageNum-1)&&H<(B+displayPageNum)){if(p==0&&H==B-2){if(B==2){P=N+upPageWord+"</a></span>"}else{P='<span class="showpage"><a href="'+G[H]+'">'+upPageWord+"</a></span>"}p++}if(H==(B-1)){I+='<span class="showpagePoint">'+B+"</span>"}else{if(H==0){I=N+"1</a></span>"}else{I+='<span class="showpageNum"><a href="'+G[H]+'">'+(H+1)+"</a></span>"}}if(K==0&&H==B){z='<span class="showpage"> <a href="'+G[H]+'">'+downPageWord+"</a></span>";K++}}}if(B>1){if(!J){I=""+P+" "+I+" "}else{I=""+P+" "+I+" "}}I='<div class="showpageArea">'+I;if(B<(L-1)){I+=z}if(L==1){L++}I+="</div>";var O=document.getElementsByName("pageArea");var E=document.getElementById("blog-pager");if(L<=2){I=""}for(var H=0;H<O.length;H++){O[H].innerHTML=I}if(O&&O.length>0){I=""}if(E){E.innerHTML=I}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]>
</script>

Catatan: ubahlah masing-masing nominal angka yang terdapat dalam kode 
var pageCount=7;
var displayPageNum=3;

Klik "simpan template" agar hasil perubahan dalam template tadi tersimpan. Dan eng-ing-enggg... kini navigasi posting lama dan posting baru dalam beranda blog anda sudah berubah tergantikan  dengan angka. Nah dengan demikian selesai sudah Cara Merubah Navigasi Posting Lama & Baru Dengan Angka Di Beranda Blog. Selamat mencoba dan sukses untuk anda semua.