Cara Menampilkan Widget Hanya Di Halaman Awal

Cara Menampilkan Widget Hanya Di Halaman Awal

Udah lama saya tidak memposting di blog saya yang satu ini sobat, Kali ini saya akan mempostingkan postingan yang sangat menarik tentang bagaimana menampilakan Widget yang hanya tampil di awal blog. Pasti menarik bukan, Tampilan ini maksutnya akan menampilakan widget yang akan muncul di awal blog sobat, kelebihan dari tips ini adalah mempermudah akses dari pengunjung dan juga akan mempercepat akses pengunjung blog.
Secara default, setiap widget yang kita tambahkan akan terlihat disemua halaman, baik halaman awal maupun halaman artikel dan halaman statis. Nah bagaimana cara menampilkan widget hanya di halaman awal saja? Berikut tutorialnya.

1.Login ke Blogger.com
2.Masuk ke tab "Design" (Tata Letak/Rancangan)
3.Pilih "Edit HTML" dan centang "Expand Widget Templates"
4.Cari widget yang akan diedit (F3 / Ctrl + F), jika widget tersebut diberi judul anda akan lebih mudah menemukannya dengan hanya mengetikkan judul widget tersebut. Misalnya widget feedjit diberi judul "Buku Tamu", maka tinggal ketikkan judul tersebut.
5.Jika sudah ketemu, tambahkan kode warna merah seperti berikut :

<b:widget id="HTML1" locked="false" title="" type="statistik">
<b:includable id="main">
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content>
></data:content>
</div>
<b:include name="quickedit">
</b:if>
</b:includable>
</b:widget>

Dengan hanya menampilkan widget di halaman awal saja, halaman artikel anda akan terbebas dari widget yang tidak perlu sehingga loading halaman menjadi lebih cepat. Semoga membantu.

Read More..

Cara Buat Widget Share Melayang di Sisi Blog 100% Working

Cara Buat Widget Share Melayang di Sisi Blog 100% Working

Cara Buat Widget Share Melayang di Sisi Blog

Kali ini setyablogger akan mengeshare tentang bagaimana cara membuat widget share melayang, widget ini sangat populer karena memiliki banyak kelebihan yang menarik, karena dapat mengetahui jumlah like page di postingan sobat, dan juga akan mempercantik penampilan blogger sobat dengan widget ini, baiklah mari kita ikuti cara memasangnya :

1. Login ke blogger.com,

2. Lalu buka => Tata Letak => Elemen Halaman => Tambah Gadget => HTML/Javascript

3. Lalu copy kan kode  berikut kedalamnya :

<style type="text/css">

*{margin:0;padding:0;}

* html #z33sHare{

position: absolute;

}

#z33sHare{

right:0%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;

position:fixed;

bottom: 40%;

}

#z33sHare div{

padding:6px 6px 6px 5px;

}

#stw{

margin-left:-2px;

}

#sfs{

margin-left:-5px;

}

</style>

<div id="z33sHare">

<div id="ssl-box">

<div id="stw">

<div><a name="Widget" type="Widget" href="http://setyabloggerslalu.blogspot.com/">Share</a><script src="Widget" type="text/javascript">

</script></div>

<!-- Place this tag where you want the +1 button to render -->

<g:plusone size="tall"></g:plusone>

<!-- Place this render call where appropriate -->

<script type="text/javascript">

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

<!-- Tambah code lainnya -->

<div>

<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

<a class="DiggThisButton DiggMedium"></a>

</div>

</div>

<div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script></div>

<div style="clear:both;"></div></div>

Catatan :

# Yang berwarna Merah silahkan tambahkan code Widget share lainnya jika sobat punya. Jika tidak gunakan yang sudah tersedia diatas saja. Widget diatas sudah terdapat tombol Facebook share, Twitter, Google+, dan Digg.

# Yang berwarna Hijau itu merupakan posisi widget, sobat bisa gunakan right = posisi kanan dan left = untuk posisi kiri.

# Dan untuk yang berwarna Biru yaitu jarak (dalam %) dari bawah, sobat bisa ganti sesuai dengan ukuran yang sobat mau.

4. Sekarang SAVE. Lalu refresh bolag sobat dan akan terlihat hasilnya. Jika masih bingung silahkan bertanya.

Read More..

Cara Membuat Random Post di Blog

Cara Membuat Random Post di Blog

berjumpa lagi sahabat blogger, kali ini saya akan memposting tentang cara membuat Random post, fungsi dan kelebihan Random post sendiri yaitu akan menampilkan postingan sobat yang lama yang berguna untuk mendaur ulang postingan lama, Karena kebanyakan postingan yang lama biasanya jarak di buka, jika jarang di buka maka postingan itu akan menjadi sampah / tidak berguna.

Untuk itu ayo sobat buruan pakai Widget Random Post yang berguna untuk menampilkan postingan lama menjadi baru, maka otomatis semua pistingan akan berjalan dengan lancar dan akan membantu memperbanyak jumlah pengunjung sobat, caranya sangat mudah, Baiklah saya akan memberitahu caranya ikuti langkah berikut ini sob :

 

Random Post ini akan Menampilkan Semua Post yang terdapat di blog sobat secara Random atau Acak Dari Semua Posts.

Oke berikut ini adalah cara nya .

1. Masuk Ke akun Blogger.com sobat sendiri

2. Masuk ke Tata Letak > Tambahkan Gadget > HTML/Javascript

 

3. Masukan Kode dibawah ini 

 <script type="text/javascript">

var randarray = new Array();var l=0;var flag;
var numofpost=8;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

 4. Lalu Klik SIMPAN

CATATAN : 
Angka 8 adalah  Banyaknya Post yang ditampilkan di dalam Random Post tersebut .

Read More..

Cara Membuat Link Mengeluarkan Cahaya Kuning

Cara Membuat Link Mengeluarkan Cahaya Kuning

Pagi sahabat blogger, kali ini setyablogger akan berbagi tips cara membuat effect link blog sobat menyela seperti lampu, kali ini saya akan memberi effect lampu berwarna kuning untuk blog sobat jika Mouse di arahkan ke link sobat, ini akan mempercantik penampilan blog sobat, tanpa basah basih mari sobat ikuti langkah berikut ini sob :

1. Login Ke Blog Kamu.
2. Pilih Rancangan lalu Pilih EDIT HTML,
3. Jangan Lupa Centang EXPAND WIDGET TEMPLATE.
4. Lalu Cari Kode a:hover{
5. Jika sudah ketemu Copy Kode dibawah ini tepat disamping kode a:hover{ untuk mempermudah pencarian maka TEKAN Ctrl + F

Cara Membuat Link Mengeluarkan Cahaya Kuning

text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;

Contoh  : Asal Kode nya seperti ini a:hover{
Maka Kode nya jadi seperti ini.

a:hover{text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10

 Tips selanjutnya :

Cara Membuat Link Blog Mengeluarkan Cahaya Biru Ketika di Sorot Mouse

Selanjutnya saya pengen share Cara membuat link blog mengeluarkan cahaya biru ketika di sorot mouse..

Langsung aja ikutin caranya:
1. Masuk ke akun Blogger.com

2. Pilih Rancangan lalu Pilih EDIT HTML,
3. Jangan Lupa Centang EXPAND WIDGET TEMPLATE.

3. cari kode a:hover {

    lalu sisipkan kode di bawah:

text-shadow:0 0 5px #009ACD;

Contoh  : Asal Kode nya seperti ini a:hover{
Maka Kode nya jadi seperti ini.

a:hover{text-shadow:0 0 5px #009ACD;

4. Simpan template..

Lihat Hasilnya sob,

 SEMOGA BERMANFAAT

Read More..

8 Cara Membuat Blog Anda Jadi Terkenal

Membuat blog menjadi terkenal/populer dan banyak pengunjungnya tentunya merupakan keinginan semua blogger. Diawal membangun blog ini saya pun memiliki angan-angan yang sama yaitu membuat blog saya jadi populer dan terkenal yang dikunjungi ribuan orang per hari. Namun tentu saja untuk mencapai sebuah tujuan atau keinginan kita perlu berusaha dulu karena tidak ada sebuah kesuksesan yang sifatnya instant langsung didapat dengan begitu cepat. Paling tidak sobat harus punya trik-trik yang jitu bagaimana cara mempopulerkan blog anda ke orang lain, sehingga blog anda pun nantinya akan menjadi blog yang terkenal dan ramai dikunjungi. Berdo'a saja semoga suatu hari nanti blog anda akan mendapatkan predikat The Most Popular Blog dari situs-situs terkenal.

8 Rahasia  Mempopulerkan Blog Anda :

1.   Tuliskan url blog anda di t-shirt dan pakailah t-shirt tersebut sesering mungkin. Paling tidak 5 kali dalam seminggu. Cucilah t-shirt kalau memang sudah bau.

2.   Jika anda baru punya anak, maka namailah anak anda dengan url blog anda. Untuk itu hati-hatilah bagi yang punya blog penjahatcinta.com dan berbahagialah jika nama blog anda ternyata pangerancinta.com atau dewicinta.com karena nama itu sedikit lebih pantas..!!

3.   Jika ada orang yang menanyakan alamat anda, berikanlah alamat url blog anda.

4.  Bukalah halaman blog anda di semua komputer ditempat kerja anda kemudian bersikaplah seolah-olah anda tidak tahu apa-apa.

5.     Ancam atau sogoklah teman anda agar mau bergabung di halaman blog anda.

6.     Buatlah coretan-coretan url blog anda di tembok toilet-toilet umum setiap kali anda pipis.

7.     Untuk membuktikan keseriusan anda, buatlah tatto nama blog anda di bagian tangan anda.

8.  Seolah-olah anda sedang terkejut, sebutkanlah nama blog anda secara tiba-tiba di kelas atau saat rapat.

Semoga saja tidak ada diantara sobat blogger yang mau mempraktekkan tips 8 Cara Membuat Blog Jadi Terkenal/Populer seperti diatas. Karena kalau ada yang benar-benar mempraktekkannya saya tidak menjamin keselamatan anda dan saya pun tidak mau bertanggung jawab..kabuuuurrr..!!

Read More..

Cara Membuat Widget Label Dua Kolom

Mungkin bagi para Blogger yang sudah tingkat Master trik ini biasa, tapi bagi saya yang masih awam trik ini sangat bagus. Selain unik trik ini juga bisa memperpendek widget Label yang bisasanya memanjang kebawah dengan trik ini widget label menjadi setengah dari panjang awalnya "karena dibagi dua".

Screenshoot :

Widget Label Dua Kolom

Bagaimana, keren nggak tuh? Jika sobat ingin menerapkannya diblog sobat silahkan ikuti langkah-langkah berikut :

1. Login ke Blogger
2. Masuk menu Template
3. Klik Edit HTML
4. Lalu pilih Lanjutkan
5. Kemudian letakan kode CSS berikut tepat diatas kode ]]></b:skin> atau </style>

.label-size {
position: relative;
float:left
}
.label-size::before {
content: ' ';width: 0;
height: 0;top: 2px;
position: absolute;
right: -4px;
border: 14px solid transparent;
border-left-color: #DDD
}
.label-size a{
float: left;
font-size: 14px;
padding: 5px 10px;
background: white;
margin: 3px 24px 15px 1px;
position: relative;
width:108px;
outline: 1px solid #DDD;
color: #222
}
.label-size a::before {
content: ' ';
width: 0;
height: 0;
top: 0;
position: absolute;
right: -26px;
border: 13px solid transparent;
border-left-color: white
}
.label-size a::after {
content: ' ';
position: absolute;
background: #F6F6F6;
border-radius: 10px;
height: 10px;
right: -1px;top: 7px;
width: 10px;
border: 1px solid #DDD
}
.label-size a:hover {
color:#5D73B5; !important
}

Catatan :

Silahkan sesuaikan kode yang berwarna Biru dengan lebar sidebar sobat.

6. Selanjutnya klik Edit Tata Letak > klik Tambah Gadget > pilih Label > lalu setting seperti gambar di bawah ini :

7. Terakhir klik simpan dan lihat hasilnya.

Read More..

Cara Membuat Read More Otomatis Di Blog

Cara Membuat Read More Otomatis Di Blog - Mungkin rekan-rekan blogger Dapur Tutorial Blogspot masih ada yang bingung mengenai Apa Itu Read More?. Didalam tutorial Master Chef sebelumnya sudah pernah membahas Cara Membuat Read More Di Blog namun Read More yang dibuat masih secara manual, bedanya dengan Read More yang akan kita bahas kali ini adalah Read More Otomatis.

Sebelum jauh membahas Read More kita jawab terlebih dahulu mengenai Apa itu Read Moro ?. Read More atau dalam bahasa tercinta bahasa Indonesia adalah "Baca Selengkapnya" Tentu sudah sering sobat jumapi di blog-blog yang lain. Nah dari sini kita bisa memahami mengenai Read More yaitu penggelan kalimat dalam  suatu postingan. banyak dari para blogger menggunakan fasilitas Read More dengan maksut untuk menghemat tempat pada halaman blognya. dilihat dari segi estetika atau keindahan, blog yang menggunakan Read More terlihat lebih rapi dan simple dibanding dengan blog yang tidak menggunakan Read More.

Berikut Resep Cara Membuat Read More Otomatis Di Blog :

1. Login Kehalaman Blogger
2. Dari bagian dashbord blog Pilih Template --> Edit HTML --> Proses atau Lanjutkan
3. Jangan lupa centang Expand Widget Templates
4. Sekarang Cari Kode </head> (Gunakan Tombol CRTL + F dan F3 untuk mempermudah pencarian kode)
5. Jika sudah ketemu Copy dan letakan diatas kode </head> tersebut.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://dapurtutorial.googlecode.com/files/ReadMoreScript.js' type='text/javascript'/>

6. Tahap selanjutnya cari lagi salah satu kode berikut : <data:post.body/> atau <p><data:post.body/></p>
7. Ganti Kode yang anda temukan diatas dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

8. Sekaran klik tombol Simpan Template
9. Selesai dan lihat Hasilnya

Read More..

Cara Menghilangkan Gambar Obeng Pada blog

Cara Menghilangkan Gambar Obeng Pada blog

Ok sob, buat para blogger pemula saya akan membantu mengedit blog kalian sob, kalii ini saya akan memberi tutorial cara menghilangkan tanda obeng yang mungkin sangat menggangu,caranya mudah sob kalian bisa lihat tutorialnya di bawah ini.

Silahkan masuk ke akun blogger kalian

Klik Tata Letak dan pilih Edit HTML.

Cari kode ]]></b:skin> dengan menekan Control F.

Jika sudah ketemu, kopikan kode berikut :

.quickedit { display:none; }

Letakkan kode tersebut di atas ]]></b:skin>

Kemudian Klik pertinjau, klo sudah hilang bisa di kalian klik simpan.

Terimah Kasih

Semoga Bermanfaat

Read More..

Membuat Link Berkedip Saat Disentuh Cursor 

Buat Sobat blogger saya akan membagi tips blog, tips kalii ini adalah membuat tombol link menjadi berkedip-kedip saat cursor mengarahkan link tersebut, membuat link berkedip jika di sentuh cursor merupakan salah satu untuk mempercantik blog, Karena biasanya para blogger terkenal blognya selalu terpasang link berkedip sekarang saya akan memberi tutorialnya sobat..

• Login ke Blogger, Klik Template > Edit HTML.
• Beri tanda centang pada Expand Template Widget.

• Cari kode :
  a:hover {
  color:#2700;
  text-decoration:underline;
  } 
   
•  Jika belu ketemu sob, cari Code yang ini saja a:hover {.
• Supaya medah dalam pencarian maka Tekan Ctrl + F
• Kalau sudah Ketemu pasti di bawahnya ada tulisan seperti ini :text-decoration:underline;
  }  
• Jika sudah ketemu tulisan  underline, maka kalian ganti dengan tulisan blink.
• Supaya tidak terjadi hal yang tidak di inginkan maka klik pertinjau dulu sob.
• Kalau berhasil klik SIMPAN. 

Sekarang arahkan cursor ke link sobat dan lihat apa yang terjadi.

Semoga tutorial ini bisa membantu sobat yang ingin Membuat Link Berkedip Saat Disentuh Cursor. 

Terimah Kasih

Semoga Bermanfaat

Read More..

Cara Menambah 3 Kolom Footer Di Blogger

Kalii ini saya akan memberi cara supaya blog sobat menjadi 3 colomb label,caranya mudah tinggal kalian ikuti langkah berikut ini dengan seksama pasti berasil, e colomb ini akan memperSImple penampilan blog sobat agar menjadi lebih menarik untuk di kunjungi, tanpa basah basi lagii,ikuti tutorial berikut ini :

1. Login ke Blogger.com  – > Pilih Template
2. Sebaiknya lakukan dulu backup template dengan klik Backup / Restore atau Cadangkan / Pulihkan, lalu klik download full template.
3. Klik tanda x untuk kembali ke menu template
4. Kemudian pilih Edit HTML  --> Centang Expand Widget Templates
5. Cari kode ]]></b:skin>, lalu diatasnya simpan kode berikut ini : #footer-column-divide { clear:both; }
   .footer-column {
   padding: 10px; }
   
6. Selanjutnya cari lagi kode <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>
   
7. Ganti kode yang warna merah dengan kode dibawah ini

   <div id='footer-column-divide'>
   <div id='footer1' style='width: 33%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='saung1'
   preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 34%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='saung2'
   preferred='yes' style='float:center;'/>
   </div>
   <div id='footer3 style='width: 33%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='saung3'
   preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>
   

8. Kalau kode pada nomor 6 diatas tidak ada, coba sobat cari salah satu dari kode  <!-- end outer-wrapper –>  atau bisa juga  <div id='footer'>,
9. Diatas / sebelum salah satu kode pada no. 8 tinggal letakkan Kode yang ada pada nomor 7 diatas
10. Jika sudah, lakukan pratinjau dulu. Kalau sudah ok, tinggal Simpan template  dan lihat hasilnya.

Selesai sudah.Terimah Kasih

Read More..