Informasi seputar Kabupaten Wonosobo, Kecamatan Sukoharjo, Catatan Lintang Ayu, Jelita Aristawati, download gratis,software gratis, tutorial blogspot, tutorial wordpress, tutorial adobe photoshop, tutorial coreldraw,Aplikasi HP,Mobiles games, aplikasi symbian,Java game

Koleksi Undangan Siap Cetak CorelDraw

Koleksi Undangan Siap Cetak CorelDraw, silakan download saja, gratis koq
Undangan 01 download
Undangan 02 download
Undangan 03 download
Undangan 04 download
Undangan 05 download
Undangan 06 download
Undangan 07 download
Undangan 08 download
Undangan 09 download
Undangan 10 download
Undangan 11 download
Undangan 12 download
Undangan 13 download
Undangan 14 download
Undangan 15 download
Undangan 16 download
Undangan 17 download
Undangan 18 download
Lintang Ayu Grafis

Menampilkan Random Photo di Blogspot

Dalam tutorial blogspot kali ini saya akan mengulas bagaimana menampilkan flickr random photo ke blog khususnya dengan Blogger /Blogspot . Untuk beberapa orang pasti sudah mengetahui bagaimana cara menampilkan flickr random photo pada blog dan sekarang saya ingin menampilkan hal yang lain yaitu menampilkan random photo dengan jumlah tertentu dengan border pada tiap-tiap image/gambar. Mode ini cocok untuk template dengan background keren dan menginginkan flickr photo randomnya memiliki background transparan. Oke, langkah-langkahnya kita mulai :
  1. Hal yang paling tidak boleh ditinggalkan, yaitu sign in ke flickr Anda. Apabila Anda tidak memiliki atau belum memiliki account pada flickr maka anda cukup sign in menggunakan yahoo!ID anda karena flickr dan yahoo berada pada satu payung perusahaan.

  2. Setelah Anda sign in maka Anda akan disuguhi homepage dari flickr tersebut. Nah, disini perhatikan pada tag atau headline yang bertuliskan Upload Photo. Jika Anda newbie alias 'anyaran' maka upload dulu foto yang akan ditampilkan namun jika Anda sudah punya maka perhatikan baik-baik pada paragraf dibawah Tag Upload tersebut. Anda akan menemukan sebuah link dengan tulisan Tools, klik link tersebut.

  3. Pada page ini perhatikan pada sidebarnya dan temukan tagline display filckr photos on your blog. setelah Andatemukan, lihat pada paragraf dibawahnya dan klik pada build a badge.

  4. Kemudian ketegangan dimulai, disinilah kita akan memulai pengesetan atau settingan untuk Flickr Random Photo. Dipage ini akan diberikan pilihan apakah output flickr random photo kita akan berbentuk HTML atau Flash. Nah, disini saya sarankan untuk memilih pada opsi HTML saja karena agar support dengan pengeditan yang akan kita lakukan. klik next ...

  5. Selanjutnya opsi berikutnya adalah menentukan foto yang akan ditampilkan, yaitu foto kita semua, foto menurut tags/label foto ataukah foto dari semua orang yang ada pada database flickr. Nah, akan lebih asyik jika foto kita semua saja, bukan di sortir menurut tags atau bahkan foto orang lain. Oleh karena itu pilih opsi Your Photo All. Klik Next ...

  6. Nah, pada halaman ini settingan ditujukan ke Icon dan Nama terkenal kita, saya sarankan pilih opsi No karena jika kita melakukan pengeditan maka hal ini pasti juga tidak akan terpakai.

  7. Oke, Perjalanan masih panjang. Kemudian berapa foto yang akan kita tampilkan. how many photo would you like to show? untuk opsi ini pilih saja sesuka hati. Bagaimana jika kita akan menampilkan 6 foto sekaligus, sedangkan disitu tidak ada opsi 6. Untuk hal ini akan dibahas di bawah yang membahas tentang penginputan ke blog.

  8. Berikutnya Opsi penayangan yaitu recent ato random. Untuk recent maka yang akan ditampilkan hanya foto terbaru dan terakhir diupload saja sedangkan untuk random adalah semua foto kita ditampilkan dan akan berbeda-beda ketika kita me-refresh browser kita. itu opsi terserah anda ingin memilih yang mana, namun disini saya memakai setting random.

  9. Kemudian, which size? disini saya memakai ukuran s atau square. Kenapa? karena ukuran tersebut lebih fleksibel jika kita ingin memasukkan kode flickr nanti pada sidebar.

  10. Lalu, Which orientation? yaitu kita menginginkan bentuk yang bagaimana? mau horisontal atau vertikal, nah sedangkan pada kali ini saya memilih memakai none karena kita akan mengedit bentuknya mengikuti alur yaitu zigzag, dari kiri ke kanan dan bawahnya dari kiri ke kanan lagi dan seterusnya...seperti alur ketika kita membaca...

  11. Setelah itu, pewarnaan...skip, lewati aja..karena kita hanya akan bermain dengan css pada saat pengeditan kodenya saja jadi biarkan seperti itu. next to get the code ...

  12. Nah, setelah itu kita akan disuguhkan sebuah kode yang panjang dan melelahkan. Kira-kira terlihat seperti ini :
<!-- Start of Flickr Badge -->
<style type="text/css"->
#flickr_badge_source_txt {
padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
...
#flickr_badge_source {
padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important;
color:#666666 !important;}

</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0">
<tr><td>
...
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
&count=3&display=random&size=s&layout=x&
source=user&user=XXXXXXXXX">
</script>
...
</table>
</td></tr></table>
<!-- End of Flickr Badge -->


nah, kode ini begitu kaku jika dieksekusi pada blog maka kita perlu mengoperasinya sedikit dan mengambil yang dibutuhkan saja...

Oke, Kode yang akan kita ambil dari kode yang bhuanyak itu hanyalah kode javascriptnya saja. Kode nya terlihat seperti ini :

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne? &count=3&display=random&size=s&layout=x& source=user&user=XXXXXXXXX"> </script>

  • Setelah kita ambil kode javascriptnya kita akan memulai pengeditannya, seperti yang terlihat pada baris kode javascript tersebut. tiap kata memiliki makna, akan saya coba jelaskan satu persatu :

  • - count=3 adalah jumlah foto yang akan ditampilkan.
    - display=random adalah penayangan foto secara random.
    - size=s adalah ukuran foto, s berarti small.
    - layout=x adalah tampilan editable.
    - source=user adalah pengambilan foto dari user.
    - user=XXXXXXXXXXXX adalah user ID berupa angka dan karakter huruf.

  • Nah, Pengeditan selesai kemudian kita menuju ke account blogger. Pastikan Anda sudah masuk ke Dashboard >> layout. Klik pada 'Add Page Element' dan pilih opsi 'HTML/Javascript'. Pada saat memasukkan kode flickr tersebut ditambahkan tag div sebagai pelengkap, maka akan tampak seperti ini :
  • <div class="flickr"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne? &count=3&display=random&size=s&layout=x& source=user&user=XXXXXXXXX"> </script> </div> namun ingat, javascript yang telah ditambahi kode div ini merupakan kode javascript yang sudah mengalami pengeditan, jadi bukan kode original dari flickr. kemudian save page element...

  • Selesai? Belum, masih ada satu hal yang perlu ditambahkan pada file css-nya. Masuk ke file css anda yang untuk mayoritas file css berada pada file html. maka masuk ke page edit HTML dan temukan kode berikut :
  • ]]</b:skin> jika sudah ditemukan maka copy paste kode dibawah ini ke atas kode tersebut:

    #flickr img{
    margin: 3px;
    padding: 5px;
    border: 1px solid #CCCCCC;
    text-align: center;
    float: left;!important
    }
    #flickr{
    margin-bottom: 20px;
    padding-bottom: 20px;
    height: 270px; (optional!)
    }

    maka akan terlihat seperti ini:

    ...
    #flickr img{
    margin: 3px;
    padding: 5px;
    border: 1px solid #CCCCCC;
    text-align: center;
    float: left;!important
    }
    #flickr{
    margin-bottom: 20px;
    padding-bottom: 20px;
    height: 270px; (optional! atur sendiri)
    }
    ]]</b:skin>

    jika sudah terkopikan maka save template dan preview blog .
    selamat mencoba!

    Lintang Ayu Tutorial Blogspot

    Upload Gambar dan Foto Profile Blogger

    Upload Gambar dan Foto Profile Blogger, agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan gambar di antara poting-an kita tersebut, di samping untuk lebih memperjelas apa yang kita sampaikan. Misalkan kita sedang menerangkan sesuatu, maka dengan adanya gambar akan lebih memperjelas maksud dari topik yang sedang kita jelaskan kepada para pembaca artikel kita. Bagi anda-anda yang masih bingung bagaimana caranya untuk memasukan gambar atau istilah resminya yaitu upload gambar, maka akan saya ulas langkah-langkah Upload Gambar dan Foto Profile Blogger :

    1. Login seperti biasa dengan id anda

    2. Klik Posts

    3. Klik New Post (bila sebelumnya anda telah mempunyai posting-an)
    4. Klik toolbar yang bergambar seperti ini

    5. Beri tanda tik/cek pada radio button pada pilihan Choose a layout, bila anda menginginkan posisi gambar bisa di tempatkan di mana saja, pilih pada radio button None, bila posisi gambar di sebelah kiri pilih left, bila ingin di tengah pilih Center, bila ingin di kanan pilih Right.

    6. Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih Small, bila ingin sedang pilih Medium, bila ingin besar pilih Large

    7. Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap upload gambar settingnya seperti semula

    8. Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.

    9. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar

    10. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai

    11. Klik Tombol Done untuk mengakhiri proses upload
    Setelah proses upload anda selesai, untuk melihat gambar tadi, klik tombol Compose.
    Nah disini anda bisa melihat gambar yang anda upload tadi sekaligus dapat mengatur kembali ukuran dari gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse anda berubah menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang anda inginkan lepas tombol yang anda tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah, tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang anda inginkan.

    Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kamu harus menghapus beberapa kode tersebut. Jika foto kamu sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:
    1. Setelah upload gambar, klik menu Dasboard

    2. Klik menu Edit Profile

    3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML yang telah anda copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir dengan [.jpg] atau [.jpeg]

    4. Klik Save Profile, maka foto anda yang cantik dan ganteng sudah terpampang di blognya dan bisa dilihat oleh seluruh dunia

    5. Selesai
    Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara meng-upload (memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Saya ambil contoh, biasanya saya menyimpan foto-foto saya di http://photobucket.com. jika anda mau silahkan daftarkan diri anda (gratis ko), apabila sudah selesai daftar dan bisa login, silahkan upload photo anda. Setelah proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah itu tinggal SAVE CHANGES dan REPUBLISH. Selesai, selamat mencoba.

    Lintang Ayu Tutorial Blogspot

    Membuat Blogspot Menjadi Situs Iklan Baris Gratis

    Dari dulu saya ingin sekali membuat situs iklan baris, tahu sendiri kan keuntungan yang didapat dari pemilik situs iklan baris ini? Yupz...Selain ramai pengunjung, tentunya sang pemilik bisa memanfaatkan situs iklan baris miliknya untuk dijadikan ladang penghasilan. Gak percaya? tanyakan saja langsung kepada orang yang berbisnis melalui situs iklan miliknya :p. Oleh karena itu, saya berusaha mencari-cari informasi tentang cara membuat situs iklan baris, dan tentunya GRATIS .
    Setelah singgah di berbagai website dan blog melalui mbah google, ternyata tips-tips yang mereka berikan mempunyai kesamaan, yaitu menggunakan blogspot untuk dijadikan situs iklan baris.

    Sekarang saya akan memberikan tips membuat blogspot menjadi situs iklan baris. Perhatikan baik-baik yah :p

    Berikut Langkah-langkah menjadikan blogspot menjadi situs iklan baris :

    Mempersiapkan Blog Yang Mau dijadikan Situs Iklan Baris
    1. Login di Blogger
    2. Masuk Ke pengaturan
    3. Klik/Pilih Email & Seluler
    4. Kemudian buat nama email untuk mail-to-blogger, email ini yang nanti akan dipakai untuk mengirim posting via email. Jadi catat email tersebut biar gak lupa :p. Perhatikan gambar dibawah ini


    Membuat Form Sebagai Alat Untuk Posting
    Setelah email di blogger berhasil dibuat, sekarang tinggal membuat form email. Form email ini berfungsi untuk memudahkan pengunjung memposting iklannya ke blog iklan baris yang nanti kalian buat. Kalian bisa menggunakan form email gratis dari emailme, tapi terlebih dahulu silakan daftar dulu disini.
    1. Setelah pendaftaran berhasil, selanjutnya login di emailme form
    2. Setelah login lalu klik 'create new form' (posisi sebelah kanan);



















    3. Membuat form untuk iklan baris
    Langkah-langkahnya :

    - Web Form Creation Wizard - Step 1 :






    pada recipient emails, isikan sesuai dengan email posting addres di blog tadi, contoh: xxx.xxx@blogger.com. Kemudian pada thank you page isikan alamat url blog kalian.

    - Web Form Creation Wizard - Step 2 :
    Lihat contoh dibawah


    - Web Form Creation Wizard - Step 3 :
    Lihat contoh dibawah


    - Web Form Creation Wizard - Step 4 :
    Langkah ini opsional (terserah kalian). Kalian dapat mengkostumisasi untuk merubah tampilan form sesuai keinginan dengan merubah Text color, Font dan Size, background color, dll. Kalau tidak ingin merubah, kalian bisa memeneruskan ke step selanjutnya.
    Tapi ada satu hal penting yang perlu kalian rubah yaitu opsi anti spam untuk menghindari spam dari para pemasang iklan baris. Disini ada 3 opsi Anti Spam
    -Show Image with Letters and Numbers = menampilkan kode captcha berupa huruf dan angka
    -Limit submissions to daily, per the same IP = kamu bisa membatasi jumlah iklan dari tiap IP adress yang sama, misal 10 post
    -None = Untuk meniadakan anti spam

    Untuk display mode, pilih yang "Web Form will be inside the web page, visitor never leaves the site " agar para pengunjung yang mamasang iklan tetap selalu berada di web kalian.

    - Web Form Creation Wizard - Step 5 :
    kalian bisa merubah setting seperti contoh di bawah ini.


    - Web Form Creation Wizard - Step 6 :
    Disini kalian bisa lihat tampilan preview form yang telah kalian buat.
    Hasil akhirnya seperti gambar dibawah ini :

    Jika tampilan sudah sesuai maka klik Finish.
    Setelah itu Klik "Get the HTML Code"
    Copy kode HTML itu untuk di paste di blog kalian.

    Setelah berhasil mendapat kode html dari emailmeform, kembali ke blogger dan masuk ke tata letak > Elemen Halaman

    Klik tambah gadget > Html/javascript

    Masukkan kode html itu ke blog kalian di posisi yang menurut kalian bagus.

    Nah itu dia Cara Mudah Membuat Blogspot Menjadi Situs Iklan Baris

    Lintang Ayu Tutorial Blogspot

    Cara Membuat Related Post di Blogspot

    Daftar judul posting yang tampil pada bagian bawah postingan kita dan biasanya dikelompokkan berdasarkan kategori dan sering disebut ‘related post’. Bagaimana cara menampilkan related post di blogspot?

    Cara Membuat Related Post di Blogspot, pertama silakan login ke akun Anda yang ada di blogger kemudian, buka ‘layout’ atau ‘tata letak’ selanjutnya pilih ‘Edit HTML’ agar semua kode template akan ditampilkan, silakan beri tanda centang atau contreng pada ‘Expand Template Widget’. Cari kode berikut ini:

    <data:post.body/>

    Kalau sudah ketemu, silakan copy kode related postberikut di bawah kode di atas.

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
    <!-- *****************Related Articles by Labels - Take Two****************** -->

    <!--
    Modified by JackBook.Com to make it easier to use.
    1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
    2. The current article will also be listed, now it's no more.
    -->

    <div class='widget-content'>
    <h3>Related Posts by Categories</h3>
    <div id='data2007'/><br/><br/>
    <div id='hoctro'>
    Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
    </div>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;


    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;

    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {

    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }

    var labelArray = new Array();
    var numLabel = 0;

    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>

    </div>
    </b:if>


    Dan jangan lupa simpan perubahan. Selamat mencoba Cara Membuat Related Post di Blogspot ini, semoga bermanfaat.

    Lintang Ayu Tutorial Blogspot