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.

Saya Kembali Hadir Di Blog Ini

SHADOWS || Apa khabar sobat semuanya? saya kembali lagi kebolg saya yang sudah terbengkalai beberapa tahun ini, yaitu karena saya ada kesibukan di dunia nyata jadi saya tidak ada waktu untuk posting atau bla.. bla.. lah.
Tiba pada hari ini saya kembali karena saya rindu dengan blog saya ini, tetapi saya mohon maaf karena ada beberapa artikel yang saya remove/delete jadi harap maklum, biasa di blok sama google apa karena kelamaan ya saya tidak posting/membuat artikel yahhh.... cukup lumayan sih banyak juga ini sisanya tinggal segini, tetapi tak apalah saya maklumin.

Semoga blog SHADOWS ini selalu ada di hati para sobat yang sering hadir disini, saya sebelumnya mengucapkan terima kasih kepada sobat semua.

Selama saya tidak ada semoga blog para sobat sudah banyak yang berhasil dan maju terus pantang mundur.

SEKIAN DAN TERIMA KASIH

SHADOWS-K

Komentar Facebook Dan Blog Berdampingan

SHADOWS || Apa kabar sobat blogger..!! beberapa hari ini saya off dari blog saya dikarenakan saya sibuk dengan dunia nyata saya yang menyita waktu, semoga sobat blogger dalam keadaan sehat wal,afiat. Nah begitu saya buka blog saya ada sobat blogger yang menanyakan bagaimana Membuat Komentar Facebook Dan Blog Berdampingan, saya akan menjawab dengan tutorial ini sebagai jawaban dari sobat HARI F DAY. Tetapi sobat harus ingat jika menambahkan tutorial ini di blog sobat akan sedikit berat waktu loading, ini semua saya balikan kembali kepada sobat jika ingin menerapkannya, nah ini tutornya silahkan ikuti dengan seksama.

Jika sobat telah berhasil menerapkanya maka hasilnya sebagai berikut :

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML
2. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F)
3. Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

4. Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah ini tepat di atas kode </head> :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB ANDA' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

5. Dari kode di atas, perhatikan kode yang saya beri warna merah. Ganti kode berwarna biru dengan ID Facebook anda.. Contoh : halaman facebook anda www.facebook.com/shadows maka ambil shadows sebagai ID anda.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.cari kode yang paling terakhir, jika tidak berhasil ambil yang pertama. Lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<!--FB COMMENT-->
 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
<!--FB COMMENT-->

Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut. Kedua tanda merah tersebut bisa dirubah sesuai keinginan.

kemudian jangan lupa SIMPAN template anda dan lihat hasilnya .

Nah selesai sudah Cara Membuat Komentar Facebook Dan Blog Berdampingan semoga tutorial ini bermanfaat bagi sobat blogger semua.. happy blogging.

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!

Hanya Menampilkan Judul Postingan Di Homepage

SHADOWS || Selamat pagi sobat menjelang pagi, mungkin para sobat sedang tidur nyenyak tetapi saya tidak bisa tidur ya .. mungkin lagi sedikit pusing kali ya. Jadi saya membuat trik di blog agar Hanya Menampilkan Judul Postingan Di Homepage untuk merubah suasana blog sobat agar tidak membosankan atau yang sobat baru membuat satu blog baru. Nah bagaimana tertarik untuk diterapkan di blog sobat..!! marilah kita simak langkah langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Untuk mem-backup template, silakan klik Download Template Lengkap. Hal ini untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.
4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
5. Copy kode di bawah ini dan paste di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

6. Klik tombol SIMPAN TEMPLATE.
7. Selesai.

Pemasangan kode di atas masih menyisakan beberapa elemen seperti tanggal posting, label, komentar dan yang lainnya. Bila Anda ingin menghilangkan semuanya dan yang tersisa hanya judul postingnya saja, Anda dapat mencoba kode di bawah ini.

Cara peletakannya sama seperti diatas di bawah ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

8. Save template anda,
Dan lihat hasilnya di Homepage anda, Nah sekian tips dari saya Bagaimana Hanya Menampilkan Judul Postingan Di Homepage semoga bisa bermanfaat buat sobat blogger.... happy blogging.