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 

Read more ...

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 onclick="bgChange('#A6CAF0')" bgcolor="#A6CAF0">

     </td

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

Read more ...

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='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/> sehingga menjadi seperti berikut 

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
<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 

Read more ...

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>

<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>

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

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

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

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'>  

  <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

• Simpan Template kawan dan lihat hasilnya 

Read more ...

Pasang Image disamping Judul Artikel

Selamat malam kawan-kawan yang setia mengunjungi BlogBego Creation ini, :z; mudah-mudahan kawan masih betah berkunjung kemari karena sekarang saya akan mencoba berbagi dengan kawan Cara Pasang Image disamping Judul Artikel  :q; 

Cara membuatnya :

Silahkan kawan membuat image yang ukuranya kecil dulu, selanjutnya disimpan pada hosting kawan atau ditempat kawan menyimpan file, terus ambil Link-nya :r;

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari dan temukan kode sebagai berikut atau yang mirip-mirip seperti itu, dikarenakan struktur Template Blogger berbeda-beda 

<a expr:href='data:post.url'><data:post.title/></a> 
<b:else/> 
atau seperti ini : 
<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/> 
atau seperti ini : 
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
     <b:else/> 


• Sisipkan Link image yang kawan buat tadi sebelum <data:post.title/></a> contohnya sebagai berikut : 
<a expr:href='data:post.url'> sisipkan disini Link image <data:post.title/></a> 
<b:else/> 
atau  
<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'> sisipkan disini Link image <data:post.title/></a> 
 <b:else/>

Contoh jadinya :

<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'> 

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s-vb9692QWqa4-yZeQDYEQCUDpRRh9KZxSc6K7JxU7lZu8pWeI5gq1-n33KDmlZTVNV_zBdY9Nd3FYIw31CTSqmVbHfUxWI1T21kTLb1kjUo0MMp5aUlGP3arMp0iXvc_vkTIMZBXXo/s1600/xKopi.gif'/>&nbsp; &nbsp;<data:post.title/></a>

        <b:else/>

• Biasanya kode tersebut diatas lebih dari satu, silahkan dicoba - coba penempatannya
• &nbsp; &nbsp; untuk spasi antara image dengan Judul Artikel bisa ditambah atau dihilangkan
• Silahkan ganti  image saya tersebut dengan image yang kawan buat tadi 
• Simpan Template

Read more ...

Perpendek Komentar dengan Slide Panel

Postingan sekarang ini saya dapatkan pada master  Taufik Nurrohman pada Blognya DTE yaitu Cara Memperpendek Komentar dengan Slide Panel :q; maksudnya Formulir dan Komentar yang ada di Blog   akan menjadi Slide Buka Tutup dan akan menutup dengan sendirinya setelah beberapa detik :r; 

Oke langsung saja ke Cara membuatnya 

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Sebaiknya simpan Template kawan dulu
• Temukan Tag ]]></b:skin> 
• Kalau sudah ketemu Hapus atau dengan script berikut :

a.openpanel {display:block;clear:both;width:auto;padding:0px 0px;text-align:center;
font-weight:bold;line-height:32px;background-color:#000;color:white;text-decoration:none;margin:0px 0px;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px;right: 15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {top:6px;border-color:transparent transparent white transparent;}
div.paneline {height:0px;border-bottom:4px solid #800;}
div.hompiPanel {padding:10px 20px 20px;-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);margin:0px 0px !important;}
]]></b:skin><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>

• Seandainya pada Template kawan sudah berisi jquery sejenis,  yang saya beri warna merah bisa kawan hilangkan atau hapus 
• Simpan Template kawan

Read more ...

Jquery Emoticos untuk Blogger

Sebelumnya saya sudah pernah berbagi tentang Tambahkan Emoticon pada Blog, yang bisa ditampilkan baik pada Komentar maupun pada Postingan :y; dan untuk Blog yang memakai Komentar Thread hanya akan tampil pada Komentarnya saja :q; seperti Emoticons yang diciptakan oleh master DTE yang sudah saya Edit supaya kawan tidak berkecil hati karena bisa tampil baik di Komentar maupun di Postingan Blog, cuma Logo Iconnya berbeda [maaf saya belum sempat untuk meng-Editnya] agar sama :z;
Perlu kawan ketahui, pada umumnya Emoticons mempergunakan simbol misalnya :) :# atau simbol yang lainnya  untuk pemanggilan, tapi saya tetap mempergunakan : [titik-dua], abjad [a s/d z] ; [titik-koma] tanpa spasi kalau tidak lain dari yang lain bukan BlogBego namanya

Khusus untuk Postingan 

Khusus untuk Komentar

Caranya sebagai berikut :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Scrool ke bawah sampai </body> 
• Copas script berikut tepat diatasnya

<style type='text/css'>

.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}

.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}

.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}

</style>

&lt;strong id=&quot;dte_emo-bar&quot;&gt;Klik untuk melihat kode: 

<br/>

<style type='text/css'>

.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}

.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}

.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}

</style>

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

<script type='text/javascript'>

//<![CDATA[

var emoRange = "#comments p, div.emoWrap",

    putEmoAbove = "#comment-editor",

    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";

//]]>

</script>

<script src='https://sites.google.com/site/blogbegocreation/javascript/autoemoticons.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>

&lt;/strong&gt; 

• Simpan Template kawan 
• Selanjutnya cari <b:includable id='threaded-comment-form' var='post'> atau yang mirip seperti berikut ini kodenya 

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form' id='comment-form'> <!...Kotak Pesan kalau ada...>
                  <p><data:blogCommentMessage/></p>
  <br/>
&lt;strong id=&quot;dte_emo-bar&quot;&gt;Klik untuk melihat kode: 
&lt;/strong&gt; <!...Kode Pesan yang kawan Tambahkan...>
           <data:blogTeamBlogMessage/>
            <b:if cond='data:mobile'>
              <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='display:none;border:none;background:none;width:100%;height:300px;'/>
                 <b:else/>  <!...Ciri yang kawan Cari...>
                    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='border:none;background:none;width:100%;height:300px;'/>
                  </b:if>
                  <data:post.friendConnectJs/>
                  <data:post.cmtfpIframe/>
                  <script type='text/javascript'>
                    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
                  </script>
                </div></b:includable>

• Teks yang saya beri warna merah adalah Kotak Pesan untuk Template yang sudah ditambahkan 
• Teks yang saya beri warna biru adalah Pesan untuk melihat Kode Emoticons - ditambahkan
• Simpan Template kawan 

Read more ...

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

Read more ...

Perpendek Link.......... dibayar ?!

Kawan masih ingat postingan saya Ngeblog.... mau cari apa ?! yang isinya tentang cara mendapatkan Ceperan atau Penghasilan Tambahan pada Blog, :z; itulah yang akan saya bahas sekarang dengan Judul Perpendek Link....... dibayar ?! :q;

Sebenarnya diluaran sana banyak web/site yang menyediakan layanan seperti ini cuma yang saya bahas sekarang khusus untuk P.pw kenapa ?! :r; karena saya bergabung dan mencoba cara ini yang khususnya sampai saat ini tersimpan untuk Template yang sudah saya bagikan :x;

Program yang ditawarkan disamping Memperpendek Link juga ada program Referralsnya yang dengan kata lain kita bisa mengajak teman untuk bergabung yang tentunya dibayar juga, bagaimana seruuu bukan :y; kelebihan lainnya ini merupakan pengalaman saya pribadi kita bisa mendownload file sendiri, dihitung dan dibayar juga nantinya :q; selanjutnya kalau kawan berminat dan ikut bergabung dengan saya di P.pw,  saya bisa menrekomendasikan  »  selanjutnya pilih dan isikan Data kawan sesuai Form yang tersedia untuk membuat Account, kalau semuanya sudah terisi dengan benar, nanti kawan akan mendapatkan Email Konfirmasi 

contoh : jumlah penghasilan saya

System pembayaran : Penghasilan kawan akan dibayar setiap bulannya setelah minimal berjumlah $5. untuk Paypal dan $10 untuk Payoneer, sedangkan untuk Paypal bisa menyusul pembuatannya.

Cara Kerja : setiap pengunjung yang meng-Klik Link kita yang sudah dipendekan itu akan menunggu 5 detik untuk dialihkan ke P.pw atau selengkapnya silahkan kawan baca disini 
cuma satu pesan saya sesuai aturan mainnya, kawan jangan meminta, menyuruh untuk meng-Klik Link tersebut dengan menjanjikan Hadiah, Bonus atau sejenisnya

Selamat Bergabung !!!

Read more ...

Cara Membuat Navbar Menu Berputar

Kawan masih ingat dengan postingan saya Cara Membuat Navbar Menu Menggulung yang tampilannya cukup unik, tapi yang sekarang ini jauh lebih unik lagi yang saya temukan pada Blogger Zhinto yang diberi nama Css3 Circle System Menu perhatikan screenshotnya

Oke langsung saja ke cara membuatnya :

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

/* Name : Css3 Circle System Menu
 Author : zhinto
 URL : http://zhinto.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; } * html .hapus { height: 1%; }
.hapus {
display: block;
}
ul.system-menu {
 margin: 0 auto 10px;
 padding: 0;
 position: relative;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 width: 390px
 }
ul.system-menu li {
 list-style-type: none;
 margin: 0 5px 0 0;
 padding: 0;
 float: left;
 position: relative;
 width: 70px;
 height: 80px;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -webkit-transition: all 500ms linear;
 transition: all 500ms linear
 }
ul.system-menu li a {
 position: absolute;
 margin: -30px 0 0 -43%;
 text-decoration: none;
 font: bold 13px/40px Arial, sans-serif;
 padding: 0;
 background: #21D319;
 color: transparent;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 display: block;
 width: 50px;
 height: 50px;
 text-align: center;
 top: 45%;
 left: 50%;
 outline: none;
 border: 5px inset #F8FBFC;
 -moz-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
-webkit-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 -moz-transition: all 100ms linear;
 -o-transition: all 100ms linear;
 -webkit-transition: all 100ms linear;
 transition: all 100ms linear
 }
ul.system-menu li a:hover {
 line-height: 130px;
 color: #000;
 border-color: #C5B386;
 background: #FAC800;
 -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s
 }
ul.system-menu li span.pembuka {
 position: absolute;
 left: 50%;
 margin: 0 0 0 -29%;
 top: 11px;
 width: 25px;
 height: 30px;
 background: #949596;
 -moz-box-shadow: 3px -3px 0 0 #ECECEC;
 -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
 box-shadow: 3px -3px 0 0 #ECECEC
 }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
position: absolute;
background: #F0F0F0;
padding: 2px; width: 15px; left: 3px
 }
ul.system-menu li span.satu { top: 5px }
ul.system-menu li span.dua { top: 13px }
ul.system-menu li span.tiga { top: 22px }
.empat, .lima, .enam { position: absolute }
.empat {
 border: 15px solid;
 border-color: transparent transparent #EEE transparent; top: -7px; left: 10px
 }
.lima { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 14px }
.enam { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 28px }
.abot, .abit { position: absolute; left: 15px }
.abot {
 width: 20px;
 height: 20px;
 background: #EEE;
 top: 20%;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px
 }
.abit { border: 10px solid; border-color: transparent transparent #EEE transparent; top: 33% }
.a, .b, .c, .d { position: absolute; padding: 5px; background: #FFF7F7; top: 26% }
.a { left: 25px; background: #39FF13 }
.b { top: 27px; left: 13px; background: #0070FF }
.c { left: 25px; top: 27px; background: #FFE000 }
.d { left: 13px }
.e, .f { position: absolute }
.e { width: 15px; height: 17px; background: rgb(171, 185, 163); top: 35%; left: 32%; border: 2px solid rgb(255, 255, 255) }
.f { border: 10px solid; border-color: transparent transparent rgb(255, 255, 255) transparent; top: -2px; left: 30% }
ul.system-menu:hover li:not(:hover) {
 -moz-transform: rotate(360deg) scale(0.7);
 -ms-transform: rotate(360deg) scale(0.7);
 -o-transform: rotate(360deg) scale(0.7);
 -webkit-transform: rotate(360deg) scale(0.7);
 transform: rotate(360deg) scale(0.7)
 }

• Sampai disini simpan Template kawan
• Selanjutnya pilih Tata Letak - Tambahkan Gadget
• Pilih tanda [+] pada HTML / JavaSript
• Copas kode berikut kedalamnya

<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#"> <span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

• Simpan Blog kawan

Read more ...

Tampilkan Artikel Berdasarkan Katagori

Kawan masih ingat dengan postingan saya Tampilkan Artikel berdasarkan Katagori plus Thumbnail :q; karena berisi image secara otomatis akan sedikit memberatkan Blog, walau Thumbnail / image-nya bisa tidak ditampilkan :y; disebabkan scriptnya sedikit lebih banyak atau  postingan saya tentang Tampilkan Judul saja dari Katagori  

Sekarang yang akan saya bagikan dengan kawan Tampilkan Artikel Berdasarkan Katagori yang sedikit berbeda karena tanpa image :z; 

Caranya :

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

<script src="https://sites.google.com/site/blogbegocreation/javascript/kategori.js"></script>
<script>
var numposts = 15;
var showpostdate = false;
var showpostsummary =false;
var numchars = 125;
</script>
<script src="http://blogbego-creation.blogspot.com/feeds/posts/default/-/tips%20trik?orderby=published&alt=json-in-script&callback=rp">
</script>

Silahkan kawan ganti teks yang saya beri warna merah : 

• Angka 15 adalah jumlah Katagori dari Artikel yang ingin kawan tampilkan
• blogbego-creation dengan URL Blog kawan
• tips%20trik dengan Katagori dari Artikel yang ingin kawan tampilkan, [%20] adalah spasi yang aslinya [tips trik]
• var showpostdate untuk menampilkan tanggal [false/true = pilih]
• var showpostsummary untuk menampilkan sedikit isi postingan dari Katagori [false/true = pilih]
• Simpan Blog kawan 

Script ini bisa digabung pada gadget yang sudah ada atau pada satu gadget bisa diisi beberapa script Katagori asal masing-masing diberi Judulnya
Sebenarnya pada Google [Blogspot] widget ini sudah ada cuma Katagori yang bisa ditampilkan dalam satu widget maksimal [5] dan tidak bisa digabung

Read more ...

Komentar GPlus untuk Template yang Gagal

Sebelumnya saya sudah berbagi dengan kawan cara meng-Aktifkan Komentar GPlus :q; tentunya bagi kawan yang sudah mempunyai Account G+ ditambah Template yang support dengan Blogspot, begitu juga dengan janji saya bagi kawan yang memakai Template Designer :r; atau yang gagal meng-Aktifkan Komentar GPlus.

Triks ini saya dapatkan pada master kita setelah sebelumnya saya mencari kesana kemari tidak ketemu yang akhirnya menemukan pada dte :z; yang caranya hampir sama dengan meng-Aktifkan Thread Comment sebelumnya 

Oke langsung saja ke cara meng-Aktifkan Komentar GPlus di Blog 

• Masuk Account Blogger dengan ID kawan
• Sebaiknya simpan Template kawan dulu 
• Pada Dasbor pilih Template - Edit HTML
• Untuk cepatnya, langsung saja menuju Widget - Blog1 lanjut jabarkan

• Cari  <b:includable id='comments' var='post'> 
• Copas Script berikut tepat diatasnya 

<b:includable id='g-comments' var='post'>
<div id='g-comments-outer'>
<div class='g-comments' expr:data-href='data:blog.canonicalUrl' data-width='600' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD'> <a href='#g-comments-outer' id='g-comments-loader'>Berikan Komentar</a>
</div> </div>
<!-- For slow connection -->
<script type='text/javascript'>
//<![CDATA[
(function() {
var btn = document.getElementById('g-comments-loader'), showGC = function() {
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0], old;
script.type = "text/javascript";
script.id = "g-comments-script";
script.src = "//apis.google.com/js/plusone.js"; if (document.getElementById('g-comments-script')) {
old = document.getElementById('g-comments-script'); old.parentNode.removeChild(old); } head.appendChild(script); };
btn.onclick = function() {
this.innerHTML = "Memuat...";
showGC(); return false; };
})();
//]]>
</script>
</b:includable>

Teks yang saya beri warna merah silahkan disesuaikan dengan Blog kawan 
Teks yang saya beri warna biru bisa kawan ganti dengan Page-Loading atau dihilangkan

• Selanjutnya cari  <b:includable id='main' var='top'> yang kodenya kurang lebih seperti berikut 

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Hapus atau Ganti dengan Kode berikut :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- b:include data='post' name='comment_picker'/ -->
<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- b:include data='post' name='comment_picker'/ -->
<b:include data='post' name='g-comments'/>
</b:if>

Atau seperti kode berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

Hapus atau Ganti dengan Kode berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- b:include data='post' name='comments'/ -->
<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- b:include data='post' name='comments'/ -->
<b:include data='post' name='g-comments'/>
</b:if>

• Simpan Template kawan

Read more ...

Cara meng-Aktifkan Komentar GPlus

Komentar GPlus yang sudah diperkenalkan kurang lebih 2 bulan yang lalu adalah Komentar lanjutan setelah Thread Comment yang dikhususkan untuk Komentar Blogspot tentunya yang modelnya mirip Kotak Komentar FaceBook itulah yang akan saya bahas sekarang, seandainya kawan ada yang bertanya "mengapa harus Komentar GPlus...?1

Jawabannya pasti berbeda-beda sesuai dengan kepentingan yang sipenjawab, tapi bagi saya pribadi sudah pasti ada alasan yang ingin saya harapkan dengan memakai Komentar GPlus yang salah satunya agar traffic Rank Blog saya bisa normal atau kembali mengecil

Baik buruknya Komentar GPlus sebenarnya lebih banyak buruknya [jeleknya] dibandingkan dengan Komentar FaceBook maupun Thread Comment, disini saya akan mencoba memberikan gambaran [penilaian] pada Komentar tersebut 

• Komentar GPlus berisi 2[dua] model Komentar yaitu secara keseluruhan dan sesama GPlus dan sipemberi Komentar tidak bisa memakai nama Anonim tanpa URL sedangkan sisi jeleknya kita tidak bisa menjawab biar keterkaitan.
• Komentar Thread punya kelebihan kita bisa menjawab dan bersifat keterkaitan, sisi jeleknya sipemberi Komentar bisa memakai Anonim dan sejenisnya yang selanjutnya mirip SPAM
• Komentar FaceBook bagi saya yang paling lengkap tanpa ada sisi jeleknya saya lihat, cuma kita bernaung atau numpang di Blogspot mau tak mau wajib mengikuti aturan mainnya 

Oh maaf ceritanya ngelantur, mari kita langsung saja ke Cara Meng-Aktifkan Komentar GPlus

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor lihat disisi kiri dan pilih Google+
• Beri tanda centang pada Gunakan Google+ Komentar di Blog ini ? perhatikan image berikut

• Maaf kelupaan, cara ini khusus untuk Template Standar Blogspot [Template yang belum dimodifikasi tentunya]
• Kalau ada kawan bertanya bagaimana dengan Template yang sudah dimodifikasi [Design] jawabannya tunggu postingan saya berikut 

Contoh Komentar G+ dan Komentar Global

Read more ...

Cara Membuat Obyek Berterbangan

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :z; sekarang masih disekitar itu, yang pasti akan lebih keren karena yang ini bisa berterbangan kesana kemari alias tidak menoton berjatuhan :y; saja dari atas

Prinsip dasar cara kerjanya kawan harus mempunyai animasi yang dipakai elemen / obyek :q; yang disimpan pada file dengan ekstrak Js [JavaScript]  seandainya kawan ingin mengganti obyek elemennya silahkan simpan obyek tersebut pada hosting kawan dan ambil Linknya untuk dimasukkan pada Script Js tersebut, tentunya kawan perlu meng-Edit file js tersebut yang selanjutnya kawan simpan pada Hosting kawan dan unduh Linknya [URL Js] :r;

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari ]]></b:skin>
• Copas Script berikut dibawahnya

<script src='https://sites.google.com/site/blogbegocreation/animasi/Merah%20Putih.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Bendera%20Indonesia.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/burung.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/burung-elang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Kumbang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Kumbang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Bola.js' type='text/javascript'/>

Cara Edit File Js

Perhatikan Gambar

untuk selengkapnya cara Edit silahkan baca   disini » 

• Kawan cukup mengganti Link yang saya kurung dengan garis merah dengan Link Image kawan
• Simpan Template kawan

Read more ...

Cara Membuat Salju dan Gelembung Berjatuhan

Kali ini saya akan berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :q; yang perlu kawan ketahui bahwa ini hanyalah selera saja dan merupakan pernak-pernik biar kelihatan Blog kita hidup :y; karena ada yang berjatuhan dari atas berterbangan :z;

Seperti kawan ketahui Salju warnanya Putih maka akan kelihatan asyik apabila warna latar belakang Blog dengan warna gelap sedangkan Gelembung dengan warna biru muda :x; 

Screenshot : Gelembung dan Salju

Oke langsung saja ke cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Cari tag </head>
• Copas Script berikut tepat diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bubble.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/jsnow.js' type='text/javascript'/>
  <script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

Kalau kawan berkeinginan akan menampilkan satu saja, kawan cukup menghapus salah satu teks yang berwarna merah atau teks yang berwarna biru

• Jangan lupa simpan template kawan

Read more ...

Cara Membuat Tampilan Blog Berputar

Selamat malam semuanya mudah-mudahan kawan dalam keadaan sehat walafiat, dan semoga kawan tidak bosan-bosan berkunjung di Blogbego Creation :z; sekarang saya ingin berbagi dengan kawan Cara Membuat Tampilan Blog Berputar yang saya temukan di Blognya Master Beben Koben :r;

Maksudnya setiap Blog kita dibuka atau di Refres akan berputar sekali yang putarannya berlawanan dengan arah jarum jam  :w;

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - 
• Tambah Gadget atau bisa digabung pada Gadget yang ada 
• Pada HTML / JavaScript pilih tanda [+]
• Copas Script berikut kedalamnya

<style>
  @-moz-keyframes roll {100% { -moz-transform:rotate(-360deg); }  }
  @-o-keyframes roll {100% {-o-transform:rotate(-360deg);  }  }
  @-webkit-keyframes roll {100% { -webkit-transform:rotate(-360deg);  }  }
  body { -moz-animation-name:roll; -moz-animation-duration:4s; -moz-animation-iteration-count:1; -o-animation-name:roll;  -o-animation-duration:4s; -o-animation-iteration-count:1; -webkit-animation-name:roll;
    -webkit-animation-duration:4s;  -webkit-animation-iteration-count:1;  }
</style>

Seandainya kawan menginginkan agar berputarnya searah jarum jam, kawan cukup menghilangkan [-] semuanya yang saya beri warna merah
mudah bukan

Read more ...

Cara Membuat Daftar Isi berisi Thumbnail

Cara Membuat Daftar Isi Blog selanjutnya yang akan saya bagikan sama kawan Blogger adalah Daftar Isi berisi Thumbnail ini yang setahu saya diciptakan oleh Blogger senior [Master] Abu Farhan :z; tapi ada beberapa scriptnya saya ganti / rubah karena mengalami masalah [maaf saya bukannya lebih hebat dari penciptanya], maksud saya menjadi masalah disini kemungkinan karena banyak yang menggunakan atau tempat menyimpannya terjadi masalah :q; 

Pada awalnya Script Daftar Isi ini dibuat untuk Recent Post alias Posting Terakhir yang kita Publish :y;

Oke langsung saja ke cara membuatnya :

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

<div style="border: 0px solid black; height: 300px; overflow: auto; width: 100%;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdm5KMVc6QffnhrLKZgMtyi-I0UXNwZ6Gubqy8ngnIRVHQe733hRLlppkFCczUuUuKw_n2c27OqWZ4LRDo40IQMYDFg3tqMnlMnshmkb4u9l225_uSJea3AiGrSllIL7PjX89ON5QxXFv/s1600/bloglogo.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvdB0iSafvqr4m-WxUZvc7k0DFa9hwKF9yj-wwSUByk8tNO8laFaA6IvPMVx2scD6AaSXKqVdzDC7iEt2d_h4WNZkCtQjRUJ4bZKU8leomJRmQqIZHc5y6DD6oVlw8kS0kZCXArkWbSCa/s1600/bloglogo1.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
showRandomImg = true;
boxwidth = 270;
cellspacing = 6;
borderColor = "#ffffff";
bgTD = "#0000ff";
thumbwidth = 30;
thumbheight = 30;
fntsize = 10;
acolor = "#999";
aBold = false;
icon = " ";
text = "Pendapat";
showPostDate = true;
summaryPost = 50;
summarFontsize = 10;
summaryColor = "#00f";
icon2 = " ";
numposts = 100;
home_page = "http://NAMA BLOG KAWAN.blogspot.com/";
</script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/recentposts_thumbnail.js"type="text/javascript"></script>
</div>

• Teks yang berwarna biru adalah besarnya Thumbnail 
• Teks yang berwarna merah adalah jumlah Post yang sudah di Publish
• Teks yang berwarna violet ganti dengan URL Blog kawan
• Kalau peng-Editan sudah selesai Jangan lupa simpan Blog kawan

Read more ...

Cara Membuat Navbar Menu Menggulung

Selamat malam semua kawan Blogger yang setia berkunjung di Blog saya ini :z; sebelumnya saya pernah berbagi dengan kawan Cara Membuat Navbar Menu Bertingkat dan Cara Membuat Navbar Menu Bertingkat ke-2 karena sekarang saya akan tetap berbagi tentang Navbar Menu yang saya dapat dari jalan-jalan [Blogwalking] pada Blog senior kita DTE dengan Nama rocking rolling rounded menu, :q; tapi disini setelah saya adakan perubahan sedikit supaya sesuai selera saya tentunya dan mudah-mudahan cocok juga dengan selera kawan yang saya beri Nama Navbar Menu Menggulung :y;

Untuk Demo kawan bisa lihat pada Header sebelah kanan   

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari </b:skin> 
• Setelah ketemu Copas script berikut diatasnya

#Navmenu-menggulung {width:auto;height:38px; text-align:left; font-family:"Trebuchet MS",sans-serif; font-size:16px; font-style:normal;  font-weight:bold;  text-transform:uppercase; }
#Navmenu-menggulung h2, #Navmenu-menggulung p, #Navmenu-menggulung form {  /* netralisasi tampilan elemen heading, paragraf dan formulir */   margin:0 0 0 0; pading:0 0 0 0; border:none;  background:transparent; }
#Navmenu-menggulung .item { position:relative; background-color:#f0f0f0; float:right; width:38px;  margin:0px 5px;  height:38px;  border:2px solid #999;  -webkit-border-radius:30px;  -moz-border-radius:30px;  -webkit-border-radius:30px;   -webkit-box-shadow:1px 1px 3px #555; -moz-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden;}
#Navmenu-menggulung .link { left:0px;  top:0px; position:absolute; width:38px;  height:38px; }
#Navmenu-menggulung .icon_beranda   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ojAIbt361oEhZcLYvLYlIYRVT-JTH8Y9TTXK9VMf-CqDXM4rtL9zbu3YwQuVwlf7nsHSpM_ztDEaJO1xN-1taOjIaSdYaEyQfONkmm0lng8CwDIX6Gmiv6pJUUC4mERHOt8ZqRFv5Lhq/s1600/Home.png) no-repeat top left;}
#Navmenu-menggulung .icon_cari   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQci5Ex3g8iGYC28AHKguRYQ8WNIqZqbP9egcMIt_1xylL-U7nyCaIp92zNDIQIPEnKXYjtTmBQ3txO7vV5Ak8CMXvyEL_WcuF7YQnUy9sRwxp8r9VtV12qmOF2HIa9V3scdmI1c-T02NH/s1600/Pencarian.png) no-repeat top left;}
#Navmenu-menggulung .icon_test   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUcRg1X6L4XViN-8oda3cQBA1fsThsmKBjRWudv1qQmKCyjq5jFOOE10tM2AyBoEsrwrhjliCCN-tccmZn6tp8I8CLrxE9MUR0mUJHnfrU1-bRyMyfWR5ia0siSiTsGIEa6PL-TaaNYGs/s1600/test+blog.png) no-repeat top left;}
#Navmenu-menggulung .icon_kontak   {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7l4c49btUSNyC4-BF_cDJgCc3MUEaFiqH24TIQRVZAQNG0vj5RdAW5gz627iZM_lTm7NRykdvp-dxVlX8CNREWhvg9drA2Q_qy7Gif5l_ylB9mjrggIBWnhuwgqOrFWjSv7FKxQQST4/s1600/Hubungi+saya.png) no-repeat top left;}
#Navmenu-menggulung .icon_daftar {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuA9zkdBFUyRL8xbpJGHHapkf0ymohCZpaPArC7AuhkqLiaBlblhawmA6IbBt5Zll8_0_FnUBD2lHr8zj2aYedkiS_NP9QGXtOUsXpSQHOKprYJ7VqaUyQefarPh-vi8Lqex_2BNiUmBw/s1600/Daftar+Isi.png) no-repeat top left;}
#Navmenu-menggulung .item_content {  position:absolute;  height:38px; width:220px; overflow:hidden; left:44px; top:4px;   background:transparent; display:none;}
#Navmenu-menggulung .item_content h2 { color:#999; text-shadow:1px 1px 1px #fff; background-color:transparent; font-size:16px; }
#Navmenu-menggulung .item_content a { background-color:transparent; float:left; margin-right:7px; margin-top:4px; color:#999; text-decoration:none; font-size:18px;}
#Navmenu-menggulung .item_content a:hover {color:#CCC;text-shadow:1px 1px 1px #000;}
#Navmenu-menggulung .item_content p { background-color:transparent; text-transform:none; font-weight:normal !important; display:none; }
#Navmenu-menggulung .item_content p input { border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px;  -webkit-box-shadow:none;  -moz-box-shadow:none;  box-shadow:none; }

• Simpan Template kawan
• Selanjutnya kawan pilih Tata Letak - Tambah Gadget - HTML / JavaSceipt 
• Copas script berikut kedalamnya

<div id='Navmenu-menggulung'>
<div class='item'>
        <a class='link icon_cari'/>  <div class='item_content'> <h2><div id='search'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
            </form></div></h2> </div> </div>
 <div class='item'>
        <a class='link icon_test'/> <div class='item_content'> <h2><a href='https://developers.google.com/speed/pagespeed/insights'>TEST BLOG</a></h2> </div>  </div>
    <div class='item'>
        <a class='link icon_kontak'/>  <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/2012/01/contact-us.html' target='_blank'> KONTAK BBC </a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_daftar'/> <div class='item_content'>  <h2><a href='http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html' target='_blank'>DAFTAR ISI</a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_beranda'/> <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/'>BERANDA</a></h2>  </div> </div>
    <div style='clear:both;'/> </div>
<script type='text/javascript'>
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=40deg&#39;},0)},10);a.stop().animate({width:&#39;38px&#39;},1e3).find(&#39;.item_content&#39;).stop(true,true).fadeOut().find(&#39;p&#39;).stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=-40deg&#39;},0)},10);a.stop().animate({width:&#39;178px&#39;},1e3).find(&#39;.item_content&#39;).fadeIn(400,function(){$(this).find(&#39;p&#39;).stop(true,true).fadeIn(600)})}$(&#39;.item&#39;).hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)});
</script>
</div></div> 

• Silahkan ganti teks yang saya beri warna merah dengan Link / URL kawan
• Kawan bisa juga menyimpan script Pemanggil ini di samping header / Sidebar atau sesuai selera kawan yang penting sebelum <body/>
• Eheheh lupa, ingat simpan Template kawan

Read more ...