Home Art Design: Tips trik blogger

Showing posts with label Tips trik blogger. Show all posts

Sunday, December 15, 2013

Blogger new template designer

Untuk membuat tampilan blog yang bagus dan elegan tentu butuh waktu dan pengetahuan tentang berbagai macam hal selain bisa menulis artikel, sekarang bagi para blogger yang tidak mau pusing dengan design template ada fasilitas baru dari blogger yang memudahkan kita untuk melakukan editing template tanpa copy paste kode script.

Fasilitas ini berupa TEMPLATE DESIGNER, fungsi baru bagi blogger untuk melakukan design template.

Caranya cukup mudah :

log in blogger.com
masuk ke menu design
masuk ke menu template designer

Setelah masuk ke menu template designer kamu akan melihat berbagai jenis template standart yang sudah disediakan.
___________________________________________

Standart jenis template ( silakan pilih sesuai kebutuhan )

___________________________________________

Background menu, tersedia dalam bentuk image dan warna ( silakan pilih sesuai kebutuhan )

___________________________________________

Menu pilihan layout template ( silakan pilih sesuai kebutuhan )

___________________________________________

Menu pilihan layout untuk footer ( silakan pilih sesuai kebutuhan )

___________________________________________

Menu pilihan layout untuk mengatur lebar kolom yang dimaksud ( silakan pilih sesuai kebutuhan )

___________________________________________

Menu pilihan layout untuk mengatur jenis warna, huruf, link, judul ( silakan pilih sesuai kebutuhan )

Itulah informasi secara singkat mengenai template designer yang cukup memudahkan bagi blogger untuk melakukan design template.

Note :

Bagi blogger yang sudah menggunakan template lama harus hati hati karena widget yang sudah ada tetap akan terpengaruh bila kamu menggunakan template ini. ( terutama mengenai kode css yang akan hilang bila kamu mengganti template )

Simpanlah template yang lama agar bila terjadi sesuatu bisa di upload kembali.

Semoga bermanfaat..!
Terima kasih..!

Wednesday, June 13, 2012

Random Post Blogger dengan Tumbnails

Menampilkan isi blog/website merupakan cara agar pembaca/pengunjung bisa dengan mudah untuk mendapat informasi yang diinginkan, selain juga untuk memperkenalkan isi dari blog/website kita.
Random post bisa dipakai sebagai alternatif untuk menampilan isi blog secara acak dengan tampilan judul posting dan image serta jumlah komentar yang ada.
Caranya cukup mudah dan sederhana.

Ikuti Langkah Berikut :

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<style type="text/css"></style>

<script type="text/JavaScript">

</script>

Simpan dan lihat hasilnya.

Keterangan :

var Max_Post_Display = 10; var Sum_Len = 130 = jumlah posting dan jumlah karakter (panjang judul posting) yang ingin ditampilkan / ubah angka 10 dan 130 sesuai kebutuhan.
.recent_post_content img {width:32px;height:32px = image/gambar yang ingin ditampilkan lebar;tingggi, ubah sesuai kebutuhan
font-size = ukuran besar kecil font; meliputi judul widget dan judul posting ( ubah sesuai kebutuhan )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00tEORrVI8jiu5cspaHAk4LSkKwFuZ-otRbGURUUjyZnaI5nQgPZOBSQ4_e-WG9gz0vDjRyvFh5AhUAJqx1rOxeh16i4BomqsO42OeGJ2ujSmPQRQC007zbaLnmlNuzsW7rafSJrsCnI/s32/Hfavicon.jpg image yang muncul saat posting no-image ( bisa diganti sesuai kebutuhan )

Create by Tien Nguyen // Copyright by bloggeritems.com

Wednesday, November 23, 2011

Widget untuk Mengganti Warna Background secara Otomatis

Menggunakan kombinasi warna yang tepat agar tampilan blog menjadi lebih menarik dan elegan bisa menjadi alternatif bagi yang suka utak utik template.

Penggunaan kode warna sudah merupakan bagian yang tak terpisahkan bagi para blogger untuk membuat tampilan yang sesuai antara background, border, dan warna huruf.

Untuk menambah variasi dan mengurangi kejenuhan dengan penggunaan warna yang sama maka widget untuk mengganti background secara otomatis ini bisa menjadi pilihan yang tepat.

Untuk lebih lengkapnya ikuti langkah berikut.

Login ke akun Blogger kamu.
Dari halaman dashboard
Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content yang tersedia :

Keterangan :

Warna Merah ; warna petunjuk untuk kembali ke warna background default (asli), silakan diganti dengan warna lain sesuai template ( hanya sebagai tampilan kembali ke warna asli ).
Warna Kuning ; warna background yang diinginkan, pada saat di klik warna background akan berubah sesuai jenis warna yang telah ditentukan. ( ubah sesuai kebutuhan ( bisa ditambah dan dikurangi ), untuk kode warna bisa dilihat disini "Menggunakan Kode warna dalam blogging"
Warna Aqua ; keterangan widget, ganti sesuai kebutuhan.

Selamat mencoba...!

Tuesday, November 1, 2011

Cara mudah membuat slide show

Membuat blog lebih tampil menarik salah satunya dengan menampilkan slide show berupa gambar, cara ini cukup mudah dan cepat, Untuk lebih lengkapnya ikuti langkah berikut.

Login ke akun Blogger kamu.
Dari halaman dashboard
Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content ( dimana saja bisa ) yang tersedia :

Keterangan :

Warna Merah ; alamat URL image yang akan dipasang, silakan ganti dengan punya kamu sendiri.
Warna Kuning ; lebar widget yang ada, sesuaikan dengan kebutuhan.
Warna Aqua ; waktu perputaran tampilan image, silakan ganti sesuai kebutuhan tambah besar makin lambat.

Selamat mencoba...!

Sumber : http://dynamicdrive.com

Saturday, September 10, 2011

Document Text sizer widget

Widget ini adalah sebagai alternatif tambahan untuk variasi pada blog agar lebih menarik dan inovatif.

Fungsi dari widgets ini adalah untuk mempermudah kita untuk mengatur ukuran huruf pada tampilan sesuai dengan kebutuhan lebih besar atau lebih kecil.

Untuk lebih jelasnya silakan lihat uraian dibawah ini :

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, cari kode ]]></b:skin>
Copykan script berikut dan letakkan di bawah kode ]]></b:skin> tersebut.
Tekan Control F atau F3 untuk mencarinya.

<script src='http://hdesign-ideas.googlecode.com/files/textsizer.js'>

</script>

Download external .js file textsizer.js

Langkah Kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini ( letakkan sesuai kebutuhan )

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a href="javascript:ts('body',-1)">- Smaller Font</a href="javascript:ts('body',-1)">

Keterangan :

+ Larger Font : memperbesar font ( bisa diganti sesuai kebutuhan )
- Smaller Font : memperkecil font ( bisa diganti sesuai kebutuhan )

Selamat mencoba..!

Friday, August 26, 2011

Memasang Widget AlQuran Online

Belajar AlQuran Online atau AlQuran Digital sekarang sudah bukan jadi bahan langka lagi bukan cuma lewat komputer bahkan dengan media HandPhone juga sudah tersedia, berikut ini saya menampilkan contoh widget AlQuran Online yang sudah saya pasang seperti dibawah ini.

Anda tinggal memilih surat dan menulis kata kunci untuk terjemahan yang hendak dibaca :

Bagi yang ingin menampilkan widget AlQuran Online silakan copy script dibawah ini :

<iframe frameborder="0" src="http://quran.bacalah.net/content/home/index.php" style="border: 4px inset green; height: 600px; padding: 4px 4px 4px 4px; width: 100%;"></iframe>

Ganti kode border: 4px inset green; height: 600px; width: 100%
secara berurutan 4px = lebar border ; green = kode warna ; 600px = tinggi widget ; 100% = lebar widget, silakan diganti sesuai kebutuhan.

Semoga Bermanfaat...!

Tuesday, June 28, 2011

Memasang Related Post pada Sidebar

Menampilkan menu tambahan pada side bar bisa merupakan alternatif bagi blogger agar pembaca bisa melihat/membaca artikel yang ada secara mudah, Pada umumnya penempatan artikel yang terkait diletakkan dibawah posting/artikel, dengan berbagai modifikasi, ada yang menambahkan icon disamping judul artikel, ada yang membuat related post dengan fungsi scroll dan ada yang membuat related post tampil dengan image, kali ini saya ingin berbagi mengenai cara membuat related post tampil di sidebar seperti di blog ini. caranya tidak sulit dan bahkan mudah untuk dilakukan.

Ikuti langkah Berikut :

Login ke account blogger anda, klik rancangan/layout lalu klik edit HTML
Jangan lupa centang expand widget templates untuk mengedit template secara keseluruhan
masukan kode dibawah ini sebelum tag </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

kemudian cari kode widget seperti dibawah ini :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>

Kemudian tambahkan kode yang warna merah pada kode tersebut :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels& max-results=10"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

Save template
Masuk ke menu Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post ( atau yang lain sesuai kebutuhan ) kemudian copy paste script di bawah ini : //bisa pasang dibagian mana saja//side bar//footer//sesuai kebutuhan//

    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

Simpan dan lihat hasilnya..!
Selamat mencoba ....!

Friday, March 18, 2011

Menampilkan hanya Judul Posting pada item label blog

Untuk mempermudah dan memberikan akses yang nyaman pada pengunjung adalah dengan memanfaatkan widget label yang merupakan standart blogger, mungkin ini sudah tidak asing lagi bagi rekan blogger. Tapi standart blogger yang ada bila kita klik label yang muncul adalah posting pada label beserta dengan image dan uraian singkat dari isi posting.

Sekarang kita akan membuat tampilan yang muncul saat klik label hanya judul posting saja sehingga bisa tampak lebih menarik dan sederhana.

Kita langsung ke TKP saja biar jelas

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode berikut

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if><b:include data='post' name='post'/>

Keterangan :
Ganti kode dengan warna merah dengan kode dibawah ini :
( bila kesulitan silakan mencari kode yang mirip dengan kode diatas )

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Simpan dan lihat hasilnya....!

Note :
untuk menambah tampilan agar lebih menarik berikut langkah yang harus diikuti :
Ganti kode warna biru diatas dengan kode dibawah ini

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #F5D0A9;margin-bottom:2px;background:#A9D0F5;color:#000000;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLABdlLA4YCnKujaQfuTH4m64oRedws0jgcU42eux4tCHT1jwXgXHIVyeO27VjJNdSBx-yucqZQdggpR7iP8MhU5Wq3J3zwpsoDgWWOpdO34AnDarxp7Y2WjtRUw0MybzWLt1ZKYmGKdbI/'/>
<data:post.title/></div></a>

Keterangan :
Kode warna merah : jenis warna border, background dan warna teks ( ubah sesuaikan dengan kebutuhan )
Kode warna biru : image icon didepan judul posting ( ubah sesuai dengan kebutuhan )

Simpan dan lihat hasilnya.
Terima kasih semoga bermanfaat.
Sumber : blog sahabat

Saturday, March 12, 2011

Membuat widgets drop down model buka tutup dengan klik mouse

Membuat blog dengan banyak widgets bisa membuat blog kita menjadi lebih hidup dan menarik, tapi dengan banyaknya widget yang harus ditampilkan kadang kadang membuat blog kita menjadi kelihatan penuh dan tentu saja kurang bagus untuk menarik pembaca/pengunjung.

Script untuk widgets drop down model buka tutup dengan klik mouse merupakan salah satu cara agar blog kita tetap bisa menampilkan widget yang kita inginkan tapi dengan tampilan yang lebih sederhana dan kelihatan profesional. ( atau cara lain dengan mengatur widgets yang tampil dihalaman utama dan sub halaman )

Bagi yang ingin menggunakan cara ini silahkan mengikuti langkah berikut.

Langkah pertama

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

KODE HTML / NON HTML

</div></div></div></div></div>

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran dan warna.

warna merah, Teks yang tampil sebelum di buka ( silakan diganti sesuai keperluan )
warna Orange, Teks yang tampil sesudah di buka ( silakan diganti sesuai keperluan )
warna kuning, kode warna backgroud widgets. ( dapatkan kode warna disini )
warna hijau, kode sript HTML / Non HTML yang ingin ditampilkan
untuk lebar sudah diatur width: 100% --> menyesuaikan dengan lebar kolom secara otomatis.

_______________________________________
Note :
untuk widget yang panjang biar tidak memakan tempat bisa ditambah.kombinasi dengan kode sript untuk kotak dengan scroll

KODE HTML / NON HTML

</div>

</div></div></div></div></div>

Penambahan sript kotak scroll ini akan memunculkan tampilan scroll sehingga tidak banyak memakan tempat bagi yang ingin memasang widget yang cukup panjang.

warna merah = script kotak scroll
warna orange = script widget drop down buka tutup
warna hijau = tinggi kotak scroll yang dibutuhkan, ganti angka 250 sesuai keperluan.
untuk lebar sudah diatur width: auto --> menyesuaikan dengan lebar kolom secara otomatis.
text-align: left ---> posisi huruf/image ( left - center - right ) ganti sesuai keperluan

Hasilnya bisa dilihat pada sample blog

Semoga bermanfaat...!!

Selamat mencoba..!
( biasakan untuk melakukan pra tinjau pada saat melakukan perubahan pada Script HTML sehingga bila terjadi kesalahan tidak merusak kode script yang telah ada )

Friday, February 11, 2011

setting profil pada blogger sebagai media promosi blog

Mempublikasikan blog bukan sekedar blogwalking, follow blog lain dan kasih komentar pada blog / website lain tapi yang perlu adalah identitas yang kita tinggalkan pada media tersebut.

Pada beberapa kasus ada beberapa teman blogger yang mungkin lupa, disengaja atau tidak tahu banyak yang tidak melakukan setting yang komunikatif pada profil blogger mereka, sehingga waktu melakukan follow pada blog lain dan pada saat dilihat profil-nya tidak nampak identitas blog mereka, tentu ini akan sangat merugikan karena dengan kita menampilkan identitas blog kita akan bisa menambah traffick apabila ada yang melihat profil kita lewat follower widget.

untuk melakukan setting profil blogger ikuti cara2 berikut :

Login blogger.com
Masuk ke menu edit Profil
Lihat tampilan berikut ; masuk ke item "select blogs to display", ini adalah item untuk memilih blog mana yang akan kita tampilkan pada profil kita.

Simpan setting dan kembali ke dasboard ----->
lihat tampilan profil kamu untuk memastikan sudah sesuai dengan harapan.
Untuk setting yang lain disesuaikan dengan kebutuhan.
Met mencoba semoga sedikit tulisan ini bisa bermanfaat.

Tuesday, February 1, 2011

Menampilkan daftar isi pada label tertentu

Menampilkan daftar isi sebuah blog merupakan sebuah kebutuhan agar pembaca dapat memperoleh informasi apa yang kita sajikan dengan mudah, tapi dalam beberapa hal ini juga merupakan sebuah dilema karena dengan banyaknya artikel yang kita muat akan membuat loading saat membuka blog cukup lama sehingga bisa mengganggu kenyamanan pengunjung.

Ada beberapa cara untuk menampilkan isi blog diantaranya adalah :

Recent Post ( artikel terbaru )
Top Posting ( artikel populer )
Random Post ( artikel acak )
Membuat Daftar Isi
Related Post, etc

Sekarang kita akan mencoba membahas mengenai daftar isi dengan menampilkan hanya sebagian berdasar label posting.

untuk lebih jelasnya ikuti langkah berikut :

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<h3>Arsitektur</h3>

<h3>Rumah Adat</h3>

Keterangan :

<h3>Arsitektur</h3> = judul label posting yang dimaksud ( sesuai dengan label artikel yang ingin ditampilkan )
http://kibagus-homedesign.blogspot.com/feeds/posts/default/-/Arsitektur = alamat URL dan label artikel yang dimaksud ( ganti dengan alamat blog dan nama label = warna hijau )
Untuk menampilkan lebih dari 3 label tinggal tambahkan kode pada bagian bawah, sesuai dengan kebutuhan.

Tips :

Penggunaan daftar isi jenis ini harus di ikuti dengan pengaturan jenis label yang kita gunakan jangan sampai kita menggunakan label sebuah artikel dengan lebih dari 1 label karena pada tampilan daftar isi akan muncul judul artikel yang sama pada label yang berbeda.
Tampilkan hanya beberapa jenis label yang utama.

Monday, January 31, 2011

Membuat widgets daftar isi otomatis versi 2

Membuat daftar isi blog merupakan hal yang bisa kita lakukan untuk menampilan isi posting dalam blog secara lengkap dan juga bisa memudahkan pembaca untuk mengakses isi blog yang ada.

Sekarang kita akan mencoba membuat daftar isi yang menampilkan isi posting secara keseluruhan yang terbagi dalam label posting secara otomatis dalam bentuk yang berbeda. ini merupakan alternatif membuat daftar isi disamping posting membuat daftar isi otomatis dan Menampilan seluruh posting dalam satu widgets daftar isi otomatis yang dibahas beberapa waktu yang lalu.

Langkah Pertama

Klik Page Element
Klik Add Gadget / pada posting / halaman statik
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

Keterangan :

Kode warna merah :

Alamat url blog kamu.

Simpan dan lihat hasilnya.. CONTOH PENGGUNAAN..!
Semoga bermanfaat..!
Terima kasih..!