Gudang Tutorial Blog

• 2 Navigasi (di atas dan di bawah header)


• Social Networking


• Auto readmore with default thumbnail


• Breadcrumbs yang SEO friendly


• Related Posts / Artikel terkait


• Bookmark ready (facebook, twitter, google +, pinterest)


• 468×60 banner header


• Kategori 2 kolom


• Threaded Comments

Saat kita instal chrome yang baru, bookmark pada chrome punya kita yang sebelumnya

pasti hilang,

Agar kita dapat merestorenya kembali maka sebelum instal chrome yang baru,

kita harus backup terlebih dahulu.



Cara Backup Bookmark di Google Chrome

• Buka browser Google Chrome


• Klik tanda  disebelah kanan atas


• Pilih Bookmarks >> Pilih Bookmarks >> Bookmarks manager


• Pilih Organize >> Export bookmarks to HTML file…


• Tentukan lokasi penyimpanan kemudian klik “Save”


• Cara Restore Bookmarks di Google Chrome

Cara restore Bookmark di Google Chrome

• Pilih Bookmarks >> Pilih Bookmarks >> Bookmarks manager


• Pilih Organize >> Import bookmarks from HTML file…


• Tentukan lokasi penyimpanan file bookmars tadi disimpan, kemudian klik “Open”

Semoga bermanfaat.

Ga asing bagi blogger yang infonya pada terupdate tentang modif blog dan tutorialnya.

Bagi yang blom tau, coba menu navigasi kwick ney, keren ko...

sumpaa ヽ(ヅ)ノ

1. Login blog

2. Template

3. Letakkan kode css berikut di atas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2

}

.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}

.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg

);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}

#kwick1 a:hover{background-position:0 -50px!important}

#kwick2 a{background-position:-190px 0}

#kwick2 a:hover{background-position:-190px -50px!important}

#kwick3 a{background-position:-380px 0}

#kwick3 a:hover{background-position:-380px -50px!important}

#kwick4 a{background-position:-570px 0}

#kwick4 a:hover{background-position:-570px -50px!important}

#kwick5 a{background-position:-760px 0}

#kwick5 a:hover{background-position:-760px -50px!important}

#kwick6 a{background-position:-950px 0}

#kwick6 a:hover{background-position:-950px -50px!important}

.kwicks li ul a{float:left;width:12em}

.kwicks ul ul{top:auto}

.kwicks li ul ul{left:12em;margin:0 0 0 10px}

.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

4. Kemudian letakkan kode script jquery di atas </head>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

<script type='text/javascript'>

$().ready(function() {

$(&#39;.kwicks&#39;).kwicks({

max : 205,

spacing : 5

});

});

</script>

@hilangkan script jquery berwarna merah jika sobat sudah memasang jquery versi brapapun.



5. Selanjutnya add gadget dan pilih html/javascript dan letakkan kode berikut kemudian simpan

<center><div class='kwickswrap'>

<ul class='kwicks'>

<li id='kwick1'><a href='http://www.mig33eagle.com/' title='Mig33 Eagle'>Home</a></li>

<li id='kwick3'><a href='http://mig33eagle.com/2012/09/sitemap.html' title='Sitemap'>Sitemap</a></li>

<li id='kwick4'><a href='http://mig33eagle.com/2012/02/link-exchange.html' title='Link Exchange'>Exchange</a></li>

<li id='kwick5'><a href='http://www.123contactform.com/form-366627/Ayuningnareswari' title='contact us'>Contact</a></li>

<li id='kwick6'><a href='http://www.mig33eagle.com/2011/12/eagle-bot-flooder-multy-flood.html' title='Info EBF'>Info EBF</a></li>

</ul>

</div></center>

 @Ubah url sesuai keinginan sobat.



Demikian tutorial blog cara membuat menu navigasi kwick, semoga infonya berguna!

Banyak sekali menu blog yang dapat di modifijasi sesuai selera sobat.

Pada kesempatan kali ini saya akan share cara membuat menu blog slide yang berada pasa sisi halaman blog.

Jika sobat tertarik ingin mencobanya, simak cara2nya:



1. Login blog

2. Layout dan add gadget "html/javascript"

3. Letakkan script berikut dan simpan

<script language="JavaScript1.2" src="http://mig33eaglemenu.googlecode.com/files/slidemenu.js"></script>

<script>

resizereinit=true;

menu[3] = {

id:'menu3',

bartext:'MENU BLOG',

menupos:'left',

kviewtype:'fixed',

barbgcolor:"#00ff00",

barcolor:"#000000",

barfontweight:"bold",

bordercolor:'#000000',

hdingbgcolor:"#ffffff",

fontsize:'80%',

linkheight:20 ,

hdingwidth:210 ,

menuItems:[

["Home", "http://www.mig33eagle.com/", "_self"],

["My Facebook", "http://www.facebook.com/mig33eagle",""],

["Berita", "http://www.okezone.com/", ""],

["Kaskus", "http://www.kaskus.us", ""],

["My Profile", "http://www.blogger.com/profile/08032455232856850277", ""],

["free Download", "http://www.download.com", ""],

["Tips And Trics Blog", "http://www.mig33eagle.com/", ""],

["Bisnis Uang Blog", "http://www.bisnis.com/", ""],

["free game", "http://freegamepick.com", ""],

["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

make_menus();

</script>

@Ubah url sesuai keinginan sobat



Demikian Cara membuat menu slide pada sisi blog.

SEMOGA BERMANFAAT...

a.openpanel {color:#fff;display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#282828; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;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:#282828;}

a.openpanel.active em {top:6px;border color:#222222;}

div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}

div.hienzoPanel {padding:10px 20px 20px;margin:0px 0px !important;}

<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 = "Comment Here",

    closePanelText = "Close Comment",

    slideDownPanelSpeed = 600,

    slideUpPanelSpeed = 400;

    //]]>

    </script>

    <script type='text/javascript'>

    </script>

    <script src='http://mig33eaglecomment.googlecode.com/files/show-hide-mig33eagle.js.txt' type='text/javascript'/>