SEMUA ADA DISINI: blogger

Showing posts with label blogger. Show all posts

Sunday, 8 December 2013

Cara Merubah Model ScrollBar

Sekarang saya akan berbagi dengan kawan Cara merubah model ScrollBar :d; kawan tahu kan apa itu scrollbar yang biasanya berada dipinggir kanan Blog atau Komputer yang bisa digerakkan naik turun, :q; dengan kursor / mouse bertipe default milik webkit

Seperti yang di posting oleh master kita Taufik Nurrohman secara sederhana bisa dimanipulasi menjadi pointer

screenshot

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari tag ]]></b:skin>
Copas Kode berikut diatasnya

::-webkit-scrollbar {width:14px;background: -moz-linear-gradient(top,#999,#FFF);background:-webkit-gradient(linear, left top, right bottom, from(#999),to(#FFF));}

::-webkit-scrollbar-thumb {width:10px;background: -moz-linear-gradient(top,#fff,#333);background: -webkit-gradient(linear, left top, right bottom, from(#fff),to(#333));border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

Kalau kawan menginginkan tampil lain saya persilahkan meng-Edit ulang misalnya warna, width / lebar dan lain sebagainya
Simpan template kawan

Monday, 2 December 2013

Background Blog dengan Warna pilihan

Kawan masih ingat dengan postingan saya yang berjudul Tool untuk mengetahui Postingan Terpopuler :q; yang pada prinsip dasarnya merubah background Blog dengan warna berbeda, begitu juga dengan postingan saya yang sekarang ini menekankan pada background yang bekerja secara manual :r; sesuai selera pengunjung dengan meng-Klik salah satu warna yang dikehendaki :z;

untuk Demo kawan bisa lihat

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas kode berikut kedalamnya

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" cellspacing="5" width="100%" height="30">
<tr> <td
onclick="bgChange('#ffffff')" bgcolor="white">
<td
onclick="bgChange('#000000')" bgcolor="#000000">
<td
onclick="bgChange('#0000FF')" bgcolor="#0000FF">
<td
onclick="bgChange('#800000')" bgcolor="#800000">
<td
onclick="bgChange('#008000')" bgcolor="#008000">
<td
onclick="bgChange('#808080')" bgcolor="#808080">
<td
onclick="bgChange('#FFFF00')" bgcolor="#FFFF00">
<td
onclick="bgChange('#FF00FF')" bgcolor="#FF00FF">
<td
onclick="bgChange('#A6CAF0')" bgcolor="#A6CAF0">
</td
></td
></td
></td
></td
></td
></td
></td
></td
></tr>
</table>

Kawan bisa menambah / mengurangi elemen warna yang saya contohkan, :d; dengan cara menambahkan atau mengurangi seperti kode berikut

</td

Teks yang saya beri warna merah adalah kode warna silahkan disesuaikan
Simpan Blog kawan

Friday, 22 November 2013

Pasang Avatar disamping Nama Author

Sebelumnya saya berbagi Cara Pasang Image disamping Judul Artikel dan Cara Pasang Avatar Author disamping Judul Artikel :q; yang sekarang masih tetap pada Avatar cuma penempatannya disamping Nama Author atau Admin :q;

Nama Admin [pemilik Blog] biasanya diikuti dengan tanggal dan waktu posting yang penempatannya dibawah Judul atau dibawah Isi Artikel :r;

Kalau kawan ingin memasangnya di Blog Kodenya hampir sama dengan Cara Pasang Avatar Author disamping Judul Artikel, yang beda cuma ukurannya :y; kalau ditempatkan dibawah Judul ukurannya lebih kecil disebabkan memakai huruf lebih kecil sedangkan kalau dibawah Isi Artikel ukurannya sedikit lebih besar dibandingkan yang lainnya :x;

Cara membuatnya :

Seperti biasa masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari tag ]]></b:skin>
Kalau sudah ketemu hapus atau ganti dengan script berikut

.avatar-author{float:left;margin:0 5px 5px 0;border:0px solid #999;border-radius:50%;padding:0;width:20px;height:20px}
]]></b:skin>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Teks yang saya beri warna biru adalah posisi penempatannya - disesuaikan

Teks yang saya beri warna merah adalah besarnya Avatar - disesuaikan

Selanjutnya cari <data:post.body/> yang kedua, terus scroll keatas untuk mencari Judul atau kebawah untuk akhir Isi Artikel, yang kodenya kurang lebih seperti berikut :

<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
- <span class='updated'>
<data:post.timestamp/></span>
-------------------dstnya
<data:post.body/>

Tambahkan kode berikut diatasnya <script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/> sehingga menjadi seperti berikut

<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
<span class='updated'>
<data:post.timestamp/></span>
--------------- dstnya
<data:post.body/>

Simpan Template kawan

Monday, 18 November 2013

Pasang Avatar Author disamping Judul Artikel

Sebelumnya saya sudah berbagi dengan kawan Cara Pasang Image disamping Judul Artikel :q; sekarang saya akan berbagi lagi hal yang sama, cuma yang sekarang ini dengan Avatar Author atau Foto Profil kawan sendiri :r; bagaimana, perhatikan screenshotnya dibawah ini

Kalau kawan ingi tahu caranya, silahkan dilanjutkan membacanya ! :y;

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas script berikut diatas ]]></b:skin>

.avatar-author{float:left;margin:0 10px 5px 0;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head>

//<![CDATA[

function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}

//]]></script>

Simpan sementara Template kawan
Temukan <b:if cond='data:post.title'> yang kodenya kurang lebih seperti berikut

<b:includable id='post' var='post'>

Copas script berikut disini....!

<b:if cond='data:post.title'>

<h2 class='post-titles' itemprop='name'>
<b:if cond='data:post.link'>
.................. seterusnya....

Copas script berikut diatas <b:if cond='data:post.title'>

Simpan Template kawan dan lihat hasilnya

Monday, 11 November 2013

Tuesday, 5 November 2013

Pesan Contact us langsung masuk Email Blogger

Postingan saya tentang Cara Membuat Contact us di Docs Google, ::q; seandainya ada pesan masuk kita hanya bisa melihatnya di Google Drive bagi kawan yang ingin mencoba membuat Contact us, Kontak kami, Hubungi saya atau apalah namanya :r; silahkan kawan baca dulu disini, karena sekarang saya akan melanjutkan postingan tersebut biar pesan masuk nantinya bisa langsung ke Email kita :z;

Setelah Contact us tercipta atau mungkin kawan mengulang membuatnya, karena sekarang saya akan melanjutkan ke tahap kedua yaitu Mengolah Data / Pesan yang masuk

Caranya :

Masuk atau buka halaman Dasbor Google Drive
Perhatikan dibagian atas klik - Pilih Tujuan Tanggapan
Isi tanda cek pada opsi Spreadsheet Baru dan tulisan dibawahnya bisa kawan ganti bisa tidak

Gambar-1

Pilih button Buat dan tunggu sampai Pilih Tujuan Tanggapan berubah menjadi Lihat Tanggapan, silahkan kawan klik untuk melihat Spreadsheet Formulir Kontak Tanggapan kawan

Gambar-2

Berikutnya kawan klik Alat dan pilih Editor Skrip....

Disini kawan akan disuguhkan halaman Proyek tak berjudul, yang bernama Kode.gs; copas javascript berikut ke dalamnya

function sendFormByEmail(e) {
// Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
var emailSubject = "PESAN BARU!";
// Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
var yourEmail = "email@domain.com";
// Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
// Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
var docKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
// Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
var useEditors = 1;
// Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
// Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
// Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
var extraColumns = 0;
if (useEditors) {
var editors = DocsList.getFileById(docKey).getEditors();
var notify = (editors) ? editors.join(',') : yourEmail;
} else {
var notify = yourEmail;
}
// Variabel `e` memegang semua data di dalam array.
// Loop semua data di dalam array dan sisipkan nilainya ke pesan.
var s = SpreadsheetApp.getActive().getSheetByName("Data1");
if (extraColumns) {
var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
} else {
var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
var message = "";
}
for (var i in headers) {
message += headers[i] + ' = ' + e.values[i].toString() + '\n';
}
MailApp.sendEmail(notify, emailSubject, message);
}
// Script oleh : DTE

silahkan ganti teks yang saya beri warna merah dengan milik kawan, khusus untuk var docKey bisa didapat pada jendela penelusuran [perhatikan Gambar-2 diatas]
contohnya :
https://docs.google.com/spreadsheet/ccc?key=0AmHOiaoeYjG2dDRONFhPN0ZoeW92N2FWb0tGNXEybVE#gid=0

Tetap pada halaman Spreadsheet dan lihat kebawah teks Respons Formulir spasinya dihilangkan

Halaman Spreadsheet bagian bawah

Selanjutnya klik Sumber Daya - Pemicu proyek saat ini
Klik pada tautan No triggers set up. Click here to add one now

Klik Save setelah kawan mengadakan perubahan seperlunya, Perhatikan Image berikut

Terakhir akan muncul pesan authorisasi pilih Terima

Silahkan kawan mencoba Contact us yang baru dibuat, jika pesan sudah masuk di Email berarti kawan sudah berhasil,

Tuesday, 29 October 2013

Tool untuk Mengetahui Postingan ter-Populer

Kali ini saya akan berbagi dengan kawan pengunjung setia BlogBego Creation Tool untuk mengetahui Postingan yang paling sering dilihat :z; dengan kata lain Populer, maksudnya postingan Blog kita yang dilihat akan berbeda warnanya dengan latar belakangnya aslinya :q; maaf bahasanya sedikit Ribet

Oke langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Sebaiknya simpan Template kawan dulu

Ada 2 [dua] Caranya, silahkan pilih salah satu

Cara Pertama

Copas script berikut tepat diatas </body>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var bgU=location.href;bgPP=document.getElementById('PopularPosts1');bgTN=bgPP.getElementsByTagName('a');if(bgTN){bgH=bgTN.item(0).href;if(bgU.indexOf(bgH)!=-1){document.write('<style type="text/css">body{background:#ff00ff!important}</style>')}}
//]]>
</script>
</b:if>

Cara Kedua

Copas script berikut diatas <b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:post.href == data:blog.url'>
<style type='text/css'>body{background:#ff00ff!important}</style>
</b:if>

Teks yang berwarna violet adalah warna latar belakang, silahkan disesuaikan asal berbeda dengan warna latar belakang Blog kawan :r;
Simpan Template kawan

Tuesday, 1 October 2013

Menu Navigasi Pilihan BlogBego

Sekarang saya akan berbagi dengan kawan beberapa Menu Navigasi yang kelihatan sedikit unik lain dari yang lain hasil karya oleh Master-master Blogger :q; mudah-mudahan selera kawan sama dengan selera saya, yang semuanya ini saya temukan saat Blogwalking. Silahkan kawan Lihat langsung Demonya maupun untuk mendownload kalau ingin mencoba memakainya

How to Create a CSS3 Wheel Menu

Selengkapnya....

CREATIVE CSS3 ANIMATION MENUS

Selengkapnya...

CSS3 vertical multicolor 3D menu

Selengkapnya....

Elegant Dark CSS3 Menu Template

Selengkapnya.....

Flat Turquoise Vertical

Selengkapnya....

Pure CSS DropDown Menu

Selengkapnya...

Sweet tabbed navigation using CSS3

Selengkapnya....

Sebenarnya masih banyak lagi yang lainnya, kalau ada waktu lain waktu saya sambung lagi :q; untuk sekarang saya cukupkan hanya sampai disini dulu
Selamat mencoba

Saturday, 28 September 2013

Sembunyikan Isi Artikel di Beranda

Sebelumnya saya sudah berbagi dengan kawan Cara Menyembunyikan Postingan di Home Page sedangkan yang sekarang saya akan mencoba berbagi dengan kawan Cara Menyembunyikan Isi dari Artikel / Postingan pada Home Page [Beranda] :q; yang saya maksud disini pada Home Page hanya akan kelihatan Judulnya saja, sedangkan Isi sampai Readmore [Selengkapnya] akan kelihatan setelah mouse didekatkan :q; perhatikan gambar berikut

Untuk Demo kawan bisa lihat

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Kode berikut tepat diatasnya

.post .sembunyi {display:none;}
.post:hover .sembunyi {display:inline;}

Selanjutnya cari <data:post.body/>

yang selengkapnya kurang lebih seperti berikut

<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div></b:if>
<div style='clear: both;'/> 
</div>

Teks yang saya beri warna merah adalah Kode Readmore [selengkapnya]

Hapus atau ganti dengan kode berikut

<div class='sembunyi'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if></b:if></div><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <div style='clear: both;'/>  </div>

Kalau Template kawan sudah memakai Readmore Otomatis, yang kodenya kurang lebih seperti berikut :

<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><div style='clear: both;'/>  </div>

Hapus atau ganti dengan kode berikut :

<div class='sembunyi'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if></div><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <div style='clear: both;'/> </div>

Simpan Template kawan

Seandainya kawan ingin biar Readmore kelihatan, kawan cukup memindahkan </div> teks yang saya beri warna merah keatas kode Readmore; begitu juga sebaliknya biar Readmore saja yang tidak kelihatan maka yang perlu kawan pindahkan hanya <div class='sembunyi'> taruh diatas kode Readmore :r;

Saturday, 21 September 2013

Daftar Isi berdasarkan Katagori Pilihan

Daftar Isi sekarang ini diciptakan oleh Master Duy Pham, Blogger tetangga :q; kita yang hampir mirip modelnya seperti yang diciptakan oleh Master Taufik Nurrohman :z; yang masing-masing mempunyai kelebihan dan kekurangannya seperti Katagori [Label] bisa dipilih untuk ditampilkan maupun disembunyikan begitu juga dengan jumlah Judul yang ditampilkan dengan kata lain ada selanjutnya / sebelumnya [Next - Prev] perhatikan screenshotnya :

Langsung ke Cara membuatnya silahkan kawan mampir karena toolnya sudah tersedia, kawan cukup memasukan datanya saja

screenshot

Masukan url Blog kawan pada Địa chỉ blog
Tentukan Judul yang ingin ditampilkan pada Số lượng bài hiển thị trên 1 trang
Ketik Katagori yang tak ingin kawan tampilkan pisahkan dengan Koma [,] pada Tên nhãn không cho hiển thị, phân cách bởi dấu phẩy (,)
Selanjutnya pilih Get code
Copas scriptnya pada HTML
Kawan bisa edit kembali script tersebut supaya sesuai selera

<div style='width:96%;padding:5px;margin:0;border:1px solid #999;background:#ccc;'><style type='text/css'>
#show-cat{float:left;margin-right:5px;width:95px;height:310px;overflow-x:hidden;overflow-y:auto;line-height:.8em}#show-cat ul{margin:0;padding:0;border-top:1px solid #333;}#show-cat ul li{list-style-type:none;margin:0;border:1px solid #333;padding:0}#show-cat ul li a{display:block;padding:10px}#show-cat ul li a,#navi-cat a{background:#fff;color:#00F;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#999;color:#fff}#show-post{float:left;width:77%;font-size:12px;line-height:1.8em;}#show-post ul li{list-style-type:none}#navi-cat{padding:20px 0}#navi-cat a{margin-right:5px;border:1px solid #333;}#navi-cat a,#navi-cat span{padding:5px 10px;}#navi-cat span{float:right}</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://blogbego-creation.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';cat_remove=['Admin','software','blog','Blogger','link'];
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#464546!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){for(var j=0;j<cat_remove.length;j++){if(cat[i].term==cat_remove[j]){cat.splice(i,1)}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
</div>

Teks yang saya beri warna Biru adalah kode tambahan

Teks yang berwarna Merah adalah kode setelah saya Edit

Hasilnya seperti screenshot pertama

Selamat Mencoba

Wednesday, 18 September 2013

Animasi Gadget Social Bookmark

Kali ini saya tetap berbagi tentang Gadget Social BookMarking dengan model Animasi :q; yang saya dapatkan pada tempat yang sama, terus terang sekarang ini saya lagi males membuat postingan dikarenakan saya fokus pada merancang Template, :z; sedangkan postingan harus tetap ditambah untuk mengecilkan posisi yang tempo hari membengkak hampir 200% [maaf nggak nyambung] :r;

screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut diatas atau sebelum </body>

<div class='shr_ss shr_publisher'/>


<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

Simpan Template kawan

Refrensi : Paul Crowe

Sunday, 15 September 2013

Slide Social Bookmarking Gaya Telor

Kali ini saya akan berbagi dengan kawan Cara Membuat Slide Social Bookmarking Gaya Telor :r; yang saya dapatkan saat jalan-jalan ke Webnya Master Paul Crowe yang tampilannya tetap ditempat [fixed] dan saat mouse didekatkan maka akan terbuka untuk melihat isinya

screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: 'bea50586-2b9f-448d-947a-01385f28e305', onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Selanjutnya Copas Script berikut diatas </body>

<div style='position: fixed; bottom: 2%; right: 2%;'>
<div class='shareEgg' id='shareThisOrnament'/>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});
</script>
</div>

Teks yang saya beri warna merah bisa kawan ganti sesuai keinginan untuk tampilan

Simpan Template kawan

Thursday, 5 September 2013

Navigasi Menu Widget untuk Blogger

Lagi-lagi Navigasi Menu, mudah-mudahan kawan tidak bosan dengan Navigasi :q; yang saya posting sekarang, kalau tak unik atau spesial sekali tak mungkin saya bagikan sama kawan walau ini bukan ciptaan saya, terus terang Navigasi Menu Widget untuk Blogger ini saya dapatkan pada W2B :z; memakai jQuery library dan Blogger JSON feed API memang sedikit berat untuk Blog kita, makanya saya tidak menyarankan harus dicoba dan dipasang pada Blog kawan

screenshot

Kalau memperhatikan screenshot-nya Menu - Sub Menu [Katagori] - Isi / Judul + Imagenya, cuma masing-masing sub Menu - Judul jumlahnya dibatasi karena menyangkut tempat, lebih jelasnya silahkan lihat

Bagaimana kawan setelah melihat Demonya !!!
Cara Membuatnya

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Css berikut tepat diatas ]]></b:skin>

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) { $('#w2bajaxmenu').ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image });});
</script>

Seandainya pada Template kawan sudah ada plugin jQuery teks yang saya beri warna merah diatas bisa dihilangkan

numPost :4, merupakan 4 Judul yang ditampilkan, hal ini bisa disesuaikan / ditambah jumlahnya asal Height diatasnya harus disesuaikan lagi, :x; dan hasilnya akan memakai tempat melorot kebawah

Sampai disini Simpan Template kawan
Selanjutnya pillih Tata Letak - Tambahkan Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas kode berikut kedalamnya

<ul id="w2bajaxmenu" class="w2bmenu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Example 1</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li><li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a></li>
</ul> </li>
<li> <a href="#">Example 2</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
</ul> </li>
<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

Jangan lupa ganti URL / Link diatas sesuai kebutuhan
Simpan Blog kawan

Sunday, 28 July 2013

Tool untuk mengetahui Kawan Blogger

Kawan Blogger setelah sekian lama Ngeblog kemungkinan ada yang berkeinginan mengetahui para Blogger se-Wilayah [satu Kecamatan, satu Kabupaten / Kota, maupun satu Propinsi dan se-Negara] itulah yang akan saya bahas dan bagikan dengan kawan sekarang :z;

Pada Google dulu pernah ada Tool untuk mengetahui kawan Blogger se-Wilayah, tapi karena sekarang sudah banyak perubahan terjadi yang menyebabkan banyak yang tidak berfungsi dengan baik dan sempurna :y; sama sekali

Tapi kawan jangan berkecil hati karena Master Beben Koben sudah berbaik hati membuatkan Tool tersebut dan kawan bisa mencobanya kira-kira siapa saja Blogger terdekat kita
Silahkan dicoba

Untuk mengetahui Blogger se-Wilayah

Design: Beben Koben - Modif :BlogBego

Kalau kawan ingin memasang di Blog

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pilih tanda + pada HTML / JavaScript
Copas Kode berikut kedalamnya

<center><div style='font-size:16px;color:blue;'> Untuk mengetahui Blogger se-Wilayah </div></center>
<div style='overflow: hidden;width:270px;padding:5px 5px 0; display:block;text-align:center;margin: 5px auto 0; height:180px; background: rgb(255,255,255);border-top: 1px solid #333;border-left: 5px solid #000;border-right: 1px solid #333;border-bottom: 5px solid #000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;'>
<br/>
<form action="http://www.blogger.com/profile-find.g" method="get" target="top"><input size="1" name="t" type="text" value="l" style="display:none" /><label>Kec.-Kota contoh: <b>Mengwi-Badung</b></label><br /><input size="25" name="loc2" type="text" /><br/><label>Propinsi contoh: <b>Bali</b></label><br /><input size="25" name="loc1" type="text" /><br/><label>Negara contoh: <b>ID</b></label><br /><select name="loc0"><option value="AE" />AE<option value="AF" />AF<option value="AG" />AG<option value="AI" />AI<option value="AL" />AL<option value="AM" />AM<option value="AO" />AO<option value="AQ" />AQ<option value="AR" />AR<option value="AS" />AS<option value="AT" />AT<option value="AU" />AU<option value="AW" />AW<option value="AX" />AX<option value="AX" />AX<option value="AZ" />AZ<option value="BA" />BA<option value="BB" />BB<option value="BD" />BD<option value="BE" />BE<option value="BF" />BF<option value="BG" />BG<option value="BH" />BH<option value="BI" />BI<option value="BJ" />BJ<option value="BL" />BL<option value="BM" />BM<option value="BN" />BN<option value="BO" />BO<option value="BQ" />BQ<option value="BR" />BR<option value="BS" />BS<option value="BT" />BT<option value="BV" />BV<option value="BW" />BW<option value="BY" />BY<option value="BZ" />BZ<option value="CA" />CA<option value="CC" />CC<option value="CD" />CD<option value="CF" />CF<option value="CG" />CG<option value="CH" />CH<option value="CI" />CI<option value="CK" />CK<option value="CL" />CL<option value="CM" />CM<option value="CN" />CN<option value="CO" />CO<option value="CR" />CR<option value="CU" />CU<option value="CV" />CV<option value="CW" />CW<option value="CX" />CX<option value="CY" />CY<option value="CZ" />CZ<option value="DE" />DE<option value="DJ" />DJ<option value="DK" />DK<option value="DM" />DM<option value="DO" />DO<option value="DZ" />DZ<option value="EC" />EC<option value="EE" />EE<option value="EG" />EG<option value="EH" />EH<option value="ER" />ER<option value="ES" />ES<option value="ET" />ET<option value="FI" />FI<option value="FJ" />FJ<option value="FK" />FK<option value="FM" />FM<option value="FO" />FO<option value="FR" />FR<option value="GA" />GA<option value="GB" />GB<option value="GD" />GD<option value="GE" />GE<option value="GF" />GF<option value="GG" />GG<option value="GH" />GH<option value="GI" />GI<option value="GL" />GL<option value="GM" />GM<option value="GN" />GN<option value="GP" />GP<option value="GQ" />GQ<option value="GR" />GR<option value="GS" />GS<option value="GT" />GT<option value="GU" />GU<option value="GW" />GW<option value="GY" />GY<option value="HK" />HK<option value="HM" />HM<option value="HN" />HN<option value="HR" />HR<option value="HT" />HT<option value="HU" />HU<option value="ID" selected />ID<option value="IE" />IE<option value="IL" />IL<option value="IM" />IM<option value="IN" />IN<option value="IO" />IO<option value="IQ" />IQ<option value="IR" />IR<option value="IS" />IS<option value="IT" />IT<option value="JE" />JE<option value="JM" />JM<option value="JO" />JO<option value="JP" />JP<option value="KE" />KE<option value="KG" />KG<option value="KH" />KH<option value="KI" />KI<option value="KM" />KM<option value="KN" />KN<option value="KP" />KP<option value="KR" />KR<option value="KW" />KW<option value="KY" />KY<option value="KZ" />KZ<option value="LA" />LA<option value="LB" />LB<option value="LC" />LC<option value="LI" />LI<option value="LK" />LK<option value="LR" />LR<option value="LS" />LS<option value="LT" />LT<option value="LU" />LU<option value="LV" />LV<option value="LY" />LY<option value="MA" />MA<option value="MC" />MC<option value="MD" />MD<option value="ME" />ME<option value="MF" />MF<option value="MG" />MG<option value="MH" />MH<option value="MK" />MK<option value="ML" />ML<option value="MM" />MM<option value="MN" />MN<option value="MO" />MO<option value="MP" />MP<option value="MQ" />MQ<option value="MR" />MR<option value="MS" />MS<option value="MT" />MT<option value="MU" />MU<option value="MV" />MV<option value="MW" />MW<option value="MX" />MX<option value="MY" />MY<option value="MZ" />MZ<option value="NA" />NA<option value="NC" />NC<option value="NE" />NE<option value="NF" />NF<option value="NG" />NG<option value="NI" />NI<option value="NL" />NL<option value="NO" />NO<option value="NP" />NP<option value="NR" />NR<option value="NU" />NU<option value="NZ" />NZ<option value="OM" />OM<option value="PA" />PA<option value="PE" />PE<option value="PF" />PF<option value="PG" />PG<option value="PH" />PH<option value="PK" />PK<option value="PL" />PL<option value="PM" />PM<option value="PN" />PN<option value="PR" />PR<option value="PS" />PS<option value="PT" />PT<option value="PW" />PW<option value="PY" />PY<option value="QA" />QA<option value="RE" />RE<option value="RO" />RO<option value="RS" />RS<option value="RU" />RU<option value="RW" />RW<option value="SA" />SA<option value="SB" />SB<option value="SC" />SC<option value="SD" />SD<option value="SE" />SE<option value="SG" />SG<option value="SH" />SH<option value="SI" />SI<option value="SJ" />SJ<option value="SK" />SK<option value="SL" />SL<option value="SM" />SM<option value="SN" />SN<option value="SO" />SO<option value="SR" />SR<option value="SS" />SS<option value="ST" />ST<option value="SV" />SV<option value="SX" />SX<option value="SY" />SY<option value="SZ" />SZ<option value="TC" />TC<option value="TD" />TD<option value="TF" />TF<option value="TG" />TG<option value="TH" />TH<option value="TJ" />TJ<option value="TK" />TK<option value="TL" />TL<option value="TM" />TM<option value="TN" />TN<option value="TO" />TO<option value="TR" />TR<option value="TT" />TT<option value="TV" />TV<option value="TW" />TW<option value="TZ" />TZ<option value="UA" />UA<option value="UG" />UG<option value="UM" />UM<option value="US" />US<option value="UY" />UY<option value="UZ" />UZ<option value="VA" />VA<option value="VC" />VC<option value="VE" />VE<option value="VG" />VG<option value="VI" />VI<option value="VN" />VN<option value="VU" />VU<option value="WF" />WF<option value="WS" />WS<option value="YE" />YE<option value="YT" />YT<option value="ZA" />ZA<option value="ZM" />ZM<option value="ZW" />ZW</select>
<input value="Lihat Blogger's" type="submit" /> <input value="Clear" type="reset" />
</form> </div>
<center><div style='font-size:10px;'>Design: <a href='http://beben-koben.blogspot.com'>Beben Koben</a> - Modif :<a href='http://blogbego-creation.blogspot.com'>BlogBego</a></div></center>

Silahkan kawan ganti Teks yang berwarna biru sesuai selera kawan

Simpan Blog kawan

SEMUA ADA DISINI

IKLAN BULAN INI

Sunday, 8 December 2013

Cara Merubah Model ScrollBar

Monday, 2 December 2013

Background Blog dengan Warna pilihan

Friday, 22 November 2013

Pasang Avatar disamping Nama Author

Monday, 18 November 2013

Pasang Avatar Author disamping Judul Artikel

Monday, 11 November 2013

Recent Post Thumbnail plus Komentar

Tuesday, 5 November 2013

Pesan Contact us langsung masuk Email Blogger

Tuesday, 29 October 2013

Tool untuk Mengetahui Postingan ter-Populer

Tuesday, 1 October 2013

Menu Navigasi Pilihan BlogBego

Pure CSS DropDown Menu

Saturday, 28 September 2013

Sembunyikan Isi Artikel di Beranda

Saturday, 21 September 2013

Daftar Isi berdasarkan Katagori Pilihan

Wednesday, 18 September 2013

Animasi Gadget Social Bookmark

Sunday, 15 September 2013

Slide Social Bookmarking Gaya Telor

Thursday, 5 September 2013

Navigasi Menu Widget untuk Blogger

Sunday, 28 July 2013

Tool untuk mengetahui Kawan Blogger