Cara Membuat Menu TabView dengan JQuery

Cara Membuat Menu TabView dengan JQuery - TabView pada blog sering digunakan untuk menghemat ruang untuk menampilkan widget, disamping itu tabview juga akan memberi kesan cantik jika dipoles dengan menu tabview yang menarik, nah kali ini Ayriy Zone akan memberikan tutorial tentang cara membuat menu tabview dengan jQuery di blog.

Tabview pada blog yang satu ini berbeda dengan tabview yang lainya, karena dengan menggunakan script ini, maka beberapa widget kamu akan secara otomatis adi menu di tabview, untuk lebih jelasnya silahkan lihat gambar dibawah ini dulu!

Yang pertama yang bertuliskan kode disini adalah script tabview yang kamu pasang, dan tab 1,tab 2, dan tab 3 adalah widget kamu yang otomatis membentuk tabview, praktis kan? nah, bagaimana membuatnya? ikuti langkah-langkah di bawah ini!

• Login ke blogger 
• Klik rancagan atau design
• klik edit html
• expand template sobat dengan memberi centang di kotak pojok template editor sobat.
• cari kode </head> dan letakkan kode berikut di atas kode </head>

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

• Sekarang sobat tambahkan widget baru, letakkan paling atas dari beberapa widget yang akan sobat jadikan tabview seperti penjelasan dan gambar diatas, copy dan paste kode berikut!

<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

• Lalu simpan.

silahkan letakkan 3 widget dibawah widget kode tabwiew diatas, dan lihat hasilnya, maka 3 widget dibawahnya akan terkumpul secara otomatis, nah demikian tutorial singkat tentang cara membuat menu tabview dengan jQuery, semoga bermanfaat dan selamat mencoba!

Cara Membuat Efek Salju Pada Blog

Cara Membuat Efek Salju Pada Blog - Tak bosan-bosannya saya berbagi pengetahuan pada sobat semua karena berbagai yaitu salah satu perbuatan yang paling yang di sukai oleh Tuhan, yang saya bahas kali ini Cara Membuat Efek Salju Pada Blog, penasaran yuk langsung aja ikuti langkah-langkahnya :

• Login pada blog sobat
• Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript)
• Copy code script dibawah dan paste di kotak tadi , untuk judulnya kosongkan saja.

<script src="http://ayriyzone.googlecode.com/files/salju.js"></script>

• Simpan dan lihat hasilnya.

Sekian dulu tutorial Cara Membuat Efek Salju Pada Blog, Semoga bermanfaat.

Cara Membuat Kotak Komentar Admin Berbeda Di Blog

Cara Membuat Kotak Komentar Admin Berbeda Di Blog - saya sering mendapatkan pertanyaan Bagaimana  Cara Membuat Kotak Komentar Admin Berbeda Di Blog  dari pengunjung nya. Pada kesempatan kali ini saya akan menjawab pertanyaan tersebut, langsung saja ikuti langkah-langkah berikut :

• Masuk blogger > rancangan > edit html > centang expand template widget
• Cari kode ]]></b:skin> selanjutnya Pastekan kode di bawah ini tepat di atas kode  ]]></b:skin>

.author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
}

Kode yang berwarna biru ganti sesuai dengan keinginan sobat

• Kemudian cari kode  <data:commentPostedByMsg/>            </dt> 
• Jika sudah ketemu kode di atas, pastekan kode di bawah ini tepat di bawah kode </dt> 
• Kemudian cari kode <dd class='comment-footer'> tambahkan </b:if> tepat di atas kode  <dd class='comment-footer'>

Sehingga keseluruhannya tampak seperti di bawah ini : 

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

Terakhir simpan template, dan kemudian untuk melihat hasilnya silahkan berkomentar di blog sendiri dengan catatan harus login di blogger dulu.nah demikian Cara Membuat Kotak Komentar Admin Berbeda Di Blog
Semoga Bermanfaat

Cara Memasang Google Custom Search Engine di Blog

Selamat malam sobat, gimana kabar nih, pastinya baik-baik aja kan. Malam yang sunyi ini dari pada saya tidak ada kerjaan lebih baik saya share tutor Cara Memasang Google Custom Search Engine di Blog pada sobat sekalian nih, ada penjelasan sedikit nih tentang Google custom search engine. Google custom search engine widget adalah search bar/box yang terpasang di blog/website dan difungsikan sebagai mesin pencarian untuk pengunjung/visitor sama seperti halnya Google itu sendiri.

Ada pun fungsi dan keuntungannya antara lain:

1. Menyediakan alat pencarian dan hasil pencarian yang relevan.
2. Memberi spesifikasi pencarian situs-situs yang relevan dengan blog/website dan yang telah diberi setting tertentu.
3. Memberikan alternatif pencarian Google yang langsung dapat dicapai melalui website/blog tanpa membuka website Google. 
4. Dengan setting pada situs-situs tertentu anda dapat menunjukkan referensi-referensi bermanfaat yang selama ini anda gunakan.
5. Mengajak komunitas untuk meningkatkan penggunaan search engine dengan hasil yang relevan.
6. Mendapatkan penghasilan tambahan melalui Google Adsense search.
7. Dan masih banyak lagi kegunaan lainnya.

Cara memasang Google custom search di blog

• Buka Google Custom Search kemudian klik "create a custom search engine". Pastikan sebelumnya telah memiliki dan login dengan Account Google.

• Setelah masuk ke halaman selanjutnya isi data name, description, language, dan sites to search seperti pada gambar berikut.

Pada "sites to search" isikan satu atau lebih url situs yang ingin anda masukkan ke hasil pencarian. Pilih opsi 'standard edition' untuk mendapatkannya secara gratis. Kemudian klik 'next'.

• Klik tampilan search bar/box yang diinginkan, jika ingin mengkostimisasi lagi, klik 'customize' pada jenis tampilan yang telah dipilih tadi.

Setelah selesai, klik next.

• Copy script/kode seperti di bawah ini dan pasang ke widget blog.

Cara memasang widget custom search engine Google di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan
2. Klik add gadget.
3. Setelah muncul pop-up window, pilih opsi HTML/Javascript.
4. Paste semua kode yang telah di copy dan klik save. Jika ingin menyesuaikan letak search bar, drag dan drop gadget tersebut ke posisi tertentu dan save lagi.
5. Done. Google Custom Search telah siap digunakan pengunjung. 

Selamat Mencoba.

Cara Membuat Widget Tampil Pada Halaman Tertentu

Mungkin sobat semua sudah banyak mengetahui bahwa mengatur posisi widget adalah salah satu hal yang bisa membuat pengunjung betah dengan blog kita, dimana design yang rapi merupakan salah satu keutamaan dalam blogging. untuk sobat semua yang sudah pernah membaca artikel di blog ini, pernahkah sobat menyadari bahwa widget yang tampil pada halaman homepage dan halaman ketika kita membuka posting berbeda?coba lihat homepage, di homepage tidak ada artikel terkait yang tampil, bandingkan dengan hamalan posting, di halaman posting artikel terkait tampil.
jawabannya sobat sendiri yang tahu dan pastinya berbeda, nah untuk membuat widget hanya tampil pada halaman tertentu berikut adalah tutorialnya :
Untuk membuat widget hanya tampil di Home Page saja , kita hanya perlu menyisipkan kode seperti ini :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Dan di beri kode penutup seperti ini
</b:if>

Kalau untuk membuat widget hanya tampil pada halaman posting saja , kodenya seperti ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Dan di beri kode penutup seperti ini
</b:if> 

Kode diatas adalah kode untuk menghilangkan widgetnya, dan sebelum menghilangkan widget tersebut, sobat harus tahu widget yang akan di hilangkan dan pahami struktur widgetnya ..
Pertama masuk ke account blog sobat, klik rancangan lalu edit HTML (jangan lupa ex[and widget templates)
Cari kode <b:widget id=
Contoh lengkapnya seperti di bawah ini :

<b:widget id='HTML14' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Sisipkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>
Dan kode penutup </b:if> di bawah kode <b:include name='quickedit'/>

Hingga menjadi seperti ini :

<b:widget id='HTML14' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

"Contoh Widget Hanya Tampil di Home Page dan Hilang di Postingan"
Selanjutnya Simpan hasil kerja sobat dan lijat haslinya.
Semoga Bermanfaat

Cara membuat Efek Getar pada Gambar di Blogger

Selamat sore sahabat AYRIY ZONE, gimana kabar nih pasti tentunya baik-baik saja kan, Oke kali ini saya mau share tutor nih, tutor ini cocok untuk sobat yang suka pasang gambar pada blognya yaitu Cara membuat Efek Getar pada Gambar di Blogger saat di sentuh cursor, coba liat demonya Disini. Gimana udah lihat demo efeknya.

Cara membuatnya ikuti langkah-langkah di bawah ini:

• Klik Rancangan --> Edit Html --> Centang Expand Widget Template
• Kemudian letakkan Kode CSS berikut diatas kode ]]></b:skin>  

.gambargetar {
    position: relative;
}

• Kemudian Save.
• Kemudian Add Element -- Add Widget -- Html/Javascript. Copy paste script berikut :

<script src="http://tips-goooogle.googlecode.com/files/gambargetar%20Xtteme.js?attachauth=ANoY7crTQ4Lxnhf7dmkwV CDEuTh7tAEnUb24VQITeydgTn0GgWS6i13WBvtATMNH-03ZLeomrsDAaJdTYlyazR9wt1cIcZXm2h5BMS3bFaRzpwe3BVjMe-I_pzEALIgg97q3b1EWvttUKoUP8X3qebNDdmwO20x_okkWFa3AV6  
8yosoYqixie957Grgnn8lIWESG-jcKGZG78t4wvT6zh2Svz3cpYleeSYekUxbp
T2LfB9Qj1Q6pHvA% 3D&amp;attredirects=0" type="text/javascript">  

Jika sudah, ini kode untuk memanggil gambarnya :

<img style="left: 0pt; top: 0pt;" src="http://4.bp.blogspot.com/-XfwaMTVN4Is/TuwLIBdtvqI/AAAAAAAAAZg/CNPLwreon5Q/s400/06062011479.jpg" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()" class="gambargetar">

ganti tulisan yang berwarna merah tebal dengan Url gambar anda.
sekian dulu Cara Membuat Efek Getar pada Gambar di Blogger semoga bermanfaat.

Cara Membuat Bouncing Image CSS Hover

Dihari jumat sore yang indah ini saya mau share lagi sama sobat semua, yang akan saya bahas kali ini adalah Cara Membuat Bouncing Image CSS Hover di Blog, Lihat demo Disini,  oke langsung saja kita simak langkah-langkahnya sebagai berikut :

• Masuk Blogger - Rancangan - Edit HTML - centang Expand Widget Template.
• Kemudian letakkan kode berikut diatas kode ]]></b:skin>

img.hoverImages {
margin:20px;
padding:3px;
outline:2px solid #DDD;
border:#a1a1a1;
float:left;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
img.hoverImages:hover {
cursor:pointer;
margin-top: 2px;
}

• kemudian save template.

Untuk memasangnya dipostingan sobat cukup letakkan kode berikut kedalamnya :

<img class="hoverImages" src="URL IMAGE" />
<img class="hoverImages" src="URL IMAGE" />
<img class="hoverImages" src="URL IMAGE" />

silahkan ganti tulisan yang bercetak tebal dengan alamat penyimpanan gambar sobat, semoga ini bermanfaat bagi sobat semua.

Cara Membuat Efek Zoom Gambar Saat Disentuh Cursor

Sore-sore gini, di hari sabtu yang indah ini, Saya mau share lagi kepada sahabat AYRIY ZONE. Bagi sobat yang suka menaruh gambar diblognya, mungkin sobat-sobat semua bosen melihat gambar yang seperti itu-itu saja, agar gambar sobat  terkesan lebih menarik untuk dilihat, sobat bisa mencoba trik yang satu ini yaitu Cara Membuat Efek Zoom Gambar Saat Disentuh Cursor.

Sebelum membuatnya lihat demo Disini

Oke tanpa banyak basa-basi lagi ikuti langkah-langkah berikut ini :

• Login ke Blogger
• Pilih rancangan --> Edit HTML --> Centang Expand.
• Kemudian letakkan CSS berikut diatas kode ]]></b:skin> 

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

• Kemudian Save Template.

Untuk memanggilnya anda bisa memberikan perintah berikut :

<div class="cayunhover">
<img src="URL GAMBAR SOBAT"/>
</div>

Ganti tulisan yang bercetak tebal dengan url gambar sobat, untuk peletakkannya sobat bisa letakkan di sidebar ataupun dipostingan,silahkan sobat kreasikan sendiri kode dan efek-efeknya.

Selamat Mencoba

Cara Membuat Artikel Terkait/Related Post Bawah Postingan Blogger

Hai sobat AYRIY ZONE, saya mau share lagi nih mengenai Related Post. Related Post memang menjadi salah satu trik agar menjadi SEO Friendly,sebelumnya saya juga pernah membahas Cara Membuat Artikel Terkait/Related Post Di Sidebar Blog  yang belum tahu cara ini silahkan di lihat kembali DISINI.
Oke saya lanjutkan kembali pembahasan saya mengenai Cara Membuat Artikel Terkait/Related Post Bawah Postingan Blogger, namun cara ini berbeda, yang dulu saya buat itu terletak pada sidebar sedangkan yang ini terlatak pada bawah postingan, Cara membuatnya silahkan ikuti langkah-langkah berikut ini :

• Login pstinya ke Blogger
• Rancangan - Edit HTML - centang "expand widget template"
• Kemudian cari kode ]]><b/skin> dan letakkan kode berikut di atasnya :

.cayunbox{border: 1px solid #000000;padding: 5px;
background-color: #7BFAAF;-moz-border-radius:5px; margin:5px;}
.cayunbox:hover{background-color: #CE44F0;}

• Kemudian langkah selanjutnya adalah letakkan kode berikut dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Baca Artikel lainya:</H2>
<div class='cayunbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

• Kemudian Save Template

Selamat Mencoba

Membuat Widget Share Menggunakan CSS + HTML Di Blog

Setelah sebelumnya saya membahas mengenai Cara Memasang Floating Share Button Melayang Pada Blog, pada kesempatani ini saya akan membahas hal yang sama lagi yaitu mengenai Cara Membuat Widget Share Menggunakan CSS + HTML Di Blog, tapi berbeda dengan sebelumnya yang pernah saya bahas,artikel ini berasal dari Bloggermint. Oke langsung aja

Click Disini Untuk Melihat Demo

• Masuk ke Rancangan -- Edit Html - centang Expand Widget Template.
• Kemudian Cari Kode ]]></b:skin> letakkan CSS berikut diatasnya :

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitO5F8zFFTQ_grkbzoiA9apoGA0ryK141U_RdILSQhbe2NBRq_h35CGs8dTPHmhaX5R4Hgx6C874vaW8kVKIF5iJzbXlsbitW76ulZ6BkqtacNR7IZygS63agUuk3d85-SFMWmkG8wN4y9/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJELQxa4WF5DDo1-mldYkad0alPVxcO2myXXVhnJe-qhtYshqSPMYSZgMVolJJv4oCl_u16BIAL9UFQpjfpC994k0NpNQjBKzPCRjetG8pn5IWv5jlsqwz97XCLk56tU_tLmZ8hsCrfae/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_mini a.sharetext img {
border: 0 none;
display: block;
margin-left: 10px;
}
#mintshare_mini .flyout {
background: none repeat scroll 0 0 #AAAAAA;
height: 113px;
left: 40px;
position: relative;
top: -4px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}
#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitO5F8zFFTQ_grkbzoiA9apoGA0ryK141U_RdILSQhbe2NBRq_h35CGs8dTPHmhaX5R4Hgx6C874vaW8kVKIF5iJzbXlsbitW76ulZ6BkqtacNR7IZygS63agUuk3d85-SFMWmkG8wN4y9/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute;
left:-1000px;
top:-27px;
width:365px;
height:30px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}
#mintshare_mini:hover .flyout ul{
left:50px;
}
#mintshare_mini .flyout ul li {
float: left;
}
#mintshare_mini .flyout ul li a{
}
#mintshare_mini .flyout ul a img {
}
#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}
#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
/* For IE6 */
#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}
/* Get MintShare */
#mintshare_mini .get_mintshare {
font-size: 10px;
margin-left: 5px;
position: relative;
top: 2px;
}

• Kemudian Cari Kode <data:post.body/> copy kode berikut dibawahnya :

<div id="mintshare_mini">
<a class="sharetext" href=""><b>Share This</b></a>
<div class="flyout">
<ul class="icons">
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3UNX8q_exnmWRCOErjB0dnprkiDvcydqXc2B2aNYPYyG-VkRJGHRwxmbxJzegb4CXtz7gB91gMUHFc5c4aHARFyu5GNyjBuen8c7L-d_IJDuHwxzYpilSvWdRrMeCobl0jVQaHiqDDjZ/s1600/facebook_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChxWSQZxrTfbUxmfoyDnX5WeiNDPZonw87ZRYN8Q8PxJYRkgAlfVH6nfzChp5gAvpd9d4fUg4fDNPxepMlRgmXeem6Yrdr4c6ftvIjoXN5wi6tUl5C1wrob9VL3TWy1_fYp_-xpa5WK-/s1600/twitter_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98DEBXjGkMCSepvwhSvwwI_r_7TVRjmEwX0rb5neWrSyI1tMq5CkHgDSjf4CL8dhxm_0HNxpec6JKwr5LfeI88sJhpOdF47itjhB2Y-oFQDWseH2uesNEWuRjFRz2IMQIwSxYEub_T7qY/s1600/stumbleupon_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir55BRukCHyDlU69ttECqIn-zF8WBsN0jn2gyJJfoC61TKI6QXf4y3O6_j-ghn1LIH-VfFqVWE_eZCvOXiKkSZwDtMy-l4h_hYVNM1ro1Dw7DZfQNDdLL6uUfPWQv0ILE4k3d7YHd1PS19/s1600/digg_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipgbjRYnHDLKqrATJFpsdWDhBIgMA8y-8k8grWCjD1rVEDRN88JlPXWozXF3Sq__uYNFjeiOAhq1NGViBZ1WP6bPqKRHyaaQt1oEZgi3K4fjOvf1TXc1F20Hin81FT8q0y9mEMM1gKYDF/s1600/technorati_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif80avvMMohjRBlyhFot-ANTd52vK7_HDRYQIvi6VLAZHlc725ic2fWt7Pl492GaTvU2cfrRN7-LgVnoxSqhM28hPUutcRGtFw5WfcXdQKP39yQvMbvcqtJhEKUIStg7WVFEJggeSAhZuN/s1600/reddit_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gPuxHuQAc2Rr03avqqZHDpE18Ny7nVtz_RyV8g6n0mXBYErUoIiamn-ek9uOyX0MFLAP9fhmAlJD9bMDjH746FoWgBunrkS9XpGFrIiuXyskWq3NPCWkaYXok27KxbSYiGChDcRsduEG/s1600/yahoo_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik33X6a3d3AVX63sXvucqgcHrI1D200jGHXhN6tHYEk3_PimVpVhq2q3Me5F6t6YJvegtSKKW4P5Diq_4zS7nl19UGmDoxHY96SFNnxcm2OwD1Osz4miB1Z-5_I6_ZiMJzZqhXx4T9FB1A/s1600/delicious_small.png" /></a></li>
<span class="get_mintshare"><a href="http://tanpa-isi.blogspot.com/2011/09/membuat-widget-share-menggunakan-css.html">Get This Widget!</a></span> </ul>
</div>
</div>

• Silahkan Simpan dan Kreasikan sendiri sesuai dengan keinginan anda

Semoga bermanfaat.

Untuk Pilahan lainnya tersedia disini berbagai kreasi, silahkan lihat : http://www.bloggermint.com/2011/01/mintshare-social-bookmarking-sharing-button-widget/

Cara Membuat Artikel Terkait/Related Post Di Sidebar Blog

Membuat Related Post atau Artikel Terkait merupakan salah satu trik blogger untuk menambah jumlah pundi pundi Pageview pada blog. Related Post pun dibuat dengan berbagai macam kreasi dan rupa, Selain itu bisa menambah SEO blog kita dengan adanya Related Post/Artikel Terkait salah satu contohnya adalah Related Post Pada Sidebar.Ikuti langkah-langkah cara membuatnya di bawah ini:

• Masuk ke Blogger
• Rancangan - Edit Html - centang"Expand Widget Template"
• Kemudian letakkan kode berikut sebelum kode </head>

<script src='http://cayunkatel.googlecode.com/files/sidebar.js' type='text/javascript'> </script>

• Kemudian cari kode seperti 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:loop>
</b:if>

• Jika sudah ketemu, tambahkan kode berikut kedalamnya :

<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=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

Kode yang berwarna hijau adalah kode yang harus anda tambahkan, sedangkan yang berwarna biru adalah jumlah post yang ingin anda tampilkan.

• Lalu simpan Template.

• Kemudian anda beralih ke Add Widget, pilih Html/Javascript -- tambahkan kode berikut.

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

• Save Widget.

Selamat Mencoba.

Cara Memasang Floating Share Button Melayang Pada Blog

Kali ini saya mau share lagi nih sama readers AYRIY ZONE semua, tak bosan-bosannya saya share pada readers AYRIY ZONE, Setelah kemarin saya membahas mengenai cara modifikasi recent post, yaudah tanpa panjang lebar ngomongnya langsung aja, kita akan membahas Cara Memasang Floating Share Button Melayang pada Blog. Sebelum membuatnya lihat Demo Disini

Ok untuk langkah-langkahnya langsung aja ke tkp :

• Login aja langsung ke Blogger
• Cari Rancangan - Tata Letak - Add Widget - Html/Javascript
• Copy paste kode di bawah ini kedalamnya :

<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="pageshare" title="Get this from khamardos.blogspot.com">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>
<div class="sbutton" id="rt"> <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
</div>
<div class="sbutton" id="gb"> <a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a></div> <div class="sbutton" id="gplusone">
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script> <g:plusone size="tall"></g:plusone>
</div>

 Tulisan yang bercetak tebal bisa anda ganti dengan right, terserah selera anda.

 Selamat mencoba.

Cara Modifikasi Recent Posts dengan BuzzBoost dari Feedburner

Saya hanya seorang pemula yang sedang belajar dunia blogspot, disini saya ingin membahas bagaimana cara memodifikasi Recent Posts agar lebih menarik dengan Fitur dari BuzzBoost.
Sebenarnya hal ini sudah banyak yang membahas akan tetapi modifikasi tiap orang pasti berbeda-beda sesuai dengan selera masing-masing, dibawah ini akan saya bahas bagaimana cara mendaftar ke Feedburner sampai menaruh fitur itu di dalam template blogspot kita.
 Widget Recent post yang saat ini saya gunakan merupakan modifikasi dengan BuzzBoost dari Feedburner. Mau Recent Post seperti ini, sebelumnya simak dulu penjelasan di bawah ini tentang RSS setelah itu ikuti langkah-langkah pembuatannya.

Apa itu RSS! RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan (diantaranya dan kebanyakan) situs web berita dan weblog. Teknologi yang dibangun dengan RSS mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan (feed) RSS, biasanya situs web yang isinya selalu diganti secara reguler.

 BuzzBoost sendiri adalah salah satu fasilitas yang diberikan feedburner untuk menampilkan RSS Feed sebagai html dengan menaruh code javascript pada blog kita.

Ikuti langkah-langkahnya:

• Daftar Feedburner, kalau belum silahkan klik disini.
• Pada Situs FeedBurner cari bagian seperti di bawah ini. 

• Setelah itu cari alamat rss feed dari situs yang akan anda ekstraksi, misalnya http://ayriy.blogspot.com/feeds/posts/default, lalu tekan tombol Next, seterusnya tekan lagi tombol Next dan seterusnya sampai selesai hingga anda mendapatkan teks seperti ini 

• Pada halaman Publicize, cari Link BuzzBoost, lalu klik. Pada halaman BuzzBoost klik tombol ACTIVE.

• Akan muncul halaman yang berisi script seperti dibawah ini 

<script src="http://feeds.feedburner.com/ayriyzone?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/ayriyzone"></a><br/>Powered by FeedBurner</p> </noscript>

• Edit script tersebut dan cukup mengambil bagian seperti di bawah ini

<script src="http://feeds.feedburner.com/ayriyzone?format=sigpro" type="text/javascript" ></script>

• Kemudian modifikasi dengan menambahkan script dibawah ini tepat dibelakang text sigpro

&nItems=8&format=openLinks=new &displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

• Sehingga menjadi seperti dibawah ini

<script src="http://feeds.feedburner.com/ayriyzone?format=sigpro&nItems=8&format=openLinks=new &displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

Copy Paste pada Blogspot anda dengan cara Buka Design - Page Element - Add a gadget - Javascript/HTML - Isi Title misalnya 'Recent Posts/artikel terbaru' Lalu Copy Paste script diatas pada Content

• Setelah itu buka kembali Design - Edit HTML - Expand Widget Templates, Jika menggunakan Mozilla FF, buka Edit - Find lalu ketikkan keyword Recent Posts/artikel terbaru, sehingga akan ketemu dengan script seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Abaikan saja jika id anda tidak sama dengan HTML1, title='Recent Posts' adalah title yang anda masukkan sendiri saat membuat widget baru.

• Modifikasi script diatas sehingga menjadi seperti di bawah ini

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='postnew'><div class='widget-content'>
<data:content/>
</div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Langkah selanjutnya adalah menambah style sheet css

• Tetap pada mode Edit HTML, dengan mozilla FF cari Edit - Find, lalu ketikkan kata kunci </head> setelah ketemu bagian tersebut letakkan script dibawah ini tepat diatasnya

<style> .postnew li a:hover { display:block; text-decoration:none; background:#efefef; } .postnew li a:visited { text-decoration:none; } .postnew { float:left; width:380px; } .postnew ul { width:90%; list-style-type:none; } .postnew li a { text-decoration:none; border-top:1px solid rgb(204,204,204); line-height:13px; display:block; padding:3px 0px 3px 0; } .feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter { display:none; padding:2px 3px; margin-left:126px; margin-bottom:12px; width:162px } .feedburnerFeedBlock li:hover .date { font-size:11px; font-weight:bold; text-align:left; display:block; position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3GXYMqQUq4kXv3itLM0fQCBBYLvzwvLK8IqtOfTM0VyILfhq2QbcOGCAP9AZ5-7kE03TvUF9vRSNK8_FHgf8zr8rhXtkRlYr1Qs7inbYzTsQAN7DeHFkCG53K_LR-tOiYVusY81YApl8/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px; width:114px } .feedburnerFeedBlock li:hover div { border-radius:8px 8px; -moz-border-radius:0 0 8px 8px; -khtml-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; font-size:11px; display:block; position:absolute; border:1px solid #ccc; background:#E5E5E5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NL3lijW0ZG8RYh81GpLZP74sZray0wRHpycTCZI_i7dkKbw9oiqrcOyqkbw71EB5E-EFEFmEbcGiI74o2J8T9GAFx5ritfT3q7X6jgC5Nr6Pp4yCZV6sehfUNuXQJdRcTftciA3mL0k/s1600/tooltips-background.png) repeat-x; color:#333; padding:35px 10px 10px 10px } </style>

• Lakukan dari awal langkah-langkah diatas untuk mengekstrak RSS Feed situs-situs web atau blog yang anda inginkan.

Untuk melihat demo, silahkan ke halaman utama blog ocimnet, lalu disebelah kanan ada tulisan Recent Posts, klik salah satu link maka akan muncul sebuah deskripsi diatasnya.

Selamat Mencoba

Cara Membuat Back To Top Dengan Jquery

Kali ini saya akan membahas mengenai Cara Membuat Back To Top Dengan Jquery, saya akan berusaha update blog ini agar terlihat lebih fresh, kalau ada yang mau nulis disini akan saya beri kesempatan, walaupun blog ini sebenarnya sepi pengunjung karena kurangnya SEO dan Blogwallking. Untuk kali ini saya akan share ajja, Cara Membuat Back To Top Dengan Jquery pada Blogsot. untuk langkahnya anda langsung menuju ke TKP :

• Login Ke Blogger
• MAsuk ke Rancangan --> Tata Letak --> Add Widget --> Html/Javascript.
• Kemudian masukkan kode berikut :

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500);
});
}
}, 100);
});
});
</script>

Ganti kode yang bercetak tebal sesuai dengan keinginan anda
Kemudian Save.

Dan lihatlah hasilnya, blog anda akan terlihat lebih menarik dan keren dengan Back to top Jquery.

Mempraktekkan Javascript Alert Pada Blog

Mempraktekkan Javascript Alert Pada Blog - Saya kali ini akan membahas mengenai Javascript, Apa anda tau javascript ? saya sebenarnya juga tidak tau apa itu Javascript atau JS, coba anda Seacrh Di paman Google dengan key "Mempraktekkan Javascript Alert Pada Blog" mungkin artikel ini akan Duduk di Singgah sana Google. haha, Impian yang tinggi. Ini adalah contoh Javascript Alert dengan Sekali Klik :

<form> <input type="button" onclick= "alert('Terima kasih sudah berkunjung di blog saya ,?')" value="Test Javascript Alert"> </form>

Perhatikan: Ganti kata yang berwarna bercetak tebal dengan kata yang sobat inginkan
Semoga Mempraktekkan Javascript Alert Pada Blog bermanfaat.

Banyak followers dengan GFC Recommendation Button

Pernahkan sobat terfikir pentingnya followers dalam sebuah blog. Untuk blog yang masih memiliki trafik kecil, Seperti blog saya ini, hal lain yang bisa membuat blog itu populer adalah dengan Followers yang banyak. Ada sebuah Sugesti bahwa seseorang akan mengatakan “wahh” apabila melihat followers/anggota yang tergabung dalam blog itu sangat banyak, dan bukan tidak mungkin orang itu akan ikut memfollow blog kita. Dan sugesti lainya, banyak kasus seorang pembaca berkunjung dan hanya sebentar lalu pergi kembali karna melihat followers blog kita yang sedikit. Dan berasumsi bahwa blog yang dikunjunginya jelek dengan sedikit pengikut. Namun itu hanya beberapa aspek dari hal untuk membangun trafik.

Tapi, apa salahnya di coba. Kita hanya perlu menempatkan tombol “Recommendation” di bawah setiap artikel kita. Dan lalu menempatkan ”Recommended stories” nya di manapun anda mau menempatkanya.  Dengan tombol ini, orang akan klik tombol Recommendation sekaligus memfollow blog kita. Menarik bukan.
Oke, langsung saja kita masuk ke tahap instalasi.

• Login ke Google friendconnect  - http://www.google.com/friendconnect/
• Klik/pilih pada blog yang anda ingin masukan tombol “Recommendation”
• Pilih “browse the Gedgets Gallery”
• Dan lalu pilih Gedget “Recommendation”.
• Untuk jalan pintas anda bisa langsung masuk ke link :

http://www.google.com/friendconnect/admin/site/recommendedpagesgadget

Setelah masuk ke gedget Recommendation anda tinggal mengatur warna, dan tampilan sesuai selera dan keperluan. Dan bila sudah selesai jangan lupa klik tombol “Generate Code”. Lalu tinggalkan sebentar, jangan di close.
Nah sekarang waktunya instalasi pada blog anda.

• Login ke blogger – Design – Edit Html
• Centang “Expand Widget”
• Lalu cari code

  <div class='post-footer'>

• Kembali ke Google friendconnect.
• Coppy code pada form ke 2 (dua)  dan tempatkan di persis di bawah

  <div class='post-footer'>

• Setelah itu klick save.

 Langkah terakhir adalah lihat kembali Google friendconnect. Coppy code pada form ke 1 dan letakan di manapun anda mau. Misalnya pada gedget “HTML/Javascript”. Jangan lupa klik save.
Sampai disini proses instalasi sudah selesai. Dan selamat mempunyai followers yang banyak.
Semoga bermanfaat.

Cara Pasang Tag Permalink Artikel dibawah Postingan

Cara Pasang Tag Permalink Artikel dibawah Postingan - Memasang tag permalink dibawah postingan mungkin sudah banyak rekan yang mengetahui. Fungsi dari Tag permalink artikel ini adalah untuk memaksimalkan permalink serta judul disetiap posting artikel blog. Maksudnya, kita memberi penjelasan kepada pembaca tentang judul, alamat permalink, serta anchor artikel tersebut, trik ini dapat mempengaruhi seo blog kita karena cukup memperkuat keyword kita. Baca juga Cara Membuat Permalink Seo di Blogspot, lalu bagaimana Cara Pasang Tag Permalink Artikel dibawah Postingan? berikut tutorialnya :

•  Login ke akun blogger rekan
• Pilih rancangan dan klik edit template, expand widget template
• Pasang css berikut ini dan letakkan diatas ]]></b:skin>

.ayriypermalink
{border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.ayriypermalink a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

• Cari kode <data:post.body/> atau <p><data:post.body/></p>
• Jika sudah ditemukan, ganti kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p><data:post.body/></p>

<div class='ayriypermalink'>

<center><small>Anda sedang membaca artikel <strong><u><data:blog.pageName/></u></strong> dan artikel ini url permalinknya adalah <strong><data:post.url/></strong></small></center><center><small>Semoga artikel <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> ini bisa bermanfaat.</small></center></div>

<b:else/>

<p><data:post.body/></p>

</b:if>

• Save template
• Selamat Mencoba dan Semoga Berhasil

Semoga Bermanfaat.

Buku Tamu Ala Slide Vertikal dengan jQuery

Buku tamu memang fasilitas yang penting yang dibutuhkan oleh blogger dalam silaturahim dengan pengunjung, dimana pengunjung dapat bertegur sapa, mengucap salam bahkan ucapan terimakasih yang pernah saya alami di ungkapkan dalam buku tamu. Buku tamu juga digunakan sebagai media blogwalking, dimana blogger dapat meninggalkan jejak untuk dikunjungi oleh si pemilik blog yang dikunjungi nya tersebut. Lalu, bagaimana cara membuat Buku Tamu Ala Slide Vertikal dengan jQuery  mari kita simak tutorialnya.

Sebelum membuatnya lihat demo Disini

• Login ke Blogger 
• Masuk ke "Tata Letak - Edit HTML"
• Klik "Expand Template Widget"
• Cari kode di bawah ini :

]]></skin>

• Masukan (copy paste) kode dibawah ini diatas kode ]]></skin>

.parno{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.parno p{color:#ccc;margin:0 0 15px;padding:0}
.parno a,.parno a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.parno a:hover,.parno a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.triger{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPi9n5K1I578dqF0En6Z3bGjIoWL9fQyCH3rkrtgMYAHLvirQgiB7bs8TvCRbDFLY3G6FaxoOfX9DC-iUQHb11T7XPk6gomswJ-F8HMkBOr9SUBelu7Tl_d7HLSk0uFZ8Aafnw0NMWSMc/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.triger:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2R6Zormy2OAJQPOwlIQgE6Hy7FIoiTjcVovQheoPk5omddtgqW-T_oUQ-RmFdx5R_Od952nW-RZj8eS969_NANDny1QFrstMYAi6bMgi7egfbz_7vSWHWkY23PDpHfmsS5oNGZ-iQt7M/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.triger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.parno img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.parno h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Tulisan yang bercetak tebal silahkan dirubah sesuka anda dg url koleksi gambar anda, hanya saja diharuskan max 32x32.

• Cari kode dibawah ini :

</head>

• Masukan (copy paste) kode dibawah ini diatas kode</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.triger&quot;).click(function(){
$(&quot;.parno&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

• Cari kode dibawah ini :

</body>

• Masukan (copy paste) kode dibawah ini diatas kode </body>

<div class='parno'>

<h3>Buku Tamu</h3>
====== Kode Widget ShoutMix Anda =======

</div>

<a class='triger' href='#'>Guest</a>

Tulisan yang bercetak tebal isikan dg kode widget shoutmix sobat.
Simpan Template dan Lihatlah hasilnya..

Semoga bermanfaat.....

Script Memberikan Judul Artikel Ketika Di Copy Paste

Assalamu'alaikum Wr. Wb

Pada kesempatan kali ini saya sharing bagaimana menangkal TUKANG COPAS kenapa saya sharing karena sharing is SEXY hehehehe. Biasa kita memakai script dari tynt.com untuk menghindari COPASSER Tersebut tapi ini berbeda dan bukan dari tynt.com .
Langsung saja kita simak cara membuat Script Memberikan Judul Artikel Ketika Di Copy Paste.

Langkah - langkah nya adalah :

• Login Blogger Dengan Google Akun Anda
• Jika sudah di dashboard Pergi Ke Rancangan » Edit HTML
• Masukkan script berikut di bawah kode <head> : 

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Ayriy.blogspot.com Under Common Share Alike Atribution"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>

• Ganti tulisan yang berwarna hijau dengan nama blog sobat
• Setelah itu simpan template
• Selesai

Jika sobat melakukan langkah-langkah di atas dengan benar maka coba tes di blog sobat copy artikel sobat sendiri terus taruh di notepad apa yang terjadi ada url blog sobat di artikel tersebut pada bagian bawahnya .

Sekian tutorial saya .

Wassalamu’alaikum Wr. Wb

BjQuery V.1.19 di-LUNCURKAN

Setelah 12 hari BjQuery V.1.10 digunakan di berbagai platform blogspot & wordpress. Akhirnya sekarang saya luncurkan BjQuery V.1.19
Fungsi dari widget ini ada 19. dengan kata lain saya telah membuat 19 Widget yang digabung jadi 1. WOW.. banyak bukan..? Tenang aja.. Gak kan memberatkan BLog atau website AGan koq.. cuma 10 KB.
Untuk Lihat tutorial Lengkapnya, Silakan Kunjungi  BjQuery V.1.19

Oke sobat sedikit Penjelasan dari 19 Widget ini :

1. STRONG_KEYWORD
Fungsi : Memberikan Efek <STRONG></STRONG> untuk keyword-keyword yang ada pada halaman yang bersangkutan

2. TEXT_TO_LINK
Fungsi : Mengubah Kata yang diinginkan Menjadi LINK. Penasaran..? Ini sejenis Auto Link (Sejenis ALRP pada wordpress)

3. BOLD_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di BOLD Menjadi LINK.

4. ITALIC_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di ITALIC / Garis Miring semuanya Menjadi LINK.

5. UNDERLINE_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di UNDERLINE / Garis Bawah semuanya Menjadi LINK.

6. LINK_STYLE
Fungsi : Mengubah Efek-efek yang telah di LINK. Dalam hal ini, efek yang dapat di ubah adalah efek WARNA , UNDERLINE dan BENTUK MOUSE / CURSOR

7. Google_Translate
Fungsi : Translate Website / Blog. Memberikan kemudahan untuk User / Visitor yang tidak mengerti bahasa yang ada di blog / website kita..

8. RANDOM_POST
Fungsi : Menampilkan Random Post dalam berbagai Style (Khusus pengguna Blogspot)

9. LATEST_POST (POSTINGAN TERBARU)
Fungsi : Menampilkan LATEST POST dalam berbagai Style (Khusus pengguna Blogspot)

10. ALEXA
Fungsi : Menampilkan Ranking dari ALEXA dalam berbagai STYLE

11. Facebook Comment
Fungsi : Membuat Komentar Facebook di Blog / Website

12. Facebook Like Box
Fungsi : Membuat Facebook Like Box di Blog / Website

13. Follow Twitter
Fungsi : Membuat Tombol FOLLOW Twitter di blog / website

14. SHARE My Website
Fungsi : Menampilkan kumpulan SHARE Button dalam berbagai STYLE

15. Facebook SHARE
Fungsi : Menampilkan SHARE Button Facebook dalam berbagai STYLE

16. Plus One SHARE
Fungsi : Menampilkan SHARE Button Plus One dalam berbagai STYLE

17. AddThis SHARE
Fungsi : Menampilkan SHARE Button AddThis dalam berbagai STYLE

18. Twitter SHARE
Fungsi : Menampilkan SHARE Button TWITTER dalam berbagai STYLE

19. Twitter SHARE No Count
Fungsi : Menampilkan SHARE Button TWITTER dalam berbagai Format dan STYLE

 Oke sekian dulu penjelasannya
Jika Ada Pertanyaan, silakan email ke Riyal_rivalni[at]yahoo[dot]com.. atau tulis komentar Sobat di bawah ini
Yang paling saya sukai tuh Widget no 2 , 6 , 11 , 12 , 13 , 14 & 19
Kalau Anda..?