Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Asalamualaikum.Wr.Wb. Kali ini saya akan share Tips dan trik NgeBlog. Kali ini saya akan membahas bagaimana cara Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya Tertarik. 

Dalam versi yang saya share kali ini efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.
<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

Merubah Judul Postingan Yang SEO Friendly

Mungkin sobat bertanya - tanya dari arti judul postingan yang saya buat, Disini kita akan merubah tampilan judul postingan kita lebih SEO Friendly yang berarti Prinsipnya, judul artikel harus tampil lebih dahulu dari pada judul blog. Atau judul artikel saja yang tampil, judul blog tidak ada.biasanya ini dipergunakan dan nampak pada search engine google dan akan lebih membuat judul postingan pencarian lebih praktis.

langsung saja ke topik pembahasan, ini dkhususkan unuk pengguna Blogspot

• Membuat judul artikel tampil pertama,nama blog tampil kedua

 Buka Rancangan > Edit HTML > Centang Expand Template Widget > Cari kode berikut:<title><data:blog.title/></title>

Kemudian ganti semua dengan script dibawah ini :

<!-- Start www.agroyweb.blogspot.com: Merubah tag judul Blogger  -->  
<b:if cond='data:blog.pageType == "item"'>  
<title><data:blog.pageName/> | <data:blog.title/></title>  
<b:else/>  
<title><data:blog.pageTitle/></title>  
</b:if>  
<!-- End www.agroyweb.blogspot.com: Merubah tag judul Blogger  -->   
 dan kemudian simpan.

• Membuat Hanya judul artikel saja yang tampak, nama blog tidak kelihatan

Buka Rancangan > Edit HTML > Centang Expand Template Widget > Cari kode berikut:<title><data:blog.title/></title>
Kemudian ganti semua dengan script dibawah ini :
<!-- Start  http://kokeykhia.blogspot.com/ : Merubah tag judul Blogger  -->  
 <b:if cond='data:blog.pageType == &quot;index&quot;'>  
<title><data:blog.title/></title>  
<b:else/>  
<title><data:blog.pageName/></title>  
</b:if>  
<!-- End  http://kokeykhia.blogspot.com/ : Merubah tag judul Blogger  -->    
dan kemudian simpan..
untuk mencobanya buat sebuah postingan,dan kemudian judul dari postingan anda searchdi google maka hasilnya akan terlihat  

Cara membuat efek shadow pada judul posting

Kali ini ideini akan berbagi Tutorial Membuat Effect Shadow Pada Judul Postingan, disini ideini hanya ingin merivew ilmu yang baru saja ideini pakai, yaitu Membuat Effect Shadow Pada Judul Postingan, mungkin para temen teme blogger yang sudah master tentunya tahu tutorial ini, tapi tudak ada salahnya ideini mengulas kembali demi membantu blogger lain yang mungkin sedang membutuhkan, contoh effect shadow pada postingan bisa dilihat pada homepage ideini.com, karena ideini juga menggunakan cara ini, cara Membuat Effect Shadow Pada Judul Postingan juga cukup simple dan mudah, bagi yang berminat langsung saja ini langkah - langkah Membuat Effect Shadow Pada Judul Postingan :

1. Masuk ke Blog anda.

2. Pilih tab Layout/Tata Letak ► Edit HTML

3. Saya sarankanBckup template anda dengan mengklik Download Full Template.

4. Tidak harus mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

        .post h3 atau .post { (coba salah satu)

6. Setelah ketemu, tambah kode berikut ini tepat di BAWAH kode yang dicari tadi:
         text-shadow: 2px 2px 3px #333; /* JANGAN DIRUBAH */

7. Sekarang Save Template dan lihat hasilnya, Semoga Berhasil

             Catatan : untuk script shadow 2px 2px 3px #333 dapat disesuaikan keinginan masing      

          masing.

Membuat Readmore Dengan Gambar & Teks

Tutorial blogging kali ini yaitu Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, Sebenarnya ini adalah request dari temen saya yang kesulitan membuat Readmore, semoga dengan artikel ini dapat terbantu.  Pasti sudah tahu Readmore kan, nah jika blog kamu belum mempunyai readmore, alias artikelnya masih memanjang, nah untuk itu agar tampilanya lebih rapi sebaiknya kamu memasang Readmore di blog kamu, disini saya akan memberikan Tutorial Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, seperti judulnya dengan kode dibawah ini kamu bisa membuat Readmore yang menggunakan Icon Gambar atau hanya menggunakan Teks. 

1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
     Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

4. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  . Jika menemukan 2 kode yang sama, pilih kode yang pertama.

5. Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini :


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); 
</script> 
<span class='rmlink' style='float:right;padding-top:20px;'> 
<a expr:href='data:post.url'> <img src="http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png"></img></a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Klik Pratinjau, jika sudah berhasil silahkan klik SIMPAN

Keterangan :

pada kode diatas terdapat beberapa kode yang bisa kamu ubah sesuai keinginan kamu, ini dia.
summary_noimg = 430; angka 430 adalah jumlah karakter yang akan ditampilkan jika tidak menggunakan gambar.
summary_img = 340; jika menggunakan gambar, angka 340 adalah jumlah karakter yang akan ditampilkan.
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul.
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail.

Kamu  juga bisa mengubah Icon read more  


http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png

(klik disini untuk download Iconya)

Membuat Related Post/ Artikel Terkait Di Bawah Postingan

Baiklah Kali ini saya ingin berbagi Tutorial Blogging yaitu Cara Membuat Related Post/ Artikel Terkait di bawah postingan. Tutorial ini sebenarnya juga untung catatan agar saya tidak lupa bagaimana cara membuatnya, namun sekalian saya share agar temen temen yang sedang mencari Tutorial Membuat Artikel Terkait di bawah postingan dapat terbantu dengan artikel ini, sebenarnya artikel terkait/ Related post dibawah postingan atau di sidebar itu sama saja, tergantung pada selera masing masing. 

1. Login ke blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup untuk berjaga jaga jika terjadi kesalahan)

4. Cari kode ini  <data:post.body/>

5. Jika sudah ketemu sekarang, Letakkan script code berikut ini di bawah kode <data:post.body/>  yang sudah ketemu tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Save Template, lihat hasilnya

Kunci Merubah Ukuran Blogger Anda(kelas pemula)

Apakah anda sudah menemukan template idaman untuk blog anda? Jawabannya mungkin sangat beragam. Tetapi sejauh pengalaman saya amat jarang ada template yang memenuhi segala harapan kita. Misalnya dari segi desain mungkin sudah oke, tapi dari segi ukuran dan jumlah kolom mungkin masih belum. Atau sebaliknya. Pokoknya selalu saja ada sisi-sisi yang kurang, kecuali kita sendiri yang bikin templatenya dari awal. 
Nah, jika anda sudah lelah bergerilya mencari template idaman (seperti saya), mungkin tidak ada salahnya kita memilih jalan tengah Pertama dapatkan sebuah template yang menarik, kemudian modifikasi bagian-bagian yang kurang pas. Jika masalah pada ukurannya, kita bisa merubahnya tanpa harus menukar templatenya. Jika anda belum tahu caranya, ada sedikit pengalaman yang bisa saya bagikan.

Cara Merubah Lebar Halaman Posting di Blogger (kelas pemula)

Meskipun sudah menemukan template yang dinginkan, baik template bawaan blogspot maupun  dari pihak ketiga, bukan berarti segalanya sudah beres. Kadang soal ukuran juga ikut menjadi masalah. Misalnya lebar halaman posting terlalu lebar atau terlalu kecil, sehingga kurang mendukung untuk tampilan tulisan. Untuk mengatasinya tidak perlu terus bergerilya mencari template yang bisa menampung semua selera kita. Di samping memboroskan waktu dan melelahkan, template idaman itu biasanya juga jarang ketemu (seperti yang saya alami). Jika mau memahami sedikit bahasa kodenya, kita bisa merubah ukurannya berapa pun kita mau. Sebagai contoh anda bisa ikuti langkah-langkah berikut: