Random Post Dinamis

Dikatakan Random Post dinamis dikarenakan widget random post ini akan menampilkan seluruh postingan blog kita secara acak dengan trik slide show.
Ini akan lebih memaksimalkan semua isi postingan tertampil dengan jeda waktu yang dapat kita atur.

Dan satu lagi kelebihan random post ini tidak memakan space yang besar dan sangat simpel.

Jadi, tertarik untuk memasang? ini dia script code-nya:

*Silahkan sobat pasang di sidebar : Layout >> Add Page Element >> HTML/Javascript >>

<style type="text/css">
.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #a43434;display:none !important;}

.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

.clearFloat {clear : both;}

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}
</style>

<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://NAMABLOGKAMU.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>

<div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

Kemudian Save.

*Silahkan ganti alamat yang berwarna MERAH dengan alamat blog sobat.

Untuk contoh hasilnya dapat sobat lihat disini.

Baca Lanjutan “Random Post Dinamis”  »»

Variasi Font untuk blogger template

Bagi pengguna blogger.com sekarang ada layanan untuk mengganti font pada blog kita biar terkesan lebih unik dan elegan lagi dengan menggunakan @font-face CSS.

Kita perlu pusing-pusing menyimpan font yang akan kita gunakan, cukup menggunakan '@font-face CSS' ('Font Embedding') di 'blogger template' melalui jasa gratis yang disediakan oleh kernest.com.

Contoh blog yang sudah menggunakan @font-face dapat anda lihat pada Blogger Display dan blog Rudy Azhar yang digunakan pada judul blog (h1) dan judul posting (h2).

Penerapannya sangat simple tinggal copy paste aja ke blog kita, Jika kamu berminat langsung aja menuju ke blog code-code-an untuk tutorial yang lebih lengkap.

Sebelumnya saya minta dukungan kalian semua dalam kontes Ngobrol Seputar Bisnis Online. Terima kasih....

Baca Lanjutan “Variasi Font untuk blogger template”  »»

Menambah Big Social Bookmark dibawah posting

Satu lagi keunggulan wordpress yang dapat kita aplikasikan pada blogspot, yaitu menambah widget social bookmark dibawah postingan blog.

Penambahan social bookmark sangat baik sekali untuk mempromosikan blog kita di situs facebook, twitter, digg dan lain-lain.

Kali ini yang ingin saya sharingkan bukan social bookmark pada umumnya akan tetapi yang big, selain mempercantik blog juga menarik minat pengunjung untuk mengkliknya..

Contoh seperti gambar dibawah ini dapat anda lihat pada blog Ngobrol Seputar Bisnis Online.



Gimana, keren kan? Oke kita mulai aja..

seperti biasa Tambahkan kode CSS berikut di atas kode ]]></b:skin>

div.sociable { margin: 16px 0;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Setelah itu simpan dulu template kamu
lalu kamu ceklist Expand Template Widget.

Kamu cari kode <p><data:post.body/></p>
kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.
maka pilih kode yang kedua biar tidak tampak pada halaman utama.
setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.

<div class='sociable'>
<div class='sociable_tagline'>
<img alt='Ngobrol Seputar Bisnis Online' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOTb1pF1I/AAAAAAAAAuI/M-fC8ABhw6c/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfN_PyGWsI/AAAAAAAAAtw/HUcVDlUpfwg/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='http://1.bp.blogspot.com/_KgIhfKU4BcE/SwfN5pqFA4I/AAAAAAAAAto/HFYS5rLHaIo/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOGlfWg6I/AAAAAAAAAt4/1NpvgqnynAg/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfOL1O6pFI/AAAAAAAAAuA/fCpnpHg87yg/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfObF-toHI/AAAAAAAAAuQ/SwO1_vXBHWg/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOoNe2fWI/AAAAAAAAAuY/cxTxqKCpVYE/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOswiRsWI/AAAAAAAAAug/cllKpvLIDi4/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>

Karena penempatan social bookmark ini pada halaman postingan jadi kamu tidak bisa pratinjau hasilnya, so.. simpan aja dulu dan lihat hasilnya...

Baca Lanjutan “Menambah Big Social Bookmark dibawah posting”  »»

Pasang Kolom About The Author

About The Author ini banyak diaplikasi oleh pemakai wordpress dan sekarang saya coba sharing untuk dapat juga digunakan bagi pengguna blogspot dengan kode CSS yang simpel. penampakannya bakal seperti pada Blog Godown.

Banyak pengguna blogspot yang iri dengan pengguna wordpress karena banyak widget yang menarik disana, tapi itu bukan suatu yang susah untuk kita aplikasikan ke blog kita.

Ini contoh screenshootnya seperti yang ada pada blog Ngobrol Seputar Bisnis Online:




Kita mulai aja ya...

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Tambahkan kode CSS berikut di atas kode ]]></b:skin>

.authbio{
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px groove #ccc;
width: 475px;
padding: 10px;
margin-bottom:20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}

.authbio a{

text-decoration:underline;

}
img.alignleft {
float:left;
background-color: #c4e3e0;
border:5px solid #c4e3e0;
padding: 5px;

margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;

}

Setelah itu simpan dulu templatenya ntar bisa hilang..
lalu kamu ceklist Expand Template Widget.

Kamu cari kode <p><data:post.body/></p>
kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.
maka pilih kode yang kedua biar tidak tampak pada halaman utama.
setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.

<div class='authbio'>
<div style='float: left;'>
<img alt='rudy azhar' src='http://1.bp.blogspot.com/_KgIhfKU4BcE/SvRaO6PL06I/AAAAAAAAApw/l7cDVEblMRw/s400/rudy6.jpg'/></div>
<h2><strong>About The Author:</strong></h2>
<a href='http://rudyazhar.blogspot.com/2009/07/rudy-azhar-admin-rudyazhar-dot-com.html'><strong>Penulis</strong></a> ialah seorang yang lagi merambah dunia internet marketing dan belajar lebih dalam lagi. Jika anda senang dengan tulisan ini, pastikan anda <a href='http://feedburner.google.com/fb/a/mailverify?uri=internetmarketingsharing' target='_blank'><strong>Mendaftar Gratis</strong></a>! atau ambil <a href='http://feeds.feedburner.com/internetmarketingsharing' target='_blank'><strong>Feed Rss</strong></a>.</div>

Simpan template kamu dan lihat hasilnya...

Jangan lupa untuk merubah alamat foto dengan alamat foto kamu, serta kamu bisa mengganti kalimat diatas dengan kreasi kamu sendiri.

Baca Lanjutan “Pasang Kolom About The Author”  »»

Penawaran untuk Para Blogger

Udah lama banget OB ngga sempat nyentuh ini blog. Mungkin belum punya waktu atau sarana untuk berlama-lama online, sebab pekerjaan di dunia nyata menuntut tenaga ekstra. Maka dari itu OB mohon maaf kepada teman-teman semua, sekaligus mumpung mau lebaran he..he..
Coba pandang dan teliti optimasi blog ini, seperti ngga terurus dan terawat ditambah lagi update posting yang jarang sekali. Kalau ditinggalin begitu aja, rasanya sayang banget. Betul tidak? Dan yang paling sadisnya lagi, alexa rank-nya melorot tajam. Dalam kesempatan posting kali ini OB akan mengajukan penawaran kepada sobat semua. Apa-an tuh? Blognya mau dihapus atau mau dijual??? Ngga dong!!! Cuma mau menawarkan untuk mengelola bareng blog ini. Syaratnya ngga macam-macam, orangnya bertanggungjawab dengan isi posting, setia melakukan update posting (minimal 2 post/minggu), kompeten dengan tema yang ada, yakni tips seo dan trik blogger.

Kalau berminat, silakan layangkan email pemberitahuan ke ariamsi.4215@gmail.com disertakan pula blog yang sobat kelola. Buruan yah, pengelola dibatasi hanya 2 (dua) orang. Dan yang paling penting gratis..tis..tis...

Baca Lanjutan “Penawaran untuk Para Blogger”  »»