Docstoc

HOW TO MAKE A BLOG CONTENTS

Document Sample
HOW TO MAKE A BLOG CONTENTS Powered By Docstoc
					HOW TO MAKE A BLOG CONTENTS




The hallmark of jToCTree version 1.0 is as follows:
• The display is similar to the Explorer on the computer, when the folder click the folder contents
will be displayed
• Folder is taken from the category / label articles and arranged in ascending (starting from AZ)
• title of the article and featured article addresses automatically without having to manually input us
and automatically arranged in ascending
• jToCTree dTree not the same as that was booming some time ago, because dTree work manually
(data must be entered by the owner of the blog)
• jToCTree using slide animations that will feature articles on a particular category when clicked
• And please browse the advantage jToCTree
if the blogger friends are interested in using this jToCTree there are some things to know / agreed,
diantanya:
• Tune-Up Blogger spent a lot of time to make this jToCTree, or appreciation of his donation will
greatly assist Tune-Up Blogger to continue working
• jToCTree was made by a blogger newbie, so if you feel the master (more severe) than Blogger
Tune-Up, I personally beg profusely Sorry for not being able to make something good for those of
you who have become master blog
• jToCTree is free for use on any blog without having to pay or swap with any
• jToCTree allowed for the review on a blog that anyone with or without notice to the Blogger Tune-
Up, but must include a link to the blog Blogger Tune-Up on the article made
• It is forbidden to decompile / unpacking of jToCTree script code in order to remove the credit link
to the Blogger blog Tune-Up
• If you find a bug or error please notify the willingness to Tune-Up Blogger via email, twitter,
facebook or your preferred media
• If you do not agree with the above then please make yourself something similar to or better
jToCTree.

• Integration jToCTree Blog Template Version 1.0 on
• Step 1
Login to Blogger
step 2
Go to the "Draft - Edit HTML"
step 3
Find the code below:
•]]> </ b: skin>
• Step 4
Enter (copy paste) the code below the above code in step 3:



/*   jToCTree     */

#judafistre {background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-
KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center
#E7F7FB;padding:5px;border:1px solid #339DC6; }

.branda { background:
url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d
/blogger.png) 0px 4px no-repeat !important; }

.judafis { padding:0 0 0 4px; font-weight:bold;}

.treeview, .treeview ul { padding: 0;margin: 0;list-style: none;}

.treeview ul { background-color: transparent; margin-top: 4px;}

.treeview .hitarea { background:
url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d
/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 16px;
margin-left: -16px; float: left; cursor: pointer;}

* html .hitarea { display: inline; float:none;}

.treeview li { margin: 0; padding: 3px 0pt 3px 16px;}

.treeview a.selected { background-color: #eee;}

#treecontrol { margin: 2px 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background:
url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d
/treeview-default-line.png) 0 0 no-repeat; }

.treeview li.collapsable, .treeview li.expandable { background-position: 0
-176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }

.treeview li.lastCollapsable { background-position: 0 -111px }

.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea
{ background-position: 0; }
.treeview-black li { background-image:
url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d
/treeview-black-line.png); }

.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-
black li.lastExpandable { background-image:
url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d
/treeview-black.gif); }

.filetree li { padding: 3px 0 2px 16px; }

.filetree span.folder, .filetree span.file { padding: 1px 0 1px 18px;
display: block; }

.filetree span.folder { background:
url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-
4/d/folder.gif) 0 0 no-repeat; }

.filetree li.expandable span.folder { background:
url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d
/folder-closed.gif) 0 0 no-repeat; }

.filetree span.file { background:
url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d
/file.gif) 0 0 no-repeat; }

.filetree span.file a { text-decoration:none; }



step 5
Find the code below:
</ head>

step 6
Enter (copy paste) the code below the above code in step 5:


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

<script type='text/javascript' src='https://github.com/jzaefferer/jquery-
treeview/raw/master/jquery.treeview.js'/>

<script type='text/javascript' src='http://hens-pusat-
buku.googlecode.com/svn/trunk/jsontoctreeview.js'/>

<script language='javascript'>//<![CDATA[

var judul = 'Daftar Isi'

function dafisjtoctree() {

$('#hitam').treeview({
animated: 'fast',

collapsed: true,

control: '#treecontrol'

});

}

$(document).ready(function() {

dafisjtoctree();

});

//]]></script>



step 7
Save the template and continue reading the article ...
JToCTree Integration Version 1.0 on page or Widget

step 8
Create an article and move the editor of the article in HTML editing mode or create a widget with
type of HTML / JavaScript

step 9
Enter (copy paste) the code below in the article or content widget:

<div id="judafistre">

<div id="treecontrol">

<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua
folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder"
href="#">Buka Tutup</a>

</div>

<script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-
results=1000&alt=json-in-script&callback=jtoctree"></script>

</div>



Description:
• See step 6 line 1; throw a line if you have your blog jQuery framework
• See step 6 line 3; upload the file was available on the source code that you download and capture
link-1.0.js jtoctree file replaces URL/jtoctree-1.0.js
• See step 5 6 lines; change the word 'Content' with the name you want to use
• See step 6 lines 8; change the word 'fast' with 'normal' if you want to change the slide effect is
slower
• See step 6 row 9; change the word true to false if you want to view folder content directly open all
the time viewed
• See step 6 line 10; cast control: '# treecontrol' if we do not want to show the link / button Close |
Open | Open Close
• See step 9 line 5; change http://modification-blog.blogspot.com address matches the address of
your blog or dispose of all

				
DOCUMENT INFO
Shared By:
Categories:
Tags: MAKE, BLOG, CONTENTS
Stats:
views:15
posted:4/25/2012
language:English
pages:5
Description: HOW TO MAKE A BLOG CONTENTS