Horausah: Widget | gaptek licious

Home » Posts filed under Widget

Memasang Text Berjalan Recent Posts di Blog

Widget recent post biasa kita jumpai dengan model dan bentuk yang rata-rata sama, dengan kode http://miscah.blogspot.com/feeds/posts/default maka widget default recent posts dengan mudah terpasang di blog. Ada pula widget recent posts yang disertai thumbnail atau gambar dari postingan dan beberapa widget recent posts lainnya yang bisa kita jumpai di beberapa blog yang berisi tutorial blog.

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

Pada Elemen Halaman, klik Tambah Gadget.
Kemudian pilih yang HTML/Javascript.
Masukkan kode berikut kedalamnya :

<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
            var sHeadLines;
            var sPostURL;
            var objPost;
            var sMoqueeHTMLStart;
            var sMoqueeHTMLEnd;
            var sPoweredBy;
            var sHeadlineTerminator;
            var sPostLinkLocation;
            try
            {
            sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
            if( nWidth)
            {
                sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
            }
            else
            {
                sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
            }

            if( nScrollDelay)
            {
                sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
            }
            if(sDirection)
            {
                sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
                if(sDirection == "left" || sDirection =="right")
                {
                    //For left and right directions seperate the headilnes by two spaces.
                    sHeadlineTerminator = "  ";
                }
                else
                {
                    //For down and up directions seperate headlines by new line
                    sHeadlineTerminator = "\<br/\>";
                }
            }
            if(sOpenLinkLocation =="N")
            {
                sPostLinkLocation = " target= \"_blank\" ";
            }
            else
            {
                sPostLinkLocation = " ";
            }
            sMoqueeHTMLEnd = "\</MARQUEE\>"
            sHeadLines = "";
            for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
            {
                objPost = json.feed.entry[nFeedCounter];
                for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
                   {
                    if (objPost.link[nCounter].rel == 'alternate')
                    {
                          sPostURL = objPost.link[nCounter].href;
                          break;
                    }
                }

sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
            }
            document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
            }
            catch(exception)
            {
                alert(exception);
            }
}
//]]>
</script>

<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://miscah.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>
Simpan.

Keterangan :

Ganti kode yang berwarna merah dengan alamat blog sobat.
var nMaxPosts = 20 adalah jumlah postingan terakhir.
var nScrollDelay = 180 adalah kecepatan text.
var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.
var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

Semoga bermanfaat.

Blog, Marquee, Recent Posts, Widget 09.59 No comments

Pengaturan Letak Widget Pada Halaman Tertentu

Menanggapi dan melihat pertanyaan sobat Fachry pada postingan widget sharing is sexy, dengan tampilan widget yang muncul pada halaman depan blog. Seharusnya widget tersebut munculnya pada halaman postingan atau setelah read more di klik. Ada sedikit kode yang harus sobat ketahui untuk meletakkan widget, ingin di letakkan pada halaman depan blog saja atau hanya ingin meletakkan widget pada halaman postingan. 2 kode ini saya rasa mutlak wajib sobat mengerti fungsinya, buat yang belum mengerti berikut HTML-nya.

Meletakkan widget hanya pada halaman depan (home page)
<b:if cond='data:blog.url == data:blog.homepageUrl'> LETAK WIDGET </b:if>
Meletakkan widget hanya pada halaman postingan (post page)

<b:if cond='data:blog.pageType == "item"'> LETAK WIDGET </b:if>

Pada kasus yang dialami sobat Fachry adalah widget sharing is sexy muncul pada halaman depan blog, padahal seharusnya widget tersebut hanya muncul pada halaman postingan. Untuk itu kode yang digunakan adalah kode yang nomor 2. Sehingga kode lengkapnya untuk widget sharing is sexy tersebut adalah :

<b:if cond='data:blog.pageType == "item"'> <div class='sexy-bookmarks'> <ul class='socials'> <li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-ID' title='Subscribe to RSS'/></li> <li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> </ul> <span class='sexy-rightside'/> </div> </b:if>

Saya hanya memberikan 2 kode yang wajib sobat ketahui, sebenarnya masih ada beberapa kode lagi untuk peletakkan widget-widget di blog. Semoga bermanfaat !

Blog, Post Tips, Tips Blogging, Widget 09.25 No comments

Pasang Widget Lintas Berita di Blog

Menanggapi pertanyaan sobat ISS pada postingan widget sharing is sexy yang menanyakan perihal seputar pemasangan widget lintas berita di blog. Kebetulan saya belum pernah membahas masalah ini, dan sebenarnya widget lintas berita ini pernah saya pasang di blog ini karena beberapa hal saya hilangkan. Seperti kita ketahui, lintas berita merupakan situs portal tempat orang mempromosikan web atau blog mereka.

Hampir semua blogger menggunakan fasilitas lintas berita sebagai media untuk promosi blog atau istilah kasarnya menjadi benalu di lintas berita, dengan total ribuan halaman/pages yang terindex di google. Dengan begitu blog kita jadi ikut terkenal dan setidaknya mendapat cipratan traffic dari lintas berita. Untuk mempermudah dalam submit berita atau artikel blog, widget lintas berita ini mungkin bisa menjadi alternatif.

Cara pasangnya sangat mudah, coba perhatikan langkah-langkahnya berikut ini.

Pada Edit HTML, silahkan klik Expand Template Widget.
Letakkan kode css berikut ini diatas kode ]]></b:skin>

#lintas-berita { background:#ECE0F8; border:1px solid #cccdcd; margin:15px 0px 10px 0px; padding:10px; color:#000; font-weight:normal; }

.lintaskiri { float:left; margin:0px 15px 0px 0px; width:380px; }

.lintaskanan { text-align:center; }
Kemudian letakkan kode berikut setelah kode <data:post.body/> atau <p><data:post.body/></p> :

<div class='clearfix' id='lintas-berita'> <div class='lintaskiri'> Jika menurut sobat artikel ini bermanfaat, silahkan vote ke <strong>Lintas Berita</strong> agar artikel ini bisa di baca oleh orang lain. </div> <div class='lintaskanan'> <script type='text/javascript'>lb_skin = 'mode2'; </script> <script src='http://www.lintasberita.com/widget_vote/lintasberita.js' type='text/javascript'/> <noscript>Powered by www.lintasberita.com visit <a href='http://www.lintasberita.com'>Lintas Berita</a></noscript> </div> </div>
Simpan Template.

Perhatikan kode css yang berwarna merah, kode tersebut adalah lebar untuk widget sebelah kiri (widget untuk tulisan) harap disesuaikan dengan lebar template. Jika widget lintas berita muncul pada halaman depan blog, maka tambahkan kode

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

diantara kode yang berwarna hijau dan tutup dengan kode

</b:if>

Semoga berhasil.

Blog, Promosi Blog, Widget 08.43 No comments

Memasang Comment Count Di Blog

1274007132_bubble_48 Tutorial memasang comment count memang sudah sering kita jumpai di berbagai tutorial blog, namun tidak ada salahnya kita bahas sama-sama. Kemarin lusa ada sobat blogger yang menanyakan tentang hal ini lewat facebook, dan kebetulan saya belum pernah menulis tutorial ini. Comment count atau comment bubble atau lebih mudahnya adalah kotak kecil yang berisi jumlah komentar dalam setiap postingan. Biasanya comment count pada umumnya terletak dibagian kanan atas postingan. Berikut tutorial singkatnya.

Masuk ke Tata Letak.
Klik tab Edit HTML.
Jangan lupa untuk membackup template terlebih dahulu sebelum melakukan pengeditan.
Klik radio radio button Expand Template Widget.
Kemudian letakkan kode css berikut ini diatas kode ]]></b:skin>

.comment-count {
background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/S_AGNIqF3nI/AAAAAAAAD4A/3onsvK0-jmA/1274007079_speech_bubble_48_thumb%5B3%5D.png) no-repeat;
float: right;
font-family: maiandra gd, arial;
font-size: 10px;
text-align: center;
width: 28px;
height: 28px;
margin-top: -5px;
margin-right: 2px;
padding-top: 5px;
}
Setelah itu kode yang ditambahkan adalah seperti dibawah :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='comment-count'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
</b:if>
</span>
</b:if>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Kode yang berwarna merah adalah kode yang harus sobat sisipkan.
Simpan Template.

Yang harus diperhatikan adalah margin-top:-5px dan padding-top:5px, karena itulah yang akan menentukan letak tinggi rendahnya widget comment count ini. Silahkan diatur sesuai template sobat, karena setiap template mempunyai karakter yang berbeda-beda.

Semoga berhasil.

Blog, Blog Stuff, Comment, Widget 11.09 No comments

Membuat Widget 3 Kolom Dibawah Header

Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

Baiklah langsung menuju lokasi pengeditan template-nya.

Silahkan login ke blogger.
Tuju Tata Letak.
Pilih tab Edit HML.
Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
Letakkan kode css berikut ini diatas kode ]]></b:skin>

/* –- Top --*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {

background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvn_BYl4V5-9lksgm3ofXP8ye3qs6VgkwgZKSk3bN2SNqz6XTz1jfjPGTf_WC1xJdp_8v6Wezh5HZ2sRW73VO0eqUN8KNVYicykPNwgL30jhkdS2JEFpAQOnj-PlnF1DuqqDqiQ6GTK4m3/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}
Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
</b:section>

</div>
Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Simpan Template.

Semoga bermanfaat dan bisa membuat blog sobat jadi ramai.

Blog, Kolom, Tutorial Blogspot, Widget 14.44 No comments

Membuat Navigasi Horizontal 2 Baris

Sebelumnya saya sudah pernah membahas cara membuat navigasi horizontal, sama halnya dengan yang dulu, namun kali ini saya menambahkan navigasinya menjadi 2 baris. Contohnya bisa sobat lihat pada gambar berikut, dimana saya menggunakan navigasi 2 baris dengan warna yang berbeda dan plus widget search engine sebagai bonus.

Widget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

Login ke blogger.
Masuk ke Tata letak.
Klik Edit HTML.
Sebaiknya backup template sobat terlebih dahulu.
Letakkan kode berikut sebelum kode ]]></b:skin>

/*-- Nav --*/

#nav {
width:980px;
float:left;
background:#444;
height:33px;
border-bottom:1px solid #fff;
padding:0;
}

#nav-left {
float:left;
display:inline;
width:700px;
}

#nav-right {
float:right;
display:inline;
width:200px;
}

#nav ul {
position:relative;
overflow:hidden;
font:1em verdana,Helvetica,sans-serif;
font-weight:700;
font-size:13px;
margin:0;
padding:0;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#f9f9f9;
text-decoration:none;
margin:0;
padding:9px 10px;
}

#nav ul li a:hover {
color:#B40404;
background-color:#fff;
margin:0;
padding:9px 10px;
}

#search {
background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
border:1px solid #b3b3b3;
float:right;
height:20px;
width:160px;
margin-top:5px;
margin-right:5px;
padding-top:2px;
}

* html #search {
margin-right:5px;
}

#search input {
font-family:Arial,Helvetica,sans-serif;
background:transparent;
border:0;
color:#000;
float:left;
font-size:12px;
width:120px;
padding-left:27px;
margin:0;
}

/*-- Nav2 --*/

#nav2 {
float:left;
display:inline;
width:980px;
background:#46040C;
height:30px;
clear:both;
margin:0 auto;
padding:0;
}

#nav2 ul {
position:relative;
overflow:hidden;
font:1em Verdana,Arial,Helvetica,sans-serif;
font-weight:500;
margin:0;
padding:0;
}

#nav2 ul li a,#nav2 ul li a:visited {
display:block;
color:#fff;
text-decoration:none;
margin:0;
padding:8px 10px;
}

#nav2 ul li a:hover {
color:maroon;
background-color:#fff;
margin:0;
padding:8px 10px;
}

#nav ul li,#nav2 ul li {
float:left;
list-style:none;
}
Kemudian cari kode yang mirip seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section>
</div>
Letakkan kode berikut tepat setelah kode diatas :

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML70' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<div id='search'>
<input id='search' maxlength='150' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='nav2'>
<b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav2'>
<ul>
<li><a href='http://www.blog-zone.info'>blogger news</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Ganti tulisan yang berwarna merah dengan link yang sobat ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 sobat isi.
Simpan Template.

Keterangan :

width:980px --->> lebar dari navigasi, sesuaikan dengan lebar template sobat.
width:700px --->> lebar dari navigasi utama (tidak termasuk widget search engine).
Contoh : jika sobat mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.
Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog sobat, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
</b:section>
</div>

Semoga berhasil dan bermanfaat tentunya.

Blog, Blog Stuff, Menu Horizontal, Widget 11.57 No comments

Optimalkan Feedburner Dengan Memasang Pageflip

Menjawab pertanyaan sobat Taufik pada komentarnya di postingan elegant style template, yang menanyakan cara membuat gambar di pojok kanan atas seperti kertas di lipat dan memasang feedburner di dalamnya. Mungkin maksudnya adalah cara membuat pageflip, semoga benar perkiraan saya.

Dan kebetulan saya belum pernah buat postingan ini, tidak ada salahnya kita bahas sama-sama, walaupun tutorial ini sudah basi dan usang. Buat yang belum tau apa itu pageflip, bisa melihat contoh demonya disini.

Gambar hidup yang dipojok kanan atas itulah yang disebut pageflip, jika disorot dengan mouse akan terbuka dan jika di klik akan menuju ke halaman yang dimaksud. Dan halaman yang dimaksud tersebut adalah feed kita yang sudah kita daftarkan di feedburner. Dibawah ini adalah 2 gambar yang akan kita gunakan untuk membuat pageflip.

Sebelumnya saya mohon maaf jika saya mengambil gambar pageflip ini tanpa seijin yang empunya. Karena saya sendiri tidak tau persis siapa yang mempunyai hak paten atas gambar pageflip ini, dan saya mengambilnya lewat search engine. Begitu saya lihat, sangat banyak gambar yang sama sehingga saya tidak tau dan tidak bisa mencantumkan sumber pemilik gambar yang asli.

Buat sobat blogger, ini tutorialnya semoga bermanfaat :

Setelah login ke blogger, langsung saja tuju Edit HTML.
Letakkan kode css berikut ini sebelum kode ]]></b:skin>

#pageflip { position: relative }
#pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
#pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png) no-repeat right top; text-indent:-9999px }
Copy semua kode script yang ada disini dan kemudian letakkan sebelum kode </head>
Kemudian letakkan kode berikut ini tepat setelah kode <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/MyBloggerThemes' target='_blank'>
<img src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png'/>
<span class='msg_block'/>
</a>
</div>
Simpan Template.

Keterangan :

Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.

Silahkan sobat kreasikan sendiri gambarnya dan jika ingin membuat pageflip dengan tujuan halaman yang lain sobat tinggal ganti kode :

<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>

dengan alamat url yang lain, misalnya alamat url untuk mengajak pengunjung blog menjadi referral sobat dalam suatu bisnis online yang sobat ikuti.

Semoga tutorial ini bisa bermanfaat, selamat mencoba !

Blog, Blog Stuff, Java Script, Tutorial Blogspot, Widget 09.31 No comments

Pasang Breadcrumb (Navigasi) di Blog

Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Baiklah, begini cara membuat breadcrumb-nya :

Login ke Blogger.
Langsung tuju Edit HTML.
Klik Expand Template Widget.
Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

Setelah itu, cari kode seperti ini :

<div class='post hentry uncustomized-post-template'>
Letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>
- Simpan Template.

Coba sekarang lihat hasilnya, mantab kan ! oke deh..au revoir Thumbs-up

“ Gambar diambil dari : Biens-Naturels “

Blog, Blog Stuff, Label, Navigasi Halaman, Tutorial Blogspot, Widget 05.58 No comments

Menampilkan Artikel Terkait di Sidebar

Postingan tentang artikel terkait (related post) ini sudah sering saya bahas, tepatnya disini, disono dan nengkene. Namun ketiga postingan tersebut tidak ada yang membahas cara menampilkan artikel terkait di sidebar.

Pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat.

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

Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :

Langkah I

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

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

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Lalu sisipkan kode yang berwarna hijau, sehingga hasilnya menjadi seperti berikut :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Simpan Template, sampai disini proses Edit HTML sudah selesai.
Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.
Pilih yang HTML/Javascript, kemudian masukkan kode berikut :

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Jangan lupa beri judul, lalu klik Simpan.

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

Langkah II

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

<b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Kemudian klik Simpan Template.
Untuk tulisan HTML 11 dan Artikel Terkait Lainnya, hanya mengambil dari template saya, silahkan sobat sesuaikan dengan template dan judul artikel terkait yang tadi sudah sobat buat.

Mudahkan? yang bilang susah berarti orang yang malas berpikir ! Laughing

Selamat mencoba ! have a nice day..

Blog, Java Script, Tutorial Blogspot, Widget 23.14 No comments

Tombol View Pop Up

Membuat tombol view pop up ini sebenarnya tidaklah sulit, dan fungsinya lumayan sangat bermanfaat buat sobat yang ingin memancing pengunjung untuk melihat halaman link yang ingin sobat tampilkan. Misalnya, jika ingin mengajak pengunjung untuk ikut program yang sudah sobat ikuti dari situs affiliasi, yang biasanya ditampilkan dalam bentuk banner, atau tulisan biasa.

Jika memakai tombol view pop up ini, saya yakin pengunjung lebih penasaran untuk mengklik link yang sobat ingin tampilkan ketimbang menggunakan banner atau tulisan biasa.

Kenapa ? karena banner yang sobat pasang sudah memperlihatkan isi dari link yang dimaksud, so..yang liat juga males, soalnya sudah pada tau isinya..”oh bisnis online yang itu ya”, atau “ehmm..kalo bisnis tabungan online yang begitu sih males ah”. Nah loh, jadi ga diklik deh tuh banner atau tulisan sobat, bener ga tuh. Ya udah deh langsung aja, begini nih contoh tombol view pop up yang dimaksud.

Untuk membuatnya, silahkan sobat copy saja scripnya dibawah ini :

<center><form onsubmit="window.open('http://ALAMAT URL','popupwindow','scrollbars=no, width=300,height=100');return true"><input type="submit" value="TULISAN PADA TOMBOL"></form></center>

Copy paste kode tersebut di tempat yang sobat inginkan, di sidebar, header atau dipostingan juga bisa.

Keterangan :

   <center> : untuk tombol yang terletak ditengah, jika ingin letaknya di sebelah kanan tinggal sobat ganti saja dengan <right> jangan lupa ditutup dengan </right>
   Tulisan yang berwarna biru adalah alamat url yang ingin sobat pasang.
   Tulisan yang berwarna merah adalah tulisan pada tombol.

Silahkan kreasikan sendiri tombol view pop up milik sobat.. Happy

Blog, Link, Tutorial Blogspot, Widget 08.29 No comments

Memasang Widget Recent Post Dari Blogger

Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

Seperti biasa sobat login dahulu ke blogger.
Kemudian pada Elemen Halaman klik Tambah Gadget.
Pilih Featured.
Lalu pilih Recent Posts Advanced.
Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain – lain sobat contreng saja semua.
Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.
Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan. Open-mouthed

Blog, Blog Stuff, Post Tips, Recent Posts, Tutorial Blogspot, Widget 10.04 No comments

Cara Membuat Tab View Menu

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

Silahkan login ke blogger dengan ID sobat tentunya.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i   = 0;

do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i    = 0;

do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian Simpan.

Keterangan :

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba. smile_teeth

Blog, Kode HTML, Menu, Tutorial Blogspot, Widget 10.21 No comments

Cara Membuat Top Artikel / Post

Bulan ramadhan ini membuat saya agak malas untuk begadang, soalnya subuh sudah harus bangun untuk sahur. Jadi saya sempatkan untuk menulis postingan setelah sahur sampai pagi jam 7 karena setelah itu sudah harus berangkat kerja, duh jadi ngelantur nih, maklum puasa jadi agak - agak error.. smile_teeth

Baiklah langsung pada topik kita kali ini, beberapa minggu yang lalu ada yang bertanya di kolom shoutbox tentang bagaimana caranya membuat top artikel. Padahal postingan ini dapat sobat temukan dibanyak blog yang berisi tentang “tutorial blog”. Nah karena saya sayang sama sobat blogger, makanya saya buatkan postingan cara membuat top artikel / post ini. smile_wink

Seperti biasa, sobat login dulu ke blogger.
Kemudian tuju Elemen Halaman.
Klik Tambah Gadget.
Pilih yang Javascript / HTML.
Masukkan kode Javascript berikut ini :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2FAlamatBlog.blogspot.com&num=10" type="text/javascript"></script>
Ganti tulisan yang saya tebalkan dengan alamat blog sobat, kemudian Simpan.

Coba sekarang sobat lihat hasilnya. Oke ya, enak dong mantab dong..Selamat mencoba, jangan bosan mampir ke blog go blog ya.

Blog, Blog Stuff, Java Script, Menu, Post Tips, Tutorial Blogspot, Widget 15.31 No comments

Pasang Iklan Dalam Postingan

Sebelumnya saya sudah pernah membahas tentang cara memasang iklan di bawah postingan. Kurang lebih seperti postingan saya yang lalu, masih berhubungan dengan read more. Karena iklan yang di terbitkan di dalam postingan ini akan muncul setelah read more di klik. Buat sobat yang belum mengerti cara pasang read more, bisa membaca disini.
Dari jumlah iklan yang di klik oleh pengunjung blog saya, ternyata rata - rata lebih banyak di klik yang di dalam postingan. Karena apa? setiap orang yang membaca sebuah artikel, kemudian pada saat tulisan read more di klik akan muncul sebuah iklan di dalamnya.

Berikut langkah - langkahnya :

Buka blogger dengan ID sobat tentunya.

Klik Tata Letak.

Kemudian klik Edit HTML.

Jangan lupa backup template-nya terlebih dahulu.

Klik Expand Template Widget.

kemudian cari kode yang mirip dengan template saya seperti di bawah ini :

<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'>
<br/>
<br/>
<div style='text-align: right; color:#FF8000'>[ Baca Selengkapnya ]...</div></a></p>
</b:if>
Karena setiap template berbeda - beda, sobat cari miripnya saja, atau jika bingung cari saja

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

Jika sobat belum menggunakan read more, sobat bisa membaca tutorial cara membuat read more pada postingan saya yang dulu. Oke jika sudah, lanjut ke langkah berikutnya.
Kemudian parse terlebih dahulu kode iklan punya sobat ke dalam situs penyedia layanan parse HTML, bisa sobat baca disini.

Oke, setelah berhasil di parse, letakkan kode HTML yang sudah di parse tepat di bawah kode

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

atau kode yang seperti ini :

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

harap maklum, karena setiap template berbeda - beda, jadi saya tekankan sekali lagi, cari yang mirip dengan kode diatas.
Maka hasilnya akan seperti berikut ini :

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

<div style='float:up;'>

LETAK KODE IKLAN YANG SUDAH DI PARSE

</div>

<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'>
<br/>
<br/>
<div style='text-align: right; color:#FF8000'>[ Read More ]...</div></a></p>
</b:if>
Setelah itu Simpan Template, dan lihat hasilnya. Tampak iklan berada pada awal postingan atau di atas postingan, karena saya menggunakan float:UP makanya iklannya tampil di atas postingan. Sobat atur sendiri letaknya sesuai keinginan sobat. Perhatikan kode yang yang saya tandai dengan warna merah adalah kode baru yang di tambahkan.

Siippp..Selamat Mencoba !! have a nice day..

Blog, Blog Stuff, Java Script, Tutorial Blogspot, Widget 08.24 No comments

Horausah

Memasang Text Berjalan Recent Posts di Blog

Pengaturan Letak Widget Pada Halaman Tertentu

Pasang Widget Lintas Berita di Blog

Memasang Comment Count Di Blog

Membuat Widget 3 Kolom Dibawah Header

Membuat Navigasi Horizontal 2 Baris

Optimalkan Feedburner Dengan Memasang Pageflip

Pasang Breadcrumb (Navigasi) di Blog

Menampilkan Artikel Terkait di Sidebar

Artikel Terkait Pengganti LinkWithin

Tombol View Pop Up

Memasang Widget Recent Post Dari Blogger

Cara Membuat Tab View Menu

Cara Membuat Top Artikel / Post

Pasang Iklan Dalam Postingan

Klik here

Popular Posts

Categories