Please Share This Articles ››
Follow Me on Pinterest
background
.

UBlog

  • home
  • Sitemap
  • Contact
    • Contact
    • Forum
  • Blogger Tips
    • CSS
    • jQuery
    • SEO Friendly
    • Widget
    • Tools Blog
    • Other Trik
  • Lifestyle
    • Info Unik
    • Info Islami
    • Sub Menu 3
    • Sub Menu 4
  • Live Streaming
    • TV Online
    • Jadwal Sholat
    • Al-Qur'an Online
    • Al-Hadist Online
  • Other Links
    • Kritik Dan Saran
    • Request Blogger Themes
  • Link Exchanges
    • Blog Link/Banner
    • Friend Link/Banner

Recommendations

Latest Movie

Categories

  • Admin
  • Bollywood
  • Breaking News
  • Browser
  • CSS Code Snippet
  • CSS3
  • Driver
  • Emotions Komentar
  • Gallery
  • Gambar Animasi GIF
  • Game Flash
  • Hack Threaded Comments
  • Info Islami
  • Info Teknology
  • Info Unik
  • Javascript
  • jQuery
  • Lightbox Plugin
  • Menu Horizontal and Vertical
  • Photoshop
  • Premium Template
  • SEO
  • Slider Plugin
  • Submit Website
  • Template Blogger
  • Tips-Trik Facebook
  • Tips-Trik Handphone
  • Tips-Trik Internet
  • Tips-Trik Windows
  • Tools Blog
  • Tutorial Lainnya
  • TV Streaming
  • Widget
  • Zoom Plugins
Tampilkan postingan dengan label Tutorial Lainnya. Tampilkan semua postingan

Teknik SEO Blogspot memang tidak ada habis-habisnya untuk diterapkan atau dipraktekkan. Semua blogger pasti mendambakan SEO mereka agar optimal untuk blog-blog mereka. Nah, kali ini saya akan memposting artikel yang ada hubungannya dengan belajar SEO blogspot.
Hmm.. kira-kira apa ya?

Berbagai cara memang telah dilakukan untuk meningkatkan optimasi SEO blogspot, seperti halnya dalam memilih template blog. Memilih template blog yang benar memang mutlak diperlukan. Jika dalam memilih template blog dengan asal-asalan, alhasil nantinya SEO blogspot kita akan kacau.

Maka pilihlah template blog Anda dengan benar. Benar disini maksudnya adalah tampilannya bagus, tidak mencolok mata, cocok untuk tema blog kita, dan yang lebih penting lagi adalah SEO Friendly.

Nah, jika mungkin Anda ingin membuat template blog Anda agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Anda. Berikut cara-caranya!

1. Page Title
Biasanya format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.

Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F pada keyboard!

<title><data:blog.pageTitle/></title>

Kalo udah dapet kodenya, silakan Anda hapus dan ganti dengan kode berikut ini!

    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>


Atau Anda juga bisa tambahkan dengan beberapa kata kunci (keyword).

    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | KATA KUNCI ANDA |
KATA KUNCI ANDA </title>
    </b:if>


Ganti kode "KATA KUNCI ANDA" dengan keyword yang Anda incar. Setelah semua selesai jangan lupa untuk save template.

2. Meta Keyword dan Deskripsi
Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Anda harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta name="description" content="DESKRIPSI BLOG ANDA" />
    <meta name="keywords" content="KATA KUNCI,
KATA KUNCI, KATA KUNCI" />
    </b:if>


Setelah itu, save template Anda.

3. Memasang Breadcrumbs
Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging.

4. Memasang Related Post
Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Anda. Caranya sudah banyak dibahas di blog-blog para guru blogging.

5.  Mematikan Setting Blog Archive (Arsip Blog)
“Lho?”
“Buat apa?”

Begini, Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Anda ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Anda akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGANDA.blogspot.com/2013_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai sudah! :)

6. Menambahkan Kode ‘Rel=Canonical’
Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Anda tambahkan kode berikut setelah kode <head>.

    <link expr:href='data:blog.url' rel='canonical' />

Save template dan selesai.

7. Tag Heading
Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Anda dengan tag H1. Caranya cari kode berikut!

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</
h3>
</b:if>


Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

    h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Nah, mungkin cukup sekian dulu dari saya tentang bagaimana cara mengedit template blog agar SEO friendly kali ini. Sebelumnya tips ini saya rangkum dari berbagai sumber ketika saya lama belajar SEO blogspot walaupun SEO blog saya belum seoptimal blog master di luar sana. :)

Semoga bermanfaat dan sukses selalu!

Terima kasih.

Kali ini saya akan memberikan tutorial cara membuat 'jCarousel Conten Slider With jQuery' dan tutorial kli ini tanpa sengaja saya temukan di salah satu situs yg kebetulan themes itu harus berbayar, nah tanpa pikir panjang saya coba untuk mengambil HTML dari content slider yg terpasang di themes ini, oia klw sobat ingin melihat situs yang tadi saya maksud, bisa klik disini,,, :D

ya udah kita langsung saya melihat hasilnya dibawah ini yg sudah saya modif..

Example jCarousel Conten Slider With jQuery!

Recent Works

Lorem ipsum dolor sit amet, consect etuer adipiscing elit, sed diam nonummy nibh euismod!


dan untuk memasangnya dibawah ini saya sudah memberikan kode CSS,SCRIPT & HML yg bisa sobat pasang di template..

CSS::

/*--Bottom Container--*/
#bottom-container {
background:#111;
width:730px;overflow:hidden;
height:165px;
border-top:1px solid #333;border-bottom:1px solid #f9f9f9;
margin:5px auto;
float:left;
}
/*--Recent Works--*/
#recent-works {
width:730px;
margin:0 auto;
margin-top:35px;
float:left;
}
.rw-text {margin-top:-5px;
width:220px;
float:left;
margin-left:20px;
}
.rw-text h2 {text-transform:uppercase;font-weight:400;
font-family:century gothic;
font-weight:bold;text-align:center;
color:#932601;text-shadow:0 1px 1px #000;
font-size:20px;
}
.rw-text p {text-align:justify;
font-family:century gothic;
font-size:13px;
color:#bbb;text-shadow:0 -1px 1px #000;
line-height:21px;
clear:both;
padding:0;
overflow:hidden;
height:60px;
}

#bottom-container img{-webkit-transform:scale(1.0);-moz-transform:scale(1.0);-o-transform:scale(1.0);-ms-transform:scale(1.0);transform:scale(1.0);-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;}
#bottom-container img:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}

#mycarousel li img {width:150px;height:137px;}

/*--Jcarousel--*/
.jcarousel-skin-tango .jcarousel-container {
float:left;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
direction:rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width:395px;
height:100px;
margin-left:20px;
}
.jcarousel-skin-tango .jcarousel-clip {
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
height:100px;
overflow:hiddden;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left:0;
margin-right:13px;
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-item {
width:110px;
height:84px;
border:6px solid #222;
}
/* Horizontal Buttons */
.jcarousel-skin-tango .jcarousel-next-horizontal {
position:absolute;
top:20px;
right:-48px;
width:32px;
height:32px;
cursor:pointer;
background:transparent url(http://www.3host-ks.com/overlay/images/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left:5px;
right:auto;
background-image:url(http://www.3host-ks.com/overlay/images/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
background-position:-32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position:-64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor:default;
background-position:-96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position:absolute;
top:52px;
right:-49px;
width:32px;
height:32px;
cursor:pointer;
background:transparent url(http://www.3host-ks.com/overlay/images/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left:auto;
right:5px;
background-image:url(http://www.3host-ks.com/overlay/images/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
background-position:-32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position:-64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor:default;
background-position: -96px 0;
}

SCRIPT::

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

<script type="text/javascript" src="http://ut2a-4down-blogspot-com.googlecode.com/files/jCarousel_content.js"></script>

<script type="text/javascript">
//<![CDATA[
// Jcarousel
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});

// Fade
jQuery(document).ready(function() {
$('#mycarousel img').hide();
$('#mycarousel img').fadeIn(800);
});
//]]>
</script>

HTML::

<!--Bottom Container-->
<div id="bottom-container">
<!--Recent Works-->
<div id="recent-works">
<div class="rw-text">
<h2>Recent Works</h2>
<p>
Lorem ipsum dolor sit amet, consect etuer adipiscing elit, sed diam nonummy nibh euismod!
</p>
</div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://pap.az/uploads/pap/fotos/friends-girl-sweet.jpg" alt=""/></li>
<li><img src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/06/photography-sweet-little-girl-wallpaper-320x240.jpg" alt=""/></li>
<li><img src="http://pap.az/uploads/pap/fotos/girl-sweet-black-cat.jpg" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-UqdLT-utNhNXXjRk184f0uiQsGez6xWYHMD__WdV4f3ZSQcDK2toogKGMfaWBu7QciHOFq-T2SJJ6KdGVBpEkx2KRjpi238SSbniT1_DocMu0O2wgDfPFFK9dQUZPoIr2Qm5JabXC3lA/s400/sweet-model-girl-5_wallcoo.com" alt=""/></li>
<li><img src="http://s3.favim.com/orig/47/emma-watson-girl-london-smile-sweet-pea-Favim.com-438499.jpg" alt=""/></li>
<li><img src="http://photogallery.indiatimes.com/celebs/indian-stars/ameesha-patel/ameesha-to-play-a-prostitute/photo/11414173/Actress-Ameesha-Patel-is-finally-shedding-her-sweet-girl-next-door-look-and-is-set-to-don-a-spicy-cracker-of-a-role-of-a-high-profile-prostitute-.jpg" alt=""/></li>
<li><img src="http://images.fineartamerica.com/images-medium/smiles-sweet-smiley-cute-girl-becca-watters.jpg" alt=""/></li>
<li><img src="http://www.baby-pictures.org/wp-content/uploads/2011/03/Wallpaper-of-Sweet-Baby-Girl-480x350.jpg" alt=""/></li>
<li><img src="http://www.wallcoo.net/celebrity/horikita_maki/images/%5Bwallcoo_com%5D_PhotoBook_Horikita.Maki_NS.EYES.No.2_014.jpg" alt=""/></li>
<li><img src="http://s5.favim.com/orig/54/demi-lovato-girl-sweet-Favim.com-533140.jpg" alt=""/></li>
<li><img src="http://www.flashcoo.com/Celebrity/Horikita_Maki/images/%5Bwallcoo_com%5D_PhotoBook_Horikita.Maki_NS.EYES.No.2_015.jpg" alt=""/></li>
</ul>
</div>
</div>
<div class='clear'></div>
<!--End Bottom Container-->

Silahkan dirubah sesuai keinginan, good luck ^^
Baiklah saya langsung saja yah all, soalnya da keburu mlm :D , jadi Related Post (Artikel Terkait) yg akan saya share kali ini, yaitu related post ala template gallery yg dmna dilengkapi thumbnail images overlay. nah berhubung karena saya telah memasang related post pada tempalate yg sy share beberapa hari lalu, jadi sobat bisa melihat contoh secara details dari related post ini.!heheee,..

Oke, biar gampang bisa dilihat seperti gambar di bawah ini :


atau bisa lihat contohnya pada template saya disini,... Gimana?? tertarik untuk memasangnya....
jika begitu sobat tinggal mengikuti langkah-langkah berikut.

1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Carilah kode </head> ,lalu letakkan Kode CSS berikut tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style media='screen' type='text/css'>
/*----- http://ut2a-4down.blogspot.com/ Related Post -----*/
.relatedproduct h1{font:bold 22px arial;color:#5E0001;text-shadow:0 1px 0 #444;}
ul#related-posts{font-size:15px;list-style:none;text-transform:none;margin:10px 0;padding: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:4px solid #bbb;display:block;height:106px;position:relative;width:101px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:100px;line-height:16px;position:absolute;width:95px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqhro8zJfmKkw-lp3pLVK2yCGF7rFrUs8QE2TC-Ui-aujkXYjVMIWIHCx8_i_nbeNNQk9X3ctB7qVA2mxE7Qiq2vfWJABdrg0WsPQ5q2dyKYIAiOqvt0reoAEKiSWTpLeBlB9fMYsJKU/s1600/transparant.png);display:block!important;}
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);border:4px solid #666}
</style>
</b:if>

5. Langkah Selanjutnya kita cari lagi Kode <p><data:post.body/></p> , Setelah ketemu, letakkan kode script berikut tepat dibawahnya. (bisa juga diletakkan diatas kode <div class='post-footer-line post-footer-line-1'> )

<!-- Related product  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='relatedproduct'>
<h1>Related product you might see:</h1>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhCc1fQBA0UtQyOVsmWUCBSCfCbPXt1Nk0noQ6DRp3nNecigbxc8wnYr1ZgfsaRqD7f5m7oShiQfqKFBhcwmzQRUOBwXozSSAzahn7D5YQ_n_d737IIjqBQxfF2ulSqxyhcrOIdXTkfI/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6msPUhKnxyRmnzJn8yVBHRyF3EFIoTHTHj0PQ5YNIBLIdWJfpV5x9pFs3ArgAOOb1RhF9saGVwDlaRcDLKS3k6RrQrgWV9UY4LnvrqyLr1h_7c_y3HhM4qi72VWwtguheXFPja6v8UEE/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:101px;height:101px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</div>
<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>
</b:if>
<div style='clear: both;'/>
<!-- Related product  -->

6. Priview dulu, jika tidak terjadi masalah pada templatenya, maka baru Klik SIMPAN TEMPLATE.

NB :>> Diatas terdapat tulisan yang berwarna, sobat tinggal merubahnya saja sesuai keinginan.

Lihat Juga Related Post Yang Lainnya :

1. Pasang Related Post (Artikel Terkait) Thumbnails - Marquee (Berjalan). dan
2. Pasang Related Post (Artikel Terkait) With Thumbnail And Summary.
3. Pasang Related Post (Artikel Terkait) Cantik Ala Utta Bag.2

Semoga tutorial ini berguna bagi anda, jangan lupa komentarnya yach.hehee,.. ^^

Hallo sobat blogger, Sudah lama yaa sy gk update tutorial blogger? :D
oke pada kesemptan kli ini saya akan berbagi tutorial lgi nih, yaitu cara membuat 'FixedNavigation and Back to Top With jQuery', sebenar'nya sy juga gk tau persis judul apa yg tepat untuk trik ini, tp setidaknya gk jauh beda lah ama hasilnya.hehee....

Sebelum saya melanjutkan tutorial ini, sy akan mencoba jelaskan sedikit mengenai cara kerja tutorial ini, jadi selain dilengkapi dengan fitur 'back to top' fixednavigation ini jg memiliki menunavigation tambhan, dimana pada saat anda melakukan scroll di blog, mka fitur ini akan muncul dan menampilkan menunavigation + Back To Top!
dan untuk contohnya sobat bisa lihat di themes 'JKT48 REV' disini, dan perhatikan menu dibagian atas yang akan kluar jika anda mencoba scroll..

Baiklah jika sobat tertarik membuatnya silahkan ikuti langkah-langkah berikut:




    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/* FixedMenuNavigation */
#go_headerFixedNavigation{width:100%;background:#222F63;text-shadow:0 0 1px #fff;position:fixed;display:none;top:0px;z-index:99999;height:31px;overflow:hidden;font-family:'arial',Helvetica,Arial;}
#go_headerFixedNavigation ul#go_mainNav {margin:0;list-style:none;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li{margin:0;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li a{display:block;padding:4px 8px;text-decoration:none;}
#go_headerFixedNavigation ul#go_mainNav li a:hover{background:#f8f8f8}
#go_headerFixedNavigation nav#go_leftNav{}
#go_headerFixedNavigation nav#go_rightNav{float:right}
#go_headerFixedNavigation nav#go_rightNav a{display:block;background:#cf0404;height:19px;padding:7px 22px 5px 23px}
#go_headerFixedNavigation nav#go_rightNav a:hover{background:#f7f7f7;color:#888;}
#go_headerFixedNavigation ul#go_mainNav li a{font-family:'Oswald',Helvetica,Arial;font-size:140%;color:#ddd;text-transform:uppercase}
#go_headerFixedNavigation ul#go_mainNav li a:hover{color:#888;}
#go_headerFixedNavigation nav#go_rightNav a{font-size:120%;text-transform:uppercase;color:#fff}
#go_headerFixedNavigation nav#go_rightNav a:hover{text-decoration:underline}

4. Selanjutnya cari kode </head> , lalu letakkan script berikut tepat diatasnya :

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

<script language='JavaScript' type='text/javascript'>
$(document).ready(function () {
  var top = $(&#39;#go_bottomLine&#39;).position().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
     if (y &gt;= top) {
        if(!$(&#39;#go_headerFixedNavigation&#39;).hasClass(&#39;open&#39;)) {
            $(&#39;#go_headerFixedNavigation&#39;).addClass(&#39;open&#39;);
            $(&#39;#go_headerFixedNavigation&#39;).slideDown(&#39;fast&#39;);
        }
    } else {
        if($(&#39;#go_headerFixedNavigation&#39;).hasClass(&#39;open&#39;) ){
            $(&#39;#go_headerFixedNavigation&#39;).removeClass(&#39;open&#39;);
            $(&#39;#go_headerFixedNavigation&#39;).slideUp(&#39;fast&#39;);
}}
});
$('.go_backTopButton').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>

5. Selanjutnya cari kode <body> , lalu letakkan kode berikut dibawahnya :

<div id='go_headerFixedNavigation'>
<nav id='go_leftNav'>
<ul id='go_mainNav'>
<li><a expr:href='data:blog.homepageUrl'>Portal</a></li>
<li><a href='#LINK-HERE'>Forum</a></li>
<li><a href='#LINK-HERE'>Blog</a></li>
<li><a href='#LINK-HERE'>Archive</a></li>
<li><a href='#LINK-HERE'>Store</a></li>
<li><a href='#LINK-HERE'>Files</a></li>
<li><a href='#LINK-HERE'>Search</a></li>
<li><a href='#LINK-HERE'>Members</a></li>
</ul></nav>
<nav id='go_rightNav'>
<a class='go_backTopButton' href='#' title='Top'>Back to Top</a>
</nav>
</div>

6. Selanjutnya cari kode <div id='header-wrapper'> , lalu letakkan kode berikut ini diatas/dibawah nya :

<div id='go_bottomLine'/>

7. Langkah terakhir Priview dlu, jika tidak terjadi kesalahan, baru deh sobat save template.
Mengganti posting lama dan posting lebih baru dengan judul. Mungkin Anda sering melihat sebuah blog yang menampilkan posting lama dan posting lebih baru dengan judul postingan. Hal ini dilakukan untuk memudahkan pengunjung melihat postingan sebelumnya, atau sesudahnya.

Bagi Anda yang ingin merubah teks posting lama dan posting lebih baru, hanya memerlukan dua langkah mudah saja. Sebagai contoh, lihat gambar dibawah ini :

 
Menambahkan Kode jQuery

Hal ini tidak perlu dilakukan, apabila dalam template Anda sudah ada kode jQuery, bagi yang belum ada, silahkan pasang kode jQuery di bawah ini setelah kode </head> kemudian simpan template.

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

Menambahkan Kode di Widget HTML/JavaScript

Tambahkan kode ini pada widget HTML/JavaScript.

<style type="text/css">
.home-link{display:none}
#blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("\u2190" + newerLinkTitle);
});
});
</script>

Kostumisasi

Untuk kostumisasi atau penyesuaian dengan blog Anda, silahkan edit beberapa kode di atas, diantaranya :

  • font-size:12px (untuk merubah ukuran huruf, ganti 12px sesuai keinginan)
    width:200px (lebar dari judul yang ditampilkan, ganti 200px sesuai keinginan)
    font-family:Arial, sans-serif (ganti sesuka anda, misal Georgia, Trebuchet MS, Verdana, dll)

Setelah selesai, silahkan lihat di bawah kolom komentar.

sumber
Assalamu Alaikum Wr.Wb.
Sudah lama yaa utta gk share mengenai tutorial blogger,hehe karena saya disibukkan dengan mendesign themes yg dipesanan sma beberpa teman blogger! :D! maka dari itu pada kesempatan kali ini sya akan berbagi tutorial lagi yaitu 'Pasang Random "Banner" Di Widget Blogger' jadi random banner adalah cara terbaik untuk mempromosikan konten/Iklan di blog Anda, nah setiap kali pengunjung akan melihat sebuah spanduk/banner/sponsor yang akan secara berganti / iklan jika masuk disetiap postingan di blog Anda!


Baiklah langsung ke intinya ajj deh, nah,.. jika anda tertarik mencobanya silahkan ikuti langkah-langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

<script language="JavaScript">
images = new Array(5);
images[0] = "<a href = 'URL OF ADVERTISER 1' rel='nofollow' target='_blank' title='TITLE ADVERTISER 1' ><img src='URL IMAGE HERE 1' border='0' height='250px' width='280px' ></a>";
images[1] = "<a href = 'URL OF ADVERTISER 2' rel='nofollow' target='_blank' title='TITLE ADVERTISER 2' ><img src='URL IMAGE HERE 2' border='0' height='250px' width='280px' ></a>";
images[2] = "<a href = 'URL OF ADVERTISER 3' rel='nofollow' target='_blank' title='TITLE ADVERTISER 3' ><img src='URL IMAGE HERE 3' border='0' height='250px' width='280px' ></a>";
images[3] = "<a href = 'URL OF ADVERTISER 4' rel='nofollow' target='_blank' title='TITLE ADVERTISER 4' ><img src='URL IMAGE HERE 4' border='0' height='250px' width='280px' ></a>";
images[4] = "<a href = 'URL OF ADVERTISER 5' rel='nofollow' target='_blank' title='TITLE ADVERTISER 5' ><img src='URL IMAGE HERE 5' border='0' height='250px' width='280px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

5.Save dan slesai deh.. :D

KET:: Silahkan sobat sesuaikan sendiri yang sudah saya beri tanda!



Semoga tutorial ini berguna bagi anda. TRIM'S ^^

Connect This Blog

Most Popular This Week

  • no image
    Tukeran Link Banner Exchange
  • Anime Naruto Uchica Uniqx Template
    Anime Naruto Uchica Uniqx Template
  • Daftar dan Pilih Paket Internet Smartfren (Harian,Bulanan) Update Terbaru
    Daftar dan Pilih Paket Internet Smartfren (Harian,Bulanan) Update Terbaru
  • Monster Energy Template
    Monster Energy Template
  • U-Special Dark Shadow Edition Template
    U-Special Dark Shadow Edition Template
  • 23, 24, 25 DESEMBER 2012 Bumi Akan Gelap Total?
    23, 24, 25 DESEMBER 2012 Bumi Akan Gelap Total?
  • Update Status Facebook Via "Apa Saja" (Alternatif)
    Update Status Facebook Via "Apa Saja" (Alternatif)
  • Daftar Link Banner Teman
    Daftar Link Banner Teman
  • Merubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Bag.4
    Merubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta' Bag.4
  • Followers
  • Comments

Followers

    Latest From

    More on this category »
    More on this category »

    Live Traffic


    free counters

    Friends Links

    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here
    • Your-Link-Here

    Recomended:

    Compatible with:

    Pageview

    █║▌│█│║▌║││█║▌│║▌║█║║▌ Copyright © 2010- | Design Modification by : akaUTta | Best Template 2013.All Right Reserved.
    Hak Cipta © Seluruh informasi,tips,trik,tutorial dan template dilindungi Undang-Undang. Plagiat tanpa mencantumkan sumber atau menghapus nama saya dibagian credit template hasil karya saya, maka saya tidak segan-segan untuk menegur atau memposting Website tersebut secara permanen. Salam Blogger Indonesia.
    go top google+ page facebook twitter rss
    adsleft160
    adsright160