Kode Percepat Loading Blog

Selamat siang para blogger, di siang ini saya akan share Kode Percepat Loading Blog sesuai dengan namanya pastinya anda sekalian berkeinginan mengetahuinya bukan, nah saya akan menberikan solusi yang sudah terbukti dan saya terapkan di blog saya ini dan blog yang lainnya. Sebenarnya ini kode sudah lama saya temukan dan saya terapkan sendiri yah karena itu saya terhalang oleh kegiatan saya di dunia nyata jadi saya tidak sempat share dan agak terlambat mungkin para master sudah mengetahui ini tapi apa salahnya saya share kembali. Untuk pembuktian silahkan anda lihat gambar dibawah ini dan saya persilahkan anda cek ulang blog saya ini di tools yang berada di menu.

Kode Percepat Loading Blog

Nah itulah Kode Percepat Loading Blog saya ini yang anda kunjungi, anda pasti sudah penasaran bukan..... bagaimana sih caranya, gampang sekali penerapannya dan tidak susah. Baiklah coba anda lihat di bawah ini

Masuk ke TEMPLATE > EDIT HTML cari dengan pergunakan CTRL+F </body> setelah ketemu hapus ganti dengan kode dibawah ini :

&lt;!&#45;&#45;</body>&#45;&#45;&gt; &lt;/body&gt;

Setelah itu save template dan cek loading anda saya sarankan sebelum memasang Kode Percepat Loading Blog cek dahulu loading anda berapa di tools menu saya setelah memasang di cek kembali berapa loading anda.

Itulah Kode Percepat Loading Blog yang saya ketahui dan saya terapkan di blog saya sendiri dan hasilnya sangatlah memuaskan, nantikan postingan saya untuk mengurangi beban loading blog anda jika anda memakai font awesome terima kasih. Lebih kurangnya saya minta maaf.

Alternatif Followers Blog Widget Dengan Link

Alternatif Followers Blog Widget Dengan Link

Kembali kita bertemu dalam postingan saya ini yang akan memberikan solusi untuk sebuah blog anda, Alternatif Followers Blog Widget Dengan Link ini sangatlah simple dan bisa di kreasikan menurut anda baik dan terlihat cantik di blog. Followers blog widget ini akan terasa ringan di waktu loading dan dari segi penampilannya cukup ramping, nah solusi ini tanpa terlihat widget tersaebut tetapi bisa digunakan lumayankan untuk beban loading blog, dari segi keuntungannya adalah pengunjung akan terasa penasaran dengan link ini atau tombol yang anda kreasikan sehingga dibawa ke Alternatif Followers Blog Widget Dengan Link dan mengklik mengikuti blog anda. Sebelum atau ingin menggunakan solusi ini anda harus mengetahui dahulu bolg id anda sendiri karena ini sangatlah penting untuk penggunaannya, lihat gambar dibawah ini.

Setelah anda ketahui Blog Id anda isi data dibawah ini untuk di tempelkan ke blog.

1. Dengan link text :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx'
   target='_blank'>Follow Blog Ini</a>

2. Dengan link button :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx'
   target='_blank'><button>Follow Blog Ini</button></a>

3. Dengan link gambar :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx'
   target='_blank'><img border='0' src='http://LINK GAMBAR ANDA'/></a>

Ganti xxxxxxxxxxxxxxxx dengan ID Blog Anda.

Ganti LINK GAMBAR ANDA dengan link gambar yang Anda Upload.

Untuk penempatan Alternatif Followers Blog Widget Dengan Link bisa anda letakkan di sidebar, footer. dalam menu horizontal anda juga bisa yang menurut anda terlihat ramping dan bersih dari sebuah widget.

Alternatif Followers Blog Widget Dengan Link sudah selesai anda buat dan selamat berkreasi menurut kata hati anda sendiri semoga bermanfaat.

Membuat Effect Shadow Widget Sidebar

Pada kali ini shadows akan membagikan sebuah bentuk effect yang cukup menarik. Membuat Effect Shadow Widget Sidebar adalah untuk yang gemar mensetting template agar terlihat rapi dan elegant, mungkin ini menjadi solusi anda untuk di gunakan pada template manapun tidak menjadi kendala dan juga tidak menggangu beban loading pada blog anda simple sekali untuk cara pembuatannya.

Untuk tampilan Membuat Effect Shadow Widget Sidebar ini lihat gambar di kiri postingan ini cukup menawankan dan terlihat menarik pada template anda sekalian. Untuk itu marilah kita simak dan ikuti apa yang saya tampilkan caranya, tidak sulit dan tidak memerlukan script yang rumit hanya memasukkan kode css saja sudah cukup untuk tampilan yang menawan.

Pertama masuk ke blog anda

Kedua setelah itu klik TEMPLATE > EDIT HTML ingat selalu download lengkap template anda untuk berjaga jaga.

Ketiga gunakan CTRL+F agar cepat cari ini ]]></b:skin> dan copy kode dibawah ini tepat diatasnya.

#shadow2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoNj8khmPyN3t0kWPlaAsNJM3JhS5-airspqGrtIByXmUsw5ac_YglCVbCrSAKLWO0Wfu41eYzgIx_dyzgbLE-4HrBg8A1j4w_nxHrg-GkDSxDL6ep_rUlsP1MDfbAVdifrMo-0LSMKI/s1600/frame_shadow2+
copy.png") no-repeat scroll center center transparent;  width: 100%; height: 20px;}

Itu adalah kode css nya sudah terpasang sekarang kita cari apa yang anda inginkan untuk penempatan dan penampakan shadowsnya misal di Recent Posts  maka sekarang gunakan lagi CTRL+F dengan isi kotak yang keluar dengan Recent Posts maka terlihat seperti ini.

<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<div id='shadow2'/></div>

 Jadi anda harus ingat penempatannya harus sebelum </div> penutup menjadi sepeti yang diatas, itu berlaku juga pada widget popular posts atau widget yang lainnya nah itulah Membuat Effect Shadow Widget Sidebar untuk anda gunakan agar template anda menjadi menarik dan pengunjung akan betah berlama lama di blog anda semoga bermanfaat dan selamat berkreasi.

Membuat Widget Followers Blog Dengan Link

SHADOWS pada pagi ini membagikan sebuah tips dan trik untuk anda yang memerlukan Membuat Widget Followers Blog Dengan Link , agar blog anda terlihat simple dan elegant di mata pengunjung. Sekiranya tips ini bisa untuk menjadikan solusi dalam menata blog secara profesional dalam pengembangan blog anda yang begitu rapih dan nyaman di mata pengunjung blog, sehingga pengunjung betah berlama lama di blog anda.

Biarpun di blog anda tidak terlihat Widget Followers Blog tetapi pengunjung tetap bisa menjadi followers anda dengan Membuat Widget Followers Blog Dengan Link yang anda buat. Nah untuk bagi yang berminat dengan harus mengetahui ID BLOG anda terlebih dahulu, karena ini penting untuk digunakan.

Caranya tidak sulit anda hanya membuka blog anda dan masuk ke dashboard anda nah lihat dibagian atas dashboard anda sebagai contoh lihat gambar dibawah ini.

Jika sudah mengetahui anda silahkan copy dan isi dengan ID BLOG anda link dibawah ini :
1. Dengan link text :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxx1234567890xxx'
   target='_blank'>Follow Blog Ini</a>
   Ganti xxx1234567890xxx dengan ID Blog Anda.

2. Dengan link button :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxx1234567890xxx'
   target='_blank'<buton>Follow Blog Ini</button></a>
   Ganti xxx1234567890xxx dengan ID Blog Anda.

3. Dengan link gambar :
   <a href='http://www.blogger.com/follow-blog.g?blogID=xxx1234567890xxx'
   target='_blank'><img src='http://URL GAMBAR ANDA'/></a>
   Ganti xxx1234567890xxx dengan ID Blog Anda.
   Ganti URL GAMBAR ANDA dengan url gambar yang Anda sudah Upload.

Nah itulah blogger tips untuk anda gunakan sebagai penempatannya bisa di sidebar atau di footer. Bisa juga Membuat Widget Followers Blog Dengan Link diwidget HTML/JavaScript atau dimenu horizontal anda.

Semoga bermanfaat untuk anda semua, jika kurang mengerti layangkan komentar.

Solusi Bila Terjadi Bugs Dikotak Komentar

Hari ini jam segini saya akan share Solusi Bila Terjadi Bugs Dikotak Komentar, yang terjadi pada blog anda semoga postingan saya ini sangat berguna dan menjadi pembelajaran kita semua.

Bugs adalah sebutan bagi kita semacam kutu pemograman yang terjadi pada seperangkat komputer kita, tetapi disini kita menyebutnya bugs juga kenapa bisa begitu..? Ya karena bugs pada blog kita memang kutu juga itu di karenakan pada waktu pemograman sebuah template terjadi :

1. Crash pada perangkat komputer, ketika kita sedang copy paste ELEMENT, HTML, CSS, kedalam blog kita sehingga ada kode yang tertahan ketika kita hapus.
2. Bisa juga jika sedang copy paste anda lupa meletakkan element tersebut, ini bisa terjadi di element mana saja.
3. Mati lampu bisa juga terjadi bugs, biarpun kita sudah delete atau hapus element tersebut tetap saja ada kemungkinan dia hadir kembali.

Nah pada kesempatan kita kali ini adalah pembahasan mengenai. Bugs Dikotak Komentar sebagai illustrasi saya sudah buatkan contoh untuk anda agar bisa memahami faktor faktor dari sebuah element yang terjadi bugs ini, lihat dibawah ini screnshotnya.

Solusi Bila Terjadi Bugs Dikotak Komentar ini saya akan memberikan tips dan trik pada pembahasan kita, marilah kita lihat element apa yang anda lakukan jika menemui masalah seperti ini, inilah solusinya lihat element yang saya bagikan dibawah ini.

Masuk kedasboard blog anda : TEMPLATE > EDIT HTML setelah terbuka gunakan CTRL+F agar cepat memulainya cari di kotak yang muncul disebelah kanan atas masukkan ini <data:blogTeamBlogMessage/> lalu klik enter, jika sudah ketemu lihat apakah ada double element tersebut jika ada hapus yang paling atas element itu seperti dibawah ini.

      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>

NB: Hapus semua kode seperti diatas ini ingat sisakan yang paling bawah element tersebut karena yang paling atas adalah bugs atau kutu yang menempel.

Itulah tutorial dari saya mungkin sudah banyak yang share tentang  Solusi Bila Terjadi Bugs Dikotak Komentar tidak ada salahnya jika saya mengulas balik untuk anda yang mungkin pemula atau sedang belajar bagi para senior tentu permasalahan ini sudah memahami.

Mungkin anda ingin membaca juga : Cara Menambahkan Title Tag Pada Label.

Title Dan Alt Pada Logo Blog

Title Dan Alt Pada Logo Blog adalah fungsi yang sangat dibutuhkan sekali untuk sebuah blog atau website, karena Title Tag Dan Alt Tag sangat di dominan oleh search engine google maupun bing utnuk memudahkan pencarian.

Nah pada kesempatan hari ini saya akan membagikan trik dan tips ini kepada anda yang sebelumnya sudah gagal atau tidak berhasil dalam membuatnya, yang perlu anda ketahui adalah tidak semua template blog berkatagori sama dalam bentuk struktur dan elementnya. Title Dan Alt Pada Logo Blog akan memberikan point di test SEO CHKME, dan blog anda akan menjadi SEO FRIENDLY di mata google.( silahkan cek blog saya tidak ada error sama sekali di chkme )

Jika anda ingin menggunakannya silahkan ikuti apa yang saya share ini dengan teliti dan cermat agar tidak terjadi eror nantinya, marilah kita simak dan terapkan di blog anda sekalian.

Pertama buka blog anda dan ambil TEMPLATE > EDIT HTML.
Cari dengan CTRL+F agar cepat pencariannya cari kode seperti ini <img expr:alt='data:title' setelah ketemu anda lihat penampakan di bawah ini.

<a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
        </a>

 Warna biru adalah yang anda cari tadi dengan CTRL+F tadi nah sekarang anda perhatikan dengan teliti di element itu cari "style" tanpa tanda kutip dan itu ada 2 nah berikanlah title dari nama blog anda menjadi seperti ini title='nama logo anda' menjadi seperti ini lihat penampakan di bawah ini.

<a expr:href='data:blog.homepageUrl' title='NAMA LOGO ANDA' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot_headerimg&quot;' expr:src='data:sourceUrl' title='NAMA LOGO ANDA' style='display: block'/>
        </a>

Nah sudah selesai penempatan title anda sekarang penempatan pada ALT anda lihat dengan seksama pada element ini   <img expr:alt='data:title' pada kode html yang sama dengan title tadi anda cari dengan CTRL+F.
Ganti dengan ini > alt='data title' < menjadi seperti ini > alt="NAMA LOGO ANDA" < lihat penampakan di bawah ini.

<a expr:href='data:blog.homepageUrl' title='NAMA LOGO ANDA' style='display: block'>
          <img expr:alt="NAMA LOGO ANDA, KEYWORD, KEYWORD, KEYWORD" expr:id='data:widget.instanceId + &quot_headerimg&quot;' expr:src='data:sourceUrl' title='NAMA LOGO ANDA' style='display: block'/>
        </a>

 NB : Ganti tanda kutip khusus untuk ALT. Seperti ini ( '"ALT"' ) UPDATE

Sebelum anda save alangkah baiknya di buat pratinjau dahulu agar lebih aman dan tidak terjadi error, setelah penampakan pratinjau arahkan kursor anda ke logo blog anda apakah sudah keluar titlenya atau belum jika belum coba teliti kembali agar bisa keluar titlenya, jika sudah silahkan dii save dan cek ke chkme. Nilai point di chkme untuk Title Dan Alt Pada Logo Blog ini cukup lumayan hasilnya buat nambah nambah point anda.

Jika anda kurang mengerti silahkan berikan komentar dibawah atau memang sudah berhasil juga berikan komentar agar kita semua bisa berbagi semoga sukses.

Cara Menambahkan Title Tag Pada Label

SHADOWS || Selamat pagi sobat sekalian semua apa kabar selama ini..?? kita kembali bertemu dan berbagi kembali, saya sudah vakum dari dunia blogger cukup lama juga ya sob. Iya 2 tahun lebih kira-kira begitulah karena saya sibuk dengan dunia nyata jadi ngeblog saya terlantar dan beberapa blog saya juga belum saya renov hanya di shadows ini saja , sekarang saya akan berbagi dengan para sobat blogger tentang Cara Menambahkan Title Tag Pada Label. Ini bisa sobat langsung cek di chkme setelah sobat terpkan.

Sebetulnya ini sudah lama saya ingin membaginya tetapi sayang saya terlajur vakum dan hilang dari sobat semua, setelah saya googling kesana kemari waktu semalam trik saya ini masih berguna, memang Tips seo ini sangatlah berguna sekali terutama bagi yang pemula, tetapi jika para master atau senior saya tolong dibantu jika ada kesalahan dalam posting ini mengenai Cara Menambahkan Title Tag Pada Label, nah mari kita simak dan jika ada yang memerlukan silahkan di copas saja ya.

Jika sobat ingin mencobanya silahkan terapkan title tag pada label ini di blog sobat.
Silahkan tambahkan kode expr:title='data:label.name' ini pada link-link label pada edit HTML. Biasanya kode untuk widget label akan seperti di bawah ini.

 <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>
</b:includable>
  </b:widget> 

Tulisan yang berwarna merah adalah link pada label yang akan muncul di tampilan blog. jika sobat ingin menambahkan title tag, maka silahkan tambahkan kode expr:title='data:label.name'. Dan penampaknnya akan seperti di bawah ini.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a> 

 Keterangan : Harus dua yang berwarna merah di selipkan expr:title='data:label.name'
Saran saya sebelum gunakan Cara Menambahkan Title Tag Pada Label ini coba cek dahulu di chkme jika terjadi error gunakan ini dan kembali cek ke chkme lihat hasilnya skor akan bertambah.

Dan arahkan kursor sobat ke label jika telah keluar titlenya berarti sobat telah sukses, jika keterangan diatas kurang jelas lontarkan pertanyaan di komentar, pasti saya akan balas secepatnya semoga posting saya ini bermanfaat buat semua. SUKSES.SELALU.

Nantikan postingan saya mengenai menambahkan title pada logo yang sobat telah dengan segala cara tidak berhasil.

Mengecilkan Ukuran Gambar Dengan Microsoft Office

SHADOWS || Mengecilkan Ukuran Gambar Dengan Microsoft Office sering saya lakukan dalam mengolah gambar untuk postingan. Biasaya saya menggunakan cara manual yaitu menyalin gambar, mempaste-nya di Excell, mengecilkannya, dan mengubahnya menjadi format jpg via aplikasi Paint. atau dengan risizer tool Sayangnya, cara yang saya gunakan itu ribet dan tidak praktis.

Setelah mengetahui ada yang mudah dan praktis kini saya beralih menggunakan Microsoft Office Picture Manager, yang merupakan tool bawaan Microsoft Office. Saya pun mencobanya.
Ternyata hasilnya memuaskan karena ukuran foto dapat dikecilkan hingga 5 kali lipat dan dimensinya pun sesuai dengan bodi postingan. Oleh karena itu, dalam postingan ini, saya berbagi caranya untuk sobat. Walaupun ini cara lama, namun siapa tahu ada di antara sobat yang belum mengetahuinya.

1. Pilih gambar yang hendak Anda kecilkan (kompres) ukurannya.

2. Klik kanan lalu pilih Open With dan Microsoft Office Picture Manager.

3. Gambar yang terpilih akan terbuka sesuai dimensinya. Klik menu Picture, lalu klik Compress Pictures.

4. Akan muncul Compress pictures settings. Pilih Web pages lalu tekan OK

5. Gambar akan dikecilkan sesuai dimensi web. Klik tombol Save untuk menyimpan hasil kompres secara otomatis ke folder tempat gambar disimpan sebelumnya.

6. Contoh hasilnya seperti berikut. Ukuran gambar telah dikecilkan dari 85 kb menjadi 16 kb (5 kali lipat). Dimensinya pun sudah berubah dari 1282 x 802 menjadi 448 x 280.

Itulah Cara Mengecilkan Ukuran Gambar Dengan Microsoft Office, Saya sangat merekomendasikan sobat untuk menggunakan Microsoft Office Picture Manager dalam mengolah gambar untuk postingan sobat karena mudah, praktis, dan tanpa menggunakan plugin. Selamat mencoba!

Kompres CSS Dan HTML Agar Loading Ringan

SHADOWS || Untuk kali ini yang saya share adalah kompres mengkompres CSS dan HTML yang berada di blog sobat punya untuk meringankan loading blog sobat, Kompres CSS Dan HTML Agar Loading Ringan sebenarnya sudah lama saya ingin share untuk sobat pemula yang baru mengenal ngeblog. Mungkin cara ini sudah banyak di terapkan oleh blogger yang sudahsenior dari kita. Nah Cara Kompres CSS Dan HTML Agar Loading Ringan sobat ingin tahu dan mencobanya mari kita simak langkah langkah di bawah ini.

Sebelum melakukan kompres disarankan back up dulu blog sobat.

A. Cara kompres CSS :
Kode CSS Blogger secara umum terletak di antara tag pembuka <b:skin> dan tag penutup ]]></b:skin> serta syntax yang ditandai dengan kurung kurawal {.,.,.}

1. Copy semua kode yang terletak di antara kedua TAG tersebut.
2. Lalu pastekan di situs ini.
3. Compression mode = pilih 'Super Compact'.
4. Comments handling = pilih 'Strip ALL comments'.
5. Jika sudah terkompres silahkan sobat copy semua lagi.
6. Lalu paste kembali tepat di posisi semula pada template blog sobat.
7. Preview dulu, jika tidak terjadi error lanjut ke tahap berikutnya.

B. Kompres HTML :
Kode HTML Blogger secara umum terletak di antara tag pembuka <body> dan tag penutup </body>

1. Copy semua kode yang terletak di antara kedua TAG tersebut.
2. Lalu pastekan di situs ini.
3. Copy semua kode yang di hasilkan kompres tersebut.
4. Lalu paste kembali tepat di posisi semula pada template blog sobat.
5. Preview dulu, jika tidak terjadi error
6. Save template.

Nah begitulah Bagaimana Cara Kompres CSS Dan HTML Agar Loading Ringan semoga bermanfaat untuk template sobat.

Untuk bisa mengecek berat loading blog sobat bisa cek di blog saya ini untuk mengetahui seberapa ringan atau berat blog yang sobat gunakan. Silahkan cek DISINI.

Membuat Auto Reload Pada Blog

SHADOWS || Kali ini saya akan memberikan blogger tip Membuat Auto Reload Pada Blog, yang bagaimana berguna untuk menyegarkan blog sobat. Agar selalu fress atau segar jika visitor mengunjungi blog sobat bagaimana tertarik..?? Mari kita lihat Cara Membuat Auto Reload Pada Blog di bawah ini.


1. Pertama, pastinya Login ke Blog sobat.
2. Dari Dasbor, cari Rancangan --> Edit HTML.
3. Lalu cari Code <head>. [Gunakan CTRL + F atau F3 pada Keyboard untuk mempermudah pencarian].
4. Kalau sudah ketemu, sekarang copy dan pastekan code di bawah ini, tepat di bawah Code <head>.

<meta http-equiv="refresh" content="600"/>

SAVE template.

KETERANGAN
Angka yang berwarna merah, menunjukan lama waktu Blog kita akan Auto Refresh. "600" artinya 600 detik atau 10 menit. sobat bisa menyesuaikannya dengan keinginan sobat

Nah.. selesai sudah blogger tip yang saya share Bagaimana Cara Membuat Auto Reload Pada Blog untuk sobat terapkan di blog semoga bermanfaat untuk sobat.

Icon Pada Label Dan Link Sidebar

SHADOWS ||  Nah sekarang saya akan memberikan tips dan trik Bagaimana Icon Pada Label Dan Link Di Sidebar, mungkin sobat newbie akan bertanya apa itu link dan label di sidebar? Label adalah hasil dari postingan para sobat yang diberikan titel atau label agar memudahkan untuk pencarian di search engine dan tentunya untuk para pembaca blog sobat juga, Link sidebar adalah link yang otomatis berada di sidebar misalkan sobat memakai popular post tanpa gambar atau thumbnail nah itulah sedikit penjelasan dari saya semoga di mengerti untuk sobat newbie. Nah marilah kita simak selanjutnya, Icon ini bisa bermacam-macam. Pertama sekali anda harus sudah menyimpan icon pada image hosting anda. Misalnya di tiniypic.com,photobucket.com atau tempat tempat hosting gambar lainnya. Contohnya icon panah hijau punya saya dengan alamat penyimpanan seperti ini:

http://i35.tinypic.com/2n03mgz.jpg

Nah icon tersebut bisa sobat ganti dengan icon milik sobat tentunya yang tersimpan hosting, untuk selanjutnya sobat cari kode seperti ini .sidebar li di edit HTML,

.sidebar li {

border-bottom:1px dotted #cccccc;

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

Mungkin ada perbedaan pada template, fokus saja kode .sidebar li { yang merupakan kode pada daftar link di sidebar. Kemudian tambahkan alamat icon sobat di bawahnya. Misalnya dengan alamat icon punya saya tadi. Sehingga hasilnya seperti ini :

.sidebar li {

background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .20em;

border-bottom:1px dotted #cccccc;

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

Lalu klik tombol Simpan Template dan lihat hasilnya. Jika tidak ada masalah, hasilnya akan seperti gambar di bawah ini :

Di sebelah kiri daftar link dan label akan ada icon panah kecil. Oke selamat menambahkan Cara Bagaimana Icon Pada Label Dan Link Sidebar agar ada icon tertentu, nah semoga berhasil sobat membuatnya.. happy blogging

Cara Mengganti Bullet List Di Postingan

SHADOWS || Untuk melengkapi postingan saya agar penuh dan mengejar target, pada pagi ini saya akan share kembali untuk mempercantik dikala sobat membuat postingan agar tidak selalu monoton membuat artilek dengan Cara Mengganti Bullet List Di Postingan sobat. Sebenarnya sangat gampang sekali sobat lihat di bawah ini.

Ini adalah bentuk asli dari bawaan blogger yang berbentuk bintik hitam:

Sebenarnya tidak jelek jelek sekali menurut pengamatan saya, tetapi yaitu yang saya sebutkan diatas tadi monoton. Nah marilah kita mulai dengan Bagaimana Cara Mengganti Bullet List Di Postingan dengan mengikuti langkah dibawah ini.

• Sign In di blogger.com
• Pada Menu drop down, pilih template
• Klik tombol Costumize
• Sobat blogger akan di bawa ke laman Blogger Template Designer
• Klik Advanced dan pilih Add CSS
   

1. Lalu copy paste kode dibawah ini:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhwS9f5ocjk_wxf8DN1qTn9ex3DnqAs3gOrt5p_l62wRv0EdV6YGO5HZeDBkugyqhOS4SUktMDyH5QyP20gpUVojJ2JcwjThNe76zSXBdKGznGaLNUSSWmbNR9Hz29vErgkyCNL99RTE/s400/255.gif');
}

Terakhir klik tombol apply to blog.

Refresh atau Reload blog sobat blogger untuk melihat hasilnya. Kode CSS di atas akan menampilkan Bullet List seperti gambar yang ada dibawah ini:

Jika sobat ingin bentuk yang lain saya ada sediakan beberapa bentuk silahkan sobat coba.

2. Bentuk bullet gambar panah:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsjQMQ3Iv4wokG248XFFlEucpvboE-01K_mMJLlc1B06URmrnNtmeeQ6MjWlFZwAtGfP6wVVO0Gg6BylwogEtNd3AAMTpXWx1wSi9vDaKTHIWgASYSNFXeSwChPDuxuuQjebXU5MHazBd/s1600/bullet_blue_arrow.png');
}

3. Bentuk bullet gambar rumah:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitjk9uqTXXKaGbqCoQm6N3ePQjyq3avfdbRkCoArOq1Wj35-Rf4ijlGRbjUxRjFnMXhW429Q9HZFNDSkW64BR2jKke1Lzpr467wlUdsakzgfsVvggrPWgpYf6EDPw-xyr1kDUL1UV3prx/s1600/bullet_home.png');
}

4. Bentuk bullet gambar centang:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6m8QaAye7UCeTyqoBOkTsyB-X32qoUZepd6zXFJDYx2-dXuf5i1bNvnZnQ8Dg2-MZhskkSAUq4BLUsPRCu6E4JmgSdnS55-1EYsdjkgalskyoubDxxTJWThqerky25gP_sBqMEbIywrLf/s1600/bullet_tick.png');
}

5. Bentuk bullet gambar bintang:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6LCg1ykqU4Ee_7f6VVeawvgMUxerIiQU5rWGMr9xck9U99FmWTSR534L9kVHzMPI-t1QRKsTkPxBTkye6unSWZmAFEBeKe2AuF6teMBHMd4eEWpxS53uci7remASXL31wxsVN-z6QZg/s1600/star_bullet.png');
}

6. Bentuk bullet gambar love:

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cZxAGwz4ciVSOI9tHSA9wq2hsHKNpBNVwIecbsMTSGtRaoyz7BNbOshYuB-O6jX3eJeZc9mikfw0jj97BWVEv6Co6IocHVXXmzGw55ZTGNUJGj9DAxQRgCrH2pQriCb3K6vPhCgC37k/s1600/Love+icon.png');
}

7. Bentuk bullet gambar plus

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdJledy1JY9IIFkynTed0HqQilYMlHMjTVu69DU5VDD_BLwnai8phVf6fQ32NNzLOuDIO16aOHkei_G7UQR4oDAUr26mf81wws2Sz5iHXkprmFu9DGmCHVvM95vaeDTTEOcZa190xm08/s1600/Green+plus.png');
}

Nah selesai sudah Untuk Bagaimana Cara Menganti Bullet Liat Di Postingan semoga bermanfaat untuk sobat semua.

Agar Link Berwarna Warni

SHADOWS || Agar Link Berwarna Warni sungguh indah bukan jika kursor sobat tepat diatas link akan muncul warna warni yang bagaikan hidup. Mau tahu Cara Agar Link Berwarna warni di blog sobat. Sobat hanya copy paste script di bawah ini.

1. Login ke Blogger
2.Pada Dashboard pilih Design >> Page elements  >> Add a Gadget(Tambah Gadget) Pilih HTML/Javascript
4.Masukan Kode script dibawah ini:

<script src="http://bloggerblogwidgets.googlecode.com/files/Rainbow_Colors_Way2blogging.js" type="text/javascript"></script>

Lalu save

Nah gampang bukan caranya Bagaimana Cara Agar Link Berwarna warni di blog sobat.. happy blogging

Cara Membuat Kotak Scrol Di Postingan

SHADOWS || Malam sobat sepertinya share saya kali ini sudah banyak yang mengetahui dan membuatnya cukup simple, tapi tidak masalah mungkin banyak newbie yang baru belajar ngeblog yang belum begitu paham dan mengerti. Cara Membuat Kotak Scrol Di Postingan ini saya rasa cukup sederhana sekali. Jadi sobat gampang mengerti nah marilah kita lihat  di bawah ini ok sob.

1. Copy kode di bawah ini kedalam postingan sobat. Ingat sobat jangan di Compose tetapi di HTML.

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;"> Masukan tulisan atau gambar disini</div>

Tulisan Berwarna merah 16px/26px Adalah besar ukuruan Font,dan bisa anda  ganti dengan ukurun yang anda mau.

Tulisan Berwarna Biru Masukan tulisan atau gambar disini Adalah tulisan  yang anda ingin posting.

Misalkan saya akan memasukan kata atau tukisan sebagai berikut:

"Membuat kotak scroll di dalam posting, salah satu kegunaannya apabila posting pada blog terlalu panjang bisa kita masukkan post ke dalam kotak scroll agar dapat meminimalkan tempat pada posting."

Cara nya cukup simple, Copy dan Paste kode di bawah ke dalam postingan anda..
pada tulisan warna biru, silahkan masukkan tulisan atau gambar yang ingin anda masukkan.

Maka akan seperti ini:

"Membuat kotak scroll di dalam posting, salah satu kegunaannya apabila posting pada blog terlalu panjang bisa kita masukkan post ke dalam kotak scroll agar dapat meminimalkan tempat pada posting."

Nah begitulah Bagaimana Cara Membuat Kotak Scrol Di Postingan untuk para sobat semoga bermanfat bagi sobat blogger yang baru ngeblog.. happy blogging

Cara Daftar Di Account Technorati

SHADOWS || Cara Daftar Di Account Technorati, Artikel ini sebagai salah satu syarat agar terverifikasinya akun kita di Technorati dan sebagai informasi bagi para blogger untuk meningkatkan backlink melalui technorati. Bagi kebanyakan blogger, service ini mungkin sudah sangat dikenal. Sedangkan bagi blogger pemula seperti saya, service ini mungkin harus diketahui dan digunakan.

Berdasarkan informasi Bagaimana Cara Daftar Di Account Technorati dari beberapa sobat blogger, dan dari isi menu technorati, dapat di ambil empat point penting yang menunjukkan apakah technorati itu. Yaitu technorati sebagai Blog/RSS directory, technorati sebagai blog search engine (khusus blog), technorati sebagai online borkmarking dan mungkin technorati sebagai tag aggregator. Disini kita ketahui bahwa technorati merupakan service yang berfokus pada blog. Jadi sebagai seorang blogger, sangat disayangkan jika tidak mengetahui hal ini.

Dengan menggunakan service ini, blog kita akan dicrawl dan disimpan dalam data blog technorati, import otomatis RSS feed blog kita, deteksi tag-tag, juga link dari blog lain menuju blog kita. Lagi-lagi menyangkut masalah backlink (Link popularity) dan rangking blog di Google atau search engine.

Fokus kali ini adalah kepada cara mendaftar dan claim blog di technorati. Dan berikut ini adalah proses daftar technorati, hingga selesai proses validasi code token technorati:

Pertama Anda harus membuat account terlebih dahulu, buka link pendaftaran disini!

Lengkapi datanya dengan baik, gunakan email yang aktif, dan jangan lupa isi captcha dan isi centang agreement-nya, lalu klik “Join” Untuk melakukan aktifasi, sekarang buka email yang Anda gunakan untuk mendaftar tadi Buka email dari technorati dan klik link aktifasinya, Setelah account Anda aktif, cari dan klik “sign in” untuk masuk ke halaman profil dan selanjutnya melakukan claim blog.

Sudah masuk? sudah isi username dan password dengan benar? Jika sudah, sekarang masuk ke halaman profile dengan klik pada link nama (account) Anda disamping photo profil.

Mulai claim blog, dibawah profil Anda, isikan url blog pada Start a blog claim, isikan misalnya http://shadows-.blogspot.com, lalu klik “Claim”

Halaman selanjutnya, isi formulir dengan benar,

Blog tittle: isi dengan tema blog Anda, misal blog ini temanya adalah “Tutorial, tips dan trik, artikel”

URL: alamat blog, misal http://shadows-k.blogspot.com/Feed: rss feed blog, boleh alamat default seperti http://shadows-k.blogspot.com/feeds/posts/default, atau service pihak ketiga semisal feedburner,

Linking blogs: disini dapat dicantumkan tiga blog yang memiliki link menuju blog Anda, boleh tidak diisi, Site description: keterangan blog, sesuaikan dengan tema blog,

Site categories: beri tanda centang pada kategori yang sesuai dengan blog Anda, Anda dapat memilih lebih dari satu kategori,

Site tags: isi setiap sel dengan kata kunci yang berhubungan dengan isi blog Anda. Bisa satu kata maupun lebih per selnya.

Lalu klik “Proceed to next the step”Pada halaman selanjutnya, yaitu halaman blog claim status, klik tombol “Return to profile” Lihat di bawah profil Anda, sekarang blog Anda sudah terdaftar, hanya saja masih dibutuhkan verifikasi kode token. Oleh karena itu, untuk mulai claim token, klik “Check Claim” di bawah gambar thumbnail blog Anda.

Dihalaman selanjutnya dapat Anda lihat teks dengan latar biru, yaitu kode seperti ini EU9Q2ACGVSWX atau bisa dicek di kotak masuk email Anda (Kode Token Setiap Blog Berbeda), adalah kode token yang harus kita tulis di halaman blog kita.

Posting sebuah artikel yang berisi kode token Anda, lalu publish. Postingan terserah, bisa halaman kosong hanya berisi kode token atau sekalian artikel seperti yang sedang Anda baca ini. Boleh kok copy paste asal dituliskan link sumber ke halaman ini.

Setelah yakin postingan itu terpublikasi, sekarang klik tombol “Verify Claim Token” pada halaman claim technorati, dan lihat hasilnya.

Demikian artikel Tentang Bagaimana Cara Daftar Di Account Technorati dan claim blog di technorati, Semoga berhasil dan bermanfaat buat kita semua!!

 Kode claim technorati saya : EU9Q2ACGVSWX


Sumber artikel : http://www.fianetmu.com/2013/03/cara-daftar-dan-claim-technorati.html

Membuat Loading Blog Menjadi Ringan

SHADOWS || Membuat Loading Blog Menjadi Ringan. Kecepatan loading sangat berpengaruh pada Traffik Blog kita,
percuma blog yg kita buat cantik, tapi loading'nya berat.
Jika begitu pasti pengunujung mengurungkan niat'nya untuk masuk pada blog kita.
Sebenarnya ada banyak hal yang mempengaruhi loading blog kita menjadi berat,
namun saya tidak akan menguraikanya panjang lebar...disini
takutnya bukan loading blog yg berat eh malah sobat semua males baca ketikan saya yg jelek ini hehe...:D

Untuk Cara Membuat Loding Blog Menjadi Ringan Cara-nya:

Ikuti Langkah-Langkah Dibawah ini:

1. Klik Design >> Page elements >> Add Gadget
2. Pilih HTML/JavaScript
3. Copy kode dibawah ini
dan paste kan kedalam konten HTML/JavaScript

<script type='text/javascript'

src='http://loading-tekhnik-blog.googlecode.com/files/loading.js?

ver=1.5.0.'></script>

<script type="text/javascript">

jQuery(document).ready(function($){

if(navigator.platform == "iPad") return;

jQuery("img").lazyload({

effect."fadeln",

placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghoaC07BgsGfKznJC3hy7avUNwaMsAQcrbmi5O6SzaoRMOW0mSdm6e7F6B_MBoh2wlFVFJ1f_EYRKDgrMZge-hNIjz2QivQCCKavZHCcCruuyWACy7m2P0i6rvySoi4d8jLQcjUsATCLQ/s1600/loadingg.jpg"

});

});

</script>

4. save template dan lihat hasilnya.

Begitulah Bagaimana Cara Membuat Loading Blog Menjadi Ringan, semoga bermanfaat bagi sobat

Sumber: http://tekhnik-blog.blogspot.com/2012/07/cara-mudah-membuat-loading-blog-menjadi.html

Cara Menimbulkan Icon Delete di Kotak Komentar

SHADOWS || Sore para sobat blogger...  kali ini saya akan share bagaimana meninbulkan icon delete/hapus di kotak komentar sobat.
Karena tidak semua menu treaded comments itu bisa menimbulkan icon ini, sebabnya adalah setiap template sobat berbeda beda.
Cara menimbulkan icon delete di kotak komentar yang saya share ini cukup mudah dan simple.
Dari pada kita ngomong jauh jauh langsung saja kita menuju TKP ya gak sob, nah inilah caranya.



1. cari kode ]]></b:skin>
2. silahkan simpan kode css di bawah ini di atas kode ]]></b:skin>

.item-control {
display: inline;
}

3. Save template.

Nah seharusnya di kotak komentar sobat sudah ada icon delete/hapus disana coba lihat semoga berhasil. Dengan cara menimbulkan icon delete di kotak komentar ini  maka tamatlah dari cerita mengenai share n share.. hehehe

Semoga bermanfaat bagi para sobat..

Cara Membuat Backlink Text dan Backlink Banner

                            

SHADOWS || Kali ini saya akan share tentang bagaimana cara membuat backlink text dan backlink banner. Agar kita bisa betukaran link antara para sahahat blogger, ini berguna sekali kawan karena bisa menaikan trafic kita di blog yang kita kelola.
Bagaimana membuat backlink text dan backlink banner ini saya tujukan kepada pemula atau yang baru membuat blog, dan bagi yang lain pasti sudah mengetahui tentang cara membuat backlink ini.
Nah langsung saja kita menuju TKP pembuatannya:

1. Anchor text dengan biasa disebut penukaran link text:

<a href="http://shadows-k.blogspot.com/" title="Tips dan Trik  | widget blogspot">Shadows</a>

Dan inilah hasilnya:

Shadows

Catatan: 

• Warna biru ganti dengan url blog sobat
• Warna kuning ganti dengan judul blog sobat
• Warna ungu ganti dengan text yang sibat inginkan: misal nama blog sobat

2. Anchor text dengan text area:

<center><textarea code="" rows="6" cols="25" name=""><a href="http://shadows-k.blogspot.com/" target="_blank">Tips dan Trik | widget blogspot<a>Shadows</a></textarea></center>

Lihat hasilnya.

<a href="http://shadows-k.blogspot.com/" target="_blank">Tips dan Trik | widget blogspot<a>Shadows</a> Catatan:

• Warna kuning ganti sesuai kebutuhan
• Warna biru ganti dengan url sobat
• Warna ungu ganti dengan judul  blog sobat
• Warna merah ganti sesuai keinginan sobat, misalkan judul blog sobat

Backlink dengan banner:

<center> <a href="http://shadows-k.blogspot.com" target="_blank" title="Tips dan Trik | widget blogspot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe_INVA81YWY7EIp0YdDn9Zn2RsOdJUn2LeirMeAbE2EeDtc4-c_OC8a15Mc9sWNtZD_l8oPzP_Bn-1jT1z-nznf1P8uYRezDYgwTnR9atdhfjuGVfoYuKiPpjQ5dyZcJQQzNSUhXXHc/s200/cooltext895893221.gif" alt="Tips dan Trik Blog | widget blogspot" /></a></center> Lihat hasilnya:

Catatan:

• Warana biru ganti dengan url sobat
• Warna kuning  ganti dengan judul blog sobat
• Warna merah ganti dengan url gambar sobat

Backlink banner dengan text area:

<div style="text-align: center;">

<img alt="shadows" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe_INVA81YWY7EIp0YdDn9Zn2RsOdJUn2LeirMeAbE2EeDtc4-c_OC8a15Mc9sWNtZD_l8oPzP_Bn-1jT1z-nznf1P8uYRezDYgwTnR9atdhfjuGVfoYuKiPpjQ5dyZcJQQzNSUhXXHc/s200/cooltext895893221.gif" />

<textarea code="" rows="6" cols="25" name=""><center><a href="http://shadows-k.blogspot.com" target="_blank" title="tips dan trik | widget blogspot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe_INVA81YWY7EIp0YdDn9Zn2RsOdJUn2LeirMeAbE2EeDtc4-c_OC8a15Mc9sWNtZD_l8oPzP_Bn-1jT1z-nznf1P8uYRezDYgwTnR9atdhfjuGVfoYuKiPpjQ5dyZcJQQzNSUhXXHc/s200/cooltext895893221.gif" alt="tips dan trik | widget blogspot" /></a></center></textarea></div>

Lihat hasilnya bagus bukan.

<center> <a href="http://shadows-k.blogspot.com" target="_blank" title="tips dan trik | widget blogspot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUe_INVA81YWY7EIp0YdDn9Zn2RsOdJUn2LeirMeAbE2EeDtc4-c_OC8a15Mc9sWNtZD_l8oPzP_Bn-1jT1z-nznf1P8uYRezDYgwTnR9atdhfjuGVfoYuKiPpjQ5dyZcJQQzNSUhXXHc/s200/cooltext895893221.gif" alt="tips dan trik | widget blogspot" /></a></center>

Catatan:

• Warana merah ganti dengan url gambar sobat
• Warana kuning ganti sesuai kebutuhan sobat
• Warna biru ganti dengan url sobat
• Warna ungu ganti dengan judul blog sobat

Cara meletakan  link link tersebut:

1. Untuk cara pemasangan di postingan, silahkan masukkan di dalam Edit HTML dan bukan di    Compose.

2. Untuk cara pemasangan di sidebar, silahkan sobat masuk ke dalam tata letak =>> cari widget yang akan sobat tempelkan link ini =>> klik edit =>> cari HTML/Javascript blog sobat =>> save/simpan.

Nah dan lihat hasilnya bagaimana bagus bukan,.

Semoga cara membuat backlink text dan baclink banner ini bisa bermafaat untuk sobat..

Cara Membuat/Modifikasi Kotak Komentar Blogger

SHADOWS || Cara membuat kotak komentar blogger yang sesuai judul di atas, kali ini saya akan share cara memodifikasi kotak komentar blogger. Mungkin sobat blogger pernah melihat kotak komentar yang dapat memasukan video,gambar,emoticon dan elemen terlarang di dalam komentar, nah kali ini saya akan menjelaskan cara membuat kotak komentar blogger secara lengkap dari cara mengizinkan elemen terlarang masuk ke dalam komentar sampai membuat pesan formulir komentar kren.

Berikut di bawah ini cara membuat kotak komentar blogger:

A. Cara mengizinkan video,gambar,emoticon dan elemen terlarang masuk kedalam kotak komentar.

1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
4. Klik Prooced / Lajutkan ( jika editor baru )
5. Cari kode </body>
6. Simpan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='https://cunayz.googlecode.com/svn/trunk/jQuery.js' type='text/javascript'/>

</b:if>

 7. Cari lagi kode </head> setelah ketemu simpan kode di bawha ini di atas kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* Add More Features to the Blogger Comments by Shadows-k */

img.emo {

  display:inline-block;

  vertical-align:middle;

}

#comment-holder .cm-youtube {

  display:block;

  border:none !important;

  background-color:#333;

  width:370px;

  height:218px;

  margin:0 auto 30px;

}

#comment-holder .cm-image {

  display:block;

  margin:0 auto 15px;

  outline:none;

  border:1px solid #ccc;

  background-color:white;

  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  padding:2px;

  max-width: 95%;

}

#comment-holder code,

#comment-holder i[rel="code"] {

  font:normal 12px Monaco,"Courier New",Monospace;

  color:blue;

}

#comment-holder pre,

#comment-holder i[rel="pre"] {

  display:block;

  font:normal 12px Monaco,"Courier New",Monospace;

  background-color:#333;

  color:white;

  padding:0.5em 1em;

  word-wrap:normal;

  white-space:pre;

  overflow:auto;

}

#comment-holder blockquote,

#comment-holder b[rel="quote"] {

  margin:0 2%;

  background-color:#eee;

  padding:1em 1.2em;

  border-left:4px solid #7498AD;

  display:block;

  font-weight:bold;

  font-style:italic;

}

#comment-holder i[rel="image"],

#comment-holder i[rel="youtube"] {

  display:block;

  overflow:hidden;

  border:2px solid black;

  position:relative;

  width:170px;

  height:100px;

  margin:0 auto 30px;

}

#comment-holder i[rel="image"]:before,

#comment-holder i[rel="youtube"]:before {

  content:"Please enable your JavaScript to see this image!";

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  left:0;

  background-color:red;

  color:white;

  font-weight:bold;

  text-align:center;

  padding:15px 0;

}

#comment-holder i[rel="youtube"]:before {

  content:"Please enable your JavaScript to watch this video!";

}

</style>

</b:if>

8. Simpan template

 Cara Penggunaan Kode:

1. Untuk penggunaan gambar silahkan anda gunakan tag

 [img]URL Gambar[/img] atau <i rel="image">URL Gambar</i>

 2. Untuk penggunaan video silahkan anda gunakan tag

[youtube]URL Video[/youtube] atau <i rel="youtube">URL YouTube</i>

 3. Untuk Emoticon anda bisa gunakan seperti ini.

:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

 4. Memasukan kode bisa menggunakan tag

<i rel="code">Kode Anda</i> atau [code]Kode Anda[/code]

 5. Memasukan kode html / css / jquery bisa menggunakan

<i rel="pre">Kode Anda</i> atau [pre]Kode Anda[/pre]

 6. Menggunakan blockquote di komentar bisa menggunakan tag

<b rel="quote">Kata-kata Anda</b> atau [blockquote]Kata-kata Anda[/blockquote]

Nah.. sekarang sobat sudah bisa memasukan video,gambar,emoticon dan elemen terlarang kedalam kotak komentar.

B. Cara membuat pesan formulir komentar kren.

1. Centang Expand template widget (masih dalam edit html)
2. Cari kode berikut

<b:else/>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

 Catatan : biasanya terdapat dua kode yang sama sobat ambil kode yang berada di bawah tag <b:else/> seperti di atas.
 3. Ubah kode yang berwarna hijau dengan kode di bawah ini

<div id='threaded-comment-form'>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

</div>

 4. Kemudian letakan CSS berikut di atas kode ]]></b:skin> atau </style>

#threaded-comment-form p {

    position: relative;

    background: #DD0;

    border: 3px solid #38F;

    padding: 10px;

    font-size: 13px;

    line-height: 1.6em;

    color: #000;

    margin-top: 30px;

    }

#threaded-comment-form p::after, #threaded-comment-form p::before {

    top: 100%;

    border: solid transparent;

    content: " ";

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none

    }

#threaded-comment-form p::before {

    border-top-color: #38F;

    border-width: 15px;

    left: 10%;

    margin-left: -36px

    }

#threaded-comment-form p::after {

    border-top-color: #DD0;

    border-width: 9px;

    left: 10%;

    margin-left: -30px

    }

 5. Setelah itu cari kode berikut

document.getElementById(domId).insertBefore(replybox, null);

 dan ubah menjadi kode berikut

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

 Pesan formulir sobat sekarang sudah kren, jika sobat kurang suka dengan tampilan atau style pesan formulirnya. sobat tinggal mengedit kode cssnya

9. Silahkan anda isikan pesan formulir komentar anda caranya:

• Masuk ke Setting / setelan
• Lalu klik Komentar
• Lalu scroll ke bawah dan lihat kata Pesan Formulir Komentar
• Nah isi kolom tersebut dengan pesan anda lalu klik Simpan Stelan / Save Setting

Nah sekarang Cara Membuat/Modifikasi Kotak Komentar Blogger sudah selesai, dan apabila ada pertanyaan jangan sungkan untuk meninggalkan pesan di kotak komentar, semoga tutorial kali ini dapat bermanfaat untuk sobat blogger semua...

Sumber artkel dari: SYSTEM OF BLOG dan DTE (hompimpaalaihumgambreng).

Cara Memasang Google Bot, Yahoo Bot, Msn Bot Last Visit Di Blog

 Shadows || sob bagaimana saat ini baik baik sajakah semoga baik ya, nah kali ini saya akan share tentang cara memasang atau membuat widget google bot, yahoo bot, dan msn bot di blog anda semua, google bot, yahoo bot, maupun msn bot adalah sebuah widget di blog yang memberitahukan tentang kapan tanggal, bulan dan tahun robot google menghampiri blog anda,widget blog yang saya share kepada anda tersebut dapat membuat robot google senang berkunjung ke blog anda, dengan menggunakan widget google bot, yahoo bot, dan msn bot dapat mendatangkan robot google menuju blog anda, jika anda menginginkannya silahkan ikuti tutorberikut :

1. kunjungi situs http://www.scriptme.info/

2. kemudian klik salah satu yang ingin lebih dahulu anda buat, misalnya memmbuat google bot last visit, lihat gambar berikut

3. kemudian masukkan link blog anda dan klik "check google bot last visit"

4. maka akan keluar kode html untuk anda memasang widgetnya, copy dan paste pada blog anda

5. selesai.... jika anda ingin membuat widget yahoo bot dan msn bot tinggal klik tombol home pada menu kemudian klik yahoo/msn bot last visit

sekian dulu tentang cara memasang widget google bot, yahoobot, dan msn bot di blog, semoga bermanfaat untuk para bloger...