Panduan Bangunan Rumah: Tips trik blogger

Showing posts with label Tips trik blogger. Show all posts

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 )

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, 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/AVvXsEhptREDHz_5BZrSnAcAbDBUxOsuNHrcKI_vnDyqhvN00oRssxvuM5-fSNrNQIpvVFVElxaTuSdzXiLSQZJNcUToakMi4bfLOkOCICbB43RMzRWLUiySrRyKD1eksP6DRFUE1hQ2o7VAPWo/'/>
<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 Daftar Isi Otomatis versi 1

Salah satu bagian yang cukup penting dalam sebuah artikel adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari artikel secara global tanpa harus membaca ( sudah tentu hanya judul saja ).

Pada website juga seperti itu, dengan adanya daftar isi atau minimal label posting, kita bisa membuat pengunjung / pembaca untuk tertarik berlama - lama.

Nah pada kesempatan ini kita coba membuat daftar isi yang otomatis, karena kita tidak perlu mengedit ulang wigdget yang ada. ( kalau dengan cara biasa yaitu membuat widget link akan sangat menyita waktu, apalagi bila posting kita sudah cukup banyak. Teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta dan blognya kang rahman yang sudah dimodifikasi dan sekarang aku coba untuk melakukan sedikit modifikasi agar tampil lebih menarik.

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 ]]></b:skin>
Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.
Tekan Control F atau F3 untuk mencarinya.

#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background: transparent;}

Keterangan :

Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.

Simpan Template.

Langkah Kedua

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

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>

<br />

</div>

Keterangan :

Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.
Ganti kode >LIHAT DAFTAR ISI< dengan kata kata kamu sendiri.
Ganti kode http://kibagus-homedesign.blogspot.com/feeds/posts/default dengan URL kamu sendiri.
Kamu juga bisa merubah widget diatas menjadi 2 widget dengan tempat yang berbeda, kode pertama adalah LINK LIHAT DAFTAR ISI.

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>

Kode kedua adalah Isi dari daftar isi yang akan muncul pada saat kamu klik pada link "LIHAT DAFTAR ISI"

___________________________________________
Ok.. mudah kan..!
Selamat mencoba..! CONTOH PENGGUNAAN..!

Semoga bermanfaat....!!

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
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://sites.google.com/site/kibagusnet/x-design/Daftarisi-hdx.js">

</script>
<script src="http://blog kamu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500">

</script></div>

Keterangan :

Kode Warna lime :

kode transparent menunjukan warna netral ( menggunakan warna dasar blog ) ganti dengan kode warna sesuai kebutuhan, Url(#) kode # berarti tidak menggunakan background image, bila ingin menggunakan image ganti dengan alamat URL image yang akan dipasang
width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan )

Kode warna merah :

Alamat feed url blog kamu.

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

Membuat widgets daftar isi otomatis versi 3

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. ini merupakan alternatif membuat daftar isi disamping posting membuat daftar isi otomatis yang dibahas beberapa waktu yang lalu.

Langkah Pertama

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

<div style="overflow:auto;
padding-left:5px;
border:1px solid white;

width:95%;

height:400px;

background:transparent url(#) no-repeat ;">

home_page="BLOK KAMU.blogspot.com";

explanpost="new";

</script>
<ul><script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/sitemap-np.js"></script></ul>
</div>

Keterangan :

Kode Warna merah :

width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan )

Kode Warna orange :

Kode warna kuning :

Alamat blog kamu

Kode warna hijau :

untuk menampilkan kode bagi posting yang baru ( terbaru ), ganti sesuai selera, "baru","terbaru", dll.

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

Monday, September 27, 2010

Membuat Recent Post type teks berjalan tetap diatas atau dibawah screen

Membuat blog lebih informatif merupakan hal yang bisa dilakukan agar pembaca bisa memperoleh informasi/artikel secara mudah, Recent Post / Artikel terbaru adalah salah satu alternatif dimana kamu bisa menghemat tempat dengan isi yang sama.

Untuk lebih lengkapnya ikuti langkah berikut.

Langkah Pertama

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

Simpanlah hasil editing tersebut.

Langkah Kedua

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 :

var hn_jumlah_post = 20;

var hn_warna_latar = "#000000";

var hn_warna_garis = "#084B8A";

var hn_posisi = "bottom";

var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>

<script src="http://hdesign-ideas.googlecode.com/files/Hdi-Headline.js">
</script>

Keterangan :
Warna merah :

http://ALAMAT BLOG.blogspot.com/ = > ganti alamat blog yang dimaksud
var hn_jumlah_post = 20 = > ganti jumlah posting yang ingin ditampilkan
var hn_warna_latar = "#000000" = > warna background teks sesuai kebutuhan
var hn_warna_garis = "#084B8A" = > warna border teks sesuasi kebutuhan
var hn_posisi = "bottom" = posisi widget ( UP dan BOTTOM, pilih salah satu )

Untuk mengganti kode warna bisa kamu lihat disini KODE WARNA atau Menggunakan kode warna dalam blogging

Sunday, June 20, 2010

Membuat Blockquote dengan berbagai variasi pada blogger

Mempercantik tulisan pada posting merupakan cara yang paling baik untuk menambah traffick, karena pada prinsipnya sebagus apapun blog yang kita design yang menjadi penentu adakah ISI POSTING

Mempergunakan fasilitas blockquote adalah salah satu alternatif yang bisa dipakai untuk melakukan penekanan atau menunjukan kutipan pada artikel yang kita tulis.
Blockquote sebenarnnya sudah ada pada blogger ( lihat tanda kutip " pada menu posting baru ) sesuai dengan standart template masing masing blog.

Untuk melakukan perubahan pada blockquote standart bisa dilakukan dengan cara :

Modifikasi blockquote standart template yang ada

Untuk lebih jelasnya silakan lihat uraian berikut ini :

CARA PERTAMA, Modifikasi blockquote standart template yang ada

Login Blogger.com
Masuk ke Setting - Design - Edit HTML
Cari kode

.post blockquote
......... dst
}
.post blockquote:hover
......... dst
}
.post blockquote p
......... dst
}

( ini adalah kode standart blockquote bisa dilakukan perubahan sesuai kebutuhan )

Ganti dengan kode diatas dengan kode berikut :

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}

.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

Simpan dan lihat hasilnya. ( hasilnya sama dengan di artikel ini )

Silakan dirubah sesuai dengan template yang ada ( kode warna, background image, border, margin, padding ) sesuai kebutuhan.

terima kasih..
semoga bermanfaat...!

Sunday, June 13, 2010

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..!

Thursday, May 27, 2010

Variasi Single Menu horizontal type automatically rotated and displayed

Jenis Menu horizontal ini sebenarnya bisa juga dikatakan sebagai teks bar ( pesan singkat ) yang akan muncul secara otomatis dengan navigasi kiri dan kanan.Variasi menu / teks bar ini bisa dipakai untuk menampilkan head line dari website/blog dengan berbagai variasi teks dan background.

Lihat contoh - sample blog -

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

"Analisa mengenai dampak lingkungan",

"Animasi",

"Dunia Arsitektur modern dan tradisional",

"Award",

"Kumpulan blog tutorial",

"Kumpulan blogger trick",

"Gallery Denah rumah",

"Dinamik widgets untuk blogger",

"Free download Mp3",

"Duit On line",

"Konsep green house",

"Info sekilas",

"Informasi dunia konstruksi",

"Konstruksi kayu",

"Menu navigasi untuk blogger",

"Monetize Blog",

"Informasi PTC gratis",

"Rencana Anggaran Biaya",

"Rumah adat sebagai kekayaan budaya dan alternatif design",

"Meningkatkan Pagerank dan traffic -S E O-",

"Perkembangan dunia teknis sipil",

"Variasi Posting untuk blogger",

"Variasi widgets untuk blogger" ); // No comma after last ticker msg

var msg_url = new Array(

"http://kibagus-homedesign.blogspot.com/search/label/Amdal",

"http://kibagus-homedesign.blogspot.com/search/label/Animasi",

"http://kibagus-homedesign.blogspot.com/search/label/Arsitektur",

"http://kibagus-homedesign.blogspot.com/search/label/Award",

"http://kibagus-homedesign.blogspot.com/search/label/Blog%20Tutorial",

"http://kibagus-homedesign.blogspot.com/search/label/Blogger%20Trick",

"http://kibagus-homedesign.blogspot.com/search/label/Denah%20Rumah",

"http://kibagus-homedesign.blogspot.com/search/label/Dinamik%20widgets",

"http://kibagus-homedesign.blogspot.com/search/label/Download%20Mp3",

"http://kibagus-homedesign.blogspot.com/search/label/Duit%20On%20line",

"http://kibagus-homedesign.blogspot.com/search/label/Green%20house",

"http://kibagus-homedesign.blogspot.com/search/label/Info%20sekilas",

"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi",

"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi%20kayu",

"http://kibagus-homedesign.blogspot.com/search/label/Menu%20navigasi",

"http://kibagus-homedesign.blogspot.com/search/label/Monetize%20Blog",

"http://kibagus-homedesign.blogspot.com/search/label/PTC",

"http://kibagus-homedesign.blogspot.com/search/label/rab",

"http://kibagus-homedesign.blogspot.com/search/label/Rumah%20adat",

"http://kibagus-homedesign.blogspot.com/search/label/S%20E%20O",

"http://kibagus-homedesign.blogspot.com/search/label/Sipil",

"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20Posting",

"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20widgets" ); // No comma after last ticker url

var barwidth='500px' //Enter main bar width in px or %

var setdelay=2000 //Enter delay between msgs, in mili-seconds

var mouseover_color='#084B8A' //Specify highlight color

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

warna merah, variasi huruf, warna dan border pada navigasi scroll kiri dan kanan ( ubah jenis font, kode warna dan tebal border silakan diganti sesuai keperluan )
var barwidth='500px', lebar menu utama ( silakan diganti sesuai keperluan )
var setdelay=2000 , kecepatan perputaran/pergantian teks/menu ( makin besar makin lambat - silakan diganti sesuai keperluan )
var mouseover_color='#088A85' , kode warna hover menu/teks ( silakan diganti sesuai keperluan )
value="Previous" dan value="next" , Navigasi scroll arah kiri - kanan ( bisa diganti sesuai kebutuhan )
width:80px; height:50px, lebar dan tinggi Navigasi scroll arah kiri - kanan
Warna hijau , nama menu.teks yang dimaksud dan alamat URL menu teks secara berurutan.
Warna kuning, warna huruf, background dan border menu utama
height:30px, tinggi menu utama

Note :
untuk lebar menu bisa menyesuaikan sesuai dengan lebar kolom template ( ubah lebar scroll kiri kanan dan menu/teks utama sesuai lebar kolom template )

Terima kasih..!
semoga bermanfaat .. !