[Wapka Code] Nice And Advance Message In Forum (MIF) Code Like 9jaFans For Your Wapka Site

Hey guys! Welcome to another 360GpTech tutorial.

Today, we're gonna be giving you guys Nice And Advance Message In Forum(MIF) Code Like 9jaFans.

DEMO: See It here

Kindly follow the below steps.

STEP I:

Go to your EDIT SITE > WAP2 > Styles for content in forum/chat > Set global settings of styles for forum/chat >  set own form for: Messages in forum > Now paste the below code there

Style of messages in the forum:*

<script type="text/javascript"> var count = ::msg_id:: ; if (count == 2){ document.write('<div style="zoom: 1; margin: 0; vertical-align: middle;color: #333; font-size: 1.4em; letter-spacing: 0; margin: 0; padding: 0 0 5px; border-bottom: 1px solid #ccc; background: #cd853f; margin: 2px; padding: 4px; text-align: left;"> <b>COMMENTS</b></div> '); }</script> <div id="contentwrapper"> <div class="innertube"> <div class="entry"> <div id="container"> <div name="GP"> ::msg:: <br/><span style='color:gray;'>Posted by <b><font color="red">::user::</font></b> ::date::</span><hr/> </div> </div> </div> </div> </div> <div id="related_topic_::msg_id::"> </div> <div> <div align="center"> <style type="text/css"> body {min-width:320px; // suppose you want minimun width of 320px _width: expression(document.body.client­ Width > 320 ? "320px" : "auto" ); /* sets max-width for IE */} </style></div> </div>

Style of the forum site:**
<script type="text/javascript"> document.title ="::THEME_NAME::";</script> ::NOTIFICATIONS:: <p> <center> <h2> ::THEME_NAME::</h2> </center> </p> <div style="text-align:left;" class="phdrtag"> You Are Here: <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href='/#' itemprop='url'><span itemprop="title">Home</span></a></span> » <a href="" itemprop="url"><span itemprop="title">Forum</span></a> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><script type='text/javascript'> document.write('<a href="/forum2_' pecki '.xhtml" itemprop="url"><span itemprop="title"> ' res '</span></a>');</script></span> » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href='/#' itemprop='url'><span itemprop="title">Category</span></a></span> » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><b>::THEME_NAME::</b></span></span> - By <a href="" title="Posts by Gurusprovince" rel="author">Gurusprovince</a></div> <div class="group2"> <div class="post_cover"> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <p> <span class='st_sharethis_vcount' displayText='ShareThis'></span> <span class='st_facebook_vcount' displayText='Facebook'></span> <span class='st_twitter_vcount' displayText='Tweet'></span> <span class='st_linkedin_vcount' displayText='LinkedIn'></span> <span class='st_pinterest_vcount' displayText='Pinterest'></span> <span class='st_email_vcount' displayText='Email'></span></p> ::MESSAGES:: <script type="text/javascript"> if (count == 1){ document.write('<div style="background: #cd853f; margin: 2px; padding: 4px; text-align: left;"> <b>COMMENTS</b></div> <div align="center" style="color:black;"> No one has posted a comment yet, be the first.</div> '); }</script><style type='text/css'>.hta1 {display:none;}.ht1 {display:none;}</style><div class="gppage" align="center"> ::LISTER_BOTTOM::</div> <div align='center' style="background: #008753; background-image: url('http://gidifans.xtgem.com/files/images/icons/phdrstar.png'); background-position: right; border-right: 10px solid transparent; background-repeat: no-repeat; padding: 7px; margin-bottom: 1px; margin-right: 0px; margin-left: 0px; border-bottom: solid 2px #999; color: white; font-weight: bold; text-align: left; }"> Leave a comment</div> <div style="border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border: 1px solid #cccccc; padding: 4px; background: #f6f6ec; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;" align="center"> ::REPLY_AREA::</div> </div> <style> .comments-box { zoom: 1; margin: 0; } .comments-box img { vertical-align: middle; } .comments-box h3 { color: #333; font-size: 1.4em; letter-spacing: 0; margin: 0; padding: 0 0 5px; border-bottom: 1px solid #ccc; } .phdrmain { background: #008753; background-image: url('http://gidifans.xtgem.com/files/images/icons/phdrstar.png'); background-position: right; border-right: 10px solid transparent; background-repeat: no-repeat; padding: 7px; margin-bottom: 1px; margin-right: 0px; margin-left: 0px; border-bottom: solid 2px #999; color: white; font-weight: bold; text-align: left; } .phdrtag { background-color: #008753; padding: 4px; color: white; margin:0px 0px; border:1px solid #444444; } .phdrtag { background-color: #008753; padding: 4px; color: white; margin:0px 0px; border:1px solid #444444; } .phdr a, .phdrtag a { color: #fc0; font-size: 8.5pt; text-decoration: none; } .phdr, .phdrtag { border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } .post_cover_adsense { background-color:#f6f6ec; padding: 0px; border-left: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; margin-bottom: 0px; text-align: center; } .group2 { border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; } .groupdate { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .group2 { background:#f6f6ec; border: 1px solid #000; margin-left:0px; margin-right:0px; } .groupdate { background:#f6f6ec; border: 1px solid #000; margin-left:0px; margin-right:0px; } .post_cover_adsense { background-color:#f6f6ec; padding: 0px; border-left: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; margin-bottom: 0px; text-align: center; } /*--- post_cover Styling ---*/ .post_cover a { text-decoration: underline; } .post_cover p { margin-bottom: 10px; } .post_cover ul, .content ol { margin: 20px; } .post_cover ul li, .content ol li { margin: 5px; background: url(images/bullet.png) 0 1px no-repeat; padding-left: 25px; list-style: none; } .post_cover h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-bottom: 20px; } .alignleft { float: left; margin: 0 15px 0 0; } .alignright { float: right; margin: 0 0 0 15px; } .content blockquote { margin: 0 0 0 30px; padding: 10px 10px 5px 40px; } .goleft a { float: left; padding: 5px; text-decoration: underline; } .goright a { float: right; text-decoration: underline; padding: 5px; } .post_cover { background-color:#f6f6ec; padding: 7px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-bottom: 0px; text-align: left; } .post_cover img { display: block; margin-left: auto; margin-right: auto; padding:5px;text-align:center;background-color:#fbedf5;border:1px solid #008753;-moz-box-shadow:0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow:0 0 20px rgba(0, 0, 0, .2);-goog-ms-box-shadow:0 0 20px rgba(0, 0, 0, .2);box-shadow:0 0 20px rgba(0, 0, 0, .2);-moz-border-radius:5px;-webkit-border-radius:5px;-goog-ms-border-radius:5px;border-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-goog-ms-border-top-left-radius:5px;-goog-ms-border-top-right-radius:5px;border-top-left-radius:5px;border-top-right-radius-topright:5px;margin-top:1em } .comment_header { background: #cd853f; margin: 2px; padding: 4px; text-align: left; } #item { border: 1px solid #cccccc; padding: 4px; background: #f6f6ec; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .topsub{ text-align:left; margin:2px 5px; border:1px solid #000; padding:5px; background:#f5f5f5; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;} .topsub h1{ font-size:20px; color:#000; text-transform:capitalize; font-weight:bold;} .topsub a{ font-weight: bold; text-decoration: underline; border-color: #000; border-width: 1px;} .topsub2{ background:#E0EEE0; border: 1px solid #000; overflow:hidden; margin:2px 5px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;} .topsub2 h1{ font-size:20px; color:#000; text-transform:capitalize; font-weight:bold;} .topsub2 a{ font-weight: bold; text-decoration: underline; border-color: #000; border-width: 1px;} .tsub1{ background:rgb(232, 236, 224); border-bottom: solid 1px #989898; text-align: left;} .tsub2{ background:rgb(246, 246, 236); border-bottom: solid 1px #989898; text-align: left;} .tsub{ padding: 8px;} #container { padding: 0x; border: 0px dotted #cccccc; } .entry { margin-top: 4px; margin-bottom: 4px; border: 0px solid #333; padding: 0px; } .entright { margin-top: 4px; margin-bottom: 4px; border: 0px solid #333; } .innertube { margin:0px 5px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; background-color: none; } #footer {clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 4px; margin-top: 4px; } #footer a { color: #FFFF80; } div.copyright { padding-left: 2px; padding-right: 10px; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 10px; text-align: left; color: #333; } .innertube { margin:0px 5px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; background-color: none; } .inline-items { margin-top: 0; } .inline-items li { margin-left: 0; border-left: 1px solid black; padding-left: 10px; padding-right: 10px; } .inline-items li:first-child { margin-left: 0; border: none; padding-left: 0; padding-right: 10px; } .inline-items li:last-child { padding-right: 0; } /* ####### responsive layout CSS ####### */ @media (max-width: 1024px) { /* responsive layout break point */ #maincontainer { width: 100%; overflow: hidden;} #contentwrapper { float: none; } #rightcolumn { float: none; width: 100%; margin-left: 0; } #contentcolumn { margin-right: 0; } } #contentwrapper { float: left; width: 100%; } #contentcolumn { margin-right: 300px; /*Set right margin to RightColumnWidth*/ } #rightcolumn { float: left; width: 300px; /*Width of right column*/ margin-left: -300px; /*Set left margin to -(RightColumnWidth) */ } #footer {clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 4px; margin-top: 4px; } #footer a { color: #FFFF80; } div.copyright { padding-left: 2px; padding-right: 10px; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 10px; text-align: left; color: #333; } .innertube { margin:0px 5px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; background-color: none; } .inline-items { margin-top: 0; } .inline-items li { margin-left: 0; border-left: 1px solid black; padding-left: 10px; padding-right: 10px; } .inline-items li:first-child { margin-left: 0; border: none; padding-left: 0; padding-right: 10px; } .inline-items li:last-child { padding-right: 0; } /* ####### responsive layout CSS ####### */ @media (max-width: 1024px) { /* responsive layout break point */ #maincontainer { width: 100%; overflow: hidden;} #contentwrapper { float: none; } #rightcolumn /* framework for comments */ ol.commentlist a:link { text-decoration: none; } ol.commentlist li div.vcard cite.fn a.url:hover { text-decoration: none; } ol.commentlist { margin: 0px 4px 0px 4px; padding: 0; background: #fff; text-align: left; } ol.commentlist li { margin: 4px 0; padding: 10px; list-style-type: none; border: 1px solid #e9e9e9; -khtml-border-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } ol.commentlist li.alt { background: #efefef; } ol.commentlist li div.vcard cite.fn { font-style: normal; font-weight: bold; } ol.commentlist li div.vcard cite.fn a.url { color: #222; } ol.commentlist li div.vcard img.avatar { float: right; } ol.commentlist li div.vcard img.avatar-32 { padding: 2px; background: #fff; border: 1px solid #ddd; } ol.commentlist li div.vcard img.photo { padding: 2px; background: #fff; border: 1px solid #ddd; } ol.commentlist li div.vcard span.says { color: #888; } ol.commentlist li div.comment-meta { margin: 3px 0 0; font-size: .9em; } ol.commentlist li div.comment-meta a { color: #aaa; text-decoration: none; } ol.commentlist li p { margin: 15px 0 0; line-height: 1.4em; } ol.commentlist li div.reply { background: #ccc; color: #333; width: 33px; margin: 10px 0 0; padding: 2px 5px; line-height: 16px; -khtml-border-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } ol.commentlist li div.reply a { color: #fff !important; } ol.commentlist li div.reply a:hover { color: #fff !important; text-decoration: none; } ol.commentlist li ul.children li { margin: 10px 0 0; background: #fff; border: 1px solid #e9e9e9; -khtml-border-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } ol.commentlist li ul.children li li.alt { background: #fff; } /* comment form */ #commentform {margin-top: 5px;} #commentform input {width: 160px;margin: 2px 5px 1px 0;padding: 5px;border: 1px solid #ddd; font-family:Arial, Helvetica, sans-serif; font-size:12px;} #commentform input:focus {border: 1px solid #191919;} #commentform .author {padding: 3px 3px 3px 5px;background: fff;color: #666;} #commentform .email {padding: 3px 3px 3px 5px;background: fff;color: #666;} #commentform .url {padding: 3px 3px 3px 5px;background: fff;color: #666;} #commentform textarea {width: 98%;height: 100px;padding: 2px;border: 1px solid #ddd; font-family:Arial, Helvetica, sans-serif;} #commentform textarea:focus {border: 1px solid #191919;} #commentform .submit {margin: 0;padding: 4px;color: #999;font-weight: bold;border: 1px solid #ddd;background: #f8f8f8;width: 155px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-khtml-border-radius: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;} #commentform .submit :hover {background: #333;border: 1px solid #191919;text-decoration: underline;color: #fff;} #topsearch { margin: 10px; } #ls { width: 200px; border: 1px solid #ccc; padding: 3px 3px 3px 5px; font-family: Arial; font-size: 11px; } .searchbutton { border: 1px solid #ccc; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } h2.search { border-bottom: 1px solid #CCC; font-size: 18px; font-weight: normal; margin-bottom: 20px; } </style>


Then save it,

STEP II:
Create another site(as in new page), then name it Forum Bottom Auto content, or whatever, you can still use your bottom autocontent(-2) but its not recommended for advance users due to some certain reasons that we may not like to share here.
Now after creating the new page(your Forum Bottom Autocontent), place this codes there in your HTML/XHTML box.

FOR RELATED TOPICS
<style>.item-desc{ background-color: #FFF; border: solid thin #C8C8C8; margin: 1px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .News2{ background:#f6f6ec;border-bottom:1px solid #989898; text-align:left; padding:6px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .uptitle { font-weight: bold; text-align: left; border-left: 5px solid #008753; padding: 4px;} .entry-tags { margin: 10px; font-size: 11px; } </style> <div class="phdrmain"> <strong>Related Topics</strong></div> <div class="item-desc"> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/1:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/2:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/3:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/4:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/5:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/6:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/7:</div> </div> <div class="News2" align="left"> <div class="uptitle"> :forum-:getid-forum:/theme-link/8:</div> </div> </div>

FOR MORE THAN 20KB IMAGES IN FORUM(remember to disable/untick your ::img:: in your forum(Read more here)
<script language="javascript">var msg=document.getElementsByName("GP"); for(var i=0;i<msg.length;i++){ var oldtext=document.getElementsByName("GP")[i].innerHTML; var newtext=oldtext.replace(/(^|[\n ])([\w]+?:\/\/[^ ,\"\n\r\t<]*)/ig,"$1<a href='$2'>$2</a>"); newtext=newtext.replace (/\[img\](.+?)\[\/img\]/ig," <img src='$1' alt='image' />"); document.getElementsByName("GP")[i].innerHTML=newtext; }</script>

FOR HIDING WAPKA ADS
<p> <style>.hidprimg img, .hidprimg div{display:none!important} .hidprimg a{opacity:0.5;display:inline-block} .hidprimg p{display:inline-block;margin-top: -20px;}</style><div class="hidprimg" align="center"> <div/></div> <div/><span/><span/></p>

Then save.

NOTE: Do not remove anything from the above codes, else, you might encounter error, the CSS and the JAVASCRIPTS has been correctly placed to the appropriate places where it should be.
We may later break them into pieces for more understanding to you guys.

After that, come back and drop your testimonies.

If you encountered any error while making use of this tutorial, kindly make use of the comment box below.

REMEMBER: Always visit for more interesting topics.