Home Design and Ideas

Berikut kita ada buat tampilan daftar isi dengan versi/tampilan yang berbeda pada prinsipnya sama dengan daftar isi pada posting Daftar Isi  sebelumnya, cuma beda tampilan agar lebih variatif dan fresh. Membuat Daftar Isi atau SiteMap yang menampilkan isi Blog/Website bisa menjadi salah satu alternatif yang bisa dipakai . Caranya cukup mudah dan sederhana. Ikuti Langkah Berikut : Masuk ke Menu utama blogger Klik Page (halaman baru) atau Post (Posting baru) Klik  Add Newpage atau NewPost Buatlah Posting baru dengan judul " Daftar Isi " Klik pada tampilan  " HTML View" Copy and paste kode dibawah ini     <style>     p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}     a.post-titles {}     ol li{list-style-type:decimal;line-height:25px;}     </style><br />     <script>     //<![CDATA[     var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){fu

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. Membuat Daftar Isi atau SiteMap yang menampilkan isi Blog/Website bisa menjadi salah satu alternatif yang bisa dipakai . Caranya cukup mudah dan sederhana. Ikuti Langkah Berikut : Masuk ke Menu utama blogger Klik Page (halaman baru) atau Post (Posting baru) Klik  Add Newpage atau NewPost Buatlah Posting baru dengan judul " Daftar Isi " Klik pada tampilan  " HTML View" Copy and paste kode dibawah ini <div id="table-outer"><table><tbody> <tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr> <

Menampilkan isi blog merupakan cara agar pembaca/pengunjung bisa mendapat informasi, selain juga untuk mempercantik blog kita. Caranya cukup mudah dan sederhana.  ( bisa dipasang di sidebar / header / footer ) Ikuti Langkah Berikut : Klik Page Element Klik Add Gadget   Klik plus button (+) for HTML/JavaScript. (img) Copy and paste kode dibawah ini <style> #random-posts img{border-radius: 50px;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: 12px;text-transform:capitalize; padding: 0px auto 5px;} #random-posts a:hover {text-decoration: none;} .rp-snippet {font-size: 10px;background: none; padding: 5px; margin-right: 8px;} #random-posts span {} #random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; paddi

Breadcrumbs   Merupakan sebuah navigasi label yang biasanya terletak diatas posting sebuah blog yang berfungsi untuk memberikan informasi peta atau navigasi label posting yang dibaca oleh para pembaca di blog, sehingga akan lebih memudahkan  pembaca dalam mencari artikel yang berhubungan dengan label artikel yang sedang dia baca. Contoh navigasi label atau breadcrumb diatas posting biasanya akan berbentuk link seperti ini: Home > label > judul posting  Anda dapat melihat contoh gambarnya di gambar pertama posting ini. Karena di blogger.com belum menyediakan fasilitas ini,maka kali ini saya akan share caranya.Caranya mudah, kita hanya perlu menambahkan beberapa kode di template blog. Berikut cara membuat navigasi label (breadcrumb) diatas judul posting blog Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda dengan menggunakan akun blogger yang anda miliki. Setelah masuk ke halaman dashboard, silahkan anda klik nama blo

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"><!-- .recent_post_content{width:100%;} .recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;} .recent_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;} .recent_post_content_item table, .recent_post_content_item tr, .recent_post_content_item td {vertical-align: middle;} .recent_post_content_item table {

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 : <script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script> <table width="100%"> <tr> <td onclick="bgChan

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 : <script language="JavaScript1.2"> var variableslide=new Array() //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] variableslide[0]=[' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHM6adUqAe5ux5N9BbnQ44TDz0-amtkg0cPzu6FBY_Lh88gl6UvoRkrS85c_eAirdhpPH3c5O-kAf2lNg-4NRD_StQanH4Ig2aEo9wU65hIx-7ZCIwnhks03OS7zsaG3AXAwa9mILDqcY/s128/header_u15.png ', '', ''] variableslide[1]=[' https://blogger.googleuser

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)"

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

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 re

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 <!-- posts --> <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-heade

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 untu

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 bis