IP
Showing posts with label Blogspot. Show all posts
Showing posts with label Blogspot. Show all posts

13.7.12

Membuat Slide Gambar dengan javascript jquery

Kalau kita sedang browsing atau blogwalking ke blog temen temen kita, pasti seneng deh kalo di sambut dengan tampilan web yang menarik dan konten yang gak kalah asik. maka dari itu mari kita rajin rajin menghiasi blog kita agar tetep menarik di mata pengunjung, layaknya seperti rumah manusia, kalau anda bertamu ke rumah yang bagus kan juga betah gitu.
Nah kali ini saya akan berbagi tips untuk membuat gambar sliding atau gambar yang berganti ganti dalam satu tempat, atau tak taulah namanya. pokoknya begitu.

script ini menggunakan JQuery dalam implementasinya, yook langsung praktek aja daripada banyak baca malah puyeng ntar.

Cari kode </head> (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat di atas </head>  letakkan kode script berikut ini:


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');

$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1100, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 6000 );
});
</script>

<!-- Sesuaikan style dengan desain halaman anda -->
<style type="text/css">
#slideshow {
position:relative;
height:200px;
padding:0px;
margin:10px 0 -30px 0;
}

#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 200px;
background-color: #FFF;
padding:0px;
margin:0px;
}

#slideshow DIV.active {
z-index:10;
opacity:1.0;
}

#slideshow DIV.last-active {
z-index:9;
}

#slideshow DIV IMG {
height: 200px;
display: block;
border: 0;
margin-bottom: 0px;
}
</style>

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<div id="slideshow">
<div class="active"><a href='#satu'><img src="http://i1048.photobucket.com/albums/s379/mansengkol/1LZakiyurrahman.jpg"/></a></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/2LaluSudiana.jpg" /></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/3Sadri.jpg" /></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/4FathurrahmanMPd.jpg" /></div>
</div>


Sumber : http://sucipto.net/2012/02/21/membuat-slide-gambar-dengan-javascript-by-sucipto/

2.7.12

Menyembunyikan Kotak - Form Komentar pada Postingan Tertentu Blogspot

Cara Menyembunyikan kotak - form komentar pada postingan tertentu Blogspot atau cara menutup blogspot comment form pada postingan tertentu yang tidak ingin dikomentari pengunjung.

Mungkin Anda pernah menjumpai suatu postingan tertentu di blog yang Anda kunjungi tidak ada fasilitas kotak komentar sebagaimana mestinya. Hal ini dikarenakan adanya alasan tertentu mengapa si admin blog tersebut meniadakan atau menyembunyikan atau menutup kolom komentar (comment form) tersebut. Biasanya, blog yang menutup (close) comment form tersebut dilakukan oleh blog yang menganut paham dofollow dengan tujuan untuk menghindari outbound link yang berlebihan.

Nah, dengan menyembunyikan link tersebut adalah untuk menghindari para blogwalker agar tidak mengklik links tersebut, karena dengan seringnya link tersebut di klik dan kemudian mengantarkan si blogwalker ke halaman blog si komentator itu maka akan terjadi penambahan outbound link, jika inlinks nya lebih banyak mungkin si admin tidak perlu meng close kotak komentar di blognya, tetapi jika inlinks or the inbound links nya sedikit, ini akan mempengaruhi posisi halaman tersebut di SERP maka besar kemungkinan akan menutupnya untuk sementara. 

Baiklah sekarang langsung saja memulai cara menyembunyikan form komentar pada postingan tertentu blogspot. Caranya sangatlah simple, yaitu:
  1. Ketika Anda selesai membuat posting jangan langsung di publish dulu tetapi lihat menu "Post Options" yang ada dibawah post editor blog Anda.
  2. Pada "Reader Comments", pilih "Don't allow, hide existing"
  3. Terbitkan atau Publish deh postingannya, 
Selanjutnya lihat kotak komentar pada postingan tersebut pasti comment form nya sudah tersembunyi, dan bagi yang sudah terlanjur lama di publish serta banyak yang sudah berkomentar, maka yang Anda harus lakukan untuk menyembunyikan kotak komentar beserta komentar-komentar yang ada silakan di edit dan publish ulang. Tapi ingat, sebelum di publish lakukan dulu langkah-langkah diatas. Selesai deh. Mudah kan? 

Sumber : http://diarykudiblog.blogspot.com/2011/03/menyembunyikan-kotak-form-komentar-pada.html

22.6.12

Cara Membuat Slide Show Dua Kolom Gambar dan Slideshow Postdi blogger

Javascript digunakan untuk mendapatkan Informasi dari recent post, seperti Judul, gambar, dan keterangan postingan
Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat slide untuk recent post




Perhatikan slide di atas, akan terlihat dua buah slide. slide yang sebelah kiri menunjukan keterangan postingan dan gambarnya
slide yang sebelah kanan adalah slide navigasi, yang apabila diklik akan mucul keterangan dan gambarnya pada slide sebelah kiri.

Baiklah mari kita mulai.
Klik 'Layout' pada blogger, dan pergi ke "edit HTML", dan kemudian centang tulisan 'Expand Widget Templates' setelah itu cari kode "]]></b:skin>" dalam template kamu,
Lalu kopi-kan style CSS berikut diatas kode tersebut:

<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}


/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
karena effect slide ini berdasarkan padaJquery plugin dinamai Cycle, jadi setelah kode CSS di atas
kita harus memasukan kerangka Jquery dan Cycle plugin.
Kemudian tambahkan kode javascript di bawah ini setelah kode "]]></b:skin>":
Klo yang diatas (Style cssnya) sebelum kode "]]></b:skin>", nah klo yang di bawah ini (Javascript) setelah kode "]]></b:skin>"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>
kamu bisa mendownload kedua java scipt di atas, dan meletakannya di hostingan milik kamu. Kemudian letakan kode berikut setelahnya:
<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });   
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }   
}   
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});

</script>

Terakhir Klik 'Save Template'
Untuk kegiatan di "edit HTML sudah selesai.

sekarang kita mulai kode utama untuk slidenya,
selanjutnya letakan kode HTML berikut setelah javascript di atas:


Nah sekarang coba pergi ke >> Layout >> Page element, kemudian tambahkan 'Add a Gadget' di atas postingan kamu, baru kemudian kopikan kode yang di bawah ini:

<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>
Kode di atas adalah untuk menampilkan slide bagian kiri; yang akan menampilkan gambar,judul, dan keterangan post
dan berikutnya kode untuk menampilkan slide bagian kanan; yang menampilkan judul postingan dengan Thumbnail.
Letakan kode di bawah setelah kode di atas:
<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

Perhatikan kode slide kiri dan slide kanan diatas, kamu akan melihat masing-masing attribute dari <a> untuk kode slide kanan menuju ke attribut <li> ke kode slide sebelsh kiri
contohnya:
disebelah kiri menampilkan:
<li id="main-post-1".....>
dan di sebelah kanan menampilkan:
<a href="#main-post-1".....>
jadi maksudnya, jika kita klik link di slide sebelah kanan, maka slide di sebelah kiri akan menampilkan kontennya.
slide di sebelah kanan mengontrol slide di sebelah kiri.
semua kode dari slide-slide tersebut tidak akan bekerja apabila tidak di inisialisasikan dalam satu variable.

Ok. Terakhir klik save widget, dan cek apakah slidenya sudah jalan.

19.6.12

Slideshow Otomatis Blogger dengan Imageflow 1.3.0


Imageflow 1.3.0 for Blogger
Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri.






Mengedit HTML


 Temukan kode ini:
]]></b:skin>
Salin kode di bawah ini, kemudian letakkan di atasnya:







Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:








Klik Simpan Template.


Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:




Menambahkan Widget


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:






Ganti URL http://ribuan-cara.blogspot.com/ dengan alamat blog Anda lalu simpan.

15.6.12

Cara Mengganti/Mengubah Default Icon Bullet/list di Blog


Sebelum kita membahas panjang lebar mengenai Cara Mengganti/Mengubah Default Icon Bullet/list di Postingan dan side bar Blog, mungkin ada baiknya kita perhatikan pada blog ini, sebelumnya setiap menampilkan bullet pada side bar  maka icon yang ditampilkan adalah gambar seperti ini: " " kemudian saya menggantinya menjadi icon gambar tumbuk batu marawis seperti ini : icon rebana
Adapun Cara Mengganti/Mengubah Default Icon Bullet/list di side bar / widget Blog yang saya lakukan adalah sebagai berikut: 
  1. Upload gambar Anda yang hendak dijadikan icon pengganti, kemudian ambil alamat url gambar tersebut dan simpanlah pada notepad untuk backup.
  2. Langkah berikutnya adalah Login ke akun blogger kita
  3. Pilih menu Template dan jangan lupa backup template terlebih dulu dengan cara klik menu pulihkan/cadangkan kemudian "unduh template" lengkap" dan Simpan template Anda sebagai Backup jika terjadi sesuatu yang tidak diinginkan.
  4. kemudian pilih "Edit HTML" dan "lanjutkan"
  5. Centang / klik  "Expand Template Widget"
  6. Carilah kode yang mirip dengan sidebar li, atau .sidebar ul li yang terdapat pada template ABlog Anda, untuk mempermudah pencarian tekan Ctrl F kemudian pada kotak cari di bawah ketik .sidebar ul li, misalnya diperoleh yang mirip kode berikut:


    .sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
    .sidebar ul li{padding:6px 0 6px 10px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVOmc2X4VkzJIa__k2pgJdCPwiHl-GHkq8fGwCLTjHcsk9XGVF72laVz1OKCQF9JaRMoZJJsvuSS7aXpyhmRJdMFwSCaemjsAT8kzSwPOOtlH81nK79U4Nv3nQhYquWd_wPwt0UvVlXBc/s1600/arrow.png) left 12px no-repeat;border-bottom:1px solid #EEE;}
    .sidebar .widget{margin: 0 0 15px 0;padding:0px;}
    Gantilah alamat url icon yang lama (seperti pada kode yang berwrna merah)dengan cara pastekan kode alamat url icon yang baru yang telah diupload pada langkah no 1 di atas. 
  7. Simpan Template, kemudian lihat hasilnya.
Adapun Cara Mengganti Bullet Icon di side postingan Blog sama persis dengan langkah tersebut diatas, hanya saja bedanya pada langkah ke - 6,  kode yang dicari adalah post li, atau .post ul li yang terdapat pada template Blog Anda.


 

  • Menambahkan css untuk membuat Bullet List
1. Copy kode css dibawah ini melalui template designer dengan cara pergi ke akun blog anda lalu pilih design > template designer > advanced > add css.

membuat image bullet list

cara membuat template css bullet list


  • Cara memakai gambar bullet anda sendiri - Ganti tulisan " Url Gambar disini " dengan url gambar anda yang berukuran 12 x 12.

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('URL-GAMBAR-DISINI');
}

  • Menggunakan gambar yang telah disiapkan - untuk gambar yang sudah saya persiapkan anda hanya perlu langsung saja memasukkan kode url gambarnya  langsung ke dalam tulisan berwarna merah  di atas. lalu men copy paste ke dalam kotak css .
Green Tic Bullet 1 - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQY0FQ2w-0C1znM7awSugP5yEaOwfq19yKOHqgnXFR9QbaZO09oKVWw7Sm9hhrzdkyAQYry7gN1GgliFkHgLYCWG3w7AcrbZ7bwa-dsHCiPa5FaMSuFngnTEmc63fry676X5W7z6Ze4o/s800/bullet-point-green-tick.png

Maroon Arrow Bullet Point - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgleyT-7aBGEpApgjB2FK-TSgrnW1bJQwVlaB9sXmJ8XBrLp-0wVbS1OmSQh21d6ojbHPm9Hf7RccWqsQXb4AKqBIugMiru6DBqqzu1QEuY_6wW8WwfIAeCcW1ZhxDlCTqWV5eCd1fi0dk/s800/bullet-point-image-1.png

bunga tick bullet - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgS1_oyk4bFEH0NGOpxoThAgQoADISURZZTofjvGW1oOm7HyDEQvBfWzIArVoc9hsQ3ghA73ALdxNhF6T68KlsMcCnm7u41vYDoSdqBAKNFzSlnSnwYdQ-vsbOqWQuqI8fJFsE4OHVcE/s800/bullet-point-image-4.jpg

kode dobel css bullet - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozbhpFhxnkruxG8C-QOPikft-Lml4cFxzkRxEIHAPKr0DyPhWHavy-JGxwIOKWYUMBiIcsto5_JbpTANDZP1LIOnZlxePc4ekJwZG6Inz4gs2VZ5xaK1HZpCf10DT8KQUzYKMpq5bTvE/s800/bullet-point-image-5.gif

bullet diamond blue - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DS0QC-xZvYuR7Fq4kOc_kvtCkPfbg0Fa4MaSXkukP3kuO3IOcPY2goVekir9aN9zkGpz4Zlxuci3_-0spKsn9HNV_XYO0eXDJ2pDYqaz8cOPDTHFS5UQyrshATfLls3nh3eTTFppKBY/s800/bullet-point-image-8.png

blue arrow bullet - kode = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VaIuYiwHh8WssK9RUYjnd99zSG7_N2aL6rtFk0AnEur6DL2zaBEt4UnwHtcK_cDPSA2fMinY1Z_irk0qxjRqy4PfE1cneOki_L-PwqxVR-KUFv9a7b9CJHFuq_Md-rWWtXtfG0QiKEs/s800/bullet_list_icon.jpg


Mungkin beberapa gambar bullet yang diatas anda bisa memakainya jika anda menginginkannya , untuk membuat gambar bullet itu muncul maka anda harus menambahkan kode css class="imglist" setelah kode <ul pada kode bullet list pada menu edit html di postingan, berikut ini saya akan memberikan sedikit contoh teksnya:
  • <ul class="imglist">
    <li>Bullet List css</li>
    <li>List Bullet css</li>
    </ul>
Baiklah mungkin untuk pembahasan tentang tema blogger tutorial ini cukup sekian , mungkin jika ada kesulitan anda bisa bertanya dengan meninggalkan komentar pertanyaan anda dibawah ini .

Sumber : http://www.jual-rebanamarawis.com/2012/05/cara-mengganti-icon-bulletlist-di-blog.html
http://vianjb.blogspot.com/2011/07/merubah-bullet-list-menjadi-gambar.html

Cara Membuat Daftar Isi Per Label sesuai Label yang di Pilih

Hai para sobat Blogger. Kali ini saya akan memposting Cara Membuat Daftar Isi Di Sidebar Otomatis Untuk Label Tertentu. Mengertikah sobat akan maksud dari judul di atas? Sobat mungkin sering menemukan artikel mirip seperti ini dengan kata kunci " Membuat daftar isi per label", atau tak jarang juga dengan keyword cara membuat daftai isi sitemap. tapi satu mungkin yang membedahkan trik ini dari cara membuat daftar isi yang lain, yaitu cara ini yang hanya menampilkan  artikel - artikel dalam 1 kategori atau label tertentu. Masih kurang mengerti juga?
Kali ini kita akan coba membuat daftar isi otomatis pada satu kategori tertentu. Untuk lebih jelasnya, coba sobat lihat daftar isi di   sidebar paling atas di blog ini.




Trik seperti ini sebenarnya bisa sobat lakukan secara manual dengan cara memasukkan secara manual link - link artikel sobat , namun seperti biasa, waktu sobat mungkin akan sedikit terkuras. Untunglah jika sobat hanya memiliki sedikit artikel.. bagaimana jika banyak?? wah. bisa pegel ni jarinya.. hehe

Widget ini di lengkapi scroll yang berfungsi menghemat  halaman sobat, jadi jangan perlu takut kalau - kalau tidak muat lamannya karna kebanyakan artikel. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu :

1. Log in ke akun blog sobat.
2. Klik Design --> Lay Out --> Add Gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan dan berikan judul sesuka hati sobat.

<script style="text/javascript">function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}document.write('<li><a href="'+posturl+'">'+posttitle+'</a>'+'<br>')}}</script>
<ul><script style="text/javascript">var numposts=8;var numchars=100;</script></ul>
<ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://ribuan-cara.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>

Keterangan :

  • var numposts=100; menunjukkan jumlah postingan yang akan tampil, bisa diganti dengan jumlah yang sobat mau.
  • <ul> dan diakhiri dengan </ul> : adalah Bullet atau Gambar List , sobat bisa menggantinya menjadi Number List dengan kode <ol> dan diakhiri dengan </ul>
  • Ganti http://blog-ook.blogspot.com dengan Url blog sobat.
  • Ganti Life%20Style dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang tertera, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.
3. Klik simpan.








Contoh lainnya: 


<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<ol>
<script src="http://ribuan-cara.blogspot.com/feeds/posts/default/-/Life%20Style?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Keterangan :


Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label Android dan Antivirus , maka kode yang harus sobat pakai adalah seperti berikut.


<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/label-post.js'></script>
<h3>Android</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Antivirus</h3>
<ol>
<script src="http://kangdansen.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :
  • Sesuaikan tulisan yang berwarna biru dengan label yang sobat gunakan.

Sumber : http://bagas2090.blogspot.com/2012/02/cara-membuat-daftar-isi-di-sidebar.html
http://www.webdadan.com/2012/02/cara-membuat-daftar-isi-per-label.html

14.6.12

Dynamic Views Blogger : Picture Menu


 
Two weeks ago, I showed a simple way to use pictures as your tab menu, instead of using the conventional plain old text. But I used HTML to go about it, and as it is widely known, Blogger does not allow HTML modification in Dynamic View. So here it is, the same tweak adapted to serve Dynamic View users, using CSS alone...

One important note before you start. If you have a drop-down pages menu in your Dynamic Views, this tweak isn't gonna be useful. I'm not saying it can't be done, just that I didn't bother to cover it as I figured having pictures in a drop-down menu is not gonna be that pretty. Also, it won't work on IE8 and earlier versions of IE (will work on IE9).

Note: It goes without saying that you MUST have pages links in your pages gadget before attempting this tutorial. This tutorial replaces your pages gadget from text-based links to picture-based menu. Make sure you can see your pages links (text-based) in your header-bar before attempting this tutorial.

Step 1:


First thing first. Get your pictures ready. I'm not gonna show you how to create/design your buttons. But I'll share a cool website that lets you create image buttons easily. Click the link below, and get your buttons created:

CoolText

Once you've created your image, click on Download Image and save it to your computer.

Step 2:

Next, upload your image somewhere and get its direct link. Click here if you're not sure how to do this.

This is the direct link that I have gotten for my image:


http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg
Get the direct links for all the images that you want to insert into your tab. We're going to insert the addresses of these images into the code in the next step. In this example, I'm going to use 3 images.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


#pages.tabs ul{
margin-left: 5px !important;
}
  
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}
#pages.tabs ul li:nth-child(1) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcQ3YGTuKlxyzWDX2F7Dd9-Bx_6voMFPJ2hWKw0Qi4B5Ll2OSSHcI-czDizHLoyCGMqiq6_WicYOcFu61sHfdswQk8u4DoZk7pIf5uHSM2CCcRirAD6WW6gyat7DztwjtqPqvq00Ooro/s100/google-plus-logo-640.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
#pages.tabs ul li:nth-child(2) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPj35QNzow_hne5m68lUdRPufEypPXTsj1wS03cn7mp9CVZamXUPyH-pnEmssq5DLfCN59kwekxIAyVG1V6AkWAsFQiwe_Z2KONc-IRfR8hqwGhe7GK545InS-RfQsjRKtow1gOCfj0E/s100/twitter_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
  
#pages.tabs ul li:nth-child(3) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2Zu4jnAP4_b2555qA17s0Lv8mcmzeSzMFrelQQ-FhjMMMbY2m8L9jJTHmmlj8D7tlZPTn3uzwNcrJ4DW0w_Il3T2aQVCxKYQGlyUYnJdozBN2bea7e3v__ou37Aw073bsLVKUxhJSEM/s105/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Step 4:

Replace the addresses in lines 13, 22 and 31 above, with those of your images. Also, you may need to change the width of each one of your images to fit your menu better. You can do this by changing the width attribute in lines 16, 23 and 30.

Extra:

If you have more than 4 images, simply add the template below for your additional images. You need to enter the sequence of the picture in line 1. For example, if this is the 4th picture, then replace 'PICTURE_NUMBER' with '4'.


#pages.tabs ul li:nth-child(PICTURE_NUMBER) a{
background: url('IMAGE_ADDRESS') center no-repeat !important;
font-size: 0px;
display: block;
width: 100px !important;
}


Questions and Answer :

Questions
The links are for my current images but it doesn't work, am i skipping something? or when I disable all dynamic options from the bar I was unable to do it.

And is there any way to attach a link to the image I am uploading using this method??
#pages.tabs ul{
margin-left: 5px !important;
}

#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}

#pages.tabs ul li:nth-child(1) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LhXNSrPgOgslGole5-bxedoHoYN2-pVwbds1Eoibn8W-K7M9OLOmgE1xTglWAUoq-CryklBvYDKszQTwEzgW9G4YmYgKyuXizwoDbDyR6mlvJPZecxkWgFHd8uYniSG-35j1Hx5kq0J8/s100/triangle1.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
}


Questions
I want to do exactly what this post suggest (which is using an image instead of text for the page links), but I ONLY want to do it for the LAST page option (and continue using the same text for the other pages).. The site I'm working on is rodelcasio.com, which looks as good as it does BECAUSE OF YOU! You're amazing.. but I want the "Facebook" text to be a simple Facebook square.. how do I do that for JUST the last page?
#pages.tabs ul{
margin-left: 5px !important;
}
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
}


#pages.tabs ul li:nth-child(7) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2Zu4jnAP4_b2555qA17s0Lv8mcmzeSzMFrelQQ-FhjMMMbY2m8L9jJTHmmlj8D7tlZPTn3uzwNcrJ4DW0w_Il3T2aQVCxKYQGlyUYnJdozBN2bea7e3v__ou37Aw073bsLVKUxhJSEM/s85/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Questions
Such a great service you do here! I am using Dynamic Views as a membership directory for my association. I want to be able to have site visitors re-organize all the members' photos two ways:
1. By industry
2. By chapter in my organization

I used labels to organize them by industry. Great. However, if I add more than one label to a post (member page!) then the template randomly chooses to organize them by industry or chapter. That makes for a mess!

How can I get the template to also organize the posts by chapter? It would seem that the Author sort function would be ideal for it, if that could be changed.

If that cannot be done, then I have a work around idea: Creating a separate email address for each chapter and uploading the posts using each chapter as a separate "Author". This alternate solution requires changing "Label" to "Industry" and changing "Author" to "Chapter" in the nav bar. Can this be done in Dynamic Views"?

http://naemembers.blogspot.com 
Using a different email seems to be the only way to categorically group your posts, apart from using labels. And here's how you can rename Label and Author. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#groups li{
font-size: 0px;
}

#groups>li:nth-of-type(1):after{
content: "Recent";
font-size: 14px;
}

#groups>li:nth-of-type(2):after{
content: "Date";
font-size: 14px;
}

#groups>li:nth-of-type(3):after{
content: "Industry";
font-size: 14px;
}

#groups>li:nth-of-type(4):after{
content: "Chapter";
font-size: 14px;
}


Questions
can you help me about the images size is too big in menu bar, how to make it smaller
because if i change the height from 50 px to 20 px the image is like cropped

apit-testbot.blospot.com
In your template designed, go to Advanced - Add CSS - and paste the following code at the END (the bottom) of the box:

#pages.tabs ul li:nth-child(1) a:link {
width: 40px !important;
height: 27px !important;
margin-left: 15px !important;
}
#pages.tabs ul li:nth-child(2) a:link {
background: url("http://3.bp.blogspot.com/-73hyMFagxqU/T8Lmg-PZqtI/AAAAAAAAASg/ViwEet8SoV0/s90/fb.png") no-repeat scroll center center transparent !important;
height: 28px !important;
width: 100px !important;
}
#pages.tabs ul li:nth-child(3) a:link {
background: url("http://4.bp.blogspot.com/-ud8jw1hNapI/T8LmiUT6RQI/AAAAAAAAASs/R1Fif5qKr1A/s80/twi.png") no-repeat scroll center center transparent !important;
height: 28px !important;
width: 77px !important;
}


Questions
 How to hide the date contained in the upper left?
.ribbon{
display: none !important;
}


Sumber : http://www.southernspeakers.net/2011/12/blogger-dynamic-view-picture-menu.html

Dynamic Views Blogger : Remove Search Bar


Should I say more? Maybe I should. Blogger's Dynamic View comes with a little search bar, placed at the top-right corner of your blog page. If you want to remove this search bar, here's how. This is a reply to blog reader Katie.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.





.header-bar #search{
display: none !important;
}
 
Questions and Answer :

Is there a way to place the search bar or a link to search, inside of the menu bar next to the dynamic views or pages?
.header-bar #search{
position: relative;
top: 167px !important;
right: 30px !important;
}




Is there a way to move the search box onto the header bar underneath the blog's title? Check out my site if you don't understand what I mean (hcmctoday.com) and I want to put the search box underneath where it says "HCMC Today"
#header .header-bar{
height: 100px;
}

#header:hover .header-drawer, #header .header-drawer.open{
top: 100px;
}

#header-container{
height: 140px;
}

#main div{
top: 18px;
}

#search{
left: 18px;
top: 55px !important;
}
  



I have a custom template of dynamic view. I want to delete the search box made by the designer but am not sure which one is the code. I have tried to delete the codes but when I preview, the search box is still there. Can you do me a favor by checking the codes? I'm afraid I may delete the wrong one. The designer didn't response to my question. Please help.
I just checked my code, and it is still working. The reason it isn't working in your blog is because you're not using a Dynamic View template in the first place. Try this for your template:

.cse{
display: none !important;
}



Sumber : http://www.southernspeakers.net/2011/10/remove-blogger-dynamic-view-search-bar.html

Dynamic Views Blogger : Remove Loading Gear

Few readers have asked me if there is a way to remove the loading gear from Dynamic View. I couldn't capture the gear's code back then as it was too quick (and still is), but I've managed to find a way to analyze it. So here's how you can get rid of it.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


.ss,.blogger-gear{
display: none;
}



Questions and Answer :


Is there a way to add a different loading image or maybe some text in its place? Maybe just something that says "Loading..."
.ss,.blogger-gear{
background: url('http://1.bp.blogspot.com/-m_BBVAAZ4sM/TYS783cwPmI/AAAAAAAACyE/B1xYSWtkMDc/s100/P1010369_edit.JPG') no-repeat !important;
}





Whether it can change the Loading Gear with another images or gif ?
.blogger-gear {
background-image: url('http://i890.photobucket.com/albums/ac106/0roburos/Transformers/transition.gif') !important;
height: 90px !important;
width: 125px !important;
}





Is there a way to add a different loading image or maybe some text in its place? Maybe just something that says "Loading..."
.ss,.blogger-gear{
background: url('http://1.bp.blogspot.com/-m_BBVAAZ4sM/TYS783cwPmI/AAAAAAAACyE/B1xYSWtkMDc/s100/P1010369_edit.JPG') no-repeat !important;
}





Sumber : http://www.southernspeakers.net/2011/12/remove-loading-gear-from-blogger.html

Dynamic Views Blogger : Disable Certain


So you can set your homepage to show one of the 7 Dynamic Views by default. The problem is, your blog might look good in some other views, and let's just say you don't want your readers to see your blog in some of the other dynamic views. And the black bar at the top of your blog offering your readers to choose their own dynamic view isn't exactly helping your blog to maintain its consistency. In this tutorial, I'm gonna show you how you can shave off some of these other view options from the black bar - so that your readers will be stuck with what you want them to see - unless of course if your readers know the URL trick, or if they use Internet Explorer.

Step 1: 

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}

Step 2: 

Now, time to shave things off. Remove any line from the code given in Step 1, if you want the corresponding Dynamic View to show.

For example, if I want my readers to see only 'Flipcard' and 'Mosaic' dynamic views, I'd remove the lines that say 'Flipcard' and 'Mosaic' from my Template Designer. So the code will look like this:
#Classic.ss, #views ul li:first-child , 

#Magazine.ss, #views ul li:nth-child(3),

#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
There's only one rule to the trick above. Pay Attention. Whatever you remove, make sure the very last option doesn't end with a comma.

If you see the example I've given above, all the views has a comma (,) at the end of the line, except for the last one - 'Timeslide'. If you decide to remove the 'Timeslide' line, make sure you remove the comma from the line above, like this:
#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5)
{
display: none !important;
}
See how the last line above does not end with a comma? I've highlighted this line to make it easier for you to see. Again, just one rule. Make sure the last dynamic view in the list above does not end with a comma. Just remove the comma, if there is any. All other preceding views must end with a comma.

Extra:

To get rid of the whole menu/link of choices, add the following to your CSS:
 
#views{
display: none !important;
}

#header #pages, #header #pages:before{
border-left: 0px !important;
}





Questions and Answer:


Questions
In Flipcard mode, there is a submenu that shows the items: "recent", date", "label" and "author",

I would like to hide or deactivate "author" since everything is by the same author.

I would also like the default setting to be "label" instead of "recent". If it requires deactivating the other items in this submenu that is fine. Thanks so much in advance!!!
#groups li:last-child{
display: none !important;
}



Questions
I'm using the flipcard style for my artwork portfolio, and I'd really like to suppress the post dates from showing on the back of the flip cards. Is that possible?
.card .back .overlay .date{
display: none;
}



Questions
I did manage to have 2 views only thanks to your advice;
however, i cannot get rid of the annoying date & author bits.
any tip?
#groups li:last-child, #groups li:nth-child(2){
display: none !important;
}




Questions
I have been playing with it a lot and though I had it figured out but I can't seem to change the text size of the labels in flipcard mode. You know when you click "labels" and the posts get arranged next to those labels. The text size of those labels is what I am looking to change.

I was able to make the text of the labels bold, but it doesn't listen to my font size command.

I am a teacher and would like to use blogger with dynamic views for 150 student portfolios! I am just hoping we will be able to customize the html more soon!!
.group-label a{
font-size: 30px !important;
}




Questions
I tried this option, then i go to view the blog and all the 'other views' are still showing so i dont what i'm doing wrong. I only want the magazine view, help!!
#Classic.ss, #views ul li:first-child ,
#Flipcard.ss, #views ul li:nth-child(2),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}




Questions
I only have one option that I want to show (mainly Flipcard), so all other options are gone, but the arrow is still there. Any way to get rid of it?
.menu-heading .indicator{
display: none;
}




Questions
Hi, is there a way to change the popup box page color? for example when i click on a post in dynamic flipcard view - a popup box opens with the post - and the background is white. I want to change it to black or grey. Also want to change opacity and make it a little transparent.
#items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') fixed !important;
}

.items.hfeed{
background: transparent !important;
}
For more background changing options in DV, refer to the link below:
Change Blogger's Dynamic View Background




Questions
In Dynamic Views - is there a way to hide the "Send Feedback" link in the right hand bottom corner? Or better still, to make it send feedback to the blog owner instead of google?
.feedback{
display: none;
}




Questions
I see you gave a code for how to remove the "Author" tag from on the top menu bar.
Is there a way I can remove the Date one also?
#groups li:last-child, #groups li:nth-child(2), #groups li:last-child, #groups li:nth-child(4){
display: none !important;
}




Questions
How can I hide the "Powered by" link in the DV top right corner?
#blogger-branding{
font-size: 0px !important;
}




Questions
What I can't seem to find is the CSS for removing the date and/or name in the actual post where it says "Posted 26th May by Crystal" For instance: http://www.imagesclipart.com/2011/05/snowflake-12x12-digital-papers.html at the bottom of the post in the middle. (I'd rather just have an about page.)?
.publish-info{
display: none !important;
}




Questions
Is it possible to change the flipcard colour?
.items .item .card .back {
background: white !important;
}




Questions
How to change Recent and Label in flipcard view into icon image?
Add this to your CSS. Change the addresses to match the addresses of your icon image. Also, change the width attribute accordingly.

#main #controls ul li:nth-child(1){
display: block;
font-size: 0;
background: url("http://lh4.googleusercontent.com/--cem13oEXhA/AAAAAAAAAAI/AAAAAAAADCk/f78l1RyUdNI/s26-c/photo.jpg") no-repeat;
width: 5px;
position: relative;
}

#main #controls ul li:nth-child(2){
display: block;
font-size: 0;
background: url("http://lh4.googleusercontent.com/--cem13oEXhA/AAAAAAAAAAI/AAAAAAAADCk/f78l1RyUdNI/s26-c/photo.jpg") no-repeat;
width: 5px;
position: relative;
}




Questions
How do I completely remove the black bar?
.header div.header-drawer{
display: none;
}
#sidebar, #content{
margin-top: -34px !important;
}




Questions
I want to change the text color for the sidebar post list, but I can't find a way, could you teach me this and how to make the sidebar background transparent (like having the selected post and the body opaque, but the whole sidebar transparent)?
.comments{
margin-top: 0px !important;
}
.sidebar .item{
background: transparent;
}




Questions
I want to remove the "by [author]" at the bottom of each post, but want to keep the date part of it... I found a way that removes it all, but not sure if this can be manipulated to just one part of it. (Works in IE as well, which is nice)
.publish-info{
font-size: 0px;
}

abbr.time{
font-size: 14px !important;
}

abbr.time:before{
content: "Posted ";
font-size: 14px !important;
}




Questions
How do I hide the label words from being viewed at the bottom of each post?
.labels{
display: none !important;
}




Questions
How can I remove the Subscribe, Author, Blog Arciev popout link?
#gadget-dock{
display: none !important;
}





Sumber : http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

il

il
Related Posts Plugin for WordPress, Blogger...