Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Cara Membuat Sitemap / Daftar Isi Pada Blog

0 komentar
Buat sitemap blog anda

Cara Membuat Sitemap / Daftar Isi Pada Blog - Apa kabar Bloggers ? baikkah ? semoga aja baik-baik aja di musim hujan in. Ok! kali ini
saya akan membagikan Tips Membuat Daftar Isi atau sering disebut dengan Sitemap untuk Blog anda.
Sitemap? apa yah? makanan kucing? hahaha, yang jelas bukan. Sitemap kalo diartikan satu-satu dalam bahasa inggris "Site" artinya Situs, sedangkan "Map", artinya Peta. Jadi dapat diartikan bahwa Sitemap artinya  peta situs.

Ok, langsung saja kepokok pembicaraan, Pembuatan sitemap cara membuatnya sangatlah mudah, yaitu berupa Halaman Daftar isi atau pun berupa .xml.Dan dibalik itu semua ada kekurangan dan kelebihannya masing-masing. Oke berikut cara membuat sitemap blog :

  • Sitemap Berupa Halaman
Berikut cara membuatnya :
  1. Dasbor Blogger
  2. Klik Laman
  3. Klik Laman Baru
  4. Klik Laman Kosong
  5. Copy pastekan kode berikut 
<script src="http://just4rt.nab.su/sitemap.js"></script>
<script src="http://www.just4rt.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
      6. Klik Simpan dan lihat hasilnya. :)

      Keterangan : Ubah tulisan berwarna biru dengan alamat blogspot anda.

  •  Sitemap Berupa .xml
  1. Pergi Ke Sitemap Generator
  2. Pada "Starting Url" masukkan Url Blogspot anda
  3. Pada "Change Frequency" ubah "None" Menjadi "Always"
  4. Pada "Last modification" biarkan saja
  5. Pada "Priority" Ubah 'None' menjadi 'Automatically Calculated Priority'
  6. Klik 'Start'
  7. Dan tunggu beberapa saat maka akan muncul url sitemap blog anda.

Read More »

Tutorial Memasang Tombool Share di Blog

0 komentar
http://www.just4rt.com/2013/07/tutorial-memasang-tombol-share-di-blog.html

Share Button atau Tombol Berbagi sudah merupakan hal yang harus di punyai bagi setiap blog karena dapat meningkatkan popularitas artikel yang di-share kan. Dan juga tombol share salah satu Teknik SEO Onpage. Backlink yang diberikan pun sangatlah berkualitas, itu bergantung dari situs mana yang akan artikel yang anda miliki untuk di submitkan. Namun banyak sekali Social Bookmark dan Social Profile yang memberikan backlink dofollow.

Pada kesempatan ini saya akan memberikan sedikit Tutorial Memasang Tombol Share di Blog. Tombol share ini terdiri dari Social Bookmark dan Social Profile yang sudah terkenal, yaitu : Facebook, Twitter, Google+, Digg, Technorati, Reddit dan LintasME. Tombol share ini sangatlah sederhana, tidak memerlukan javascript yang memberatkan atau mendaftar ke penyedia Tombol Share seperti Add This/Share This, dll. Anda cukup dengan mengcopy kode dibawah ini dan meletakkannya di template blog anda.Tombol share berikut ini adalah tombol share yang sedang saya gunakan saat ini, Tombol share inimodifikasi saya sendiri yang berawal dari Tombol share Mas Sugeng

http://www.just4rt.com/2013/07/tutorial-memasang-tombol-share-di-blog.html

Nah, berikut Tutorial Memasang Tombol Share di Blog :

#1 Buka Dasbor > Template > Edit HTML

Baca Juga : Cara Membuat Widget Blog Berada di Tengah Sidebar

#2 Tekan Ctrl + F, dan cari kode ]]></b:skin> serta Copy-Pastekan kode CSS dibawah ini tepat diatasnya

/* SHARE BUTTON */
#share-just4rt{font-size:13px;margin:10px 0px 10px;padding:8px 5px;}#share-just4rt p{float:left;display:block;padding:4px 0px 5px 0px;margin:5px 3px 0;}#share-just4rt a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:5px 5px;display:block;color:#fafafa;padding:5px 8px;margin:2px 3px 3px;
border:2px solid #fff;}#share-just4rt a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

#3 Cari kode <data:post.body/>, Jika ada 2 pilih yang kedua dan Copy-Pastekan kode HTML dibawah serta letakkan dibawah kode <data:post.body/>

<div id='share-just4rt'>
<p><b>Bagikan ke : </b></p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Bagikan ke Google+'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=Just4rtBlog&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Bagikan ke Twitter'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#111111;' target='_blank' title='Bagikan ke Digg'>Digg</a>
<a expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' style='background:#67b500;' target='_blank' title='Bagikan ke Technorati'>Technorati</a>
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#4E7DA9;' target='_blank' title='Bagikan ke Reddit'>Reddit</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#FF9900;' title='Bagikan ke LintasME'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>
#4 Lalu klik 'Simpan'

Read More »

Cara Membuat Artikel Terkait di Bawah Postingan

0 komentar

screenshootnya seperti ini:


ok,bagi sobat yang berminat dapat mengikuti langkah langkahnya sebagai berikut:

pertama:
seperti biasa buka akun blog sobat --> template--->klik edit HTML

kedua:
cari kode </head>,lalu copas kode dibawah ini tepat diatas kode </head>

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ru17PZbTD4JdCfwpJlbSrJ6yzQ-f8MfJB9N6gIdALFcymdz4zIghmF4k1pLxrXF-en3yvKN7K9Wqesx7_dQZsRcwr6AzPvApEBjwUvdlvMnaT1m06I7AYOXB64W7qhU2rR7BaiyHMait/s1600/No+Image.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;artikel lainnya:&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

keterangan:
warna biru adalah jumlah gambar yang ditampilkan dapat diganti menurut selera
warna merah dapat diganti menurut selera

ketiga:
setelah itu cari kode <data:post.body/> kalau sudah ketemu copas kode berikut tepat dibawah kode <data:post.body/> (biasanya kode <data:post.body/> ada 3 atau 4,pilih aja yang nomer 2 dari bawah):

<!-- Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts-->

keempat:
pratinjau dulu sob,kalau sudah tidak ada kesalahan klik simpan

Read More »

Cara Memasang Kotak Penulis di Bawah Postingan

0 komentar
contoh screenshoot author box adalah demikian:

ok langsung aja kita mulai
pertama:
Masuk Ke akun blog kalian--->template-> Edit HTML

kedua:
Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatas ]]></b:skin>

.admin-tulisan{
display:block;
width:auto;
background:#FF0000;
border:2px solid #0000CD;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#000000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #FFFAF0;
color:#000000;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#00FFFF;}
.admin-tulisan img{
width:80px;
height:80px;
margin:0 10px 0 0;
float:left;
border:1px solid #000000;
padding:2px;
background:#000000;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

ketiga:

cari  kode <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-timestamp'>
kalau udah ketemu lalu Copas Kode Berikut dan Letakkan diatas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ CUNGKUPMANIA BELAJAR NGEBLOG</h4>
<div class='kontainer'>
<img src='http://i1313.photobucket.com/albums/t551/curvasudsansiro/images12_zps3a51957e.jpg?t=1367951142'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan sobat serta kesediaan Anda membaca artikel ini.tinggalkanlah komentar baik itu kritik ataupun saran karena komentar anda sangat berarti bagi penulis demi perkembangan blog ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href=' http://wongcungkup.blogspot.com/2013/05/tips-membuat-kotak-info-penulis.html ' target='_blank'>:: klik untuk membuat kotak seperti Ini ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

keterangan :
  • ganti Tulisan Warna coklat dengan judul blog sobat
  • ganti Tulisan Warna merah  dengan URL Foto sobat
  • ganti Tulisan Warna ungu dengan kata-kata sesuka hati anda
keempat:
simpat tempate dan lihat hasilnya.

Read More »

Cara Mudah Membuat Favicon di Blog

0 komentar
Selamat siang temen-temen semua, lagi pada ngapain? Yah, kalau saya ya tiap hari kerjaanya begini ini. Ngisi postingan, makan, tidur, bangun, ngisi postingan lagi. Maklum blogger pemula ya jadi tiap hari penginya ngisi terus, nggak tau itu isinya mungkin bagi para pakar-pakar blogger mungkin udah basi. Basi juga nggak pa-pa, daripada nggak ngisi sama sekali. Setelah kemarin saya menulis artikel tentang Spam, hari ini saya akan kembali ke jalur semula yaitu tutorial blogspot atau blogger. Kali ini saya akan menulis tentang cara mengganti ikon address (favicon) yang ada di sebelah kiri alamat blog kita. Tidak semua situs memiliki favicon, namun jika anda sering mengakses situs Yahoo, Google atau Facebook maka di awal alamat situsnya anda akan melihat ikon, Y , G , atau F, nah itulah yang dinamakan favicon. Favicon digunakan untuk memberikan gambaran atau identitas sebuah website. Favicon bisa berupa Logo, Photo atau gambar yang lain. Dengan Favicon, maka website kita akan menjadi lebih menarik. 
Anda tertarik untuk membuatnya, anda harus punya gambar yang akan dipakai untuk membuat faviconnya. Jika sudah punya, simak baik-baik caranya berikut ini. 

I. Buka browser anda dan arahkan ke alamat www.genfavicon.com 

  1. klik Browse dan cari gambarnya di komputer anda . Kemudian klik Upload Image
    image
  2. Atur sendiri gambarnya, tarik kotak view sampai penuh (besar).

  3. Klik ukuran yang anda inginkan kemudian Klik Capture & Preview. Pilih ukuran yang paling kecil saja. 
    image
  4. Selanjutnya klik Download: jpg dan simpan gambarnya di komputer anda. 
  5. Langkah selanjutnya adalah anda harus mengupload gambar tersebut ke tempat penyimpanan online, contoh adalah ke Photobucket atau Google Sites
  6. Sekarang anggap saja anda sudah menyimpan gambar anda di tempat penyimpanan online, seperti ini contoh gambar yang telah saya simpan di google sites : 
    http://i1221.photobucket.com/albums/dd475/maskolis/favicon.jpg
II. Buka Blogger, masuk menggunakan ID anda. 
  1. Pilih Tata Letak
  2. Klik Edit HTML
  3. Pada halaman HTML, anda harus mengganti tulisan yang saya tandai dengan warna ungu dengan alamat url favicon anda  : 
    <link href='http://i1221.photobucket.com/albums/dd475/maskolis/favicon.jpg' rel='shotcut icon'/>
  4. Kemudian letakkan halaman url baru anda diatas kode </head> 
  5. Kemudian Save Template, mudah kan. 

Yah... itu tadi sedikit pengetahuan yang dapat saya berikan kepada teman-teman semua tentang bagaimana cara memasang favicon di blog. Semoga dapat bermanfaat bagi kita semua

Read More »

Cara Membuat Artikel Terkait di Feedburner

0 komentar
Artikel ini menjawab pertanyaan beberapa teman blogger yang ingin membuat fitur Related Post Thumbnail sekaligus dengan kotak Feedburner. Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Sebelumnya saya juga pernah membahasnya pada tutorial menambah dua kolom di bawah postingan, tapi hasilnya terlalu sederhana dan mungkin kurang menarik bagi minat pengunjung untuk berlama-lama di blog, apalagi perkembangan blogger sekarang ini, banyak sekali tutorial baru dengan menggunakan jQuery sehingga blogger menjadi salah satu CMS yang tidak bisa dipandang sebelah mata.

related post feedburner

Sebenarnya saya masih pengin berlama-lama ngobrol ngalor ngidul, tapi karena nanti malam ada pertandingan bola antara Barcelona versus AC Milan mesti cepet-cepet tidur biar bisa bangun nanti malem. Oke langsung saja, saya akan berikan tutorial untuk membuatnya, contohnya seperti gambar diatas demonya bisa dilihat disini di bawah postingan :
  1. Pertama Anda mesti login ke blogger dulu
  2. Kemudian klik Template > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan.
  4. Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
    #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0YwXzGTWR5Xba8H5JbUDj_xsC4_H-p51BJXsx0NHvW97qvXSF9MARozmN2GU4Dyd0uJn8kG0-VhVeGIgS4sA7lY5lmN3ajup1YbJpT3Q6V1hZe6GDWRbinZoiFj46VOC_gFUzf0diKE/) 0 50% no-repeat;vertical-align:middle}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
  5. 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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimUoTJu5HJ860sch8_-DPzjuao9jwLC8xKwFXZhhDfAv-FgvnchFE5oWNFp0pOWA5XRtBJ5bCUXqDj5kXSWI9akLQRylgN7B1XQE2b81an23_LIDmVyGhHZvApPqOlKVOOhVAHKV97EI/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/JohnyTemplate' 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://johnytemplate.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=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='JohnyTemplate'/>
    <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/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
    </form>
    </div>
    </div>
    </b:if>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
    Warna merah : ganti dengan URL anda.
  6. Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.
Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.

Read More »

Cara Cepat Mengatasi Loading Blog dengan Google Code

0 komentar
Kali ini saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang memiliki masalah dengan loading blog yang cukup berat. Loading atau proses membuka pada sebuah program menjadi salah satu faktor penting bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog, jika terlalu berat maka akan membuat kinerja blog yang kita kelola menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar koneksi internet.

Blog yang saya bahas disini adalah blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung pada seberapa banyak kode script yang kita masukkan ke dalam template tapi dengan asumsi kecepatan koneksi internet yang digunakan sama.  Beda dengan Wordpress atau platform blog lain yang menggunakan hosting sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya memakai template jenis magazine seperti yang sering saya buat, karena banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google sendiri juga menyarankan agar loading blog lebih cepat, paling tidak hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga menyerupai bentuk blog-blog profesional seperti platform lainnya dengan konsekuensi loading blog yang semakin lambat.

Bagi Anda pengguna blogger, saya akan memberikan solusi logis untuk meningkatkan performa kecepatan loading blog, khususnya bagi anda pemakai template style magazine. Jika anda memakai sebuah template dengan menggunakan banyak fitur, seperti slider, label per categori atau lainnya. Pasti pernah menemukan sebuah script yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template. 

Javascript yang belum disimpan di Google Code

Saya akan berikan contoh sebuah script dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh script di bawah ini saya ambil yang sederhana :
<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}

</script>
Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya :contoh.js). Dan pada Save as type pilih All filesEncoding biarkan pada ANSI, seperti pada gambar di bawah :


Setelah proses penyimpanan file di komputer sekarang kita simpan di Google Code agar bisa dipasang pada template. Buka Google Code Anda, kalau belum pernah menggunakan Google Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :
  1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
  2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.

    Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
  3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.

  4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.


  5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
    Sebelum disimpan di Google code

    Sesudah disimpan di Google code

    Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :
    <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>
    Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warnamerah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
Javascript yang sudah disimpan di Google Code

Nah sekarang bagaimana jika file javascript itu sudah disimpan di Google Code milik akun lain? Saya akan berikan contohnya dibawah :
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
URL Javascript warna merah diatas yang harus diganti dengan URL script dari Google Code anda. Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :


Kemudian tekan Enter pada keyboard. Jika muncul pilihan save, Anda tinggal save file tersebut kemudian upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika setelah tekan enter muncul kode javascript yang berderet-deret banyak sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.

Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog? Penjelasannya seperti ini, jika Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu terasa kalau yang memakai template itu banyak apa tidak semakin berat loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script si pembuat template rusak atau overload.

Itu tadi satu tips untuk mempercepat loading blog Anda dengan menyimpan file Javascript di Google Code Anda sendiri, silahkan dipahami dan semoga bermanfaat.

Read More »

Cara Membuat Menu Horizontal Animasi

0 komentar

Kali ini saya akan memeberikan sebuah tutorial cara membuat menu horizontal dengan animasi , penasaran? silahkan ikuti tutorial brikut ini.
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
    .animatedtabs{
    border-bottom: 1px solid gray;
    overflow: hidden;
    width: 100%;
    font-size: 14px; /*font of menu text*/
    }
    .animatedtabs ul{
    list-style-type: none;
    margin: 0;
    margin-left: 10px; /*offset of first tab relative to page left edge*/
    padding: 0;
    }
    .animatedtabs li{
    float: left;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a{
    float: left;
    position: relative;
    top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimI5JAB5ohKGoAMqZYtMUzXPo5xJXpnJcmyqt53qvMck0jmz66IlQheR_1TLYVIoo1IBFS7LXoVU3_oRSoMhOEc78p0NsfxIy1NNFLiEJz-ZgKyy9aXzy2WKZU4B30vvThYS8Y_muWYQg/s320/tab-blue-left.gif) no-repeat left top;
    margin: 0;
    margin-right: 3px; /*Spacing between each tab*/
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs a span{
    float: left;
    position: relative;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ELq3XvZ1mJVvxwAzdjLdCZ1nzltzBAJRqz_gPVqYUIRxDOa1-mdBceRrUH4-sLKiphtzx3UYTeDj1kHLupBfJwFkgSJj5k2tpFv_lDvCe_Rd2Ee3FjtIc3JOxHHISzTxbJN56mpB5qI/s320/tab-blue-right.gif) no-repeat right top;
    padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
    font-weight: bold;
    color: black;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .animatedtabs a span {float:none;}
    /* End IE5-Mac hack */
    .animatedtabs .selected a{
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected a span{
    background-position: 100% -125px;
    color: black;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
    .animatedtabs a:hover{
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a:hover span{
    background-position: 100% -125px;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }

  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class='animatedtabs'>
    <ul>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
    </ul>
    </div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

Read More »

Cara Membuat Slider Image Otomatis

0 komentar
image slider otomatis


Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :
InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
    #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
    #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
    .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
    .featuredTitle a{color:#f7441a}
    .featuredTitle a:hover{color:#000}
    .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
    ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
    ul.pagination a { float:left; margin:0 5px; display:inline; }
    ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKvkT7L0jp1NwfghXo9BR_rWFVQS5Mc5FHKitFcZMGopuG2v4QnqJW2wP0HAxkOR18DmiOvy7sz9EAInQA3P_DS6PHLIgk4EjO1hh6P7DdF-_T4kLLO2bWE-MmdcEFuOr1VS4bkRt7J4s/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a.activeSlide { background-position:0 -12px }
    a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5HgXqKpJ10DIw3OE-OV1UwshQzVqFeZXR7AWFnvwvlnpd27gZAejd2R_ka8IIrcfxOWIaPmtpZuLQCQTddzD59kZvocqSMnVdnVOYlGqfFNxNx6G4K-rx93sYiksQKSdPNLirWqjxfc/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
    border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
    a.readmore:hover {color:#ff0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimUoTJu5HJ860sch8_-DPzjuao9jwLC8xKwFXZhhDfAv-FgvnchFE5oWNFp0pOWA5XRtBJ5bCUXqDj5kXSWI9akLQRylgN7B1XQE2b81an23_LIDmVyGhHZvApPqOlKVOOhVAHKV97EI/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 150;
    summaryTitle = 25;
    numposts  = 7;

    function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
        document.write('<div class="slides">')
    if (numposts <= json.feed.entry.length) {
    maxpost = numposts;
    }
    else
           {
       maxpost=json.feed.entry.length;
       }
       for (var i = 0; i < maxpost; i++) {
         var entry = json.feed.entry[i];
         var posttitle = entry.title.$t;
    var pcm;
         var posturl;
         if (i == json.feed.entry.length) break;
         for (var k = 0; k < entry.link.length; k++) {
           if (entry.link[k].rel == 'alternate') {
             posturl = entry.link[k].href;
             break;
           }
         }

    for (var k = 0; k < entry.link.length; k++) {
           if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
             pcm = entry.link[k].title.split(" ")[0];
             break;
           }
         }

         if ("content" in entry) {
           var postcontent = entry.content.$t;}
         else
         if ("summary" in entry) {
           var postcontent = entry.summary.$t;}
         else var postcontent = "";
        
         postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
    document.write(trtd);


    j++;
    }
        document.write('</div>')
    }

    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212adalah panjang dan lebar image yang ada di slider.
  7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='featuredSlider'>
    <div class='container'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='navigation'>
    <ul class='pagination'/>      <script>
    $(&#39;.slides&#39;).cycle({
     fx:     &#39;fade&#39;,
     speed:  &#39;slow&#39;,
     timeout: 3000,
     pager:  &#39;.pagination&#39;
     });
    </script>
    </div>  </div> <!--end .container-->
    </div>
    </b:if>
    Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
    /feeds/posts/default?max-results
    Menjadi :
    /feeds/posts/default/-/your label?max-results
    Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
  8. Terakhir, save templates dan lihat hasilnya. 

Read More »