Blog Kang Fatur: Tutorial Blogger

    Social Items

Home / Tutorial Blogger
Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts
Resent Post Slider
Featured post yang pada umumnya diletakkan pada halaman beranda bermacam-macan model atau tampilannya. Diantaranya ada yang berbentuk carausel dan slideshow. Nah kali ini saya akan memberikan script untuk menampilkan featured post/slider yang responsive menggunakan Elasticslideshow.

Elasticslideshow ini dibuat oleh louis_remi pada tahun 2011 dengan nama smartresize dan merupakan script slider dengan menggunakan jQuery. Sehingga setidaknya blog anda sudah terdapat jQuery librarynya agar dapat berfungsi.

Baik langsung saja dengan cara penerapannya.

1. Silahkan login ke blog Sobat > Template > Edit HTML

Kemudian salin dan pastekan kode di bawah ini tepat sebelum ]]></b:skin> atau </style> 

 /* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Pada CSS di atas saya menggunakan font Oswald, silahkan ganti dan sesuaikan dengan tema blog anda.

2. Salin dan pastekan kode di bawah ini tepat di atas </body> 

 <script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-SOBAT",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


Ganti Tulisan URL-BLOG-SOBAT dengan URL Blog sobat.


3. Salin dan pastekan kode di bawah ini dimana saja bebas. Bisa sebelum content-wrapper atau di bawah menu-wrapper 

 <div id="featuredpost"></div>


4. Terakhir simpan template dan lihat hasilnya.

Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus kode HTML-nya dengan tag kondisional khusus halaman utama. Contoh :

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>



Source : http://www.kompiajaib.com/2014/11/menambahkan-penomoran-baris-pada-prism.html

Memasang Responsive Recent Post Slider

Salam kangen semua para blogger, lama sekali saya gak posting-posting sudah hampir satu bulan lebih, ya dikarenakan kesibukan pribadi yang tidak mau ditinggalin hehe.

Baik para sobat semua kita langsing aja kali ini saya akan membahas tutorial tentang cara membuat Artikel Terkait di Sidebar (related post)dimana pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat.



Sebenarnya artikel terkait ini bisa juga diletakkan dibawah postingan, tapi saya tidak akan membahasnya karena sudah pernah saya bahas di postingan saya yang lalu.



Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :



Langkah I

1. Seperti biasa login dulu ke blogger.
2. Masuk ke Elemen Halaman.
3. Kemudian Tuju Edit HTML.
4. Klik Expand Template Widget.
5. Letakkan kode berikut ini sebelum kode </head>


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>



6. Kemudian cari kode seperti dibawah ini :



<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>



7. Kemudian ganti kode di atas dengan kode di bawah ini :



<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>


CATATAN :
Perhatikan kode max-results=15, angka 15, itu merupakan jumlah artikel terkait yang akan ditampilkan di sidebar. Sobat bisa menggantinya sesuai keinginan.


8. Simpan Template, sampai disini proses Edit HTML sudah selesai.
9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.
10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :



<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>



11. Jangan lupa beri judul, lalu klik Simpan.



Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.

Berikut langkah-langkahnya.

Langkah II

1. Klik Edit HTML.
2. Klik Expand Template Widget.
3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :



<b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>



4. Kemudian klik Simpan Template.

PERHATIAN :
Pada kode yang berwarna hijau tebal adalah kode/kata judul widget yang tadi sobat buat.
Kemudian pada kode yang bercetak Kuning, itu sebenarnya sobat abaikan saja apa bila tidak sama kodenya.. karena itu hanya urutuan widget pada blog saja.
Nah, pada kode yang berwarna merah, itu sebenarnya kode yang berfungsi agar widget Related Post hanya tampil pada postingan blog saja.



OK, Mungkin tutorial kali ini sampai disini saja dulu, selamat mencoba aja dan semoga berhasil dan bermanfaat di hati para soba.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Loading



Membuat Artikel Terkait di Sidebar (Related Post)

Link Otomatis Terbuka Tanpa di Klik - kalo ngomongin soal link emang seru deh . . gimana engga, buat orang-orang yang bergaul ama dunia internet khususnya blog/website pasti ga bakalan jauh dari yang namanya link.
ok... kali ini saya mau share salah satu cara buat ngemodifikasi link, bukan cara baru sih dan bisa di bilang cara ini udah jadi rahasia umum yang diketahui banyak orang. tapi engga apa-apa lah, yang penting berbagi... sayang kan kalo ilmu di simpen sendiri aja. . .


Coba perhatiin link dibawah ini deh !!

HTML Color Code

Kode link diatas:

<a href="http://ade-tea.blogspot.com/2011/09/kode-warna-html-v4.html">HTML Color Code</a>


Link di atas ngegunain kode link yang biasa. Coba linknya disorot pake mouse deh !! Link tersebut engga akan terbuka secara otomatis (buat buka linknya harus di klik).

Sekarang coba perhatiin link dibawah ini !!

HTML Color Code

Kode link di atas:

<a href="http://ade-tea.blogspot.com/2011/09/kode-warna-html-v4.html"><span style="color:lime;">onMouseover="window.location=this.href"</span>&gt;</a>


Link di atas kalo disorot mouse akan terbuka secara otomatis sebab kode linknya udah ditambahin onMouseover="window.location=this.href"

Sedikit ulasan tentang cara modifikasi link, mudah-mudahan bermanfaat . . .


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Link Otomatis Terbuka Tanpa di Klik

SEO FRIENDLYBerbagai 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 Sobat 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 Sobat ingin membuat template blog Sobat agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Sobat. 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 Sobat 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 Sobat 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 SOBAT| KATA KUNCI SOBAT </title>
    </b:if>



    Ganti kode "KATA KUNCI SOBAT" dengan keyword yang Sobat 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, Sobat 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 SOBAT" />
    <meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
    </b:if>


    Setelah itu, save template Sobat.

  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 Sobat. 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, Sobat ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Sobat akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGSOBAT.blogspot.com/2007_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 Sobat 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 Sobat 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.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Mengedit Template Blog Agar SEO Friendly

Pada postingan sebelumnya pernah saya membahas tentang "Cara Membuat Slideshow Dengan Jquery Cycle Plug In" dan "Floating Menu JQuery Dengan Link Efek Disko"

Sekarang kita akan membuat menu navigasi dengan efek slide out yang tetap menggunakan framework jQuery. Menu ini mempunyai efek slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark dan lain sebagainya. Seperti contoh pada gambar di bawah ini :

kang fatur

Jika sobat ingin mencobanya silahkan iktui langkah langkah berikut :

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>


Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}



Langkah 6
Cari kode dibawah ini:

</head>


Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>


Langkah 8
Cari kode dibawah ini:

</body>


Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:

<ul id='menusisi'>
<li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>
<li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>
<li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>
<li class='alat'><a href='LINKSOBAT' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>
<li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>
</ul>



KETERANGAN
  1. Ubahlah LINKSOBAT sesuai dengan link keinginan sobat.
  2. Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan sobat.
  3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
  4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
  5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
  6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah sobat siapkan.




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Navigasi Efek Slide Out dengan jQuery

Aatas permintaan sahabat SERI kali ini saya setelah berbuka puasa dan sebelum tarawih menyempatkan diri untuk menulis sebuah postingan yang singkat. Seri menuliskan di kotak komentar meminta agar saya mebantunya dia meminta tutorial tentang "Menampilkan Next Page Hanya Judul Postingan" saja yang muncul.Dan mudah-mudahan postingan ini menghasilkan apa yang di inginkan oleh Seri.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Sobat mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Sobat jika mengklik link "older post" di blog kang rohman

Next Page

Adapun cara memasangnya adalah sebagai berikut :

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Kemudian cari kode seperti di bawah ini :

<b:include data='post' name='post'/>

Bila sudah ketemu. Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='border: 2px outset rgb(189, 189, 189); width: 500px; padding: 10px; background-color: rgb(247, 248, 224); text-align: left;'>
<a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


PERHATIAN
Untuk kode yang berwarna Merah silahkan sesuaikan dengan kehendak sobat, Mulai dari Lebar, Warna Background, dan Warna Border


Bila langkah-langkah di atas sudah selesai klik tombol SIMPAN/SAVE

Kemudian lihat hasilnya, mudah-mudaha berhasil. Khususnya buat sahabat Seri Bahasa



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Menampilkan Next Page Hanya Judul Postingan

Related Post
Halo para sobat, dah lama nggak posting, postingannya yang enteng-enteng aja deh! biar nggak mudeng! sore-sore udah mudeng, kasihan khan!

Nah dulunya sih! bikin related post dengan thumbail itu caranya lumayan susah sih! yaitu dengan cara pasang CSS, lalu harus utak atik dikit di bagian footer postingan! dan hasilnya pun nggak selalu bagus, kadang-kadang thumbailnya nggak ditampilkan dengan alasan nggak kedeteksi gambar didalam posting.

Nah, untuk trik yang sekarang, lebih mudah lagi nih! selain mudah! sobat juga nggak perlu repot-repot pasang-pasang CSS, dan nggak perlu khawatir gambar thumbail nggak kedeteksi, pasti aja kedeteksi.

Tapi, ada sayangnya juga nih! Related post thumbail ini nggak bisa nampilkan artikel-artikel terkait (maksudnya yang satu kategori) jadi! related post thumbailnya nampilkan indeks artikel secara acak gitu!! (ini juga kemungkinan saya. tau acak ato nggak sih)

Sekedar pengen tahu aja! saya cari-cari trik kayak gini! lumayan buat tampilan blog nggak berat-berat amat seperti related post thumbail nya yang pake CSS. lebih simple dan cepat!

LinkWithinLinkWithin
trik ini juga sebenarnya bisa ningkatin page view blog kamu, soalnya navigasi jadi lebih mudah! jadi memudahkan para pembaca blog kamu buat baca-baca artikel yang satu, ke artikel yang lainnya.

jika kamu pengen pasang, tinggal ikutin trik-trik berikut ini!

  • Login Blogger Dulu Pastinya
  • Ambil Script Related Post-nya di Link Within ini.
  • disana, isikan Email sobat, Url Blog sobat.
  • jangan sampe salah ngisi, soalnya nantinya bakalan error kalo udah dipasang, isi dengan data yang bener.
  • Plattformnya ya... pastinya Blogger, sesuai dengan platform yang kita pake, silakan highlight bagian Blogger untuk kolom Plattform-nya, kalo pake plattform lain (selain Blogger), pilih salah satu di sana.
  • Tentukan Berapa artikel yang akan ditampilkan dalam related post-nya. minimal 3, maksimal 5.
  • Jika blog sobat memiliki background yang gelap seperti blog saya ini, centang bagian "My blog has light text on a dark background".
  • kalau sudah, klik Get Widget

sekarang tingggal tahap Pemasangan widgetnya! ikuti langkah berikut ini!

  • Setelah klik 'Get Widget' sobat akan diarahkan ke tahap pemasangan widget!
  • Klik link bagian 'Install Widget' untuk memasang widget di blog.
  • Setelah itu, sobat akan diarahkan lagi ke halaman blogger.
  • Pilih salah satu blog yang akan dipasangi Related Post, pastikan sesuai dengan blog yang tadi ksobat masukan di bagian awal.
  • Selesai, tidak perlu di edit-edit lagi, silakan klik 'Menambah Widget'
  • Pastikan nama widget 'linkwithin' tidak diubah, karena jika diubah akan menyulitkan untuk mengikuti trik selanjutnya.
  • Setelah itu, pindahkan posisi widget 'LinkWithin' tersebut ke bawah posting.
  • Klik simpan untuk menyimpan Widgetnya.
  • Sekarang lihat Blog sobat!

Sebenarnya, trik ini sudah selesai, tetapi jika kamu ingin sedikit optimisasi, agar Related Post ini hanya tampil pada saat 'Pembaca' Membuka artikel. jadi Related post nggak ikut-ikutan tampil saat di Home Page/Beranda!

Nah, karena lagi ngerjain Blog yang baru, saya bakalan ulas trik selanjutnya di postingan yang lain deh! semoga bermanfaat!




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Membuat Related Post with Thumbail di blogger

Subscribe to: Posts (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo