Posting Otomatis dari Google Reader ke Gmail,Mungkinkah?

Apakah Ada Rahasia Antara Google Reader dan Gmail?

Copas? bukan jamanya lagi sob,hari gini masih copy paste kelaut aja deh,hehe(jd nyindir diri sendiri nih pent-)
Tapi kini justru,bukan tukang copasnya yang berkembang namun tekniknya yang dibuat sedemikian rupa hingga sang copaster tak merasa bersalah dan disalahkan :D

Salah satunya dengan mengambil RSS dari suatu blog korban.
Ini pernah saya singgung pada membuat autoblog blogger di posting beberapa bulan lalu.

• Nah,apakah ada rahasia antara Google Reader dengan Blogger?
• Apakah item pada Google Reader mampu memposting otomatis ke blogger blogspot?
• Apakah kita dapat Mengirim dari Google reader ke Gmail,Yahoo Mail (Ymail),atau Email selainnya?
• Bagaimana cara mengirimkan otomatis dari Google Reader ke dalam Gmail (Google Reader into Email or Gmail Auto)?

Semua pertanyaan tersebut akan kita jawab sob,tentu tujuannya baik ya dan jangan dijadikan sebagai alat nypam atau sejenisnya,OK?

Sobat pasti sudah mengerti bagaimana mempublikasikan atau memposting otomatis dari Email/Gmail ke dalam blog.Tutorial ini sudah diposting dalam membuat auto blog.
Kini,kita cari tahu terlebih dahulu cara 'mempublikasikan / memposting dari Google Reader ke flatform blogger'.

Posting Otomatis dari Google Reader ke Gmail,Mungkinkah Gan?

Pertama,jika belum memiliki akun Google Reader,pastikan sobat daftar terlebih dahulu ya.
Selanjutnya pada Dashboard Google Reader,sobat perhatikan,klik Setting atau Setelan (gb.1),lalu pilih tab Send To dan contrenglah checklist Blogger(gb.2).

(gb.1)


(gb.2)



Lalu,kembalilah ke Dashboard Google Reader Sobat dan masukkan url feeds,bisa menggunakan RSS maupun Atom pada tempat yang disediakan (gb.3).


(gb.3)

Contoh url feed:

Feed Rss:
http://pelajaran-blog.blogspot.com/feeds/posts/default
Feed Atom:
http://pelajaran-blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100

Setelah itu,nanti akan muncul item rss feed korban,dan pada sebelah bawah nanti akan terdapat tab send to dan pilihlah blogger.(gb.4)


(gb.4)

Setelah sobat klik,nanti akan keluar jendela Blog This yang mana akan mempublikasikan item dari Google Reader ke dalam blogger yang sobat miliki.
Lalu gimana ya pak cara agar item goog rss feed di google reader dapat terkirim secara otomatis ke dalam blogger dan email (gmail,ymail,dll)?
Adalah dengan membuatnya sebagai rss baru dan publikasikan secara otomatis dengan jasa rss into inbox :D,hasilnya lihat di SINI

Jadi,sudah ga penasaran khan gan,gimana operasi mereka dalam nyolong artikel kita :D
Sekali lagi,jangan jadi jahat dan berkreasilah untuk sesuatu yang baru.Moga berhasil ya :D

Demam Jquery?

• Belajar Membuat Trigger Hover JQuery / Vertical Sliding Panel Mengggunakan JQuery
• Membuat Widget Gambar Slide Show / Slideshow Javascript Dan Css Di Blogger
• Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Membuat Read More Otomatis / Auto ReadMore di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada kode yang ketinggalan,hihihi)

Read More Otomatis pada Template Blogger

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya

Mengukur Ukuran dan Waktu Loading Blog

Cara Mengukur Berat dan Ukuran Blog untuk Search Engine Optimization

Untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita

Di tahun ini tutorial seo 2011 untuk Search Engine Google salah satunya adalah ditentukan ukuran dan waktu loading sebuah blog.
Berangkat dari masalah ini,sebuah blog yang memiliki ukuran besar maupun loading yang sangat berat akan berpengaruh terhadap hasil serp (search engine result page).

Sampai disini saya kira sobat sudah memiliki pandangan bagaimana supaya blog atau hasil posting yang kita lakukan mampu terindex google dengan cepat.
Mari kita ukur dan ciptakan loading blog agar lebih ringan,untuk yang satu ini sudah pernah saya bagikan masalah bagaimana 'Tips Cara Membuat Blog Ringan Saat Loading'.

Nah,untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita.

Diantara situs-situs yang meberikan fasilitas untuk mengukur ukuran dan waktu loading blog adalah:

1. http://www.iwebtool.com/
2. http://tools.pingdom.com/
3. http://www.numion.com/Stopwatch/
4. http://websiteoptimization.com/services/analyze/
5. http://internetsupervision.com/
6. http://www.webslug.info/
7. http://www.octagate.com/service/SiteTimer/
8. http://site-perf.com/
9. http://www.linkvendor.com/seo-tools/speedtester.html
10. http://www.uptrends.com/aspx/free-html-site-page-load-check-tool.aspx
11. http://webwait.com/

Setelah kita mengetahui berapa ukuran dan waktu yang dibutuhkan untuk membuka sebuah blog,kini kita sobat yang dapat menentukannnya sendiri.
Ingat ya teman,di 2011 ini Google sangat memperhatikan kecepatan loading dan seberapa besar ukuran dari sebuah blog atau situs.
See you and Keep post!

Bisnis Adsense for Search Sukses!!!

Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Sekedar bocoran saja ya gan,pelajaran blog ada sedikit trik agar Google Adsense yang kita miliki dapat tampil dan menghasilkan dollar.
Bagaimana caranya?
Jika masalah seo sudah saya kumpulkan di tutorial seo blogger minggu lalu,kini untuk memonetize dan menghasilkan dollarnya (bagi yang ga kebagian adsense for content) masih ada kesempatan besar.

Mengetahui siapa sih yang membayar kita?silkan klik DISINI,dan nanti akan tampil jendela window seperti ini:

Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Selama kita rajin posting yang bermanfaat tentunya,adsense for search yang kita miliki dapat menghasilkan dollar yang sudah lebih dari cukup untuk sekedar membeli sesuap nasi :D
Jadi,mari mulai optimasi blog yang kita miliki,rugi khan sudah punya blog tapi tidak dapat menghasilkan apa-apa :p (Rampok Dollar Yuuk!

Cara Membuat Vertikal Sliding Panel Widget dengan jQuery di Blogger

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxTVZn3cBbMl4EbVlTYBll2MO1tUtDYgx1T2sO-50vx2394H4Jmv3BWhJDGQ52swLkoehAQNEQ4DYxW17vow0PMl-gcuCgy2zjkfIeAXomEZ_0kmG8-5mKkWWizAniRVOstR5U4xvwZ4/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxTVZn3cBbMl4EbVlTYBll2MO1tUtDYgx1T2sO-50vx2394H4Jmv3BWhJDGQ52swLkoehAQNEQ4DYxW17vow0PMl-gcuCgy2zjkfIeAXomEZ_0kmG8-5mKkWWizAniRVOstR5U4xvwZ4/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKv01W9_cSsCD_hVM0q53eGvI8OsLWZyf20ajIkQVM_JBwB_c1UtgQN2tMo9pCwsjylwBLPmr1g6apEuJTeAV1DOR-G123CUyNN79CfqKVE_KNnkRou7Q3VKGTMQQLOUSTlcWGzzEmoBc/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="panel">

<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Bisnis Online</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
</ul>
</div>

<div class="colright">
<h3>Ngemis Dollar Internet</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...).
Good luck!

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget (Update) Sudah Direvisi! Dijamin Berhasil 100%

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}


Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>


Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>


Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Tutorial Seo Blogger / Blogspot

Belajar Seo Blogger untuk Mendapatkan Google Serp Sudah dari jaman batu (kali ya) masalah seo (search engine optimization) sudah sering disinggung bahkan menjadi tolok ukur seberapa 'hebat' kah seorang blogger dalam bermain di Google Serp. Seiring algoritma Google (opo maneh kuwi mas puji? aku yo ra ga patek dong mas ) yang berubah-ubah,kini kiat optimasi juga harus semakin inovatif.(bahasa gaulnya seperti itu ) Nah,dari fenomena seperti ini dan merupakan peluang besar dalam kelangsungan bisnis online,blog maupun situs-situs yang memberikan content tutorial seo blogger / blogspot semakin ramai. Pikirku,meskipun masih amatiran dalam dunia seo (itung-itung nambah koleksi dari copas ),tidak ada salahnya jadi pingin ikut-ikutan,yah..paling tidak nambah koleksi omongan yang kurang enak dihati..,sudah-sudah...jangan sedih mas puji ya :D Pelajaran Seo Basic untuk Platform Blogger Dikatakan pelajaran bukan berarti saya disini sudah menguasai berbagai tutorial seo blogger blogspot ini ya,karena pada dasarnya penulis berniat menembak kata 'pelajaran' saja,hihihi.. Sudah dulu bercandanya ya sob,sekarang kita bisa mulai ya membahas Tutorial Seo Blogger nya(emang dari tadi ngapain mas!!!!???) Serasa mendaur ulang lagi ya gan beberapa trik bagaimana mengoptimasi blog agar cepat tampil dalam hasil pencarian mesin pencari handal Google ini. Saya cantumkan kembali beberapa posting pada blog tutorial(blog tutorial gadungan pent-) ini,karena dari 'penelitian' yang saya lakukan trik-trik seo dibawah ini masih bekerja baik untuk mencari posisi blog di serp. Belajar Seo Menyusun Kata / Memaksimalkan Kalimat Untuk SEO Seo Blogspot Dasar untuk Pemula Cara Paling Cepat Terindex Google Membuat Meta y_key SEO,Mengatur / Mengubah Format Title Kode HTML Huruf Simbol SEO Friendly Membuat Meta BlogCatalog Belajar Membuat Sitemap Dari link sahabat di Cara Cepat Terindex Google Dari link-link tersebut,Insya Allah,blog baru maupun lama dengan beberapa (katanya tutorial seo) dapat dibaca search engine sesegera mungkin. Intinya buat blog yang rapi,simple,up2date,tidak menjenuhkan,cepat dalam loading,cepat menghasilkan uang,cepat kaya,cepat tenar,cepat mati! (halah!!) Bercanda gan tapi semoga berhasil ya,dan do'ain juga untuk kedepan blog amburadul ini dapat memuat content seo yang baru dan tentu mak nyoss :D see you guys and good luck!