Related Post Thumbnail Dan Feedburner Dibawah Postingan

SHADOWS pada kesempatan ini akan menshare sebuah tips dan trik Related Post Thumbnail dan Feedburner Dibawah postingan tutorial ini sangatlah praktis dan elegant ini menurut pandangan saya, karena bentuknya menyatu dan tidak memakan tempat di bawah postingan anda sehingga terlihat rapi. Dari perkataan saya diatas anda pasti sudah beramsumsi dengan kerapihannya bukan, itulah yang saya maksudkan bagaimana anda ingin mencobanya? marilah kita simak bersama oh iya Related Post Thumbnail dan Feedburner Dibawah postingan ini sudah saya terapkan sudah lama di bolg saya yang lain ini lihat gambarnya dibawah ini.

Related Post Thumbnail Dan Feedburner
Related Post Thumbnail Dan Feedburner Dibawah Postingan

Nah itulah contoh dari blog saya yang lain anda berminat dengan tampilannya mari ikuti caranya berikut ini :

1. Pertama masuk ke blog anda.

2. Kedua cari dikiri anda lalu klik TEMPLATE > lalu klik EDIT HTML sebelumnya backup         dahulu template anda untuk menjaga kemungkinan error.

3. Lalu cari pergunakan CTRL+F agar lebih cepat ]]></b:skin, letakkan css dibawah ini           tepat diatasnya.

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}


4. Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/>           (jika ada 2 atau 3 pilih kode yang terakhir)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>              
</div>
<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/shadows-k' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://shadows-k.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=shadows-k&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='shadows-k'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/shadows-k'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/shadows-k?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Keterangan : warna merah ganti dengan url anda sendiri
                     warna biru ganti dengan alamat feed anda.

5. Klik save template.

Related Post Thumbnail Dan Feedburner Dibawah Postingan sudah selesai anda buat semoga tampilan blog anda semakin teratur dan elegant di mata pengunjung agar betah berlama lama di blog anda

Baca juga untuk penampilan blog : http://shadows-k.blogspot.co.id/2015/10/membuat-effect-shadow-widget-sidebar.html

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.

Bugs Dikotak Komentar


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.

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 :

Komentar Facebook Dan Blog Berdampingan

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.

Membuat Tombol Link Demo Di Blog

Membuat Tombol Link Demo Di Blog

SHADOWS || Pada postingan kali ini akan saya share Membuat Tombol Link Demo Di Blog, sebuah tombol atau button yang mengandung link, biasanya untuk demo atau download di sebuah blog. Untuk tujuan lain membuat tombol link tersebut biasanya memanfaatkan untuk mempermudahkan pengunjung melihat contoh dari hasil Tips itu sendiri agar lebih jelas, Cara Membuat Tombol Link Demo Di Blog. karena jika tidak diberikan contoh maka pengunjung akan merasa bingung ketika mau mencoba atau mempraktekkan tips tersebut. Nah dari pada kita bicara tidak tentu arah marilah kita lihat contohnya, ini sebagai dasar untuk pemula yang mulai ngeblog.

Perhatikan contoh di bawah ini:



Kode contoh di atas adalah seperti ini:
<button>Contoh Seperti Ini</button>
Contoh di atas tidak terdapat linknya Sementara itu agar tombol button terdapat link maka kodenya adalah sebagai berikut :
<a href="http://shadows-k.blogspot.com/"><button>Contoh Seperti Ini</button></a>
Tampak hasil dari kode di atas akan seperti di bawah ini:

~> Coba klik button/tombol ini.

Nah sekarang kita akan bahas bagaimana agar link ini terbuka pada Tab Baru, mari kita tambahkan lagi sebuah kode:
<a href="http://shadows-k.blogspot.com/"target="-blank"><button>Contoh Seperti Ini</button></a>
Maka hasil dari tambahan kode tersebut adalah sebagai berikut:

~> Silahkan klik button/tombol ini.

Perhatikan warna merah tersebut harap sobat ganti dengan URL sobat sendiri dan TEXT juga dengan keperluan postingan sobat sendiri.

Nah gampang bukan Bagaiman Cara Membuat Tombol Link Di Blog sobat ini hanya sebagai dasar saja, nantikan tutorial atau tips yang lebih sempurna dari yang di atas ini.

Copy Paste Artikel Yang Di Kunci

SHADOWS || Kali ini saya akan memberikan Cara Copy Paste Artikel Yang Di Kunci untuk kita muat atau masukan ke dalam blog kita, itu mungkin artikel yang bermanfaat atau tutorial yang rumit. Apa lagi sobat newbie yang baru mengenal ngeblog sungguh rumitkan tetapi jangan putus asa sob ini ada caranya buat para newbie, copy paste itu lumrah tetapi harus ingat sobat....!! tidak ada salahnya kita cantumkan si pembuat artikel atau tutorial untuk menghargai seseorang hanya itu pesan saya  nah inilah contoh gambar di bawah ini:

1. Coba sobat klik  ALT+T+O, maka akan terlihat seperti gambar ini:


Copy Paste Artikel Yang Di Kunci

2. Kemudian hilangkan semua centang yang saya lingkar merah gambar diatas.
3.Lalu klik OK.
4. Reload atau refresh page yang akan sobat copy artikelnya.
5. Setelah reload atau refresh coba sobat drag atau block artikel tersebut.

Selanjutnya: jangan lupa untuk mengembalikan setting (centang kembali) settingan di atas setelah anda mengcopy artikelnya.mudah bukan..!!
Nah itulah Bagaimana Cara Copy Paste Artikel Yang Di Kunci semoga bermanfaat untuk sobat newbie.

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.

Cara Daftar Di Account Technorati

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

Tampilan Facebook Warna-Warni

SHADOWS || Pagi sobat blogger kita ketemu lagi hehehe.... Di pagi ini saya akan share sebuah tips atau trik bagi pengguna handphone Tampilan Facebook Warna-Warni bagaimana sukakan dari pada tampilan yang monoton dari bawaan facebok sendiri membosankan bukan, nah mari kita lihat cara kerjanya cukup gampang lihat di bawah ini.

Sobat harus gunakan browser dari OPERAMINI

Seperti biasa sobat login ke FACEBOOK dengan browser OPERAMINI, dan copy paste code javascript di bawah ini:

javascript:i=0;c=["#00AF00","#C00000","#0000DF","#00CF00","#DF00A0","orange","#00F0E0","#7000BF","#F0F8FF","#FAEBD7","#00FFFF","#7FFFD4","#F5F5DC","#FFE4C4"];a=document.links;setInterval('i++;a[i%document.links.length].style.color=c[i%c.length]',1);void(0);alert("www.tb4all.blogspot.com")

Lalu paste/tempel di browser operamini sobat seperti contoh di bawah ini:

Tampilan Facebook Warna-Warni
Kalau sudah di Paste/Tempel di browser opminmu,langsung saja Klik Kunjungi/Ok dan lihat hasilnya seperti ini:


Nah gambar di atas ini berarti Facebookmu sudah warna-warni dengan tekan Ok seperti petunjuk di atas.
ini gambar-gambar yang lainya di beberapa letak Facebook:


Ini kolom pemberitahuan/notif:


Ini kolom bookmark:


Nah saya rasa cukup sudah Cara Tampilan Facebook Warna-Warni dengan screnshot yang saya berikan, masa masih tidak jelas kebangetan kali yeeee.... hehehe...

Itulah share saya di pagi ini Bagaimana Cara Tampilan Facebook Warna-Warni, untuk para sobat semoga online sobat bisa dimana saja dengan tampilan facebook berbeda dengan yang lain.

Sumber artikel : http://tb4all.blogspot.com/2013/01/cara-membuat-tampilan-facebook-warna.html

Membuat Postingan Terkirim Otomatis Ke Facebook

SHADOWS || Membuat Postingan Terkirim Otomatis Ke Facebook,dengan menggunakan jasa dari aplikasi RSS Graffiti selain kita dapat mengirimkan postingan secara otomatis ke Facebook Fan Page aplikasi ini juga dapat mengirim postingan blog kita hanya ke orang-orang yang sudah berteman saja. Jadi buat sobat yang belum memiliki facebook fan page jangan khawatir aplikasi inilah jawabannya. Pembuatannya pun cukuplah gampang dan juga sobat tidak perlu menempelkan sesuatu ke blog kita entah itu berupa kode html ataupun kode-kode lain yang mengharuskan untuk di tempel pada template dan halaman blog sobat, bagaimana simple kan.? Nah bila tertarik untuk membuatnya silahkan ikuti tutorialnya di bawah ini !


1. Loggin ke akun facebook sobat
2. Carilah aplikasi RSS Graffiti dengan cara ketik RSS Graffiti pada kotak pencarian facebook
3. Pilih aplikasi RSS Graffiti


Membuat Postingan Terkirim Otomatis Ke Facebook


4. Sesudah mengklik aplikasi RSS Graffiti maka sobat akan dibawa ke halaman seperti ini.



5. Klik link yang bertuliskan beta.rssgraffiti.com
6. Kliklah Ke Aplikasi pada halaman seperti ini jika sesudah mengklik link beta.rss.graffiti.com


7. Akan ada konfirmasi dari RSS Graffiti yang menyatakan tentang informasi umum akun sobat serta mengelola halaman fan page dan profil facebook sobat maka kliklah Izinkan.



8. Kemudian Klik Ok pada tampilan halaman seperti gambar di atas.
9. Sesudah itu yang musti sobat lakukan adalah mengklik Create New Publishing Plan dan Add New Source pada tampilan halaman-halaman berikutnya. Tidak saya kasih gambar halaman-halaman berikutnya dalam memperjelas tutorial cara postingan otomatis terkirim ke facebook kali ini dikarenakan setiap website pasti akan merenovasi tampilan halamannya untuk itu sobat harus menyesuaikan sendiri ya. Ok Lanjuuut

Bila sudah masuk ke halaman seperti gambar di bawah ini maka masukanlah nama feed blog sobat. Sudah tahu kan nama feed blognya ? Kalau kita punya blog dari blogspot seperti ini nama feednya


http://nama blog.blogspot.com/feeds/post/depault
Inilah nama feed blog saya: http://shadows-k.blogspot.com/feeds/post/depault

Jika kurang yakin dengan nama feed blog sobat apa. Sobat bisa mengeceknya dengan cara pergi ke halaman home atau halaman artikel kemudian klik kanan pada sembarang tempat kemudian pilih view page source maka akan ada url-url yang tertera.


10. Jika sudah memasukan nama feed klik Add Source
11. Maka selanjutnya, feed Title adalah judul feed blog, feed URL adalah URL feed blog. Aturlah berapa kali blog sobat akan di cek oleh aplikasi ini pada kotak Update frequny. Pilihlah berapa postingan yang akan sobat bagikan ke facebook dalam satu hari pada kotak Maximum Post per Update. Pilihlah kirim postingan lama dahulu atau postingan terbaru dahulu pada kotak disampingnya. Kemudian klik Save


Untuk memastikan apakah artikel sobat yang baru update terkirim tidaknya silahkan sobat lakukan percobaan dengan membuat postingan baru dan publikasikan. Jika berhasil maka akan terkirim artikel tersebut ke dinding akun facebook sobat. Jika masih belum terkirim sabar sob. Lihat dulu pada kotak pilihan Update Prequncy yg tadi sobat isi apakah satu jam sekali atau setengah jam sekali. Jika kita pilih setengah jam sekali maka sesudah mempublish postingan terbaru maka tunggulah setengah jam pasti postingannya nongol di facebook sobat.
Dan pastikan tombol On/Off pada aplikasi RSS Graffiti yang sudah sobat buat dalam keadaan On. Gambar di bawah ini adalah gambar tombol dalam keadaan Off





Selesai sudah Cara Membuat Postingan Terkirim Otomatis Ke Facebook, semoga bermanfaat buat sobat semua.




Agar Postingan Baru Otomatis Terkirim Ke Twitter

SHADOWS || Membuat sebuah twitter ataupun facebook sekarang sudah hampir menjadi keharusan yang dimiliki setiap orang, khususnya di Indonesia. Dalam waktu singkat, facebook dan twitter ini begitu berpengaruh dalam kehidupan masyarakat dunia terlebih lagi indonesia. Entah sebagai aplikasi komunikasi maupun aplikasi bisnis.

Twitter adalah aplikasi kedua setelah facebook yang bagitu dinikmati oleh masyarakat Indonesia, itu terbukti dari situs semiocast.com, per 1 Januari 2012, total user twitter di Indonesia mencapai 22.5 juta penduduk pengguna twittter. Sungguh suatu angka yang sangat tinggi peminat jaringan sosial ini selain facebook.

Ada begitu banyak cara untuk memaksimalkan Twitter dalam mendulang traffic ke website kita, salah satunya adalah dengan men-Setting Agar Postingan Baru Otomatis Terkirim Ke Twitter, setiap ada konten baru dalam website sobat, langsung update di akun Twitter sobat.

Berikut tutorial yang bisa anda ikuti Cara Setting Agar Postingan Baru Otomatis Terkirim Ke Twitter:

1. Silahkan buka http://feedburner.google.com. Lalu login dengan user dan password anda.

Agar Postingan Baru Otomatis Terkirim Ke Twitter

2. Setelah login/masuk ke member area, masukkan alamat website anda ke “kolom” yang tersedia kemudian klikNext. Lihat gambar di bawah ini.




3. Terus saja klik next….next dan next hingga muncul menu navigasi. Lalu klik tombol Publicize kemudian klik Socialize.

4. Klik tombol Add a Twitter Account. Di sinilah anda harus memasukkan username dan password twitter anda.

Catatan:
1. Di menu Post Content anda bisa tentukan sendiri apakah yang ditampilkan di Twitter title saja, atau Title dan Keterangan Saja atau Keterangan. Silahkan pilih salah satu.

2. Sedangkan di menu Additional text anda bisa tentukan juga kata-kata dari anda sendiri. bisa thanks, atau terima kasih, atau yang lain. Bisa diletakkan sebelum atau sesudah update di twitter. Jika kata-kata anda mau diletakkan sebelum update tentukan saja di “At the” ke “Beginning of the post“. Jika mau sesudahnya tentukan “End of the post“. Ingat, posting artikel anda tidak akan terkirim semua karakternya ke twitter karena update twitter kalimatnya maksimal 140 kata. Contoh tampilannya seperti ini :



4. Setelah selesai Klik “Activate

Jika sudah Agar Postingan Baru Otomatis Terkirim Ke Twitter, maka setiap kita update posting baru di website kita, maka akan secara otomatis update di akun twitter yang sudah kita setting tadi.

Semoga tutorial diatas bermafaat untuk para sobat yang baru ngeblog... happy bloging

Membuat Kotak Komentar Admin Berbeda

SHADOWS || Membuat Kotak Komentar Admin Berbeda. Begitulah sesuai judul postingan saya kali ini, saya akan memberikan tutorial yang mungkin para sobat belum mengetahui atau sudah tidak ada salahnya saya share kembali Cara Membuat Kotak Komentar Admin Berbeda, agar mengetahui mana admin dan mana visitor. Nah lihat screen shot di bawah ini mungkin para sobat ingin mencobanya.

Membuat Kotak Komentar Admin Berbeda

Begitulah contoh dari saya bagaimana berminat dengan Bagaimana Cara Membuat Kotak Admin Berbeda, marilah kita simak bersama.

1. Masuk Blogger >> Klik Template >> Edit HTML >> Centang Expand Template Widget.
2. Cari kode ]]></b:skin> Pastekan kode berikut tepat di atas kode  ]]></b:skin>


.author-comments { 
background: # 2990D9;
border: 2px solid # 888
padding: 5px; 
}

Pada kode berwarna merah di kotak atas bisa diganti sesuai keinginan.Untuk mencari kode warna, anda bisa gunakan Colorpic, DISINI untuk mengetahui kode warna HTML.

Kemudian cari code seperti ini:

<data:commentPostedByMsg/>
</dt>

3. Jika sudah ketemu kode di atas, pastekan kode di bawah ini tepat di bawah </dt>

<b:if cond='data:comment.author == data:post.author'> 
<dd class='author-comments'> 
<p><data:comment.body/></p> 
</dd> 
<b:else/>

4. Kemudian cari kode <dd class='comment-footer'> tambahkan </b:if> tepat di atas kode <dd class='comment-footer'>Sehingga keseluruhannya tampak seperti di bawah ini:

<data:commentPostedByMsg/>
</dt><b:if cond='data:comment.author == data:post.author'> 
<dd class='author-comments'> 
<p><data:comment.body/></p> 
</dd> 
<b:else/> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
</b:if>            <dd class='comment-footer'>

5. Lalu lihat dengan pratinjau, jika tidak ada masalah klik save template.

Membuat Kotak Komentar Admin Berbeda sudah selesai semoga kotak komentar sobat semakin meriah.

Cara Membuat Icon Follow Us Sosial Media

SHADOWS || Pada pagi ini saya share Cara Membuat Icon Follow Us Sosial Media yang keren. Hampir setiap blog atau website memiliki widget follow social media dengan tombol icons yang beragam. Dengan Bagaimana Cara Membuat Icon Follow Us Sosial Media, memasang widget sosial media pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial anda, dan mereka hanya akan mengklik atau mengikuti update blog anda kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog anda.

Widget ini tidak otomatis dapat meningkatkan follower blog anda diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan menampilkan tombol widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan sexy. Efek hover ini kita buat dengan bantuan CSS3 transisi.

Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.

Cara Membuat Icon Follow Us Sosial Media

DEMO LIVE


Fitur:
Widget ini cukup sederhana tapi memiliki beberapa fitur utama:
• Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
• Efek memperluas, mulus dan sexy pada hover
• Penggunaan CSS sprite
• Sangat rapi dan bersih
• Tidak ada JavaScript. JQuery No. Ini murni CSS

CSS sprite Teknik cukup keren dan berguna terutama ketika Anda memiliki terlalu banyak gambar. Dalam widget ini Anda akan berpikir bahwa satu gambar atau ikon yang digunakan untuk setiap tombol yang membuat total 5 gambar. Tapi sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini berguna karena bukannya 5 permintaan HTTP, Anda hanya membuat satu permintaan yang mempercepat waktu loading. Teknik ini tidak sangat umum di blog Blogger tetapi dalam blog WordPress teknik ini sering digunakan.

Sekarang mari kita menambahkan Agar Cara Membuat Icon Follow Us Sosial Media atau widget ini di blog Anda.

Catatan:

Jika Anda ingin menambahkan widget pada tempat tertentu, gunakan HTML terpisah dan CSS dan jika Anda ingin widget untuk muncul di suatu tempat di sidebar Anda, silahkan melompat langsung di bagian Alternatif di bagian bawah.

HTML
1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
2. Letakkan kode berikut pada bagian yang anda inginkan dari blog anda

<!--Sexy Social Buttons Widget RePost Shadows-k.blogspot.com--> 
<ul id="tbisose"> 
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> 
</ul> 
<!--Sexy Social Buttons Widget RePost Shadows-k.blogspot.com—>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://shadows-k.blogspot.com/2013/02/cara-membuat-icon-follow-us-sosial-media.html"target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

 Ganti semua tanda # dengan URL jejaring sosial anda.

CSS
Sekarang tambahkan kode CSS yang akan membuat tombol ini sexy


1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
2. Cari kode ]]></b:skin> Letakkan kode berikut diatasnya

/* Sexy Social Buttons Widget RePost Shadows-k.blogspot.com*/ 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
/* Sexy Social Buttons Widget By RePost Shadows-k.blogspot.com*/

ALTERNATIF
Jika ingin menambahkan widget ini pada sidebar blog anda.


1. Login ke akun Blogger anda-> Layout
2. Klik tambah gadget pada sidebar
3. PilihHTML/JavaScript pada form letakkan kode berikut

<style> 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style> 
<ul id="tbisose"> 
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> 
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://shadows-k.blogspot.com/2013/02/cara-membuat-icon-follow-us-sosial-media.html"'target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

 Ganti semua tanda # yang berwarna biru dengan URL jejaring sosial anda

4. Simpan dan lihat hasilnya diblog anda!

Nah demikian tutorial Cara Membuat Icon Follow Us Sosial Media atau widget follow social media dengan tombol sexy. Semoga bermanfaat!



Cara Hilangkan Angka di Label

Cara Hilangkan Angka di Label

SHADOWS || Cara Hilangkan Angka di Label atau Kategori, pasti sudah banyak yang mengetahui. Tetapi bagi para blogger pemula belum banyak yang mengetahui tentang ini, Bagaimana Cara Hilangkan Angka di Label sebenarnya cukup gampang sob coba kita lihat bersama sama ok langsung menuju TKP.

Ikuti langkah langkah di bawah ini:

1. Login terlebih dahulu
2. Masuk template >>HTML>> Jangan lupa centang expand widget
3. Cari kode berikut ini: <data:label.count/>
4. Jika sudah ketemu hapus/delete kode tersebut
5. Apabila kode tersebut ada 2 bagian hapus semua saja
6. Lalu save template sobat dan lihatlah hasilnya

Nah selesai sudah Cara Hilangkan Angka di Label atau Kategori di blog sobat, cukup ringkas dan mudah bukan, semoga bermanfaat untuk kita ketahui.

Cara Membuat Tombol Back To Top Dengan Efek Lambat

Cara Membuat Tombol Back To Top Dengan Efek Lambat       SHADOWS || Cara Membuat Tombol Back To Top Dengan Efek Lambat, tentu para sobat pemula akan sedikit kurang paham, Nah Pada kesempatan kali ini saya akan berbagi kepada sobat tentang Bagaimana Membuat Tombol Back To Top Dengan Efek Lambat pada blogspot. Keren bukan jika di pasang di blog sobat.. pasti keren dong karena tombol ini mempunyai efek yang lambat seperti di blog saya ini. 

Apa gunanya Bagaimana Cara Membuat Tombol Back To Top Dengan Efek Lambat ini?

Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.

Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan lihat dibawah kanan blog saya disini, Bagaimana, menarik bukan...???

Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :
<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://1.bp.blogspot.com/-0GZVT1s8KaI/UMgg1K0FT4I/AAAAAAAABpI/NIAZPJeNp6w/s1600/navigate-up-icon.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>


NB:
URL yang saya beri warna merah di atas adalah url foto yang sudah diuplaod sebelumnya, silahkan dengan url foto sobat. ( punya tidak sobat gambar yang lain )??? Jika tidak punya comment ok.

Save template.

Selesai sudah Cara Membuat Tombol Back To Top Dengan Efek Lambat di blog sobat, semoga bermanfaat bagi sobat semua.

Cara Mudah Ganti Favicon 2

Cara Mudah Ganti Favicon 2

SHADOWS || Pernahkah sobat browsing ke-blog orang lain dan melihat icon blog mereka yang ada di tab browsing sobat (mozilla, google Chrome) dengan lambang icon yang lain, sedangkan di blog kita iconnya hanya seperti ini  tentu saja anda pasti ingin menggantinya Dengan Cara Mudah Ganti Favicon agar bisa lebih menunjukkan ciri khas blog sobat. Yang sebelumnya sudah saya share mengenai cara ganti favicon 1 lihat disini.
Untuk sekarang dengan agar lebih mudah ganti favicon di blog sobat.

Ikuti langkah-langkah dibawah ini:

1) Login ke blogger sobat
2) Sebelum mengcopy script, sediakan gambar berukuran 50px x 50 px. sobat bisa membuatnya sendiri dengan Photoshop, Paint, Flash, dll. atau meng-copy url gambar yang ada di Google dengan ukuran 50px x 50px
3) Jika sobat memakai gambar sendiri, uploadlah gambar tersebut di file hosting, lalu copy URLnya, bila sobat menggunakan gambar yang sudah ada di Google, Photobucket, dll. sobat tinggal copy URLnya
4) Masuk ke rancangan > Edit Html
5) Centang expand template widget
6) Cari kode ]]></b:skin> dengan menggunakan Ctrl+F atau F3
7) Jika sudah ketemu paste kode ini tepat di bawah kode ]]></b:skin>
<link href='http://3.bp.blogspot.com/_LZtXSNcp76A/S3j7-N2gKMI/AAAAAAAAA7U/-jpaq7_j2No/s320/favicon.jpg' rel='shortcut icon' type='image/x-icon'/>

8) Ubah tulisan berwarna merah tersebut dengan URL Gambar sobat
9) Lalu save
10) Sekarang coba preview blog sobat, bila tidak ada error maka Cara Mudah Ganti Favicon di blog sobat akan berubah.

Semoga dengan mudah ganti favicon di blog sobat bermanfaat...

Cara Mudah Ganti Favicon 1

Cara Mudah Ganti Favicon 1

SHADOWS || Cara mudah ganti favicon, bosan dengan tampilan favicon hanya itu saja?? pasti rata-rata dari kalian yang membuat blog dari blogger pasti faviconnya berlambang/ bersimbol "B" dengan background orange, betul bukan??
Nah, pasti anda bosan, masak tampilan hanya itu saja kurang keren ya gak sob... Sebenarnya anda dapat menggantinya dengan agar mudah ganti favicon gambar yang anda inginkan atau mengganti nya dengan lambang yang menunjukkan bahwa itu blog anda, jadi blog anda mempunyai keunikan tersendiri dari faviconnya.
1. Masuk ke "Dasboard" Blog anda kemudian cari menu "tata letak" disana. kemudian klik saja.
2. Kemudian setelah diklik akan muncul gambar seperti ini.



3. Setelah kata "edit" sudah anda klik terus akan muncul lagi gambar seperti ini.

Kemudian tinggal sobat masukan gambar yang sobat inginkan.. tergantung sobat memilih gambar apa yang sobat sukai..
Nah selesai sudah cara mudah ganti favicon di blog sobat, semoga bermanfaat..





Cara Pasang Daftar Isi Akordion dengan Auto Label

SHADOWS || Apa kabar.para sobat bloger, kali ini kita akan bahas mengenai daftar isi atau yang lebih populer dengan SITEMAP, yaitu peta situs yang akan terindek oleh google melalui Daftar Isi Akordion dengan Auto Label ini. Widget ini bentuknya sangat elegant, nah marilah kita lihat dan praktekan semoga berguna bagi para bloger, langsung menuju TKP gan


Cara Pasang Daftar Isi Akordion dengan Auto Label
                                                                 

                                                                                         Lihat Demo



Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:


Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script

type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" />
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true, 
    maxNew     = 10,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://shadows-k.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>



Ganti URL http://shadows-k.blogspot.com dengan alamat blog Anda, lalu Simpan dan Terbitkan.

Lebih Banyak Pilihan

OpsiNilaiKeterangan
showNewtrueJika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskanBaru! akan disembunyikan.
false
accToctrueJika bernilai true, efek akordion akan diterapkan, jika bernilai false, efek akordion akan hilang sehingga semua daftar isi akan terlihat.
false
openNewTabtrueJika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
false
maxNew1, 2, 3, ... (numerik)Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
baru"Baru!", "New!", "Terbaru!", ... (teks)Digunakan untuk mengubah teks Baru!.
sDownSpeed"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)Digunakan untuk menentukan kecepatan efek.slideDown() panel.
sUpSpeed"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)Digunakan untuk menentukan kecepatan efek .slideUp()panel.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Nah selesai sudah Cara Buat Daftar Isi Akordion dengan Auto Label semoga bermanfaat..